Introduktion til layout af websider med stylesheets,
position
-egenskaben.
Oversigt over artiklerne.
Kommenterede links til et halvt dusin
layoutmodeller.
Layout af websider handler om placering af websidens hovedelementer og delelementer i forhold til hinanden. Hovedelementerne er typisk:
Jeg har i adskillige år promoveret brugen af stylesheets til layouts i stedet for den konventionelle metode. Den konventionelle metode går ud på at placere websidens forskellige elementer i tabelceller for på den måde at kontrollere, hvor på siden elementerne skal befinde sig.
Jeg er ikke ude på at svine denne metode til eller kalde dem, der fortsat bruger den, for grimme navne. Der var en gang, at det var den eneste måde, tingene kunne gøres på. Jeg har selv layoutet en endeløs række af websider med denne metode.
Men der er nu en bedre metode, en metode, der har været anvendelig nu i mindst 5 år. Men fortsat er de allerfleste websider layoutet med den nu gammeldags metode.
Det er suboptimalt. Vi har værktøjerne til at gøre det rigtigt. Når det er tilfældet, kan vi kalde den konventionelle metode ved dens rigtige navn: Den forkerte metode.
Metoden er forkert, fordi vi bruger en informationsbærende
semantisk markør til præsentationsformål. Det er sammenblanding af
form og indhold. Og det er lige så forkert som fortsat at bruge
font
-markøren eller farvesætte websiderne ved hjælp
af attributter til body
-markøren.
Den rigtige metode er at bruge CSS til formgivning af alle websidens elementer.
Det er ikke alene den rigtige metode. Det er også en smartere metode:
Dine handlemuligheder i designfasen udvides væsentligt og din kreativitet kan derigennem udfoldes væsentligt friere end ved den gammeldags – forkerte – metode.
For længe længe siden lavede jeg en serie websider, hvor jeg viste en række layoutmodeller, skabt ved hjælp af tabeller, sidestillet med ganske tilsvarende sider, layoutet ved hjælp af stylesheets.
Jeg blev for nylig klar over – fra e-mails, jeg har modtaget fra brugere af dette websted – at disse modelsider rent faktisk bruges og angiveligt har været en hjælp for nogle, måske endda for mange.
Men disse e-mails afslører også, at disse modeller simpelthen ikke passer med nogle af de ting, jeg nu prædiker. I løbet af 3-4 år har jeg opnået en række nye erkendelser omkring websidedesign, som jeg ikke havde, da jeg oprindeligt lavede disse modeller.
Så derfor har jeg nu opdateret disse sider.
Der findes to grundlæggende og forskellige metoder, du kan tage i brug, når du skal layout'e en webside: Position-metoden og float-metoden.
Begge metoder har deres fordele og ulemper, og du vil ofte kunne se både position-egenskaben og float-egenskaben anvendt i samme layout – en slags hybrid mellem de to metoder.
Imidlertid mener jeg ikke, du skal vælge layout-model efter metode. Du skal naturligvis vælge den model, der er bedst egnet til det, du vil opnå.
For at du med det samme kan spore dig ind på, hvilke muligheder du har, vil jeg opregne en mængde forskellige layoutmodeller med eksempler og forklare hvorfor den metode, jeg har valgt, efter min opfattelse er den bedste.
I det følgende gennemgår jeg en mængde forskellige layout-modeller i detaljen, med henvisning til de konkrete eksempelsider. Vil du hellere se en mere summarisk gennemgang, kan du læse websiden Kvikguide til layout-modellerne.
Jeg gennemgår som nævnt alting ret detaljeret, men det ville føre alt for vidt, hvis jeg også skulle gengive html-kildekoden og hvert eneste komplette stylesheet til hver af de mange eksempelsider. Vil du se/kopiere disse, må du bruge browserens "Vis kilde"-funktion på de eksempelsider, du synes er mest interessante.
Principeksempel 11-spaltet “naturligt” layoutDuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. |
Jeg kalder denne model for statisk, fordi der ikke er noget layout. Websidens elementer optræder på siden i deres “naturlige” orden, det vil sige de fremtræder på websiden i den orden, de er indsat i kildekoden, det andet efter det ene, det tredie efter det andet osv.
Der er ikke noget galt med den model, det kan faktisk laves ganske flot. Det er imidlertid nødvendigt at begrænse linielængden, f.eks. ved at sætte en absolut bredde eller en maksimum bredde på siden.
Sætter du en absolut bredde på websiden, bør du vælge en bredde på 30-35 em'er, da du i så fald bevarer det samme antal tegn på linien, uanset om brugeren øger skriftstørrelsen. Men du skal så være opmærksom på, at siden ikke kan blive smallere end det mål du vælger, og at læseren får vandrette rulleskakter, hvis hendes browservindue bliver smallere end det valgte mål.
Foruden den yderst simple model, der er beskrevet ovenfor, har jeg lavet principlayout 1a, der er den samme model, men med sidehoved og sidefod, og principlayout 1b med sidehoved, navigationsbjælke og sidefod.
Principlayout 1 omfatter også et par afsnit om valg af skrifttype.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod |
Principeksempel2-spaltet layoutDuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. |
Venstre spalte med fikseret bredde, højre spalte med elastisk bredde.
Når vi alligevel er nødsaget til at operere med en linielængde, der er væsentligt mindre end de ca. 750 pixels brede, vi normalt som et et minimum har rådighed over, falder det meget naturligt at lave et 2-spaltet layout.
Sædvanligvis laves dette med en forholdsvis smal venstre spalte, til menuer og andre småting, og en bredere højre spalte til den egentlige artikel.
Princippet i denne model er utrolig simpelt: Den kasse, du så i eksempel 1, giver vi en rigelig venstre margin. I denne brede margin kan vi placere noget indhold ved hjælp af position-egenskaben. Et element med egenskaberne:
position:absolute; left:20px; top:20px; width:170px;
vil blive placeret i browservinduet 20 pixel fra dettes overkant og 20 pixel fra dettes venstre kant uanset websidens indhold i øvrigt. Elementet vil få en bredde på 170 pixel og en højde, der bestemmes af elementets indhold.
Holder vi fast i, at indholdskolonnens bredde ikke må overstige mellem 65 og 75 tegns bredde, må vi enten fastsætte en samlet bredde for hele siden inklusive begge spalter, eller for indholdskassen. Venstre spalte har jo i forvejen en fast bredde.
Jeg mener, der er fire metoder til at opnå dette:
Den i pkt. 3 nævnte løsning er jo ingen løsning. Sættes websidens bredde i procent, vil dens bredde fortsat øges i samme takt som browervinduets bredde.
Når jeg alligevel nævner dette som et løsningsforslag skyldes det mine egne erfaringer med websider på en stor monitor: Jeg bruger en monitor med en 1280 gange 1024 pixel resolution, men som regel har jeg kun maksimeret mine browservinduer, når jeg har et af browserens sidepaneler åbent. Hos mig fylder det normalt 250 - 300 pixel. Browservinduets indholdsrude får så en bredde på omkring 1000 pixel.
Jeg foretrækker dog langt den 4. løsning, hvor jeg bruger
max-width
og min-width
egenskaberne til at
sikre, at websidens indhold ikke kommer til at fylde mere end maksimalt
800 pixel i bredden og ikke mindre end 600 pixel i bredden.
(Eksempel 2c).
Her er tale om to nyttige CSS-egenskaber ved et blokelement, som
sørger for at det element, der får påtrykt egenskaben ikke kan blive
bredere end den værdi, max-width
har fået, og ikke kan
blive smallere end den værdi, min-width
har fået.
Disse egenskaber fortolkes korrekt af alle nyere browsere, undtagen – ja, behøver jeg at skrive det? – Internet Explorer.
Dét faktum kan du forholde dig til på to måder: Du kan bruge
max-width
og min-width
i forventning om at
en kommende ny version af Internet Explorer kan tolke disse egenskaber,
og i mellemtiden lade dem, der stadig bruger denne browser, lide under
de lange linier. Eller du kan forsynes dine sider med Dean Edwards IE 7
patch, der sætter Internet Explorer i stand til at fortolke også disse
egenskaber. (Eksempel 2d).
Principeksempel2-spaltet layoutDuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod |
Højre spalte med fikseret bredde, venstre spalte med elastisk bredde.
En spejlvending af eksempel 2 og min foretrukne layout-model. Overvejelserne omkring linielængden er de samme som nævnt under eksempel 2.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod |
Principeksempel3-spaltet layoutDuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod |
Højre og venstre spalte med fikseret bredde, indholdsspalten med elastisk bredde.
Banner | ||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod |
Principeksempel3-spaltet layoutDuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod |
Sidefod |
Højre og venstre spalte med fikseret bredde, indholdsspalten med elastisk bredde.
Antallet af kolonner eller spalter er det samme som i det netop nævnte principlayout 4, men her har jeg tilføjet et banner, også sommetider kaldet et sidehoved, samt en sidefod. I hvert fald sidehovedet ses meget hyppigt, for ikke at sige altid, som et sted, hvor firmanavn, logo og emnet for webstedet er godt placeret.
Der er kun få konstruktionsmæssige problemer med sidehovedet. Derimod kan sidefoden godt volde problemer, som det er illustreret i eksemplet. (Brug linket øverst i venstre spalte til at mindske/øge mængden af tekst i midterste spalte.)
Dette er en svaghed, forbundet med brugen af absolut positionerede elementer. Sådanne elementer svæver så at sige over websiden og øver ingen indflydelse på sidens øvrige elementer.
Der er ingen let metode til at ændre på dette. Ønsker du et layout som i eksempel 5 med en frit hængende sidefod og en elastisk midterkolonne, skal du passe på,at indholdskolonnen altid er højere end højre og venstre spalte. Det er jo indholdskolonnen, der så at sige skubber sidenfoden nedad.
I principlayout 5 ser du, at jeg så at sige har tegnet kasserne op ved at give hver kasse en border, samt nogle marginer, der skaber afstand mellem kasserne og afstand mellem indholdet og browserens kanter.
I konstruktionsfasen kan det være en meget nyttig ting for at holde styr på, hvorledes kasserne står i forhold til hinanden og hvor meget de faktisk fylder. Forskellige baggrundsfarver, som senere fjernes, kan også være en god hjælp.
Indsætningen af et sidehoved en som nævnt ret uproblematisk. Der er tale om en statisk html-element, som har den bredde og højde, vi giver det, subsidiært den bredde og højde, der skabes af indholdet.
Det er værd at huske på, at et blokelement – både en
h1
-overskrift, en address
-markør og en div
med noget indhold er blokelementer – bliver
lige så bred som det overordede element er bredt. I eksempel 5 er det
overordnede element body
, hvilket har den konsekvens at
sidehovedet så at sige af sig selv udfylder hele browservinduets
bredde. At det ikke ser sådan ud skyldes, at jeg har givet sidehovedet
en venstre og en højre margin på 20 pixel.
Der, hvor lidt rettidig omhu er påkrævet, er i forbindelse med fastsættelsen/beregningen af højden.
I denne konstruktion (principlayout 5)
har #banner
og #indhold
-elementerne det, jeg
kalder det naturlige omløb: Det vil sige, at elementerne følger efter
hinanden ned over siden efterhånden som de optræder i kildekoden,
kun adskilt af elementerne marginer, padding og border.
(I denne sammenhæng er det værd at huske på, at vandrette marginer – det vil sige margin-top og margin-bottom – der støder op mod hinanden, kollapser, så afstanden mellem to elementer kommer til at svare til den bredeste af de to sammenstødende marginer, og altså ikke summen af disse).
Men #leftcol
- og #rightcol
-elementerne
er absolut positionerede. Hvis vi vil have overkanterne af disse
elementer til at flugte nøjagtigt med overkanten af
#indhold
-elementet, er det nødvendigt at
vide, hvor stor afstanden fra browservinduets overkant til overkanten
af #indhold
-elementet.
I beregningen af denne afstand kan indgå følgende størrelser:
body
-elementets margin-top
og
body
-elementets padding-top
, hvis
der er sådanne.#banner
-elementets margin-top
samt
eventuel padding-top
og padding-bottom
.#banner
-elementets border-top
og
border-bottom
, hvis sådanne er brugt. Husk bemærkningen
ovenfor om marginer, der kollapser#banner
-elements height, hvis en sådan er brugt.
height
-værdien indeholder også værdierne for
#banner
-elementets border-top
,
padding-top
, padding-bottom
og
border-bottom
.line-height
, som jeg
altid sætter til 100 procent i sådanne tilfælde.Det er nok ret sjældent, at du for brug for alle disse størrelser, men nu har du i hvert fald en tjekliste, du kan bruge, hvis du skal finde ud af, hvorfor tingene ikke passer.
I eksempel 5 har vi følgende størrelser, der indgår i beregningen:
body margin
og padding
er 0.#banner
-elementet har en margin-top
og
en margin-bottom
på 10 pixel.#banner
-elementet har en eksplicit højde på 98 pixel.#banner
-elementet har ingen padding
.border
, således at
#banner
-elementets samlede højde er 100 pixel.h1
-elementet inde i #banner-elementet har ingen
eksplicit højde. Betydningen heraf gennemgår jeg nedenfor.line-height
på
100 procent samt en padding-top
på 20 pixel.Beregningen er nu: 10 pixel margin-top
fra
#banner
-elementet, 100 pixel fra elementets eksplicitte
højde, samt den bredeste af de to marginer, der støder sammen mellem
#banner
-elementet og #indhold
-elementet, ie.
20 pixel. I alt 130 pixel, som er den afstand, der skal indsættes som
værdien for top for #leftcol
-elementet.
h1
-elementets højdeHvad er nu konsekvensen af, at jeg ikke har sat nogen eksplicit
højde for h1
-elementet i banneret? Det betyder jo, at
vi ikke kender nogen præcis værdi af dette.
Det gør, i dette tilfælde, ikke nogen forskel.
Forklaringen herpå er, at skriften aldrig kan blive højere
end knap 35 pixel, og med
en højde på 98 pixel minus 20 pixel padding-top vil skriftens grundlinie
selv i dette ekstreme tilfælde falde komfortabelt inden for
#banner
-elementets samlede højde. Der bliver altså ikke
tale om, at en vældig stor h1
-overskrift på nogen måde kan komme til
at fylde så meget i højden, at skriften så at sige skubber boksens
underkant nedad, eller – i en standard-kompatibel browser
– rager ud over boksens underkant.
Hvordan kan jeg nu vide det? Joh, ved ikke at sætte nogen skriftstørrelser nogen steder får jeg de skriftstørrelser, der er bestemt af browserens tekststørrelsesværktøj. Er dette sat til medium, som hos de fleste brugere, vil grundskriften være ca. 16 pixel høj, en h2-overskrift 1.2 gange dette og en h1-overskrift 1.2 gange h2-overskriften, altså 1.44 gange.
Browserens tekststørrelsesværktøj regner som regel også med en faktor 1,2, så vælges en tekststørrelse “Størst” i f.eks. Internet Explorer bliver vil en h1-overskrift få en højde på 1.44 gange 1.44 = ca 2,1 gange grundskriftens størrelse = ca. 34 pixel.
Jeg må jo nok erkende, at sidehovedet i eksempel 5 er lidet ophidsende. Men der er ikke noget til hinder for at lege lidt med farverne eller lægge noget grafik ind i et sådant sidehoved.
Eksemplerne 6, 6a og 6b viser henholdsvis indsætningen af et logo-element, indsætningen af en HTML baggrund og indsætningen af en CSS baggrund.
Logo-element: Det er ret
ligetil. Logoet indsættes i #banner
-elementet og gives
en absolut position i forhold til dette. Absolut positionerede
elementer har ingen indflydelse på omløbet af de øvrige elementer,
og derfor kommer grafikken og h1-overskriften til at stå oven i
hinanden, så at sige. Jeg skaber plads til logoet ved at give
h1
-overskriften en rigelig padding-left
.
Logoet kan godt være højere end #banner-kassen, så
rager det blot ud over #banner
-elementets kanter.
Grafisk baggrund 1:
Eksemplet viser en grafisk baggrund sat ind som et HTML-element ved
hjælp af img
-markøren. Ved at undlade at sætte
width
i html, men i stedet i stylesheet'et sætte bredden
af grafikken til 100 procent (af #banner
-elementets bredde),
opnår jeg at grafikkens bredde bliver nøjagtig den samme som
#banner
-elementets bredde. Da højden er fikseret
betyder det, at kun billedets bredde ændrer sig i
takt med browservinduets bredde.
Ønsker du ikke det, må du enten anvende den herunder beskrevne metode, eller sætte en fast bredde på banner-elementet.
Denne metode kræver, at h1
-elementet positioneres
absolut inde i #banner
-elementet.
En mere indgående diskussion af HTML-elementernes baggrund kan du finde i artiklen Noter om baggrundsgrafik.
Grafisk baggrund 2:
Eksemplet ligner meget det foregående, men her er billedet indsat
som en CSS-baggrund. Billedet er ikke egnet til fliselægning, så
der er background-repeat
sat til no-repeat
.
Det betyder så, at billedet skal være stort nok til at dække
hele banneret, selv om sidens bredde øges. Det er ikke tilfældet
her.
I alle de foregående eksempler er der på forskellig vis skabt en afstand mellem browservinduets kanter og websidens indholdsdele.
I nogle tilfælde er det sket ved, at hvert hovedelement har fået en venstre og højre margin eller en venstre og højre position, der sætter denne afstand.
I andre tilfælde er det sket ved, at selve body
-elementet har
fået en margin og/eller en padding, der skaber denne afstand.
Min foretrukne tilgang til websidelayout består nu i at skabe et enkelt altomfattende element:
<body> <div id="side"> Alle websidens elementer </div> </body>
Jeg opretter herefter en formdeklaration for dette element, hvori jeg sætter de overordnede egenskaber for siden, herunder indholdets placering i forhold til browservinduet.
Det er i første omgang websidens bredde, der optager os. Ovenstående har jeg redegjort for, hvorledes du som websidekonstruktør kan vælge mellem forskellige layoutmodeller, hvor én af de egenskaber, der er i spil, er spørgsmålet om, hvorvidt websiden skal være elastisk, således at bredden mindske og øges med browservinduets bredde, eller om websiden skal have en fikseret bredde, uanset browservinduets bredde.
Om du vælger det ene eller det andet er til en vis grad bestemmende for, hvilken metode, du skal anvende til eventuelt at centrere indholdet på siden.
Jeg bruger ordet autocentrering for at antyde, at “det sker af sig selv” i kraft af vore stylesheet formregler, i modsætning til centrering ved hjælp af DHTML-scripts og lignende metoder.
Der er forskellige metoder til dette. Jeg gennemgår her disse i en separat artikel med en håndfuld eksempler: Autocentrering.
Man kan naturligvis ikke arbejde med et emne som layout af websider uden hen ad vejen at udvikle nogle favoritter. Også disse ændrer sig over tid, efterhånden som man lærer mere, og efterhånden som man påvirkes af, hvad andre laver.
I forbindelse med den opdatering af mine artikler om emnet, som denne artikel er udtryk for, har jeg også ryddet op i mine favoritter. Jeg præsenterer de samme layouts, som jeg hele tiden har haft som favoritter, men nu i lidt opstrammet og forhåbentlig bedre forklaret format. Forklaringerne findes i eksemplernes tekst.
Mine favoritlayouts er følgende:
position
-egenskaben i en rigelig venstre margin på det
egentlige indhold. Det er værd at notere sig, at den layout-metode, jeg skriver om i denne artikel, har den mangel, at de absolut positionerede CSS-kasser, som jeg bruger til de smalle kolonner, ikke har en iboende højde. Deres højde afhænger helt og aldeles af indholdets mængde. Konsekvensen er, at du ikke umiddelbart kan lægge en baggrundsfarve eller en baggrundsgrafik ind, så det syner som om farven eller grafikken fylder hele spalten.
Netop dette problem har kaldt en del kreative kræfter frem hos forskellige designere, som jeg fortæller om i et par separate artikler: Webside layout med float-egenskaben og Gelé-layout.
Der er dog en kvikfix løsning, som jeg fortæller om i artiklen Principlayout 7. Med dette princip i bagagen har jeg lavet en alternativ version af det 3-spaltede layout (favoritlayout 3) med kulørt baggrund bag de to smalle spalter: Favoritlayout 4.
En del designere har lavet deciderede kogebøger for,
hvordan vi designer websider udelukkende ved hjælp af stylesheets.
Især 3 har haft stor betydning for min egen forståelse:
Rob Chandanais,
The Layout Reservoir,
Eric Costello,
CSS Layout Techniques og
Owen Briggs,
Box Lessons.
En af dem, der ikke har lavet kogebøger, men til gengæld gennem sine ord og gerninger har virket som en sand inspirator for en hel verden af webdesignere, er Jeff Zeldman, hvis artikler, A Web Designers Journey og To Hell With Bad Browsers i februar 2001 har åbnet øjnene for langt flere end undertegnede.
Zeldmans bog fra 2003, “designing with web standards” en en sand tour de force af know-how for den praktisk orienterede websidekonstruktør.
Det samme gælder Eric Meyer's to bøger om praktisk design med CSS: “Eric Meyer on CSS” og “More Eric Meyer on CSS”.
Der er et ofte anvendt alternativ til de metoder til layout af sidens elementer, jeg har gennemgået ovenfor.
Det er brug af float-egenskaben. Der kan være visse fordele ved
at bruge denne egenskab på ét eller flere af websidens
hovedelement. På den anden side kan netop float
-egenskaben
være lidt vanskelig at have med at gøre. Derfor har jeg valgt at
skrive en separat artikel om dette emne:
Websidelayout med float.
Denne side er senest opdateret: March 29, 2006