The Web Writer Wizard's Guide til Internet Programmering
Wizband Left

9.5 Positionering

 
9.5. Indhold
 9.5.1  Placering af Elementer
 9.5.1.1  Viewports
 9.5.1.2  Dokumenttræet
 9.5.1.3  Omgivende Blokke
 9.5.1.4  Blokbokse og Anonyme Blokbokse
 9.5.1.5  Inlinebokse og Anonyme Inlinebokse
 9.5.2  Egenskaben "display"
 9.5.2.1  Værdien "none"
 9.5.2.2  Run-in og Compact Bokse
 9.5.3  Modeller til Positionering
 9.5.3.1  Valg af Model
 9.5.3.2  Forskydninger
 9.5.4  Normalt Flow
 9.5.4.1  Relativ Positionering
 9.5.5  Floats
 9.5.5.1  Placering af Floats
 9.5.5.2  Styring af Flowet Udenom en Float
 9.5.6  Absolut Positionering
 9.5.7  Lagdelt Layout
 9.5.8  Ændring af Læseretning
 9.5.9  Indholdets Bredde
 9.5.9.1  Største og Mindste Bredde
 9.5.10  Indholdets Højde
 9.5.10.1  Største og Mindste Højde
 9.5.10.2  Liniehøjde
 9.5.11  Lodret Justering


9.5.1 Placering af Elementer

Placering af elementer er en af de vigtigste aspekter, når det drejer sig om design og layout af hjemmesider. Så det siger sig selv, at det også er tilsvarende svært og temmeligt langhåret tilligemed. [CSS2] specifikationen indeholder da også en lang og indviklet beskrivelse af principperne bag med fine udtryk som "viewports", "dokumenttræer", "bokse", "omgivende blokke" og mere i samme dur, som jeg ikke slipper for at komme ind på, selv om det altså er temmeligt langhåret, da de er væsentlige for forståelsen af den måde, mange af egenskaberne virker på. Boksene gemmer jeg dog til et senere kapitel, idet jeg lader som om, at det har vi fuldkommen styr på. Bare tænk på dem som firkantede kasser med et eller flere elementer indeni. Så går det ikke helt galt. Well, here goes.



9.5.1.1 Viewports

Et viewport er ganske enkelt det vindue, browseren viser en side i. Et viewport kan indeholde hele siden eller blot en del af den. Elementers indbyrdes placering kan ændre sig, hvis brugeren ændrer på vinduets størrelse.



9.5.1.2 Dokumenttræet

Det dokument, der tænkes på her, er naturligvis HTML-dokumentet, hvor man betragter dets elementer som en trælignende struktur, hvor roden, der udgøres af HTML-elementet, godt nok ligger øverst med grenene bestående af de øvrige elementer hængende under sig. Her er et eksempel på et simpelt dokumenttræ:

hvor roden HEAD- og BODY-elementet udgør hver sin gren på HTML-elementet. HEAD-elementet har så en gren bestående af TITLE-elementet, mens BODY-elementet har tre grene: et H1-element og to P-elementer. Den ene af disse P-elementer har så endnu en gren i form af et SPAN-element.

Det er den samme struktur, som bruges ved de egenskaber, der nedarves, idet et element arver en egenskab fra det element, det er en gren af i dokumenttræet. En egenskab, der defineres for BODY-elementet, arves således af såvel H1-elementet som de to P-elementer og SPAN-elementet, der jo arver egenskaben fra det første P-element. Egentlig logisk nok, når man tænker nærmere over det.



9.5.1.3 Omgivende Blokke

Mange placeringer og størrelser beregnes i forhold til en rektangulær boks, som kaldes en "omgivende blok". I beskrivelsen i [CSS2] specifikationen står der, at bokse, der genereres, fungerer som omgivende blok eller "containing block" for alle de bokse, der er afledt af den. På jævnt dansk betyder det, at en gren i dokumenttræet er omgivende blok for de blok- og inlineelementer, den indholder (Hvorfor skriver de så ikke bare det i stedet for?). Okay, der ligger lidt mere i det, men det er essensen af det.

Roden i dokumenttræet er således omgivende blok for hele indholdet; BODY-elementer er omgivende blok for den del af indholdet, man kan se. De blokke, der er findes i BODY-elementet er omgivende blok for det, de hver især indeholder. I eksemplet på dokumenttræet herover er det første afsnit således omgivende blok for den tekst, der står i det inklusiv det SPAN-element, de indeholder.

