Noter om websidelayout

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:

  1. Et banner foroven med en logo eller en logotype og/eller firmaets eller webstedets navn.
  2. Et eller flere navigationselementer, f.eks. i form af menupaneler og/eller en navigationsbjælke.
  3. Den del af websiden, der indeholder det egentlige, det materiale, der skal præsenteres på den pågældende side i form af tekst, billeder og evt. animationer.
  4. En sidefod eller footer, som jeg ofte kalder det, indeholdende nogle facts om webstedets ejer – hvem er det, der står inde for de oplysninger, der gives på websiden, og hvorledes kan vi komme i kontakt med vedkommende.
  5. Et søgefelt, der gør det muligt for brugeren at søge blandt webstedets sider efter forekomsten af nøgleord eller -vendinger.

“Se mor, ingen tabeller!”

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:

  1. Du kan tilrettelægge dine sider på en langt mere fleksibel måde end ved hjælp af tabeller.
  2. Samtidig optimerer du sidens præsentation overfor søgerobotter og anden indekseringssoftware.
  3. Du gør det lettere for blinde, svagtseende og ordblindes skærmlæsere at fortolke tekstindholdet af dine websider korekt.
  4. Du sparer båndbredde, dine websider vil blive indlæst langt hurtigere. Kildekoden kommer til at fylde langt mindre.
  5. Det er lettere at lave korrekte websider, der validerer og som opfylder W3C's tilgængelighedskrav. ( Web Accessibility Initiative (WAI))

Dine handlemuligheder i designfasen udvides væsentligt og din kreativitet kan derigennem udfoldes væsentligt friere end ved den gammeldags – forkerte – metode.

Fra tabeller til stylesheets

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.

Simpelt layout
Med tabeller.
Med stylesheet
Opstrammet layout
Med tabeller.
Med stylesheet
Bedre udnyttelse af venstre kolonne
Med tabeller.
Med stylesheet
3 kolonner med elastisk midterkolonne
Med tabeller.
Med stylesheet

Principlayouts

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.

Et mylder af layout-modeller

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.

Statisk 1-spaltet layout

Principeksempel 1

1-spaltet “naturligt” layout

Duis 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.

Principlayout 1

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.

En note om skrifter

Principlayout 1 omfatter også et par afsnit om valg af skrifttype.

2-spaltet layout, venstrestillet menuspalte

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod

Principeksempel

2-spaltet layout

Duis 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.

Principlayout 2

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.

Absolut bredde

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:

  1. Sætte en fast bredde på alt indhold på siden i pixel eller em'er. Eksempel 2a. Ulempen er indlysende, at der derved kan komme vandret rulleskakt, hvis browervinduet bliver smallere end bredden af websiden tillader.
  2. Sætte en fast bredde på indholdskassen i pixel eller em'er. Resultatet er præcis det samme som nævnt under pkt. 1
  3. Sætte en bredde i procent af browservinduets bredde. Eksempel 2b.
  4. Sætte maksimum bredde i pixel eller em'er af hele websidens indhold ved brug af max-width-egenskaben. Eksempel 2c.

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).

max-width og min-width

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).

2-spaltet layout, højrestillet menuspalte

Principeksempel

2-spaltet layout

Duis 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

Principlayout 3.

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.

3-spaltet layout, 2 menuspalter

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod

Principeksempel

3-spaltet layout

Duis 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

Principlayout 4

Højre og venstre spalte med fikseret bredde, indholdsspalten med elastisk bredde.

3-spaltet layout, 2 menuspalter, sidehoved og sidefod

Banner
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod

Principeksempel

3-spaltet layout

Duis 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

Principlayout 5

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.

“Kasse”-layout

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.

Sidehoved (banner)

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.

Sidehovedets højde

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:

  1. body-elementets margin-top og body-elementets padding-top, hvis der er sådanne.
  2. #banner-elementets margin-top samt eventuel padding-top og padding-bottom.
  3. #banner-elementets border-top og border-bottom, hvis sådanne er brugt. Husk bemærkningen ovenfor om marginer, der kollapser
  4. #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.
  5. Evt. højden på elementets indhold. Vær her opmærksom på, at skriftelementer, inklusive overskriftselementer, af forskellige browsere forsynes med forskellige marginer og/eller padding. Det er derfor altid en god idé at sætte padding og margin på sådanne elementer eksplicit.
  6. Det samme gælder liniehøjden, 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:

  1. body margin og padding er 0.
  2. #banner-elementet har en margin-top og en margin-bottom på 10 pixel.
  3. #banner-elementet har en eksplicit højde på 98 pixel.
  4. #banner-elementet har ingen padding.
  5. Dertil skal lægges 2 gange 1 pixel border, således at #banner-elementets samlede højde er 100 pixel.
  6. h1-elementet inde i #banner-elementet har ingen eksplicit højde. Betydningen heraf gennemgår jeg nedenfor.
  7. Derimod har dette h1-element en 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øjde

Hvad 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.

Grafik i sidehovedet

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.

Et altomfattende sideelement

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.

Autocentrering

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.

Favoritlayouts

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:

Favoritlayout 1
Dette er en traditionelt 2-spaltet layout med en venstrestillet menukolonne med fikseret bredde, der er positioneret ved hjælp af position-egenskaben i en rigelig venstre margin på det egentlige indhold.
I Favoritlayout 1a retter jeg op på et par småfejl i layoutet, og viser hvordan du kan tilføje ekstra elementer – ud over en menu – i den venstre, smalle spalte.
Favoritlayout 1b illustrerer et problem med sidefoden i denne konstruktion.
Favoritlayout 2
Jeg bygger videre på principlayout 1, eller, sagt på en anden måde: Dette favoritlayout er mage til favoritlayout 1, blot spejlvendt, så den smalle menuspalte højrestilles.
I Favoritlayout 2a eksperimenterer jeg med at give dette layout et stærkere visuelt udtryk. Ditto for så vidt angår Favoritlayout 2b
Favoritlayout 2c viser, hvordan du indsætter et billede i teksten.
Favoritlayout 3
Det meget poulære 3-spaltede layout med en fikseret venstre og høje spalte og en elastisk midterkolonne.

Lige høje kolonner

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.

CSS-layout kogebøger

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”.

Layout med float

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

Artikler om CSS-layout

Vigtige eksempler i denne artikel

Søg på siderne