Denne artikel forklarer, hvordan man bygger et 3-søjlelayout i CSS. Instruktioner gælder for CSS3 og ældre.

Tegn dit layout

Du kan tegne dit layout på papir eller i en grafikprogram. Hvis du allerede har en trådramme eller endnu mere omfattende design i tankerne, skal du forenkle det til de grundlæggende kasser, der udgør webstedet. Dette design, der ledsager denne artikel, har tre kolonner i hovedindholdsområdet samt en sidehoved og sidefod. Hvis du ser nøje, kan du se, at de tre kolonner ikke er ens i bredden.

Når du har trukket dit layout, kan du begynde at tænke på dimensioner. Dette eksempel på design vil have følgende grundlæggende dimensioner:

• Ikke mere end 900 pixels bredt
• 20 px tagrender til venstre
• 10 px mellem kolonner og rækker
• Kolonner, der er 250 px, 300 px og 300 px bredt
• Den øverste række er 150 px høj
• Den nederste række er 100 px høj

Skriv grundlæggende HTML / CSS, og opret et containerelement

Da denne side er gyldig HTML dokument, start med en tom HTML-container.

Tilføj i de grundlæggende CSS-stilarter til nul sidemargener, kanter og polstringer. Mens der er andre standard CSS-stilarter for nye dokumenter er disse stilarter det minimum, du har brug for for at få et rent layout. Føj dem til hovedet på dit dokument.

For at begynde at bygge layoutet skal du lægge et containerelement i det. Det sker undertiden, at du kan slippe af med containeren senere, men for de fleste layouter med fast bredde gør det lettere at administrere på tværs af web med containerelementet browsere.

Stil beholderen

Containeren definerer, hvor bredt websidens indhold vil være, samt eventuelle margener udefra og polstring på indersiden. Til dette dokument er containeren 870 px bred med en 20 pixel tagrender til venstre. Tagrenden er indstillet med en margenstil, men polstringen på beholderen er nulstillet for at forhindre, at elementer er så brede som containeren.

Hvis du gemmer dit dokument nu, vil det være svært at se containeren, fordi den ikke har noget i den. Hvis du tilføjer pladsholdertekst, kan du se containerelementet mere tydeligt.

Brug et overskriftmærke til overskriften

Hvordan du beslutter dig for at style overskriftsrækken, afhænger meget af, hvad der er i den. Hvis overskriftsrækken bare har en logografik og en overskrift, skal du bruge et overskriftstag (

) giver mere mening end at bruge en

. Du kan style overskriften på samme måde som du style en div, og du undgår fremmede tags.

HTML til overskriftsrækken går øverst i beholderen og ser sådan ud:

For at indstille typografierne på den blev der tilføjet en rød kant i bunden, så du kunne se, hvor den ender, margenerne og polstringen blev nulstillet, bredden indstillet til 100% og højden til 150 pixel.

Glem ikke at flyde dette element med float: venstre; ejendom. Nøglen til at skrive CSS-layout er at flyde alt, selv ting, der har samme bredde som containeren. På den måde ved du altid, hvor elementerne ligger på siden.

EN CSS efterkommervælger anvendte kun stilarter på H1-elementer, der er inden i elementet #container.

For at få tre kolonner skal du starte med at bygge to kolonner

Når du bygger et layout med tre søjler med CSS, skal du opdele dit layout i grupper på to. Så for dette tre-søjles layout, den midterste og højre søjle og grupperet og placeret ved siden af ​​den venstre søjle i et to-søjles layout hvor den venstre kolonne er 250 px bred, og den højre kolonne er 610 px bred (300 hver for de to kolonner plus 10 px for tagrenden mellem dem).

Kolonnen til venstre svæves til venstre, mens den anden svæves til højre. Fordi den samlede bredde af begge kolonner er 860 pixel, er der en 10 pixel tagrender mellem dem.

Tilføj to kolonner inde i den brede anden kolonne

For at oprette de tre kolonner skal du tilføje to divs inde i den bredere anden kolonne, ligesom du tilføjede 2 divs inde i containerkolonnen i det sidste trin.

Da disse to 300px brede kasser er inde i en 610px bred kasse, vil der igen være en 10px rende mellem dem.

Tilføj i sidefoden

Nu hvor resten af ​​siden er stylet, kan du tilføje i sidefoden. Brug en sidste div med et "footer" id, og tilføj indhold, så du kan se det. Du kan også tilføje en kant øverst, så du ved, hvor den starter.

Tilføj dine personlige stilarter og indhold

Nu hvor du er færdig med layoutet, kan du begynde at tilføje dine egne personlige stilarter og indhold. Husk, at kantene på sidehoved og sidefod blev tilføjet for at vise layoutafsnittene, ikke specifikt til design.