Vidim da ima dosta pitanja oko css-aaa. Pa da pokušamo neke osnovne stvari objasniti.

Prvo par riječi o najbitnijem elementu u strukturi blogera.

div
Sintaksa: <div>Sadržaj</div>
Blok element (što znači da zatvara nevidljivi pravokutnik oko sadrľaja i rasteľe se 100% u širinu osim ako nije drugačije određeno stilom)

Sve kontrole blogera smještene su unutar par div elemenata.

Kako to izgleda u praksi na primjeru html kontrole.
<!-- html control -->
<div class="html html_21">
    <div class="blog_ctrl">
        <div class="ch">
            <div>Naslov</div>
        </div>

        <div class="ctl_body">
        Sadrľaj
        </div>
    </div>
</div>
<!-- /html control -->

Zadebljani su nazivi klasa. Vanjski div ima dvije klase html i html_21 .
Klasom html selektiraju se SVE html kontrole na stranici a klasom html_21 specifična html kontrola.
Svaka html kontrola ima različit broj (u ovom slučaju 21) kod zadnje spomenute klase. Kako doći do tog broja?
View source.

®elim dakle malo stilizirati html kontrolu koja uz html u ima i klasu html_21.

Selektor za naslov bi bio
.html_21 .ch

Selektor za body kontrole
.html_21 .ctl_body

Mijenjam boju pozadine i boju slova u naslovu
.html_21 .ch {background-color:#000; color:#fff}

Mijenjam boju pozadine u body kontrole
.html_21 .ctl_body {background-color:#000}

Bitno je napomenuti i to da unutarnje klase (popularna djeca) nasljeđuju svojstva od svojih roditelja.
Ako promjenim pozadinu na klasi .html_21 onda će sva djeca od .html_21 naslijediti tu pozadinu.

To be continued...

TagList modul može se iskoristiti i kao horizontalni izbornik uz malo css-a (vidi izbornik ispod Naslovnica na ovom blogu).

Postoje dva preduvjeta:

• #blog_width (div u kojem je cijeli blog)  treba postaviti relativno
• TagList modul mora biti uključen (i sadržavati tagove)

Dakle, pod 1
#blog_width {position:relative}

Time postižemo da svi elementi unutar #blog_width koji su pozicionirani apsolutno imaju polazišnu točku u gornjem lijevog uglu tog elementa. Postavimo li nekom elementu unutar #blog_width apsolutnu poziciju (position:absolute;top:0px;left:0px), dotični će se pozicionirati u lijevom gornjem uglu #blog_width elementa.

Sljedeća stvar je napraviti mjesta za naš novi izbornik. Proširit ćemo header bloga tako da napravimo 25px dodatnog prostora na dnu istog.
#blog_header {height: prijašnja vrijednost + 25px} (u mom slučaju 370px ukupno)

Zatim ćemo u taj prostor pozicionirati TagList modul (u mom slučaju želim ga postaviti na udaljenost 352 pixela od vrha i 10 pixela od lijevog ruba #blog_width elementa)
.taglist {position:absolute; top: 352px; left:10px}

Sad dolazi još malo stiliziranja TagList modula (koji je u osnovi unordered lista) i imamo izbornik.


Kompletan css kod u slučaju da je stranica širine 980px (kao ova)
#blog_width{width:980px; margin:0px auto; background-color:#ffffff; position:relative}

/* sakrij header kontrole */
.taglist .ch {display:none}

/* postavi taglist na poziciju 10,352 u odnosu na relativni div i obojaj pozadinu u zeleno */
.taglist {position:absolute; top:352px; left:10px; width:960px; background-color:#065B06}

/* makni eventualne margine i padding iz taglist kontrole */
.taglist .ctl_body {width:auto;margin:0px;padding:0px}
.taglist .blog_ctrl {margin:0px;padding:0px}

/* stiliziraj unordered listu */
.taglist ul { 
    font-family:verdana;
    font-size:11px;
    padding: 0px;
    margin: 0px;
    margin-left:20px;
    list-style: none; 
    color:#fff;
    height:25px;
    border-left:1px solid #077607;
    border-bottom:1px solid #000;
}

.taglist ul li {
    float: left;
    line-height:25px;
    height:25px;
    margin-right:1px;
    border-right:1px solid #077607
}

/* stilovi za link element unutar liste */
.taglist ul li a {padding:0 10px 0 10px;display:block; color:#f0f0f0; text-decoration:none}
.taglist ul li a:hover {background-color:#054B05; color:#f0f0f0}

/* sakrij broj postova */
.taglist ul li em {display:none}