Sivun asemointi CSS:llä - Demo 4

• Mallivideot
• Sivun asemointi CSS:llä käyttäen float-ominaisuutta
  • XHTML-sivun tekeminen pohjalle
  • Tyylitiedoston tekeminen
  • Testaus
• Sivun asemointi CSS:llä käyttäen position:fixed-arvoa
  • XHTML-sivun tekeminen pohjalle
  • Tyylitiedoston tekeminen
  • Testaus
• Lisätehtäviä
  • Sivun asemointi CSS:llä käyttäen reunuksia (suositeltava lisätehtävä)
  • Taustakuvan lisääminen lohkoihin taustavärin sijasta

Näissä demoissa opetellaan sivun asemointia CSS:llä.

Sivun asemointi CSS:llä käyttäen float-ominaisuutta

Tässä tehtävässä on tarkoitus tehdä vaiheittain oikealla näkyvän kuvan kaltainen sivun asemointi käyttäen hyväksi CSS:n float-ominaisuutta.

XHTML-sivun tekeminen pohjalle

Ohjeita XHTML-sivun tekemiseen löydät luennolta 1 ja luennolta 2.

1. Tee W-asemallesi kansio nimelle demo4.
2. Aloita tekemällä tyhjä XHTML-sivu, jossa on standardin mukainen XHTML-dokumentin rakenne. Anna dokumentin nimeksi float.html.
3. Määritä dokumentti käyttämään float.css-nimistä tyylitiedostoa samasta kansiosta, missä float.html-tiedostokin sijaitsee (tyylitiedosto tehdään myöhemmin tässä tehtävässä).
4. Lisää dokumenttiin seuraavan nimiset div-lohkot (laita nimi lohkon class-attribuutin arvoksi) ja niihin sisältöä (tekstiä) esimerkiksi mallikuvan mukaisesti. Sisältölohkossa kannattaa käyttää p-elementtiä kappalejakoon. Myös navigointilohkoissa voit käyttää p-elementtiä rivittämään linkkitekstit omille riveilleen. Lohkojen järjestys XHTML-koodissa tulee olla seuraavan listan kaltainen.
   • ylatunniste (sisältää ylätunnisteen sisällön)
   • vasennavi (sisältää vasemman navigointipalkin sisällön)
   • sisalto (sisältää sivun varsinaisen sisällön)
   • oikeanavi (sisältää oikean navigointipalkin sisällön)
   • alatunniste (sisältää alatunnisteen sisällön)
5. Voit lisätä sivulle vielä title-elementin, jonka teksti voi olla esimerkiksi Demo 4 mallisivu - Asettelu float-ominaisuuden avulla.

Tyylitiedoston tekeminen

Ohjeita tyylien määrittämiseen löydät luennolta 3 (taustaväri, täyte ja marginaali), luennolta 4 (leveys ja korkeus) ja luennolta 5 (float ja clear).

