Keskustelu: Nettisivujen teko: Apua CSS asetteluun?

Terve! Taas olen vaiheeksi netti sivujen parissa ja pienen kokemukseni tähden ajattelin kysyä pientä apua CSS-asettelusta alan guruilta. Ei oikeen osaa ajatella, että millä tavalla asettelu hoituisi parhaiten?

asettelu:

*
*
*
sivun reunat:
____________________________________________________
                                                    I
                                                    I
                                                    I
                                                    I
                                                    I
        ___________________                         I
        I                 I OTSIKKO1                I
        I                 I                         I
        I    KUVA1        I  linkkikuva+ sanaA      I
        I                 I  linkkikuva+ sanaB      I
        I                 I  linkkikuva+ sanaC      I
        I                 I                         I
 _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _I
navi1     navi2      navi3      navi4       navi5   I
_____________________________________________________
*
*
*
*

Kannattaako mun esimerkiksi määritellä KUVA1 floatiksi ja antaa kellua sen navigointi palkin päällä?

Tai kannattaako tuosta linkkikuva+sana sarjasta tehdä yksi div lohko, jonka sisältö on jaettu kolmeen pienempään lohkoon. Näiden pienempien lohkojen sisälle sitten ahtaa kuvat ja sanat?
Tarkoituksena olisi, että kursorin vietäessä lohkon päälle, sekä kuvan, että kirjoituksen päälle tulisi kehykset.

Kiitokset jo etukäteen!

Kuva1:lle float ja margin-leftiä jos et keskitä margin: 0 auto; jotakin ulompaa elementtiä, oikeanpuoleisen alueen diville taas margin-leftiä Kuva1:n edestä, linkkikuvat saat tehtyä tavallisena listana josta poistat vähän ylimääräisiä tyylejä ja teet linkeistä lohkoelementtejä (display: block;). Kuvat voit sijoitella CSS:llä. Ulomman elementin ollessa käytössä voit tehdä:

#ulompi:after {
    clear: both;
    content: '';
    display: block;
}

jolloin saat varmasti seuraavan elementin alkamaan Kuva1:n alapuolelta jos oikeanpuoleinen alue ei ole tarpeeksi korkea.

Kiitokset neuvoista Merri! Lähdenpä näillä eväin vääntää koodia.

Kysäisen sitte taas lisää, jos joku kohta tuntuu mahdottomalta...

Moro, heräsi yksi kysymys, voiko div lohkosta tehdä linkin?
Jos ei, niin voiko lohkoon määritellä :hover ominaisuus?

Paulus M kirjoitti:

Moro, heräsi yksi kysymys, voiko div lohkosta tehdä linkin?
Jos ei, niin voiko lohkoon määritellä :hover ominaisuus?

Itse divistä ei voi ilman javascriptiä saada klikattavaa, mutta seuraavalla kikalla onnistuu ilman javascriptiä:

.laatikko a {
 display: block;
 height: 200px;
 width: 200px;
 border: 1px solid #000;
}

<div class="laatikko">
 <a href="sivu.html"></a>
</div>

Periaatteessa :hover toimii kaikenlaisissa elementeissä, mutta käytännössä ainakaan aiemmat IE:t eivät taida tukea sitä kuin linkeissä.

Kiitokset jälleen kerran avusta!

IE6-tuki vain linkeissä, IE7 tukee kaikkiin elementteihin. Käytännössä div:hover on käyttökelpoinen. Jos kuitenkin tarkoitus on tarjota linkki, niin sitten ehdottomasti linkille display: block; (tai ehkä jopa inline-block).