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:

  1. 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.
  2. #wrapper-elementet omfatter alt indhold på siden.
  3. <span id="gilspace"></span> er bregnet til indsætning af en bannergrafik, jf min artikel om Image Replacement.
  4. <span id="sektionstitel">...</span> kan skjules hvis den ikke bruges.
  5. #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.
  6. #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.
  7. #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å.
  8. 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