1. Luo tyhjä tyylitiedosto nimelle float.css.
2. Tee tyylitiedostoon vastaavan nimiset luokat, jotka annoit div-lohkoille. Tyylitiedostoa kannattaa muokata esimerkiksi edellisten demojen tapaan Web Developerin Edit CSS -valinnan avulla ja tallentaa lopussa muutokset myös itse tyylitiedostoon.
3. Muotoillaan ensin ylatunniste-luokkaa. Laita luokalle taustaväriksi #FFFF99 ja leveydeksi 98%. Täyte (padding) tulee olla ylhäällä ja alhaalla 0.5em. Vasemmalla ja oikealla täytteen tulee olla 1% (näin viedään kokonaisuudessaan koko selainikkunan leveys). Korkeudeksi voit laittaa 3em. Marginaalit (margin) kannattaa nollata varmuuden vuoksi.
4. Muotoillaan seuraavaksi vasenta navigointipalkkia (vasennavi). Se on tarkoitus liu'uttaa selainikkunan vasempaan reunaan, joten laita float-arvoksi left. Taustaväriksi laita #99CCFF ja leveydeksi 23%. Täyte (padding) tulee olla ylhäällä ja alhaalla 0.5em. Vasemmalla ja oikealla täytteen tulee olla 1% (näin viedään kokonaisuudessaan 25% selainikkunan leveydestä). Marginaalit (margin) kannattaa nollata varmuuden vuoksi.
5. Muotoillaan seuraavaksi sisalto-luokkaa. Luokka on tarkoitus liu'uttaa vasemman navigointilohkon viereen, joten laita sillekin float-arvoksi left. Taustaväriksi laita #CCCCFF ja leveydeksi 48%. Täyte (padding) tulee olla ylhäällä ja alhaalla 0.5em. Vasemmalla ja oikealla täytteen tulee olla 1% (näin viedään kokonaisuudessaan 50% selainikkunan leveydestä). Marginaalit (margin) kannattaa nollata varmuuden vuoksi.
6. Muotoile seuraavaksi oikeanavi-luokka kuten vasennavi-luokka. Ainoastaan taustaväriä tarvitsee muuttaa. Laita taustaväriksi #FF99CC. Huomaa, että oikea navigointipalkkikin siis tulee liu'uttaa vasempaan reunaan, jotta kaikki kolme lohkoa saadaan rinnakkain. Yhteensä lohkot vievät koko selainikkunan verran (100%) tilaa leveyssuunnassa.
7. Muotoile lopuksi alatunniste-luokka kuten ylatunniste-luokka. Muuta taustavärin arvoksi #66FF99. Lisäksi laita luokalle clear-ominaisuus, jonka arvo laita siten, että luokan kummallekaan puolelle ei saa tulla muita lohkoja.

Testaus

Nyt sivusi pitäisi olla suunnilleen mallikuvan kaltainen. Testaa sivua eri selaimilla. Kokeile muotoilla CSS-tiedostoa esimerkiksi siten, että vasen- ja oikea navigointipalkki veisivät kumpikin tilaa 33% ja sisältöosuudelle jäisi loput 34%. Voit myös kokeilla muuttaa esimerkiksi ylä- tai alatunnisteen korkeutta. Kokeile myös muuttaa selainikkunan kokoa, niin näet skaalautuuko sivu hyvin.

Sivun asemointi CSS:llä käyttäen position:fixed-arvoa

Tässä tehtävässä on tarkoitus tehdä vaiheittain oikealla näkyvän kuvan kaltainen sivun asemointi käyttäen hyväksi CSS:n position:fixed-arvoa. Ylä- ja alatunniste sekä molemmat navigointipalkit on asemoitu kiinteästi selainikkunaan, eli sivun varsinainen sisältö näkyy "kehyksien" sisällä ja siinä voi liikkua selainikkunan vierityspalkkien avulla.

XHTML-sivun tekeminen pohjalle

1. Tallenna edellisessä tehtävässä tekemäsi XHTML-tiedosto nimelle fixed.html.
2. Voit muuttaa lohkojen järjestyksen siten, että tärkeimmät tiedot ovat XHTML-tiedostossa ylimpänä (esimerkiksi sisalto-lohko ylimmäksi). position:fixed-arvoa käytettäessä lohkojen järjestyksellä ei ole merkitystä, joten järjestys kannattaa miettiä "tärkeysjärjestykseksi" esimerkiksi ääniselaimia (voivat lukea sivua ylhäältä alas) ja div-lohkoja ymmärtämättömiä selaimia varten.
3. Poista sisalto-lohkon div-elementti, mutta jätä sen sisältö ennalleen (eli tekstikappaleet ovat muutoksen jälkeen suoraan body-elementin "lapsia").
4. Muuta dokumentti käyttämään fixed.css-nimistä tyylitiedostoa samasta sijainnista, missä fixed.html-tiedostokin sijaitsee (tyylitiedosto tehdään myöhemmin tässä tehtävässä).
5. Voit muuttaa vielä title-elementin arvoksi esimerkiksi Demo 4 mallisivu - Asettelu position:fixed-arvon avulla.
6. Muita muutoksia ei tarvitse tehdä - lohkojen nimet, sisällöt yms. saavat pysyä entisellään.

