Viktig å lage et velstrukturet dokument. Man bruker div-taggen til å dele opp innholdet i logiske deler
<div id="navigation"> <!--innhold--> </div> <div id="content"> <!--innhold> </div>
Og i stilsettet
# navigation { postion: absolute; left: 0: width: 30 em; } # content { margin-left: 30 em; }
Eksempel: http://htmldog.com/examples/pagelayout2.html
Legg merke til at man bruker lister til å lage menyer!
# navigation { postion: absolute; left: 0: width: 30 em; background: #ccf; } # content { border-left: 30 em #ccf solid; }
Eksempel: http://htmldog.com/examples/pagelayout3.html
Eksempel2 med bakgrunnsbilde: layoutbakgrunn.html
# navigation { width: 30 em; background: #ccf; } # content { float: right; margin-left: 30 em #ccf solid; }
<div id="navigation1"> <!--innhold--> </div> <div id="navigation2"> <!--innhold--> </div> <div id="content"> <!--innhold> </div>
# navigation1 { postion: absolute; left: 0; width: 200px; } # navigation2 { postion: absolute; right: 0; width: 150px; } # content { margin: 0 150px 0 200px }
Eksempel: http://htmldog.com/examples/pagelayout4.html
Og hvis man ikke ønsker å ha navigasjonsbjelkene på hver sin side, men ved siden av hverandre til venstre, trenger man bare å manipulere de forskjellige deklarasjonene for left, right og margin.
# navigation1 { postion: absolute; left: 0; width: 200px; } # navigation2 { postion: absolute; left: 200; width: 150px; } # content { margin-left: 350px }
<div id="header"> <!--innhold--> </div> <div id="navigation"> <!--innhold--> </div> <div id="content"> <!--innhold> </div>
Og i stilsettet
# header{ background:#CCCCCC none repeat scroll 0 0; } # navigation { postion: absolute; left: 0; width: 30 em; } # content { margin-left: 30 em; }
Eksempel: http://htmldog.com/examples/pagelayout5.html
<div id="header"> <!--innhold--> </div> <div id="navigation"> <!--innhold--> </div> <div id="content"> <!--innhold> </div> <div id="footer"> <!--innhold--> </div>
Problemet med en footer er å få den til å legge seg helt nederst på siden. Hvis du kan garantere at navigasjonsområdet alltid er kortere enn content-området så er det ikke noe problem. Da trenger du ikke å gjøre noe spesielt fordi den vil legge seg etter content-området helt automatisk.
Løsningen er å bruke flytende kolonner.
# header{ background:#CCCCCC none repeat scroll 0 0; } # navigation { width: 10 em; backgroung: lime; float: left } # content { margin-left: 10 em; } #footer { clear: both; }
Eksempel: http://htmldog.com/examples/pagelayout7.html
Et stort eksempel: http://htmldog.com/examples/darwin.html