Layoutin määrittely float-ominaisuudella
Malli A: Vaakanavigaatio
Luodaan layout, jossa on otsikon alapuolella navigaatio vaakasuuntaisena palkkina ja sen alapuolella itse sivun sisältö.
- Lataa mallitiedostot mallisivu.html ja mallityylit.css osoitteesta http://users.jyu.fi/~tatjana/htkp315/ omaan erilliseen kansioonsa, esim. Malli A.
- Avaa mallitiedostot verkkosivueditorissa ja tutustu niiden sisältöön.
Olennainen on nyt html-tiedoston kohta:
<div id="navi">
<p>Etusivu</p>
<p><a href="#">Toiminta</a></p>
<p><a href="#">Säännöt</a></p>
<p><a href="#">Jäseneksi</a></p>
</div>
Sijoitetaan navigaatiolistan kohdat rinnakkain.
Vinkki: Tarvitset tässä tehtävässä uusia CSS-ominaisuuksia.
- Luo uusi tyyli, jolla muokkaat navigaatiolistan osia eli tekstikappaleita. Voit käyttää tähän merkintätapaa #navi p, jolla määrittelet siis navi-nimisen div-elementin sisällä olevia tekstikappaleita.
- Määritä float-elementin avulla hyperlinkin sisältävät tekstikappaleet asettumaan rinnakkain vasemmalta lähtien.
- Tallenna ja esikatsele dokumenttia www-selaimessa.
- Muokkaa sivun muun sisällön käsittävän div-elementin tyyliä #sisalto. Anna tyylille ominaisuus clear ja määritä sen avulla, että divin rinnalla ei saa olla kelluvia (float) elementtejä (eli clear:both).
- Määritä navigaation sisältävän divin tyylille ominaisuus overflow ja sille arvo hidden.
- Tarkastele dokumenttia sekä Internet Explorer- että Mozilla Firefox -selaimissa. Huomaat, että selaimet tulkitsevat marginaaleja hyvin eri tavoin.
- Poista oletusmarginaalit ja -täytteet koko tyylitiedostosta.
- Määritä kaikkien div-elementtien tyyleissä ja navigaatiolistan linkkien tyylissä (#navi p) jokin täyte, esim. 1 % tai 10 px. HUOM! Suhteellisen tai absoluuttisen täytteen valinta vaikuttaa siihen, kuinka paljon elementit vievät tilaa suhteessa toisiinsa. Kokeile selainikkunan pienentämistä, niin voit simuloida pienempää näyttöä.
#navi p {
float:left;
overflow:hidden;
padding: 1%;
}
Div-laatikot ulottuvat nyt sivun reunasta reunaan. Niitä kaikkia tai vain yhtä voitaisiin kuitenkin kaventaa ja keskittää width- ja margin-ominaisuuksilla. (Sivun sisällön keskittäminen on ohjeistettu kurssimateriaalissa jo aiemmin.)
Malli B: Pystynavigaatio
Luodaan layout, jossa on otsikkopalkin alla kaksi palstaa, joista toisessa on navigaatio.
- Lataa jälleen mallitiedostot mallisivu.html ja mallityylit.css osoitteesta http://users.jyu.fi/~tatjana/htkp315/ omaan erilliseen kansioonsa, esim. Malli B.
- Anna navigaation sisältävän div-elementin tyylille (#navi) leveys ja määritä se float-ominaisuuden avulla vasempaan reunaan.
- Anna #sisalto-tyylille leveys ja määritä se float-ominaisuuden avulla navigaation rinnalle.
Huomaa, että elementtien leveyksien on oltava yhteensä korkeintaan 100 %, jotta ne mahtuvat näytölle rinnakkain. Tähän leveyteen lasketaan mukaan myös mahdolliset täytteet ja marginaalit.
Asettelussa voidaan vielä tehdä hienosäätöä. Luodaan tilaa div-laatikoiden välille.
- Lisää #navi-tyylille hieman oikeata marginaalia. Muista kaventaa jomman kumman div-laatikon leveyttä samassa suhteessa: jos annat #naville oikeaa marginaalia 1 %:n, vähennä joko sen tai #sisallon leveyttä 1 %.
- Lisää molemmille div-laatikoille täytettä, niin teksti ei ole aivan kiinni laatikon reunoissa. Muista jälleen kaventaa laatikoiden leveyttä samassa suhteessa. Huomaa, että esim. määritys padding: 1% vie tilaa 1 %:n molemmista reunoista, yhteensä siis 2 %.
Malli C: Kolme palstaa
Jatketaan äskeisten dokumenttien muokkausta.
- Tallenna dokumentit uudelleen uuteen kansioon, esim. Malli C.
- Määritä #sisalto-divin sisällä olevat kaksi div-elementtiä (#teksti ja #yhteys) kellumaan rinnakkain, kuten äsken tehtiin #sisalto- ja #navi-diveille.
Huom! Div-tyylien #teksti ja #yhteys suhteellinen leveys on jälleen yhteensä korkeintaan 100 %. Esim. #teksti-diville annettu leveys 75 % olisi 75 % #sisalto-divin leveydestä. Leveys ilmaistaan siis suhteessa siihen elementtiin, jonka sisällä määriteltävä elementti on.
Huom! Kun li-elementtejä asetetaan rinnakkain, käytetään float-ominaisuuden sijaan display-ominaisuutta.
Materiaalin on laatinut Tanja Välisalo.