Tyylitiedoston tekeminen

Ohjeita tyylien määrittämiseen edellisen tehtävän linkkien lisäksi löydät luennolta 5 (position ja z-index).

1. Tallenna edellisessä tehtävässä tekemäsi CSS-tiedosto nimelle fixed.css.
2. Muokataan ensin ylatunniste-luokkaa. Kaikki jo olemassa olevat arvot saavat jäädä luokkaan. Lisää luokalle position-ominaisuus ja anna sen arvoksi fixed. Sijoita lohko alkamaan selainikkunan vasemmasta yläkulmasta (anna sopivat top- ja left-arvot). Lisää vielä z-index-ominaisuus ja laita sille riittävän suuri arvo, joka pitää elementin päällimmäisenä.
3. Muokataan seuraavaksi alatunniste-luokkaa. clear-ominaisuuden voit poistaa, muut jo olemassa olevat arvot saavat jäädä. Määritä luokalle position:fixed-arvo siten, että lohko alkaa näytön vasemmasta alareunasta. Määritä myös z-index-arvo, jonka tulee olla positiivinen, mutta pienempi kuin ylatunniste-luokalla.
4. Seuraavaksi muotoillaan vasennavi-luokkaa. Poista luokalta float-ominaisuus ja muuta leveydeksi 15%. Lisää luokalle position:fixed-ominaisuus siten, että top-arvo on 4em ja left-arvo 0%. Näin lohko alkaa heti ylätunnisteen alareunasta. Määritä luokan korkeudeksi 100%.
5. Tee oikeanavi-luokkaan samat muutokset kuin vasennavi-luokkaan sillä muutoksella, että luokka alkaa näytön oikeasta reunasta (pystysuunnassa edelleen ylätunnisteen alareunasta).
6. Poista kokonaan sisalto-luokka CSS-tyylitiedostosta.
7. Määritä CSS-tyylitiedostoon body-elementille seuraavat ominaisuudet: kaikkien reunojen täyte (padding) 0.5em, marginaali (margin) ylhäällä ja alhaalla 4em sekä marginaali vasemmalla ja oikealla 17%. Näin body-elementin sisältö asettuu navigointien sekä ylä- ja alatunnisteiden väliin ilman, että tarvitsee käyttää erillistä luokkaa sisällölle.

Testaus

Nyt sivusi pitäisi olla suunnilleen mallikuvan kaltainen. Testaa sivua eri selaimilla. Kokeile muotoilla CSS-tiedostoa esimerkiksi siten, että vasen- ja oikea navigointipalkki veisivät kumpikin tilaa 25% ja sisältöosuudelle jäisi loput 50%. Voit myös kokeilla muuttaa esimerkiksi ylä- tai alatunnisteen korkeutta. Kokeile myös muuttaa selainikkunan kokoa, niin näet skaalautuuko sivu hyvin.

HUOM! Nyt harjoituksena tehty asemointi, missä kaikki neljä laitalohkoa kiinnitetään näyttöön EI ole yleensä järkevä, sillä näyttöön kiinnittäminen vie turhan paljon tilaa sivun varsinaiselta sisällöltä etenkin pienemmillä näytöillä (esimerkiksi miniläppärit). Järkevämpää olisi siis kiinnittää näyttöön esimerkiksi vain joko vasemman laidan tai oikean laidan lohko ja lisäksi joko ylätunniste tai alatunniste. Muut lohkot voisi laittaa vierimään sivun mukana, jolloin ne eivät vie niin paljon tilaa sivun varsinaiselta sisällöltä.

