Kvikguide til CSS layout eksempler

Denne artikel er en kortfattet oversigt over mine konkrete eksempler på layout med stylesheets.

De egentlige artikler om dette emne er listet i højre spalte.

Nogle af eksemplerne omfatter også en artikelmæssig gennemgang af forskellige interessante detaljer. Disse eksempler er mærket med (A)

Layout med position-egenskaben

Tabeller vs. CSS

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

Statisk 1-spaltet layout

Principlayout 1, statisk 1-spaltet layout. (A)

Principlayout 1a, samme model, men med sidehoved og sidefod. (A)

Principlayout 1b med sidehoved, navigationsbjælke og sidefod. (A)

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

2-spaltet layout, venstrestillet menuspalte

Principlayout 2: Venstre spalte med fikseret bredde, højre spalte med elastisk bredde.

Fikseret sidebredde: Eksempel 2a.

Sætte en bredde i procent af hele websidens indhold: Eksempel 2b.

Sætte maksimum bredde i pixel eller em'er af hele websidens indhold ved brug af max-width-egenskaben: Eksempel 2c.

max-width og min-width i IE med IE7 patch: Eksempel 2d.

2-spaltet layout, højrestillet menuspalte

Højre spalte med fikseret bredde, venstre spalte med elastisk bredde: Principlayout 3.

3-spaltet layout, 2 menuspalter

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

3-spaltet layout, 2 menuspalter, sidehoved og sidefod

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

Grafik i sidehovedet

Logo-element: Principlayout 6. (A)

Tekst på billede: Principlayout 6a. (A)

Grafisk baggrund: Principlayout 6b. (A)

Lige høje kolonner

Kvikfix løsning: Principlayout 7. (A)

Autocentrering

Autocentrering med lige brede marginer. (A)

Autocentrering med auto-marginer. (A)

Autocentrering med negativ margin. (A)

Autocentrering både vandret og lodret. (A)

Favoritlayouts

Favoritlayout 1: Dette er en traditionelt 2-spaltet layout med en venstrestillet menukolonne med fikseret bredde. (A)

Favoritlayout 1a: Samme, med lidt kosmetik og nogle ekstra elementer. (A)

Favoritlayout 1b illustrerer et problem med sidefoden i denne konstruktion.

Favoritlayout 2: Dette favoritlayout er mage til favoritetlayout 1, blot spejlvendt, så den smalle menuspalte højrestilles. (A)

Favoritlayout 2a er identisk med favoritlayout 2, men med et stærkere visuelt udtryk.

Favoritlayout 2b er yderligere udbygning af det visuelle udtryk af eksempel 2.

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

Favoritlayout 4: Samme som favoritlayout 3, men med en kvikfix løsning på problemet med at få alle kolonner til at se lige høje ud. (A)

Favoritlayout 4a: Samme som favoritlayout 4, men med en kvikfix løsning på problemet med at få alle kolonner til at se lige høje ud, uanset hvilken kolonne, der har det meste indhold. (A)

Layout med float

Float-layout eksempel 2: 2 kolonner, venstrestillet menukolonne.

Float-layout eksempel 3: 2 kolonner, højrestillet menukolonne.

Float-layout eksempel 6: 2 kolonner, højrestillet menukolonne med fikseret bredde.

Float-layout eksempel 7: 2 kolonner, højrestillet menukolonne med fikseret bredde, begge kolonner lige høje.

Float-layout eksempel 8: 2 kolonner, venstrestillet menukolonne med fikseret bredde, begge kolonner lige høje.

3 lige høje spalter med negative marginer: Eksempel 2

3 lige høje spalter med negative marginer: Eksempel 2a. Nøgleksempel.

3-spaltet layout med negative marginer, absolut positioneret venstre spalte: Eksempel 3. Nøgleksempel.

3-spaltet layout med negative marginer, sidehoved med navbar: Eksempel 4. (A)

Stu Nichols 3-spaltede layout med lige høje kolonner: Eksempel 5.

Gelé-layout

Hovedartiklen: Gelé-layout.

2 elastiske spalter, venstrestillet menuspalte: Gelé-layout model 1. (A)

2 spalter, fikseret højrestillet menuspalte: Gelé-layout model 2. (A)

3 spalter: Gelé-layout model 3. (A)

Denne side er senest opdateret: February 24, 2006

Artikler om CSS-layout

Søg på siderne