Bemærk, at en boks godt kan placeres helt eller delvist udenfor sin omgivende blok! Det er som sagt boksens placering i dokumenttræet, der bestemmer, hvad der er dens omgivende blok, og ikke den fysiske placering på siden.

Den omgivende blok, der udgøres af roden i dokumenttræet, kan ikke flyttes rundt.



9.5.1.4 Blokbokse og Anonyme Blokbokse

Nu husker jeg ikke, om jeg har nævnt det før (ellers så er det gjort nu), men blokelementer er de HTML-elementer, der fremstår som blokke på en side (logisk nok egentlig). Blokelementer danner en hovedblokboks, som enten indeholder kun blokbokse eller elementets inline indhold, og det er egentlig den, der danner den omgivende blok, som anvendes til positionering.

Heraf følger at f.eks. afsnit får hver deres blokboks, som gør, at man kan bruge positionering til at styre placeringen af afsnittet på siden. Det burde der heller ikke være noget odiøst i. Men hvad så med følgende konstruktion:

    <DIV>
        Noget tekst.
        <P>Noget mere tekst i et afsnit.</P>
    </DIV>

Her danner DIV-elementet, som jo er et blokelement, en hovedblokboks med et indhold af blokbokse. Den ene af dem er blokboksen med P-elementet, men hvad med det der "Noget tekst", som står og flagrer uden for lands lov og ret, for det et jo inline indhold i DIV-elementet, og det går jo ikke, hvis vi skal overholde det der med, at hovedblokbokse kun kan indeholde enten blok- eller inline indhold.

I lige netop dette eksempel kan vi komme udenom problemet ved også at sætte afsnitstags omkring "Noget tekst", men det nummer går ikke altid. I stedet tvinges inline indholdet ind i en såkaldt anonym blokboks, så DIV-elementets hovedblokboks kommer til at indeholde ene blokbokse.



9.5.1.5 Inlinebokse og Anonyme Inlinebokse

Når blokelementer danner blokbokse, så danner inline elementer - rigtigt gættet - inlinebokse. Men også den del af et blokelements indhold, som ikke selv udgøres af et blokelement, danner inlinebokse. Med det in mente kan vi se, at et afsnit danner en blokboks, som så indeholder et eller flere inlinebokse med afsnittets tekst:

    <P>Noget <EM>fremhævet</EM> tekst.</P>

der danner en blokboks med tre inlinebokse, idet der dannes en inlineboks med ordet "fremhævet" af inline elementet EM, mens "Noget " og " tekst." får hver sin inlineboks. Sidstnævnte er anonyme inlinebokse, da de ikke har noget inline element.



9.5.2 Egenskaben "display"

Egenskaben "display" er en sjov fisk, for den kan bruges til at vende helt op og ned på begreberne, da den bestemmer, hvordan elementer vises. Den kan således ændre blok elementer til inline elementer og omvendt samt en masse andet skæg.

Egenskabens værdi har derfor stor indflydelse på blokdannelsen og dermed på et layouts udseende. Egenskaben påvirker alle elementer, og den nedarves ikke.

"display" kan have følgende værdier:

Standardværdien er "inline".



9.5.2.1 Værdien "none"

Som jeg nævnte før, får værdien "none" et element til at forsvinde helt. Hvorfor så anbringe elementet overhovedet og ikke bare udelade det helt? Tjah, det kunne jo være, man ønskede at vise elementet i visse tilfælde, men ikke i andre.

Forestil dig en side med mange links til navigation som f.eks. den, du kigger på lige nu. De ville bare fylde på en udskrift uden at være til nogen nytte, da man jo ikke bare kan trykke på dem med en kuglepen, så der bladres hen til det sted, der er mål for linket. Det vil derfor være nærliggende at lave en printervenlig udgave af siden, hvor man bruger "display:none" til at udelade disse elementer på en udskrift.