Internet Explorerin vanhemmissa versioissa (versio 6 ja vanhemmat) kiinnitetty asemointi ei toimi. Jos haluat varmistaa sivun järkevän ulkoasun vanhemmilla IE:n versioilla katso mallia FAQ:n ohjeesta.

Lisätehtäviä

Sivun asemointi CSS:llä käyttäen reunuksia (suositeltava lisätehtävä)

Tässä tehtävässä on tarkoitus tehdä vaiheittain oikealla näkyvän kuvan kaltainen sivun asemointi käyttäen hyväksi CSS:n reunuksia (border). Hyötynä on se, että kaikki kolme pystysuuntaista lohkoa saadaan samanpituisiksi (myös taustaväri jatkuu alas asti kaikissa lohkoissa), vaikkei tiedetä mikä lohko on pisin.

XHTML-sivun tekeminen pohjalle

1. Tallenna float-tehtävässä tekemäsi float.html-tiedosto nimelle reunus.html.
2. Vaihda div-lohkojen järjestys seuraavaksi (vasen ja oikea navigointilohko täytyy olla peräkkäin, jotta asemointi onnistuu). Lohkojen sisällöt voit pitää ennallaan.
   • ylatunniste
   • vasennavi
   • oikeanavi
   • sisalto
   • alatunniste
3. Muuta dokumentti käyttämään reunus.css-nimistä tyylitiedostoa samasta sijainnista, missä reunus.html-tiedostokin sijaitsee (tyylitiedosto tehdään myöhemmin tässä tehtävässä).
4. Voit muuttaa vielä title-elementin arvoksi esimerkiksi Demo 4 mallisivu - Asettelu reunuksien avulla.
5. Muita muutoksia ei tarvitse tehdä, eli voit alkaa muokkaamaan tyylitiedostoa.

Tyylitiedoston tekeminen

Ohjeita tyylien määrittämiseen edellisten tehtävien linkkien lisäksi löydät luennolta 3 (elementin raja eli reunus) ja luennolta 4 (pseudo- eli näennäisluokat, content ja display).

