Vekslende stylesheets
Denne webside er lavet som et eksempel på, hvor vidt forskellige udtryk, man kan give den samme webside, blot ved at udskifte et stylesheet.
Websidens html-kode er nogenlunde den samme, som jeg har brugt i mit CSS-layout-eksempel 7:
<body class="csstest"> <div id="wrapper"> <div id="banner"> <h1 onclick="location.href='/'"> <span id="gilspace"></span> Webdesign 101<br /> <span id="sektionstitel"> – en webdesign notesblok</span></h1> </div> <div id="content" class="clearfix"> <div id="container"> <div id="artikel"> <h2 class="top">[ Artikel overskrift ]</h2> <div class="manchet"> [ Manchet ] </div> [ Artikeltekst ] <p class="bottom update"> [ Forfatternavn, opdatering ]</p> </div> </div> <div id="menucol"> <h3 class="top">1. element i #menucol</h3> [ #menucol tekst ] [ #menucol menu ] <div class="sidepanel"> [ Sidepanel tekst ] </div> </div> </div> <div id="footer"> <address> [ Adresseoplysninger ]</address> </div> </div> </body>
Jeg har følgende bemærkninger at gøre til denne html-kode:
- body class name er overflødig, når det kun drejer sig om én side, men kan have værdi hvis layoutet skal anvendes på mange sider i forskellige sektioner.
- #wrapper-elementet omfatter alt indhold på siden.
- <span id="gilspace"></span> er bregnet til indsætning af en bannergrafik, jf min artikel om Image Replacement.
- <span id="sektionstitel">...</span> kan skjules hvis den ikke bruges.
- #content er en wrapper, der rummer begge kolonner. Dette element kan forsynes med en baggrundsgrafik, der får de to kolonner til at synes lige høje, hvis ellers elementet clear'es.
- #content-elementet clear'es med positioniseverything.com's universal clearfix. Så undgås problemer med et layout-element i bunden af de to kolonner, hvis eneste formål er at foretage clear'ingen.
- #content-elementet indeholder de to kolonner. De kan float'es til højre eller venstre, eller postioneres ved hjælp af position-egenskaben eller hvad man nu kan finde på.
- I disse eksempler anvender jeg float og forsyner artikel-elementet med en negativ margin til højre eller venstre.
Denne artikel er skrevet 31. maj 2006