Igen er det ret let med den foreliggende HTML-kildekode – for eksempel fra eksempel 5 – ved hjælp af nogle få ændringer i stylesheet'et at få det konventionelle trespaltede layout.
Her kan jeg droppe tricket med negative marginer og simpelt hen
venstre-float
'e #nav
-spalten og højre-float
'e
#sidebar-elementet.
Tricket til at holde styr på float
'ede elementer er bestandigt
at huske på, at elementer, der ikke er float
'ede flyder op på
siden af de float
'ede elementer, hvis der ellers er plads.
Konsekvensen er, at
de float
'ede elementer skal indsættes i kildekoden før de
ikke-float
'ede elementer.
Stylesheet'et for layout ser nu således ud:
div#container { overflow:hidden;} div#indhold { width: 100%; } div#artikel { margin-left:220px; margin-right:220px; } div#nav { width: 200px; float: left; background-color:#939d92;} div#sidebar { width: 200px; float: right; border-left:2px solid #939d92} #nav, #artikel, #sidebar { padding-bottom:1000em; margin-bottom:-1000em;}
Det er i virkeligheden meget enkelt: #artikel
-elementet flyder op på
højre side af det left-float
'ede #nav
-element, som der er
skabt rigelig plads til
ved hjælp af #artikel
-elementets margin-left
-egenskab;
fremdeles flyder #artikel
-elementet op på venstre side af det
right-float
'ede #sidebar
-element, som der også er
skabt plads til ved hjælp af #artikel
-elementets margin-right-egenskab.
Det er ikke sikkert, at du har tænkt over det, men faktum er, at dette eksempel og de to foregående omfatter præcis den samme HTML-kode.
Det, der forandrer sig fra det ene eksempel til det andet, er det dokumentindlejrede stylesheet. Hvis jeg nu klipper det ud af de tre sider og laver 3 forskellige eksterne stylesheets, kan jeg indlæse disse ved hjælp af en stylesheet switcher. Resultatet af det bliver eksempel 7.
Oprettet april 2009