1. Tallenna float-tehtävässä tekemäsi float.css-tiedosto nimelle reunus.css.
2. Muokataan ensin ylatunniste-luokkaa. Poista luokalta kokonaan leveys ja korkeus. Lisäksi muuta vasemman ja oikean reunan täytteen (padding) arvoksi 1em. Laita lisäksi lohkon alareunaan 1px:n levyinen yhtenäinen musta reunaviiva (border).
3. Muokataan seuraavaksi vasennavi-luokkaa. Muuta luokan leveydeksi 6em ja täytteeksi kaikkiin reunoihin 1em.
4. Muokkaa oikeanavi-luokkaa kuten vasennavi-luokkaa. Lisäksi muuta float-arvoa siten, että lohko liu'utetaan oikeaan reunaan vasemman sijasta.
5. Muokataan seuravaksi sisalto-luokkaa. Poista luokalta taustaväri, leveys ja liu'utus (float). Muuta täyte joka puolelle arvoon 1em. Lisää luokalle vasempaan ja oikeaan reunaan 8em:n levyinen yhtenäinen (solid) reunus, jonka väriksi laitat vasemmalle puolelle saman värin, mikä on vasemman navigointipalkin taustaväri ja oikealle puolelle vastaavasti oikean navigointipalkin taustavärin. Tällä määrityksellä myös liu'utetut navigointilohkot "jatkuvat" taustaväriltään alatunnisteeseen asti, vaikka ne olisivat sisältölohkoa lyhyempiä. Leveys 8em tulee navigointipalkin leveydestä (6em) + täytteistä (yhteensä 2em).
6. Lisää body-elementille leveydeksi 50em ja marginaaleiksi ylä- ja alareunaan 1em. Vasemman ja oikean marginaalin voit laittaa arvoon auto, jolloin sisältö keskitetään selainikkunaan sivuttaissuunnassa. Lisää elementille vielä 1px:n musta yhtenäinen reunus kaikkiin reunoihin, niin sivu saa selkeämmän "ilmeen".
7. Muokataan vielä alatunniste-luokkaa. Poista luokalta leveys, korkeus ja clear-ominaisuus. Laita lohkon yläreunaan 1px:n levyinen yhtenäinen musta reunaviiva. Muuta lisäksi vasemman ja oikean reunan täytteen arvoksi 1em.
8. Ongelmana asettelussa olisi vielä se vaihtoehto, että jompikumpi (tai molemmat) navigointilohkoista olisi sisältölohkoa pitempi. Tällöin navigointilohkot jatkuisivat alatunnisteen yli. Ratkaisuna tähän tee sisalto-luokalle :after-pseudoluokka (.sisalto:after), jonka avulla pystytään määrittämään sisältöosuus jatkumaan tarvittaessa yhtä pitkälle kuin pisin navigointilohko. Laita luokalle ominaisuus, jolla lisäät luokan jälkeen sisältöön yhden välilyönnin (content: ' ';). Määritä luokan korkeudeksi 0 (height: 0;). Lisäksi laita luokka näkymään lohkotason elementin tavoin (display: block;). Lopuksi kiellä vielä clear-ominaisuudella liu'utettujen elementtien tuleminen luokan viereen. Elementtejä ei saa tulla kummallekaan puolelle (clear: both;). clear-määrityksellä nyt tehty sisältölohkon "jälkeinen sisältö" laskeutuu aina navigointipalkkien alapuolelle. Ja koska lohkon korkeudeksi asetettiin nolla ja sisältö tyhjäksi, sivulla ei todellisuudessa kuitenkaan näy mitään sisältölohkon alapuolella (paitsi tietenkin alatunniste, joka on oma lohkonsa).

Testaus

Nyt sivusi pitäisi olla suunnilleen mallikuvan kaltainen. Testaa sivua eri selaimilla. Kokeile muotoilla CSS-tiedostoa esimerkiksi siten, että vasen- ja oikea navigointipalkki veisivät kumpikin tilaa 10em ja koko sivu 60em. Kokeile myös, onnistuisiko vastaavan layoutin tekeminen prosenttiarvoilla (esimerkiksi vaihda body-elementin leveys prosenteilla määritellyksi), jolloin voitaisiin käyttää koko sivun leveys hyödyksi ja skaalautuvuus toimisi paremmin. Onnistuuko kokonaan vai pelkästään osittain?

Taustakuvan lisääminen lohkoihin taustavärin sijasta

Useasti esimerkiksi ylätunnistetta tai linkkipalkkeja koristellaan taustakuvilla (background-image). Esimerkiksi yrityksien sivuilla useasti laitetaan yrityksen logo ylätunnisteeseen. Ongelmia aiheuttaa usein se, että siistin lopputulokseen saadakseen lohkojen koot pitäisi määritellä pikseleillä, jotta kuva näkyisi koko lohkon alueella. Kuitenkin on mahdollisuus toistaa kuva vain kerran ja jatkaa loppu lohko vaikkapa taustavärillä. Tai kuvaa voidaan toistaa lohkossa, jolloin se täyttää koko lohkon.

Kokeile laittaa joku taustakuva (hae esimerkiksi Internetistä) jonkun tässä demossa tekemäsi tehtävän ylätunnisteeseen tai jompaan kumpaan navigointiin. Voit kokeilla eri vaihtoehtoja kuvan toistamiseen ja sijoitteluun. Jos aikaa ja mielenkiintoa riittää, voit myös muuttaa jonkun layoutin pikseleillä määritetyksi, jolloin voit testata taustakuvan asettamista siinä vaihtoehdossa.

Ohjeita taustakuvan määrittämiseen löydät erillisestä CSS1:n ominaisuuksia käsittelevästä dokumentista.