Stylesheets - grundteori.

Transkript

1 Når du designer med css gør du to ting: på den ene side opmærkes og struktureres sidens indhold med tags, eller markører på den anden side tildeles disse tags css-regler, hvormed du styrer layoutet. Her ser du siden uden css Css-reglerne giver browseren instruktioner på hvordan sidens html-markup skal renderes i browseren. Det er css-reglerne der rummer det egentlige webdesign...html`en tjener blot til at give dokumentet struktur og skal støtte indholdets mening Side 1

2 Til opbygning af sideindhold stiller css-definitionerne en række værktøjer til rådighed, som tilsammen giver stor kontrol over vores design, fra farvevalg, placering, rammer, marginforhold, baggrundsfarver, grafikforhold, justering og til meget mere. Box modellen: Alt indhold forholder sig som en firkant, på engelsk omtalt som box modellen. Denne box model har nogle tilknyttede egenskaber som: padding, border, margin, background-coler Du kan bruge disse egenskaber enkeltvis eller kombineret. Hvis ikke du bruger nogle egenskaber, overtager browseren med sine egne default indstillinger. Det kan være ønsket eller måske netop ikke ønsket. F.eks. tilføjer browsere normalt ikke padding og border til et tag, men ved netop en header <h1> eller paragraph <p>, har browsere en forudindstillet margin top og bund. Så disse kræver at du laver din egen definering. Her har du box modellen: top margin top border top padding left left left margin border padding content right right right padding border margin bottom padding bottom border bottom margin border content padding margin Side 2

3 CSS-modellen kører højre om, altså med uret. Du kan kontrollere hver kant individuelt, og du kan bruge alle gyldige css-mål, til at definere størrelser med f.eks : margin-right: 20px margin-right: 3em ( luft der svarer til 3 gange fontens størrelse ) margin-right: 10% Hvordan angiver man padding og margin i sin css kode? margin - dvs. afstand til andre elementer Angives for hver af elementernes fire sider højreom med uret: padding - dvs. indre margin angives for hver af elementets fire sider højreom med uret: margin-top margin-right margin-bottom margin-left Men det kan kortere skrives på dennne måde skal alle fire sider have samme margin eller padding kan du nøjes med at skrive: margin: 20px Padding-top padding-right pading-bottom padding-left skal top og bund have hver sin margin, mens venste og højre side deler samme margin eller padding, kan du nøjes med at skrive margin: 20px 10px 12px skal hhv. top og bund, samt højre og venstre side parvis have samme margin eller padding kan du nøjes med at skrive: margin: 20px 10px top højre & venstre bund Skal alle fire sider have hver sin margin eller padding kan du nøjes med at skrive: margin: 20px 10px 10px 12px top & bund højre & venstre top højre bund venstre En tag selector: Html-elementer er indeholdt i kasser Alle html-elementer i sig selv udgør en kasse, som godt nok normalt er usynlig. Men du kan se kassen bag et element ved at tildele det en stylesheet der giver det en baggrundsfarve: Side 3

4 Læg mærke til at der ikke er defineret en højde på forangående eksempel, alligevel rager baggrunden op bagved teksten, både i top og bund. For at ændre på dette kræves en indstilling i margin-top, margin-bund samt padding-top, padding-bottom. Både på <h1> samt <p>-tag. At udregne en box`s width. En box`s eller kasses størrelse er umiddelbart størrelsen af værdien på content area. Derudover kommer værdier på margin, padding samt border. Vær varsom med højdeangivelser, da height vil udvides propertionalt med indholdet. width left padding right padding left border right border left margin right margin 100px 15px 15px 5px 5px 10px 10px Du skal sammenregne dine værdier for de forskellige egenskaber, for at finde den samlede bredde. I ovenstående eksempel vil browser, i forhold til style box`en, allokere 160px: 20px for left og right margin, 10px for left og right border, 30px for left og right padding og 100px for width. ( browsere før IE6 viser box`en forkert, smallere, da den inkluderer padding og margin i width ) Side 4

5 Class, samt Class kombíneret med en tag-selector Et effektivt værktøj til at reformatere html-markup`en, er en class. En class kunne være dette:.special { color: #333333;...} For at tilføje denne class til et afsnit f.eks en header <h1> bliver html udtrykket <h1 class= special >Her kommer teksten... </h1> En class kan bruges igen og igen på samtlige tag på siden Du kan også skrive din class sådan at den kun forholder sig til èt specielt element. Her kommer den samme class, men denne gang forholder den sig kun til en paragraph element p.special { color: # ;...} Html`en bliver så: <p class= special >sdfjsjfsdfjasdsd...</p> Classen vil således kun tage effekt på et <p>-tag, og alle andre tag vil ikke virke <p> Der er her to <p>-tag, men det er kun den første der har fået tilført classen.special <p> Side 5

6 ID - selectors I modsætning til class, anvendes ID-selectors til at vælge èt specielt element frem for en gruppe af elementer. ID-selectors angives med en # (hash)-tegn. En ID er et unikt element på siden, som kun må anvends èn gang på hver side. Vi bruger ID til at angive et unikt område på siden f.eks. #wrapper, #head, #menu, #left, #center, #right samt #footer html-markup`en ser sådan ud: <div id= wrapper > (wrapper indeholder kun andre bokse) <div id= head >head</div> <div id= menu >menu</div> <div id= left >left</div> <div id= right >right</div> <div id= center >center</div> <div id= footer >footer</div> </div> I HTML`en skal rækkefølgen af kaldet være korrekt. Når det ikke er left, center og til sidst right, skyldes det, at at left og right har faste bredder, og derfor skal skrives først. Middle`s bredde er derimod auto og skal passe til skærmopløsningen/browservinduets størrelse minus bredden på left og right. Et eksempel kunne være: #left #left { background-color: #CCCCCC; margin: 0px; padding: 0px; float: left; width: 200px; height: 400px; } #wrapper #head #menu #left #cenrer #right #footer Side 6

7 Id kombineret med class-selectorer Også med ID kan vi kombinere en ID med en Class, så bliver udtrykket f.eks. #left.kursiv ved at tilføje classen kursiv på pladsen left, htmlèn bliver herefter: <div id= left class= kursiv >sdfsdfsfsfsffsdf...</div> Skulle der opstå en konflikt mellem en Class og en ID, giver browsere prioritet til ID frem for Classes. Man kunne have defineret en baggrundsfarve begge steder, men her overruler ID altså. Hvis du alligevel har tilført den samme ID til flere html-tags, er det ikke sådan at siden ikke kan vises, men HTMLèn kan ikke valideres ( ) Block-element contra inline-element. Div: et block-level element <div>-taget ( division ) angiver et diskret område med indhold, ligesom paragraph og header. Men div kan også anvendes til at omkrandse alle former for elementer, så der indsættes en samling <p>-tag og <h>-tags osv inde i <div>-taget. Et sådant element kaldes en block-level element eller på dansk en blok-markør, da den former en samling(blok) af indhold, med linjeskift( luft ) før og efter taget. Html-markupèn for eksemplet hvor divèr laver kasserne med indhold, altså blok-markører cssèn for blocklevel elementerne Det åbner igen op for at lave såkaldte nedarvede selectorer, en speciel formatering af tags, der netop befinder sig inde i den aktuelle <div>, mere om det senere. Side 7

8 Her en oversigt over de mest benyttede block-level markører: div, h1... h7, p, ul, ol, li, form, blockquote, table, td, tr, Span: et inline element <span>-taget bliver brugt indenfor en paragraph, hvor det igen kun bliver brugt på et mindre udvalgt område af teksten (en undtagelse), skal behandles som andre in-line tags som <a>-tag ( for at tilføje et link til noget tekst i en paragraph ). Inline tags indeholder ikke linjeskift Html-markup`en hvor <span>...</span> udgør undtagelsen indenfor en paragraph. #firstline er en ID, hvorimod highlight er en Class, hvor dotten udelades i kaldet. css-koden for inline elementet Her en oversigt over de mest benyttede inline markører: a, span, img, br, em, input, strong, u (underline tekst) Side 8

9 Dokumenttræet - at style tags inden i tags - nedarvede selektorer ( descendent selector ) med en nedarvende selektor forstås hvordan tags forholder sig til hinanden, og hvordan du kan formatere et tag baseret på dets relation til andre tags. Herved undgår du at skulle kode en masse ny HTML. Forholdet kaldes kontekstuel markering. HTMLèn som former en web-side kan sammenlignes med et familietræ, hvor de forskellige tags repræsenterer de forskellige familie medlemmer. Det første tag er <html>-taget, kan sammenlignes med bedstefaderen ( ancestor ) for alle tag. <html>-taget omkrandser igen <head>- samt <body>-taget, hvilket gør <html>-taget til stamfader for dem begge. På samme måde er et tag inden i et andet tag, en efterkommer af første tag ( descendent ). Således er <title>-taget en efterkommer af <head>-taget <html> <head> <title> noget om Bornholm</title> </head> <body> <div> <h1>bornholmr</head> <p>der er dejligt på...</p> </div> <div>...</div> </body> </html> Denne HTML kode kan vi omsætte til et diagram På ovenstående skema er <body> delt i to sektioner, to divèr. Disse to divèr indeholder igen flere tags som indeholder deres egne tags. Diagrammet kan hjælpe dig til at forstå hvordan CSS ser èt elements forhold til et andet. <body> er child af <html>, de to divèr er child af <body>, <h1>, <p>, <p>, <hr> er child af første <div>. Første <div> er direkte parent til <h1>, <p>, <p>, <hr>. På samme måde er <h1>, <p>, <p>, <hr> sibling af første <div> Side 9

10 De vigstigste relationer er: Ancestor ( stamfader ) Et html-tag som omkrandser et andet tag er hermed stamfader Descendent ( efterkommer, nedstamme ) Et tag inden i et eller flere tag er efterkommer at disse tag, hermed er <title> efterkommer af <head> samt<html> Parent ( forældre ) En forældre er den nærmeste stamfader til et andet tag. En forældre er den første tag direkte forbundet med og over et andet tag. I eksemplet er den første <div> parent til <h1>, men ikke til <em> Child (barn ) Et tag som er direkte omkrandset af et andet tag. I diagrammet er <p> child af <div> men <em> er ikke Sibling ( søskende ) Tags som er children af der samme tag er siblings. I diagrammet står siblings tag ved siden af hinanden, og forbundet til den samme forældre, her <h1>, <p>, <p>, <hr> Descendent selectorer Med descendent selectors drager du fordel at denne familietræ opbygning, ved at formatere tags forskelligt, når de befinder sig inden i bestemte andre tags ( kasser ) eller styles. Indenfor hver af de stylesheet-styrede containere kan du oprette nye elementer, hvis selektorer defineres som efterkommere ( descendants, børn ) af de overordnede container-stylesheet. Deres selektorer består nu af container stylesheets id-navn + et element tag og kommer til at se sådan ud: #left #left h1 #left p #left a #left a:hover - den overordnede container - selektor for en <h1> overskrift - selektor for en <p> brødtekst - selektor for et <a> link - samt selektor for <a> i hover-tilstand Side 10

11 Nedarvnings eksempel: Opret og udbyg nedenstående eksempel med dine egne selektorer, og tilpas de to kolonner til et pænere layout, måske vælger du at tilføje endnu en midterkolonne. Kolonnehøjderne er ikke defineret, dette medfører en højde der forholder sig til indholdet. Dette kan man ændre på ved at tilknytte et billede i baggrunden på en <div> der ligger tidligere. Mere om det senere. Side 11

12 Flere forskellige links på samme side. Da et link vil give det samme udtryk på hele siden, er vi nød til at forklare hvilket link, der skal have hvilket udseende. Her kan du drage fordel af nedarvningsreglerne, som tidligere omtalt: #left a #left a:hover - selektor for et <a> link - samt selektor for <a> i hover-tilstand men du kan også bruge de almindelige link regler: Linkene styles med dette udseende så det er selve navngivningen der afgør udseendet. Dette er så HTML`en Den første class oprettes her med navnet one, herefter two, three, four, five rent praktisk vil din navngivning hedde noget andet, f.eks. menu Side 12

13 Eksempel: to link er her blevet tilføjet. Den første style opretter en class kaldet menu. Den anden style definerer hvordan link skal tage sig ud, når de er defineret i et <p>-tag: styles på de to link de to styles kaldes... færdigt resultat: henholdsvis rød og grøn tekst Du kan opleve at få en såkaldt link border, en box der optræder på et link der er blevet klikket på, for at fjerne denne kan du på linket tilføje denne kode: onfocus= if(this.blur)this.blur(); det fulde eksempel bliver efterfølgende: as well she might, what a <a href= # onfocus= if(this.blur)this.blur(); >wonderful dream</a> Side 13

14 Kommentarer. Det er en stor hjælp for dig selv, hvis du vænner dig til at give din kode kommentarer. I CSS`en angives det med : /*... */ i HTML`en skriver du:  Det efterfølgende led i webproduktionen, og det kunne typisk være en programmør, er meget interesseret i at modtage en kode, indeholdende disse kommentarer. Side 14

15 Styles på elementer for at undgå gentagen brug af classes. Ved at anvende margin kan du præcist styre afstanden fra et element til et andet f.eks. ved at en serie billedelementer <img>-tags, hvor margin bruges til at holde en ensartet afstand mellem sig indenfor rammerne af et andet blokelement, der fungerer som container for alle billederne. Først ser du lidt af css`en: De seksten billed-elementers indbyrdes afstand styres af margin mellem de enkelte billeder, samt padding i top og venstre side af det omsluttende container <p>-tag. Målene på <p>-taget skal udregnes, tidligere omtalt ved css-boxmodellen. Side 15

16 CSS_layout med float, et eksempel Du indskriver dine #id`er ( kasser ), hvorefter du opretter tilhørende styles og placerer med egenskaben float <div id= wrapper > <div id=#head >...</div> <div id=#menu >...</div> <div id=#left >...</div> <div id=#right >...</div> <div id=#footer >...</div> </div> den grundlæggende <div> opbygning af siden, hvert div er et unikt sted i designet og gives derfor en identitet med attributten id=..., som f.eks. <div id = head >...</div> Til denne html-markup fremstilles de tilhørende stylesheets-regler. Der anvendes float til at placere left og right i forhold til hinanden, samt clear til at ophæve ombrydningen i footer : #head {background-color: #ff3333; position: relativ; height: 105px; } #wrapper { width: 760px; margin-left: auto; margin-right: auto; border: 1px solid # } #left { width: 206px; float: left; } #menu {height: 20px; background-color: #cc3300; } #right { width:554px; float: right; } #footer { background-color: #ff3333; height: 18px; clear:both; } Side 16

17 Css-reglerne for forrige figur : læg mærke til selektorernes #, det betyder at det er et id-element der styres. Selve css-koden er selvfølgelig skrevet i websidens <head>- del eller i et eksternt stylesheet der linkes til. Vær opmærksom på følgende: 1. Dine mål skal gå op. Det er wrapperen der styrer bredden af dit design, så left og right skal tilsammen kunne rummes i wrapper. 2. Det er ikke sikkert at man kan se siden fornuftigt i browser endnu, så skriv noget vrøvletekst i de forskellige div, undtagen wrapper, så du kan se at det virker. Giv midlertidigt også dine divs en baggrundsfarve, så du kan se dem. 3. Angiv kun bredde og højde hvor der er brug for det, en div fylder automatisk 100% i bredden... højden af left og right afgøres af deres indhold. 4. Undgå at give padding på div med fast bredde - de vokser nemlig af det!! 5. Et floated element skal altid have en bredde angivet, hermed kan resterende plads bedre kontrolleres 2. Centrering af sidens design i browseren Det kan være en god strategi at centrere sit design i browservinduet, så det udnytter store skærmopløsninger som passe partout der indrammer websiden. Moderne browsere anvender margin: auto, mens Internet Explorer i ældre udgaver lader siden centrere indholdet i selve sidens <body>-del med stylesheetet egenskaben text-align, der ellers kun burde være forbeholdt tekst-elementer. Du kan kun centrere webdesign hvis bredde-mål er fast angivet: Side 17

18 Centrering af sidens indhold baggrundsbillede i <body> margin Hvis du centrerer div`en #wrapper, centreres hele sidens design. Dette gøres samtidig på to forskellige måder: 1. af hensyn til ældre browsere (Internet Explorer) anvender vi text-align: center i selve body-elememtets stylesheet. Dette vil imidlertid også centrere alt indhold i selve designets <div>(wrapper), så derfor får Wrapper egenskaben: text-align: left, så centreringen ophæves igen. 2. selve indholds-div`en, #wrapper, centreres yderligere med reglen (der er den korrekte metode, som også IE7 følger) - og som virker i f.eks. Firefox, nemlig: margin-left: auto; margin-right: auto body { font-family: verdana, arial, helvetica, sans-serif; text-align: center; } #wrapper { text-align: left; width: 760; margin-left: auto margin-right: auto background-image: url(billeder/bagg_wrapper.jpg); } Side 18

19 Hvordan omkrandser tekst et billede Det gøres ved at bruge float egenskaben, henholdsvis left og right. Float egenskaben tager elementet ud af dokumentets flow, og floater det imod kanterne af det blok-element som indeholder elementet. Andre blok-elementer vil herefter ignorere det floatede element, og renderes som om det slet ikke var der. eksempel:.featureimg { float: left; width: 319px; } <body> <h1>chinese-style stuffed peppers</h1> <img src= peppers1.jpg width= 319 height= 213 alt= peppers class= featureimg /> <p>these stuffed peppers are lovely as a starter...</p> </body> Source rækkefølge: Billeder som floates skal ind først i koden, hermed kan efterfølgende indhold floates omkring billedet. Hvis det floatede billede først indsættes langt nede i <p>-taget, vil <h1>-taget samt meget af indholdet i <p>-taget optræde oven over billedet, og hermed ikke floate. Der skal tilføres noget luft omkring billeds margin-right, margin-bottom samt en border.featureimg { float: left; border: 2px solid #000000; margin-right: 20px; margin-bottom: 6px; } Side 19

20 Hvordan stoppes et efterfølgende element i at flyde op, når der anvendes float Det gøres med egenskaben clear, hvor mulighederne er left, right og both. Den mest benyttede er both. Dette bevirker at efterfølgende elementer vil vises nedenunder tidligere floatede elementer..featureimg { float: right; width: 319px; margin-left: 20px; margin-bottom: 6px; border: 1px solid #000000; }.clear { clear: both; } På eksempler er der tilført en border, for overskuelighedens skyld. Classen er tilført det første <p>-tag efter listen <p class= clear >These stuffed peppers are lovely as a starter, or as a side dish for a Chinese meal. They also go down well as part of a buffet and even children seem to like them.</p> Clear egenskaben instruerer altså et efterfølgende element ikke at omklamre et floated element, men skal derimod holde sig neden under dette element. left: stylen vil holde sig neden under elementer der er floated left, men vil stadig omklamre right-floated elementer right: stylen vil holde sig neden under elementer der er floated right, men vil stadig omklamre left-floated elementer both: tvinger efterfølgende elementer at holde sig under både left- og right-floated elementer Side 20

21 Clear:right Nedenunder vises et eksempel på hvordan du undgår at flere floatede elementer klumper sig sammen. Alle de viste billeder har en float right. Det første floatede billede ( manden ) placeres sig helt til højre, indtil det støder på en omkrandsende blok-element eller browserkant. Det andet billede ( tomaten ) placerer sig til venstre for manden, da tomatbilledet også har en float:right. Det sidste billede ( anden ) ville have placeret sig til venstre for tomatbilledet, men da bredden ikke kan indeholdes i browserbredde, rykker det ned under. Side 21

22 Ved at tilføje clear:right til billederne, forhindres disse i at placere sig ved siden af hinanden, men derimod under hinanden. Clear tilføjet til det andet billede forhindrer det i at kravle op ved siden af det første billede, mens det sidste billedes clear, tvinger det til at placere sig under billede to. Side 22

23 Brugen af clear for at holde footer på plads Der er flere metoder til at holde footer placeret under de floatede kolonner, for ikke at footer skal hoppe op som du ser på billedet nedenfor. CSSèn samt HTMLèn for siden. Inden footer skal der være en clear:both, for at holde footer under de floatede kolonner. Den mangler her i HTMLèn. Side 23

24 Her bliver classen clear indskrevet i HTML`en via en DIV Div`en placeres inde i wrapper som omklamrer og afslutter de tre kolonner Prøv også med en.class på footer:  < div id= footer class= clear > eller #footer udvides med følgende: #footer { margin: 20px; text-align: center; background-color: #666666; color: #FFFFFF; clear:both; } Side 24

25 .clearfix:after En sidste metode til at forhindre at kolonner hopper ud af deres container, samt at forhindre at #footer hopper op.clearfix:after { content:. ; display: block; height: 0; clear: both; visibility: hidden; }.clearfix { display: inline-block; _height: 1%; } /* Hides from IE-mac \*/.clearfix { display: block; } /* End hide from IE-mac */ Det er den omkransende container der skal tilføres classen.clearfix: <div id= wrapper class= clearfix > her placeres så de floatede kolonner </div> se også: Denne metode gør brug af :after pseudoklassen, der i standard-kompatible browsere opretter et blokelement efter det element, der er forsynet med en højde på nul, indsætter et punktum i dette blokelement og skjuler dette punktum ved hjælp af visibility-egenskaben. Elementet får en clear-egenskab. Virker i IE5,6,7 samt Firefox. Side 25

26 Centreret design - en anden metode med absolut positionering Der findes faktisk en centrerings-metode yderligere, der kan anvende ved lodret placering. Fidusen går ud på at positionere en <div> absolut, det vil sige med fast placering i browservinduet. Hvis den fastlagte placering angives i procent bliver den imidlertid kalkuleret ud fra browservinduets ( containerens ) skalering, og hermed er grunden lagt til en flydende positionering: Denne <div> har en fast bredde på 760px, men har her dog ikke en fast højde, men lad os lege at højden var 600px. Den er ikke placeret på nogen måde men knytter sig til koordinaterne 0,0 i dens container - her vil det sige øverste venstre hjørne i browservinduet. Ved at give <div>-en en absolut placering med css kan den flyttes så dens øverste venstre hjørne placerer sig i 50% fra venstre side af browservinduet og 50% fra toppen. <div>-ens øverste venstre hjørne ligger nu i koordinatet 50%, 50%... altså i midten af browservinduet. Nedenunder er css-reglerne for denne placering: #wrapper { width: 760px; border: 1px solid #000000; margin-top: 20px; margin-right: auto; margin-left: auto; position: absolute; left: 50%; top: 50%; } Side 26

27 Centreringen er ikke god nok endnu for <div>-en centrerer sig jo ikke ud fra dens centrum, men ud fra dens øverste venstre hjørne. For at kompensere for det må vi derfor forskyde dens placering mod venstre og mod toppen af browservinduet. Dette opnås ved at give <div>- en en negativ margin: lodret på halvdelen af sin højde - og vandret halvdelen af sin bredde: Nu er <div>-en på plads. Dens margin er defineret med en negativ værdi på halvdelens af sin bredde og halvdelen af sin højde, dvs margin-left: -380px og margin-top: - 300px, og herved forskydes den på plads i centreringen. #wrapper { width: 760px; border: 1px solid #000000; position: absolute; left: 50%; top: 50%; margin-top: -300px; margin-left: -380px; } Side 27

28 Absolut positionering - fortsat Med css er det muligt at lave en nøjagtig placering af et element på en side ved at positionere det top, right, bottom eller left, ved at bruge absolut positionering. Nedenstående to blokke er absolut positioneret. Html`en for siden ser sådan ud: #box1 { position: absolute; top: 10px; left: 20px; width: 100px; background-color: #B0C4DE; border: 2px solid #34537D } #box2 { position: absolute; bottom: 2em; right: 2em; width: 100px; background-color: #FFFAFA; border: 2px solid #CD5C5C; } </head> <body> <div id= box1 >This is box one. It is positioned 10 pixels from the top and 20 pixels from the left of the viewport.</div> <div id= box2 >This is box two. It is positioned 2em from the bottom and 2em from the right of the viewport.</div> </body> </html> Prøv at sætte noget mumletekst ind i <body>-taget og se hvad der sker. Ved at sætte et elements egenskab til absolut, fjernes dets flow fra siden, og de andre elementer, opfører sig somom de ikke kan se den absolutte placering. De to bokse vil altså placere sig oven på teksten, ude af flowet. Side 28

29 Elementer kan også blive positioneret inde i et andet element - nested element I nedenstående eksempel er box to placeret inde i box èt. Da box èt også er absolut positioneret, vil den absolutte positionering af box to, medføre en relativ placering i forhold til box èt`s kanter eller border. Lyder måske lidt knudret men egentlig logisk nok. læg mærke til de to afsluttende <div>`er #box1 { } #box2 { } position: absolute; top: 100px; left: 100px; width: 400px; background-color: #B0C4DE; border: 2px solid #34537D position: absolute; bottom: 2em; right: 2em; width: 150px; background-color: #FFFAFA; border: 2px solid #CD5C5C; Der er ikke defineret nogen højde på box èt, så det kan vi gøre nu med en værdi på 300px. Her er box to placeret i forhold til bund - og højrekant i box èt. opsumering: box1 optræder som parent element, og box to som child, hvor box to forholder sig til box èt. Hvis parent elementets egenskab ikke var sat, ville child elementet, box to, forholde sit til sidens eller browservinduets øverste venstre hjørne. #box1 { position: absolute; top: 100px; left: 100px; width: 400px; height: 300px; background-color: #B0C4DE; border: 2px solid #34537D } #box2 { position: absolute; bottom: 2em; right: 2em; width: 150px; background-color: #FFFAFA; border: 2px solid #CD5C5C; } Side 29

30 Drop caps Du kan lave en drop caps med css, ved at tilføre det første bogstav i en paragraf et pseudo-element :first-letter Et pseudo-element er en specificeret del af et element, såsom : :first-letter :first-line :after :before p { } font-family: Times New Roman, Times, serif; font-size: 12px; line-height: 14px; color: #666666; } Her opsættes en definition for en paragraph som bruger :first-letter, tekst bold, otte gange større end omgivende tekst,en smule margin, hvor begyndelses bogstavet falder ned da det floater left. p.unicial:first-letter { font-family: Times New Roman, Times, serif; font-size: 800%; color: #FF0000; float: left; margin-right: 5px; font-weight: bold; Det er så en class som bliver tilført en paragraph Side 30

31 Gode sites at blive klog på: Datagraf internetafdeling: Banner størrelser: Cursors: Side og navigations eksempler: Side 31

32 HTML Characters Codes: Windows XP IE Form Elements Validering af CSS: Validering af HTML: Test af fonte på skærmen: CSS schools: Box modellen: Formmailer: Side 32