Jeg har også selv været ude for at skulle lave en side, hvor man ønskede, at der skulle stå, at det var en kopi af et elektronisk dokument, nederst på den udskrevne side. I det tilfælde brugte jeg "display:none" til at skjule denne sætning, når siden blev vist på skærmen. Her er et eksempel på, hvordan det blev gjort:

    <STYLE type="text/css" media="screen">
        P.Skerm { display: block; }
        P.Papir { display: none; }
    </STYLE>
    <STYLE type="text/css" media="print">
        P.Skerm { display: none; }
        P.Papir { display: block; }
    </STYLE>

Vi definerer her to typografiark, hvor vi definerer de samme to klasser for henholdsvis skærm og printer, idet vi bruger "display: none" til at skjule den del af indholdet, vi ikke ønsker vist på de respektive medier, mens resten vises normalt. Prøv at åbne siden i din browser og derefter at udkrive den og læg mærke til forskellen i sidste afsnit.

Vi skal senere komme nærmere ind på,hvordan man knytter et typografiark til et bestemt medie.



9.5.2.2 Run-in og Compact Bokse

Run-in og Compact bokse er nogle underlige størrelser, som danner enten inline- eller blokbokse alt efter sammenhængen. Og jeg er bange for, at det nu bliver ekstra langhåret. Så klar med en saks, folkens:

En Run-in boks opfører sig således:

Det kan med fordel bruges i forbindelse med overskrifter:

    H3 { display: run-in; }

Eksemplet kunne give dette resultat:

Overskrift med "run-in"

Og her er så noget tekst, der følger efter denne overskrift. Som det ses følger teksten umiddelbart efter overskriften i stedet for at komme på en linie nedenunder.

Compact bokse har følgende adfærd:

Compact boksen placeres således i margenen: den er udenfor blokkens første linieboks, men påvirker beregningen af denne boks's højde. Desuden bestemmer compact boksens "vertical-align" egenskab dens lodrette placering i forhold til denne linieboks.

    DT {
        display: compact;
    }
    DD {
        margin-left: 4em;
    }

der kan give følgende resultat:

Kort   Beskrivelsen følger her
 
For lang til margenen
    Beskrivelsen følger her


9.5.3 Modeller til Positionering

Der er tre modeller til positionering af bokse i CSS2:

Ved at bruge disse modeller behøver websmede ikke længere ty til forskellige tricks som f.eks. at bruge usynlige billeder til at opnå forskellige layouteffekter.



9.5.3.1 Valg af Model

Man anvender egenskaben "position" til at vælge den model, der skal bruges til positionering. Egenskaben berører alle elementer, men ikke indhold som genereres (det vender vi tilbage til på et senere tidspunkt), og den nedarves ikke.

Egenskaben kan have følgende værdier:

Float modellen sættes dog af egenskaben "float", der gennemgås længere nede.



9.5.3.2 Forskydninger

Forskydninger i forhold til den normale placering sker med egenskaberne "top", "right", "bottom" og "left".

Disse egenskaber gælder alle for placerede elementer, dvs. elementer hvis "position" egenskab er sat til andet en "static", og de nedarves ikke. De kan alle antage følgende værdier:

De fire egenskaber angiver:

Ved absolut placerede bokse sker forskydningen i forhold til boksens omgivende blok. Ved relativt placerede bokse sker forskydningen i forhold til selve boksens yderkanter (dvs. boksen placeres først normalt, og forskydningen sker så ud fra denne placering).



9.5.4 Normalt flow

Bokse i et normalt flow kan være enten blok- eller inlinebokse, men ikke begge to samtidigt.

Blokbokse placeres i rækkefølge lodret under hinanden startende fra toppen af en omgivende blok. Den lodrette afstand mellem blokkene bestemmes af margin egenskaberne. Blokboksenens venstre kant berører den venstre kant på den omgivende blok (der bruges dog højre side i stedet, hvis læseretningen er fra højre mod venstre).

Inlinebokse placeres lige efter hinanden horisontalt. Også her begyndes er øverst i den omgivende blok, og individuelle, vandrette margener, rammer og udfyldninger respekteres, ligesom indholdet kan justeres lodret ud fra boksenes over- eller underkant samt tekstens basislinie.

De bokse, der udgør en hel linie, danner en linieboks. Liniebokse er altid høje nok til at rumme de bokse, de indeholder, men de kan godt være højere end den højeste af dem (f.eks. ved justering i forhold til tekstens basislinie).



9.5.4.1 Relativ Positionering

