CSS/Paigutused

See peatükk vaatleb mitmeid enimlevinud sisupaigutusi veebis ning õpetab, kuidas neid saavutada CSS-iga.

Dokumendi üldine struktuur

Enne, kui üldse hakatagi mõtlema CSS-i kirjutamisele ja kujundusele, tuleb paika panna dokumendi üldine struktuur. HTML-i loomisel ei tohiks teha mingeid eeldusi selle kohta, milline hakkab olema kujundus - veelgi enam - ideaalsel juhul ei nõua kujunduse muutmine mitte ainumastki muudatust HTML-is.

Lihtsaimal juhul koosneb veebileht ühetainsast HTML-failist. Alguses lehekülje pealkiri, siis natuke juttu, veel mõned pealkirjad ja veel veidi juttu. Kõik see jookseb ka kujunduslikus plaanis kenasti ühe ühise nivoona ülevalt alla kuni tekst lõpeb. Veebiajastu koidikul paljud lehed just nõnda lihtsad olidki, ent tänapäeval on sellised lehed pigem harulduseks saanud. Liigume edasi millegi reaalsema juurde...

Lihtsal juhul koosneb üks tänapäevane lehekülg sisust ning menüüst, viimane võimaldab navigatsiooni erinevate sisuosade vahel. Tõenäoliselt peame menüü eraldi identifitseerima, et saaksime seda eraldi ülejäänud tekstist kujundada. Kasulikuks võib osutuda ka sisuosa vastav tähistamine. Näiteks nõnda (selles ja järgnevates näidetes on toodud vaid dokumendi body osa):

<div id="menyy">
<ul>
  <li><a href="foo.html">Foobarbaz</a></li>
  <li><a href="bar.html">Barbazfoo</a></li>
  <li><a href="baz.html">Bazfoobar</a></li>
</ul>
</div>


<div id="sisu">

<h1>Lorem ipsum</h1>

<p>Nunc tempor. Nulla nec pede. Sed vitae dolor. Aenean
diam. Phasellus mi nunc, vestibulum ut, convallis in, 
tempus vitae, nulla. Fusce nunc. Vestibulum pharetra 
porta neque.</p>

<p>Duis nonummy laoreet ante. Nulla viverra est vel 
nulla. Nunc sed metus nec tortor scelerisque posuere. 
Nulla sit amet sapien eget pede porttitor aliquam. 
Aliquam eget urna in ligula faucibus sodales. Fusce eros
nisl, ornare vel, porta eget, volutpat vitae, sem. Morbi
vestibulum nulla et sem.</p>

</div>

Kena, aga mis siis kui menüü osas pole mitte kolm vaid kolmkümmend linki? CSS-iga võime muidugi menüü asukohta muuta, aga need kasutajad, kelle brauser CSS-i ei toeta? Kas nad peaksid igal leheküljel enne tükk aega kerima, kuni jõuavad viimaks sisuni? Ning need kasutajad kes ei näe? Kas nad peaksid kuulama kuidas iga lehe alguses neile kogu menüü ette loetakse?

Ei! Kindlasti ei pea nad seda tegema. Nad võivad teie lehelt niisama kergesti lahkuda, kui nad sinna tulid. Ja häda sulle, kui nende seas oli nii mõnigi potensiaalne klient. On sellele probleemile lahendus?

Loodetavasti on see küsimus lugeja poolt juba ette vastuse leidnud: me paigutame menüü dokumendi lõppu. Nii lihtne see ongi. Ja kui peaks olema kaks menüüd, siis paigutame ka nad mõlemad dokumendi lõppu. Tegelikult kehtib lihtne ja üldine reegel: me korraldame oma dokumendi sisu tähtsuse järjekorras.

Kui meil on näiteks uudisteleht, kus on viimaste uudiste nimekiri, menüü erinevate uudiste kategooriatega, viited teistele uudiste-lehekülgedele ning uudis ise, siis milline peaks olema järjekord? Kõigepealt kindlasti konkreetne uudis (avalehel päevauudis ja muudel kusagilt menüüst valitud uudis), siis viimaste uudiste nimekiri, siis uudised kategooriate kaupa ning lõpetuseks (kõige igavam ja vähem huvipakkuv) teised uudistelehed. Umbes nõnda:

<div id="uudis">
<h1>Peaminister lendas nagu tuvi!</h1>
<p>Täna võisime kõik nautida kuidas meie kallis peaminister
võttis viimaks selga tiivad ja bla bla bla bla bla bla bla
bla bla blaaa blabalbal blaa blab blaa bla bla blaaahh.</p>
</div>

