Denne artikkelen forklarer hvordan du lager en 3-kolonnelayout i CSS. Instruksjoner gjelder CSS3 og eldre.

Tegn oppsettet ditt

Du kan tegne oppsettet ditt på papir eller i et grafikkprogram. Hvis du allerede har en trådramme eller enda mer omfattende design i tankene, kan du forenkle den til de grunnleggende boksene som utgjør nettstedet. Denne designen som følger med denne artikkelen har tre kolonner i hovedinnholdsområdet, samt en topptekst og bunntekst. Hvis du ser nøye etter, kan du se at de tre kolonnene ikke har samme bredde.

Etter at du har tegnet tegningen, kan du begynne å tenke på dimensjoner. Dette eksempelet design vil ha følgende grunnleggende dimensjoner:

• Ikke mer enn 900 piksler bredt
• 20 px takrenn til venstre
• 10 px mellom kolonner og rader
instagram viewer
• Kolonner som er 250 px, 300 px og 300 px brede
• Den øverste raden er 150 px høy
• Den nederste raden er 100 px høy

Skriv grunnleggende HTML / CSS og opprett et beholderelement

Siden denne siden vil være gyldig HTML dokument, start med en tom HTML-beholder.

Legg til i de grunnleggende CSS-stilene til null ut sidemargene, kantlinjene og polstringene. Mens det er andre standard CSS-stiler for nye dokumenter er disse stilene det minste du trenger for å få en ren layout. Legg dem til hodet på dokumentet.

For å begynne å bygge oppsettet, legg i et containerelement. Noen ganger hender det at du kan kvitte deg med containeren senere, men for de fleste layouter med fast bredde gjør det lettere å administrere på tvers av forskjellige nettsteder å ha containerelementet. nettlesere.

Stil beholderen

Beholderen definerer hvor bredt innholdet på websiden vil være, samt eventuelle marginer rundt utsiden og polstring på innsiden. For dette dokumentet er beholderen 870 px bred med en 20 piksler takrenne til venstre. Takrennen er satt opp med en marginstil, men polstringen på beholderen er nullstilt for å forhindre at noen elementer blir så brede som containeren.

Hvis du lagrer dokumentet nå, vil det være vanskelig å se beholderen fordi den ikke har noe i den. Hvis du legger til plassholdertekst, vil du kunne se beholderelementet tydeligere.

Bruk en overskriftsmerke for overskriften

Hvordan du bestemmer deg for å style toppraden, avhenger mye av hva som er i den. Hvis overskriftsraden bare har logografikk og overskrift, bruker du en overskriftskode (

) gir mer mening enn å bruke a

. Du kan style overskriften på samme måte som du styler en div, og du unngår fremmede koder.

HTML for toppraden går øverst i beholderen og ser slik ut:

For å sette stilene på den, ble det lagt til en rød kant nederst, slik at du kunne se hvor den ender, kantene og polstringen ble nullstilt, bredden satt til 100% og høyden til 150 px.

Ikke glem å flyte dette elementet med flottøren: venstre; eiendom. Nøkkelen til å skrive CSS-oppsett er å flyte alt, til og med ting som har samme bredde som containeren. På den måten vet du alltid hvor elementene vil ligge på siden.

EN CSS etterkommervelger bare brukt stiler på H1-elementer som er inne i #container-elementet.

For å få tre kolonner, start med å bygge to kolonner

Når du bygger et layout med tre kolonner med CSS, må du dele oppsettet ditt i grupper på to. Så for dette tre-kolonne-oppsettet, er den midterste og høyre kolonnen og gruppert og plassert ved siden av venstre kolonne i et to-kolonne-oppsett der den venstre kolonnen er 250 px bred, og den høyre kolonnen er 610 px bred (300 hver for de to kolonnene, pluss 10 px for takrennen mellom dem).

Kolonnen til venstre flytes til venstre, mens den andre flytes til høyre. Fordi den totale bredden på begge kolonnene er 860 px, er det en renne på 10 px mellom dem.

Legg til to kolonner inne i den brede andre kolonnen

For å opprette de tre kolonnene, legg til to divs i den bredere andre kolonnen, akkurat som du la til 2 divs inne i containerkolonnen i det siste trinnet.

Siden disse to 300px brede boksene er inne i en 610px bred boks, vil det igjen være en 10px takrenn mellom dem.

Legg til i bunnteksten

Nå som resten av siden er stylet, kan du legge til i bunnteksten. Bruk en siste div med en "bunntekst" -ID, og ​​legg til innhold slik at du kan se det. Du kan også legge til en kant øverst, slik at du vet hvor den begynner.

Legg til dine personlige stiler og innhold

Nå som du er ferdig med oppsettet, kan du begynne å legge til dine egne personlige stiler og innhold. Husk at kantene på topptekst og bunntekst ble lagt til for å vise layoutdelene, ikke spesielt for design.