Ved relativ positionering placeres bokse først helt normalt, hvorefter de får den forskydning, der er angivet med egenskaberne "top", "right", "bottom" og "left". Bokse, der placeres relativt, beholder deres oprindelige størrelse.

Efter alt dette tørre, langhårede stof trænger vi til at se det fungere i praksis (og en mundfuld te, hvis jeg må be'):

    P.Over {
        position:relative;
        top:-38px;
        left:275px;
        color:Blue;
    }
    P.Under {
        position:relative;
        top:45px;
        left:75px;
        color:Red;
    }

Den første regel i dette eksempel forskyder afsnit af klassen "Over" 38 pixels opad og 275 pixels mod højre i forhold til normalt, mens anden regel forskyder afsnit af klassen "Under" 45 pixels nedad og 75 pixels mod højre i forhold til normalt. Begge regler giver teksten en anden farve, så det er nemmere at se virkningen. Hvis du åbner selve siden vil du se, at afsnittet af klassen "Over" er placeret umiddelbart efter og i samme højde som eksemplets første afsnit, som ikke er flyttet. Det efterfølgende afsnit, der er af klassen "Under", bliver faktisk flyttet ned under eksemplets sidste, normalt placerede afsnit, som det oven i købet overlapper.



9.5.5 Floats

En float er en boks, der er flyttet til højre eller venstre på den aktuelle linie. Okay, det er der jo så meget, der er, uden at det derfor bliver en float (eller flydende boks) af den grund. Det, der er specielt ved en float, er, at andet indhold kan flyde ned langs en af dens sider (eller ingen af dem). Det sker ved, at det andet indholds liniebokse forkortes, så der bliver plads til den flydende boks. Ved floats, der er flyttet til venstre, passerer det andet indhold ned langs den højre kant, mens det passerer ned langs den venstre kant ved floats, der er flyttet til højre.

Alle floats bliver blokbokse, som placeres udenfor sidens normale flow. De skal have en bredde, som enten angives direkte eller er underforstået.



9.5.5.1 Placering af Floats

Floats placeres med egenskaben "float", som påvirker alle elementer, som ikke er positioneret eller genereret indhold. Den nedarves ikke.

Egenskaben kan have følgende værdier:

Det trænger vi til et eksempel på:

    IMG.Float {
        float:left;
    }

Denne regel får alle sidens billeder til at flyde til venstre, hvilket får den omkringliggende tekst til at flyde højre om billedet. Vi ser også, hvordan man nemt og smertefrit indsætter billeder på sin side og får teksten til at passere udenom som i en bog. Skide smart!



9.5.5.2 Styring af Flowet Udenom en Float

Man kan styre, hvordan et elements bokse placerer sig i forhold til en tidligere indsat float ved hjælp af egenskaben "clear", som angiver hvilke(n) af elementets sider, der ikke må støde op til den flydende boks.

Egenskaben påvirker kun blokelementer inklusive floats. For compact- og run-in bokse gælder egenskaben for den blokboks, som boksen ender med at tilhøre.

"clear" kan have følgende værdier:

Dette gælder for alle blokelementer, der ikke er floats. Når det drejer sig om floats, er det floatens øverste yderkant, som placeres under eventulle tidligere floats ud fra retningslinierne herover.

For at illustrere dette føjer vi denne regel til eksemplet ovenfor:

    P {
        clear:left;
    }

Bortset fra denne regel er eksemplet magen til det ovenstående. Resultatet er dog en del anderledes. Vi ser, at selv om det første afsnit også er omfattet af reglen, der jo gælder alle afsnit, påvirkes det ikke, fordi det flydende billede er placeret efter dets begyndelse i HTML-dokumentet. Tværtimod flyder dets tekst pænt højre om billedet som i eksemplet ovenfor.

Anderledes dramatisk er virkningen på andet afsnit, som før startede oppe midt på billedet. Dets tekst begynder nu først under billedet, idet der er et stort, hvidt felt til højre for billedet mellem de to afsnit. Afsnittets omgivende boks begynder dog samme sted som før, da det som nævnt er afsnittets topmargen, der er blevet øget.



9.5.6 Absolut Positionering

Ved absolut positionering forskydes en boks også i forhold til sin omgivende blok. Den fjernes også fuldstændigt fra det normale flow uden at påvirke efterfølgende søskende. Boksen danner en ny omgivende blok til sit indhold, som positioneres normalt inde i boksen.

Men et absolut positioneret element flyder ikke omkring andre elementer, som det endda kan skjule helt eller delvist (eller være skjult af). Brugen af absolut positionering kræver derfor, at man har fuldstændigt styr på sit design, men giver samtidigt en mængde fordele, da et layout kan blive meget lettede at styre.

For at bruge absolut positionering skal man give "position" egenskaben værdien "absolute" eller "fixed". Forskellen på de to værdier er, at ved værdien "fixed" bestemmes placeringen af det pågældende viewport. I en browser vil en fixed boks derfor blive stående, selv om resten af indholdet scrolles. I en udskrift vil en fixed boks blive udskrevet samme sted på alle sider. Det kan f.eks. bruges til at få en signatur udskrevet nederst på hver side.

        DIV.Forste {
            position:fixed;
            top:90px;
            left:20px;
            width:480px;
            color:Blue;
        }
        DIV.Anden {
            position:absolute;
            top:90px;
            left:520px;
            width:480px;
            color:Red;
        }

Dette eksempel definerer to spalter, der adskiller fra hinanden ved måden, de er positioneret på. Den første spalte er erklæret med "absolute" og vil derfor flytte med, hvis siden scrolles, mens den anden er erklæret med "fixed" og bliver stående.



9.5.7 Lagdelt Layout

Som vi har set i flere af eksemplerne herover, sker det, at placerede elementer bliver anbragt oven i hinanden med kaos til følge, fordi elementernes baggrund er gennemsigt (det kan også ændres med typografiark, bare rolig). Nu er problemet jo ikke så stort, fordi vi har fuld kontrol med layoutet og dermed kan flytte rundt på elementerne, som vi lyster.

Men layoutet kan jo netop kræve, at elementer ligger i lag, og så er det rart at vide, hvordan browseren håndterer elementer, der dækker hinanden, og ikke mindst, hvordan vi går ind og styrer denne lagdeling.

Generelt ligger alt indholdet i samme lag, og hvis noget positioneres, så det overlapper hinanden, vil det element, der står sidst i HTML-dokumentet ligge øverst.

Hvis du vil lave om på det, skal du bruge egenskaben "z-index", som påvirker placerede elementer uden at nedarves. Den kan have følgende værdier:

Heraf følger, at lag 2 ligger ovenpå lag 1, som igen ligger ovenpå lag 0 (der er standard). Lag kan godt have negative numre.

Vi definerer to klasser, der placerer hver sit billede:

        IMG.Overst {
            position:absolute;
            top:100px;
            left:20px;
            z-index:2;
        }
        IMG.Nederst {
            position:absolute;
            top:60px;
            left:200px;
            z-index:1;
        }

og bruger dem til at placere hvert sit billede på hjemmesiden:

<IMG SRC="title.gif" ALT="Øverste billede" CLASS="Overst">

<IMG SRC="author.jpg" ALT="Nederste billede" CLASS="Nederst">

der indsætter henholdsvis den grafik, der bruges til sideoverskrifter, og et billede af undertegnede (så nu er I advaret) på en side. Som det ses i eksemplet ligger sideoverskriften ovenpå portrættet, da den har et større "z-index", også selv om portrættet er det, der indsættes sidst og derfor ville være øverst, hvis vi ikke havde ændret lagnumrene, eller hvis de to billeder havde fået samme lagnummer (f.eks. 2).



9.5.8 Ændring af Læseretning

På dansk og mange andre sprog læser vi fra venstre mod højre, men andre sprog som f.eks. hebræisk og arabisk læses fra højre mod venstre. Det er som regel noget, browseren selv kan finde ud af, når blot hjemmesidens sprog er angivet korrekt. Det kan dog give problemer på sider med blandet indhold af f.eks. engelsk og arabisk. Jeg skriver udtrykkeligt "kan", for i mange tilfælde vil browseren også håndtere selv disse sider uden problemer, da den indeholder en indviklet, bidirektional algoritme (fint udtryk, det må jeg huske) til at klare den slags ting.

Men laver man en side, som ikke håndteres korrekt af den bidirektionale algoritme (der var den igen), findes der to egenskaber, som du kan bruge til at påvirke den der, du ved nok.

Den ene af disse egenskaber er "direction", der bestemmer læseretningen, og som nedarves og påvirker alle elementer, dog med visse begrænsninger for inline elementerne (se nedenfor). Den kan have følgende værdier:

Standardværdien er "ltr".

        P.Rtl {
            direction:rtl;
        }

Reglen i dette eksempel vender læseretningen om fra højre mod venstre i afsnit af klassen "Rtl". Siden, der demonstrerer dette, indeholder dels et normalt afsnit, et omvendt afsnit samt et omvendt afsnit, der indeholder et inline element.

Den anden egenskab, som påvirker den bidirektionale algoritme (han er skrap, ham WebWiz), er "unicode-bidi", der styrer hvor vidt indlejres endnu et niveau i forhold til den der bidirektionale du ved nok eller ej. Det lyder langhåret, og det er det også, skulle jeg lige hilse og sige.

Egenskaben påvirker alle elementer, men nedarves ikke. Den kan have følgende værdier:

        P.Embed {
            direction:rtl;
            unicode-bidi:embed;
        }
        P.Override {
            direction:rtl;
            unicode-bidi:bidi-override;
        }

Disse to regler udvider det foregående eksempel, så det kan demonstrere virkningen af hver værdi. Indsat i eksemplet fra før kan man tydeligt se effekten af værdierne, når man åbner siden. Det oprindelige eksempel er med til sammenligning.



9.5.9 Indholdets Bredde

Browseren er normalt ret skrap til at tilpasse bredden af indholdet til browservinduets bredde, således at indholdet fylder hele browservinduets bredde. Og på en side som denne er det også ganske udmærket. Men designet kan kræve, at man ønsker større kontrol med et eller flere elementers bredde.

Nogle elementer som f.eks. TABLE har en Width-attribut, som ofte ikke engang er under afvikling i [HTML40], selv om mange lignende attributter er det, da de har noget tilsvarende i typografiark. Det kunne selvfølge forlede en og anden til at tro, at der ikke er nogen egenskaber til styring af bredden. Helt forkert!

Den pågældende egenskab hedder ikke overraskende "width", og den gælder for alle elementer undtagen ikke-erstattede inlineelementer, tabelrækker og grupper af tabelrækker. Erstattede inline-elementer er elementer, hvor selve HTML-elementet erstattes af noget andet som f.eks. IMG-elementet, der erstattes af det billede, der henvises til i dens SRC-attribut. Egenskaben nedarves ikke, og den kan have følgende værdisæt:

Negative værdier er ikke tilladte.

Bemærk: "width" angiver bredden af selve indholdet. Hvis elementet har rammer, margen m.v. (se senere), bliver bredden af disse lagt oveni for både venstre og højre side. Sættes "width" egenskaben for et element således til 100px, samtidigt med at elementet har en ramme på 3px, bliver dets samlede bredde således:

3px + 100px + 3px = 106px

idet der jo er en rammeside med bredden 3px både til venstre og højre for elementet.

        DIV {
            width:100px;
        }

Eksemplet her illustrerer den pågældende situation. På selve siden har jeg gjort rammen tydeligere ved at give den en anden farve.



9.5.9.1 Største og Mindste Bredde

Det er ikke altid nødvendigt at angive en eksakt bredde. Ofte er det nok, hvis blot et elements bredde ligger indenfor et givet interval. Egenskaberne til at angive dette interval er "min-width" og "max-width". Begge disse egenskaber gælder for alle elementer undtagen ikke-erstattede inlineelementer og tabelelementer og nedarves ikke. Deres værdisæt er:

Derudover kan "max-width" have værdien:

Denne sidste værdi er standardværdi for "max-width", mens standardværdien for "min-width" afhænger af browseren. Angiver man en "max-width", der er mindre end værdien af "min-width" sættes "max-width" til værdien af "min-width".

        DIV {
            min-width:75px;
            max-width:125px;
        }

I dette eksempel kan bredden af DIV elementet variere mellem 75px og 125px. På selve siden har jeg bibeholdt eksemplet med den faste bredde til sammenligning.



9.5.10 Indholdets Højde

Ligsom man kan angive bredden på et element, findes der en egenskab til at sætte højden på et element. Denne egenskab hedder - surprise - "height". Ikke overraskende ligner den "width" en hel del, idet værdisættet er:

Negative værdier er ikke tilladte.

Egenskaben gælder for alle elementer undtagen ikke-erstattede inlineelementer, tabelkolonner og grupper af tabelkolonner. Den nedarves ikke.

Ligesom ved "width" er det højden af selve indholdet, der angives. Højden på evt. margener og rammer m.v. (se senere) kommer oveni, når den samlede højde bestemmes.

        DIV {
            height:50px;
        }

Eksemplet sætter et DIV element med en højde på 50px. Åbner du selve siden, vil du se, at DIV elementet er alt for stort til sit sparsomme indhold, da jeg med vilje ikke har sat nogen bredde på elementet, som derfor bruger al den bredde, der er til rådighed. På dette punkt adskiller "height" sig fra "width", som ikke gør elementet højere, end der er nødvendigt for at rumme indholdet.



9.5.10.1 Største og Mindste Højde

Kommer det som den store overraskelse, at man også kan definere et interval for et elements højde, når man nu kan det for bredden? Nej, vel? Så kommer det sikkert heller ikke bag på nogen, at egenskaberne hertil hedder "min-height" og "max-height"? Det tænkte jeg nok. Derfor er det heller ikke noget chok at erfare, at disse to egenskaber gælder for alle elementer undtagen ikke-erstattede inlineelementer og tabelelementer og nedarves ikke. Deres værdisæt er:

Derudover kan "max-height" have værdien:

Denne sidste værdi er standardværdi for "max-height", mens standardværdien for "min-height" er 0. Hvis man angiver en "max-height", der er mindre end værdien af "min-height", sættes "max-height" til værdien af "min-height".

        DIV {
            min-height:25px;
            max-height:75px;
        }

Dette eksempel ligner ikke overraskende eksemplet, som demonstrerede største og mindste bredde på et element. Også her er det oprindelige højdeeksempel med som sammenligning på siden.



9.5.10.2 Liniehøjde

Normalt får linier en højde, der svarer til den valgte skriftstørrelse, hvilket jo egentlig også er meget naturligt. Det kan variere lidt fra browser til browser, hvor meget liniehøjden sættes til, men det ligger som regel i området 1.0em til 1.2em, altså lidt mere end skriftens højde for at give en smule mellemrum mellem linierne.

Det kan man ændre med egenskaben "line-height", der gælder for alle elementer og nedarves. Egenskaben kan have følgende værdisæt:

Negative værdier er ikke tilladt for de sidste tre værdityper.

Angiver man en liniehøjde, der er mindre end den valgte skrifttype, vil de enkelte linier bløde igennem til de omkringliggende linier, så teksten flyder sammen.

        DIV {
            line-height:1.5em;
        }

Dette eksempel definerer en liniehøjde på 1.5em, altså 1,5 gange skriftstørrelsen. En anden regel på siden sætter liniehøjden til kun 0,75 gange skriftstørrelsen, hvilket gør teksten noget sammenkneben, men dog stadig læsbar.



9.5.11 Lodret Justering

Lodret justering e noget af det, som virkeligt kan forvirre websmede. Mange nybegyndere udi kunsten tror nemlig, at det er noget mere omfattende, end det rent faktisk er.

Den egenskab, der driller dem, hedder "vertical-align", og i modsætning til den populære opfattelse gælder den kun for inline elementer og tabelceller, og den nedarves ikke. Mere specifikt påvirker den kun den lodrette justering indenfor en linieboks, der dannes af inline elementerne. Man kan således ikke definere en blok med en given højde og bruge "vertical-align" til f.eks. at centrere indholdet i den. Sorry.

Egenskaben kan tildeles følgende værdier:

Bemærk: Egenskaben opfører sig en smule anderledes i forbindelse med tabelceller.

        SPAN {
            vertical-align:middle;
        }

Dette eksempel centrerer indholdet af SPAN elementet med midterlinien af den omgivende tekst. Selve siden demonstrerer dette med både en tekst, der er større end afsnittets tekst, og en tekst, der er mindre. Endelig indeholder den et mislykket forsøg på at centrere indholdet af en DIV-boks lodret (blot for at vise, at det kan altså ikke lade sig gøre).



Til Formatering af Tekst Til Indhold Til Toppen af Siden Til Hovedsiden Til Baggrunde

Wizband Right