Esimerkkejä div-ulkoasuista
Nykyaikaisten www-sivujen ulkoasujen suurin yksittäinen tekijä on CSS. XHTML:n tai HTML:n avulla sivulle luodaan kyllä perusrunko, mutta CSS määrittelee sen, miltä sivu loppujen lopuksi näyttää. Sama www-sivun runko voi taipua CSS:n avulla mitä erilaisimpiin muotoihin.
Tällä sivulla esitellään yhdeksän erilaista div-elementtien avulla ryhmiteltyä ulkoasua, joiden XHTML-koodit ovat samanlaiset. Kun CSS siis poistetaan käytöstä, sivut ovat identtiset. Ulkoasujen XHTML-koodi on luettavissa tämän sivun lopusta.
Ulkoasu 1
Perinteinen, taulukkotaittoa muodostava ulkoasu, jossa otsikko, teksti ja navigointilinkit ovat omissa laatikoissaan. Navigointilinkkien seurana tekstin oikealla puolella on muutama tekstilaatikko, esimerkiksi päivityksistä ilmoittamista varten. Ulkoasun alaosassa on koko ulkoasun levyinen palkki, jossa lukevat tekijänoikeus- yms. tiedot.
Huomioitavaa: Navigaatiolinkkien ja päivitysten laatikot on helppo vaihtaa oikealta puolelta vasemmalle.
Ulkoasu 2
Vastaa muuten hyvin pitkälti ulkoasu 1:tä, mutta tekstin, otsikon ja menun laatikot eivät ole irrallaan toisistaan. Menu on koko ulkoasun korkuinen.
Huomioitavaa: Navigaatiolinkkien ja päivitysten laatikot on helppo vaihtaa oikealta puolelta vasemmalle.
Ulkoasu 3
Vastaa muuten ulkoasu 2:ta, mutta leipätekstiä varten varattu laatikko on vakion korkuinen. Mikäli tekstiä on tarpeeksi, tekstiosioon ilmestyvät vierityspalkit.
Huomioitavaa: Navigaatiolinkit on helppo vaihtaa oikealta puolelta vasemmalle.
Ulkoasu 4
Vastaa muuten ulkoasu 3:a, mutta navigaatiolinkit ja päivitysilmoitukset ovat leipätekstiosion yllä.
Ulkoasu 5
Melko perinteinen ulkoasumalli, jossa näyttää olevan kaksi läpikuultavaa, ristiin asetettua liuskaa. Navigaatiolinkit ovat vaakatasossa otsikkokuvan ja leipätekstin välissä. Tekijänoikeustiedot ovat omassa liuskassaan ulkoasun alalaidassa.
Ulkoasu 6
Vastaa muuten ulkoasu 5:ä, mutta navigaatiolinkit ovat otsikkokuvan päällä oikeassa laidassa. Tekijänoikeustiedot ovat tekstilaatikon alapuolella.
Huomioitavaa: Navigaatiolinkit on helppo vaihtaa oikealta puolelta vasemmalle.
Ulkoasu 7
Vastaa muuten ulkoasu 5:ä, mutta navigaatiolinkit ovat leipätekstin vierellä. Tekijänoikeustiedot ovat omassa laatikossaan tekstilaatikon alaosassa.
Huomioitavaa: Navigaatiolinkit on helppo vaihtaa oikealta puolelta vasemmalle.
Ulkoasu 8
Voimakkaasti oikealle nojaava ulkoasu, jossa on ulkoasujen 5, 6 ja 7 tapaan kaksi ristikkäistä liuskaa. Otsikko ja navigaatio ovat leipätekstin vasemmalla puolella. Tekijänoikeustiedot ovat otsikon yläpuolella. Ulkoasun koko on määritetty suhteellisesti, joten mm. sen leveys muuttuu tekstin koon mukana.
Huomioitavaa: Melko helppo toteuttaa myös peilikuvana.
Ulkoasu 9
Ulkoasu, jossa otsikko-osio on koko sivun levyinen. Sivun pääotsikko on kirjoitettu otsikko-osioon suurella, haalealla fontilla. Sen päällä lukee sivun lopussa "paatos"-divin sisällä oleva teksti, joka muissa tällä sivuilla esitellyissä ulkoasuissa edustaa tekijänoikeusmerkintöjä. Navigaatiolinkit ovat vaakasuunnassa pääotsikon alla.
Ulkoasujen XHTML-koodi
Alla olevat div-rakenteet on tarkoitettu body-tagien sisälle. Vihreällä merkityt rivit ovat vain ulkoasuissa 1-4.
<div id="koko">
<div id="otsikko"><h1>Otsikko</h1></div>
<div id="menu">
<ul class="menu">
<li>Linkki 1</li>
<li>Linkki 2</li>
<li>Linkki 3</li>
<li>Linkki 4</li>
</ul>
<div class="menu">Lorem ipsum dolor sit amet</div>
<div class="menu">consectetuer adipiscing elit</div>
</div>
<div id="sisalto">
<p>Sivun</p>
<p>sisältö</p>
<p>tähän</p>
</div>
<div id="paatos">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.</div>
</div>