Hjælp til Tables.
Nov 17, 2013 19:32:32 GMT
Post by The Oracle on Nov 17, 2013 19:32:32 GMT
Hvis nogen er i tvivl om hvad et table er, så er dette et table.
Jeg vil forsøge mig på at lave en guide til at lave disse tables, sådan at man kan dekorere sine tråde lidt mere :)
Først og fremmest skal man bruge koden, derefter vil jeg step for step bryde den ned og forsøge at forklare hvad de forskellige koder betyder.
FULDE KODE:
[div align="center"][div style="background-image:url('URL TIL HEADER');width:BREDDEN PÅ HEADERpx;height:HØJDE PÅ HEADERpx;"][/div][div style="width:BAGGRUNDS BILLEDE BREDDEpx;background-image:url(BAGGRUNDS BILLEDE URL);text-align:justify;"][div style="padding-right:1px;padding-left:1px;"][font size="1"][div style="height:BAGGRUNDS BILLEDE HØJDEpx;width:BRØDTEKSTENS BREDDEpx;border:0px solid rgb(204, 204, 204);overflow:auto;"][font color="#666666"]Teksten skrives her.[/div][/font][/div] [/div][/div][div align="center"][div style="background-image:url('URL TIL FOOTER');width:BREDDE PÅ FOOTERpx;height:HØJDE PÅ FOOTERpx;"][/div][/div]
Nu vil jeg forsøge at bryde koden ned, og forklare alle funktioner. Når du begynder at forstå systemet, skal du vide at man kan bygge disse tables på mange forskellige måder, så jeg glæder mig til at se hvad i kan få ud af det (:
Når du opretter en ny tråd/svar er der to måder at se sit svar på. Det kan skiftes mellem nede i venstre hjørne af tekstboksen. Det ene er Preview, og det andet er BBCode. Når koden sættes ind og redigeres i, skal det gøres i BBCode, hvor du vil kunne se resultatet i Preview.
1. HEADER.
[div align="center"][div style="background-image:url('URL TIL HEADER');width:BREDDEN PÅ HEADERpx;height:HØJDE PÅ HEADERpx;"]Her ser du selveste koden til headeren. Hvis du kigger op i eksemplet på et table der ligger øverst, er headeren billedet af ilden. Altså det øverste i dit table. En header er ikke nødvendig at have, så hvis man ikke ønsker nogen header, kan man blot slette denne del af koden.
Kigger vi nærmere på koden, kan vi dele den op i 3 stykker, som kan redigeres.
Step 1.
[div align="center"][div style="background-image:url('URL TIL HEADER')Alt der skal ændres her, er det stykke hvor der står URL TIL HEADER. Du skal ikke slette de '-tegn der står omkring teksten. Dette er simpelt, du skal bare sætte url'et ind til det billede du ønsker skal være din header. Når du laver det billede, så vær lige opmærksom på billedets størrelse (altså hvor mange pixels billedet er, både i højde og bredde.).
Step 2.
;width:BREDDEN PÅ HEADERpxSom du ser, i koden, kommer dette lige efter url'et, og det er her du får brug for at kunne målene på det billede som du vil bruge til Header. Her skal du nemlig slette BREDDEN PÅ HEADER og skifte det ud med det antal pixels (px) som billedet er i bredden. Hvis dette ikke skrives korrekt, vil billedet ikke vises fuldt ud, eller måske gentage sig selv. Vær dog også opmærksom på at forummet ikke passer til at kunne have alt for bredde Tables, og derfor skal man passe lidt på med at gøre det for bredt.
Step 3.
Som du kan se her, er dette resten af koden til headeren. Her skal du blot gøre ligesom i step 2, og angive højden på det billede du bruger som header. Husk at angive tallet korrekt.
;height:HØJDE PÅ HEADERpx;"]Som du kan se her, er dette resten af koden til headeren. Her skal du blot gøre ligesom i step 2, og angive højden på det billede du bruger som header. Husk at angive tallet korrekt.
2. BAGGRUND/BRØDTEKST.
[/div][div style="width:BAGGRUNDS BILLEDE BREDDEpx;background-image:url(BAGGRUNDS BILLEDE URL);text-align:justify;"][div style="padding-right:1px;padding-left:1px;"][font size="1"][div style="height:BAGGRUNDS BILLEDE HØJDEpx;width:BRØDTEKSTENS BREDDEpx;border:0px solid rgb(204, 204, 204);overflow:auto;"][font color="#666666"]Teksten skrives her.[/div][/font][/div] [/div][/div][div align="center"]Her kommer den helt svære nød. Header og Footer er let som en plet, men brødteksten byder på uendelige muligheder, som du selv må eksperimentere lidt med. Jeg vil forsøge at forklare det på den mest enkle måde. Jeg bryder koden helt ned, og vil kaste mig over et forsøg at forklare hver funktion. Udfra hvert step vil jeg skrive nødvendig/valgfri. Det nødvendige SKAL laves, imens de valgfrie, logisk nok, er valgfrie (;
Først skal du vide en ting; Baggrunden, eller brødteksten som den også kaldes, er der hvor teksten skrives. Der kan selvfølgelig stadig laves dekorationer på teksten, men husk på at man skal kunne se teksten på baggrunden. I det eksempel der er ovenover, er brødteksten blot sort.
Step 1. - Nødvendig.
[/div][div style="width:BAGGRUNDS BILLEDE BREDDEpxHer sættes baggrundens bredde ind i pixels. Mit forslag er at den matcher/passer til headerens og footerens bredde, da det ellers hurtigt kan se meget malplaceret ud.
Step 2. - Nødvendig.
;background-image:url(BAGGRUNDS BILLEDE URL)Her sætter du billedet ind som brødteksten skal stå på. Jeg anbefaler at der ikke er alt for mange ting på baggrundsbilledet, men samtidigt er det jo helt op til dig. Bare husk at tænk på at dette billede skal kunne gentage sig på højden, medmindre man vil have en tekstboks hvor man scroller i brødteksten.
Step 3. - Valgfri.
[div style="padding-right:1px;padding-left:1px;"]Denne funktion er en smule kompliceret for mig at forklare, men jeg vil kaste mig over det alligevel. Der hvor der står "padding-right:1px er det antal pixels som skal gå imellem baggrundens kant og ind til hvor teksten står. Er denne sat i 0px, vil teksten gå hele vejen ud til højre side af baggrunden. Det samme gælder for padding-left:1px;". Mit forslag er at glemme den her, indtil man har lavet sit table færdig. Sæt et eller andet ind som brødtekst, og prøv dig derfra frem og se hvad der sker når du ændrer i disse tal.
Step 4. - Nødvendig.
"height:BAGGRUNDS BILLEDE HØJDEpx;Den her betyder utrolig meget for dit tables look. Her regulerer du hvor høj din baggrund er, og hvor stor en del (på højden) som brødteksten fylder. Denne kan aldrig reguleres, og hvis man ikke ønsker en tekstboks, hvor man skal scrolle i brødteksten, så foreslår jeg at man ændrer disse pixels til sidst, sådan at de passer til den mængde af tekst som du har skrevet. Har du et design til dit table, hvor du gerne vil scrolle i en tekstboks, så behøver du ikke at ændre dette tal, når du først har fundet de pixels som tekstboksen skal fylde. Igen er mit forslag - Prøv dig frem med at ændre disse tal, og se hvad der sker.
Ønsker man ikke at skulle scrolle i teksten, indeni dit table, skal dette tal jo altid ændres hver gang du bruger dit table (:
Step 5. - Nødvendig.
width:BRØDTEKSTENS BREDDEpx;Her skriver du hvor mange pixels du ønsker at brødtekstens bredde skal stå i. Altså hvor lang en linje kan blive, skrevet i pixels.
Step 6. - Valgfri.
border:0px solid rgbDenne funktion laver en firkant omkring din brødtekst. Jo større pixels, desto bredere vil stregerne blive. Ønsker man ikke at brødteksten skal stå i en "kasse", skal koden ikke ændres, og blot forblive på 0px.
3. FOOTER.
[div style="background-image:url('URL TIL FOOTER');width:BREDDE PÅ FOOTERpx;height:HØJDE PÅ FOOTERpx;"][/div][/div]Footeren er det nederste i dit table. Her kan du, ligesom i headeren, have et billede, eller en eller anden form for afslutning af dit table. En footer er valgfri, og hvis man ikke ønsker det, kan man blot slette denne del af koden. Kigger du op i eksemplet øverst, har den ingen footer.
Ligesom i headeren, er der 3 steps, og dette skal gøres 100% ligesom i headeren, derfor forklarer jeg blot dette kort.
Der hvor der står URL TIL FOOTER, skal billedet af footeren sættes ind, og derefter skal bredden og højden af billedet angives i pixels, der hvor der står BREDDE PÅ FOOTER og HØJDE PÅ FOOTER.
Tillykke, du har nu lavet et table :D Jeg vil rigtig gerne se jeres resultater, og håber på at det er noget der bliver brugt, da det er dekorativt på siden.
Har du problemer med dit table, så skal du ikke tøve med at spørge mig! Og hvis du klumser helt rundt i det, og spørger meget sødt, så vil jeg gerne lave det for dig. Du skal bare have billederne klar, og en meget detaljeret beskrivelse af hvordan dit table skal se ud. Jeg kan desværre ikke tegne for jer, da jeg er utrolig dårlig til tegneprogrammer, men HTML har jeg nogenlunde styr på :)
