Layoutin määrittely float-ominaisuudella

tekijä: Tanja Tuulikki Välisalo — Viimeisin muutos keskiviikko 10. joulukuuta 2014, 15.15

Harjoituksia erilaisista layout-malleista

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&auml;&auml;nn&ouml;t</a></p>
      <p><a href="#">J&auml;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.

Hyperlinkit sijoittuvat nyt rinnakkain, mutta myös sivun muun sisältö asettuu navigaatiolistan rinnalle. Korjataan asia.

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).

Vaakanavigaatiosta puuttuu siinä aiemmin ollut taustaväri. Kun div-elementin sisällä oleville elementeille annetaan float-ominaisuus, se vaikuttaa taustavärin toistumiseen selaimessa. Korjataan asia.

Määritä navigaation sisältävän divin tyylille ominaisuus overflow ja sille arvo hidden.

Nyt muotoilut ovat valmiita. Vielä voidaan kuitenkin tehdä ulkoasun hienosäätöä riippuen halutusta lopputuloksesta.

Tarkastele dokumenttia sekä Internet Explorer- että Mozilla Firefox -selaimissa. Huomaat, että selaimet tulkitsevat marginaaleja hyvin eri tavoin.

Jos halutaan värilliset div-laatikot aivan kiinni toisiinsa kaikissa selaimissa, noudatetaan aiemmin esiteltyä neuvoa oletusmarginaalien poistamisesta.

Poista oletusmarginaalit ja -täytteet koko tyylitiedostosta.

Nyt div-laatikot ulottuvat myös Internet Explorer -selaimessa reunasta reunaan ja ovat pystysuunnassa kiinni toisissaan, mutta myös teksti näyttää varsin ahtaalta.

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öä.

CSS näyttää nyt tältä:

#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.