<div id="viimased_uudised">
<h6>Viimased uudised</h6>
<ul>
  <li><a href="peaminister.html">Peaministrer lendab</a></li>
  <li><a href="nato.html">Õhuväebaas tuleb Narvasse</a></li>
  <li><a href="seks.html">Üleriigiline seksiskandaal</a></li>
</ul>
</div>

<div id="kategooriad">
<h6>Kategooriatena:</h6>
<ul>
  <li><a href="eesti.html">Kodumaised</a></li>
  <li><a href="euro.html">Euroopa Liit</a></li>
  <li><a href="maailm.html">Muu maailm</a></li>
  <li><a href="imelik.html">Imelikud uudised</a></li>
</ul>
</div>

<div id="teised_lehed">
<h6>Teised uudistelehed</h6>
<ul>
  <li><a href="http://www.epl.ee">Eesti Päevaleht</a></li>
  <li><a href="http://www.postimees.ee">Postimees</a></li>
</ul>
</div>

Vastust küsimusele, miks me kasutasime kuuenda astme pealkirju ('h6'), tuleb otsida asjaolust, et HTML-is puudub võimalus märkimaks ilma järguta pealkirja. Kuna me haruharva jõuame situatsioonini, kus kuuenda astme pealkirja tarvis läheb, siis saab seda üsna ohutult kasutada kui üldist pealkirja. Antud jutt on muidugi vaid põhjendus meie teole, mitte mingi sulakuld.

Ent nüüd, kus lehekülje struktuur peaks olema paigas, võime asuda CSS-i kallale.

Kahe tulbaga paigutus

Alustuseks teeme lihtsa lehekülje, kus menüü asub vasakpoolses kitsamas tulbas ning sisu parempoolses tulbas, mille laius venib vastavalt brauseri akna suurusele. Aluseks võtame HTML-i, mis toodud peatüki alguses, ent nüüd on menüü pärast sisuosa:

<div id="sisu">

<h1>Lorem ipsum</h1>

<p>Nunc tempor. Nulla nec pede. Sed vitae dolor. Aenean
diam. Phasellus mi nunc, vestibulum ut, convallis in, 
tempus vitae, nulla. Fusce nunc. Vestibulum pharetra 
porta neque.</p>

<p>Duis nonummy laoreet ante. Nulla viverra est vel 
nulla. Nunc sed metus nec tortor scelerisque posuere. 
Nulla sit amet sapien eget pede porttitor aliquam. 
Aliquam eget urna in ligula faucibus sodales. Fusce eros
nisl, ornare vel, porta eget, volutpat vitae, sem. Morbi
vestibulum nulla et sem.</p>

</div>


<div id="menyy">
<ul>
  <li><a href="foo.html">Foobarbaz</a></li>
  <li><a href="bar.html">Barbazfoo</a></li>
  <li><a href="baz.html">Bazfoobar</a></li>
</ul>
</div>

Kohe tekib mõte kasutada absoluutset positsioneerimist ning tõsta seeläbi menüü oma kohale, et menüü piirid oleks selgemini tajutavad, siis lisame ajutiselt punase joone:

#menyy {
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid red;
}

Kuid menüü katab nüüd ära osa meie teksti. Pole viga, võime sisu vasakule küljele ruumi juurde tekitada. Et oleks kindel palju menüü ruumi tahab, siis fikseerime selle laiuse:

#sisu {
    margin-left: 16em;
}
#menyy {
    width: 15em;
}

Üldiselt ongi meil käes paigutus, mida soovisime. Nüüd jääb veel lisada natuke CSS-i põmitud fantaasiat ja me saame juba täiesti kasutatava kujunduse:

body {
    color: #242;
    background: #eee url("triibud.png") repeat-y 7.7em;
    font-family: Verdana, Arial, sans-serif;
    
}

#menyy {
    position: absolute;
    left: 0;
    top: 4.5em;
    width: 9em;
}

#sisu {
    margin-left: 10em;
}

#menyy ul {
    list-style-type: square;
    color: #7a3;
    margin-left: 1.5em;
    padding-left: 0;
}

#menyy ul a {
    color: #7a3;
    font-weight: bold;
    text-decoration: none;
}

#menyy ul a:hover {
    text-decoration: underline;
}

Raamat: CSS

<< Lehekülje paigutamine ekraani keskele

Float >>

Sisukord