Asemointi ja CSS3 - luento 7
Tällä luennolla käsitellään sivun ulkoasun asemointia CSS:n avulla. Lisäksi käydään lyhyesti läpi CSS Mobile profile ja CSS3.
Luentotaltiointi
- www07.mp3 16M
- www07.wmv 84M
- www06.wmv (viime keväältä) 39M
Visuaalinen muotoilu ja asemointi
CSS2 antaa erilaisia mahdollisuuksia WWW-sivujen visuaaliseen muotoilemiseen. Seuraavaan on koottu lyhyeksi listaksi erilaisia asioita, joita kannattaa miettiä jo sivun suunnitteluvaiheessa, jotta vältyttäisiin ylimääräisiltä ongelmilta sivun toteutusvaiheessa.
- Mieti erilaisten sivun elementtien (navigointi, koristeet, sisältö) paikat tarkkaan.
- Jaa sivun rakenne loogisiin lohkoihin. Lohkorakenne voi olla esimerkiksi seuraava:
- Yläreunassa on lohko perusnavigoinnille ja ylätunnistetiedoille.
- Sivun alaosa muodostuu kahdesta lohkosta.
- Vasemmassa reunassa on tarkempi linkkilista asiakirjan sisältöön.
- Oikeassa reunassa on sivun varsinainen sisältö.
- Jokainen edellisistä lohkoista kannattaa merkitä omaksi lohkokseen div-elementillä. Tällöin lohkon käsittely on helpompaa.
- Jos jokin lohko halutaan asemoida absoluuttisesti, niin myös kaikki muut lohkot kannattaa yleensä asemoida.
Sivun sisällön asetteluun voidaan käyttää seuraavia ominaisuuksia.
- float- ja clear-ominaisuudet, joilla voidaan liu'uttaa sivun osia oletuksesta poikkeavasti.
- position, top, bottom, right, left ja z-index-ominaisuudet.
Asemointiin liittyviä ominaisuuksia
position-ominaisuudella voidaan määritellä kuinka elementti sijoittuu näytölle. Erilaisia arvoja ovat seuraavat:
- static-määrittää sijoittumisen normaaliksi elementin normaaliin paikkaan nähden.
- relative-määrittää sijoittumisen suhteelliseksi elementin normaaliin paikkaan nähden.
- absolute-määrittää sijoittumisen absoluuttisesti sivulle. Sijoittuminen lasketaan sen asemoidun lohkon paikan suhteen, jossa lohko sijaitsee.
- fixed-kiinnittää positioinnin siten, että elementtiä ei vieritetä näytöllä. Muutoin sijoittuminen on sama kuin absolute määrityksellä. fixed-kiinnitetty elementti voi toimia esimerkiksi tulostettavien sivujen ylä- tai alatunnistetietoina.
- inherit-määrittää elementin sijoittumisen periytyväksi.
Positioinnin yhteydessä määritellään usein myös seuraavat ominaisuudet:
- top-ominaisuudella voidaan määritellä elementin etäisyys yläreunasta.
- bottom-ominaisuudella voidaan määritellä elementin etäisyys alareunasta.
- left-ominaisuudella voidaan määritellä elementin etäisyys vasemmasta reunasta.
- right-ominaisuudella voidaan määritellä elementin etäisyys oikeasta reunasta.
- z-index-ominaisuudella voidaan määritellä elementin taso ruudulla. Mitä suurempi arvo, niin sitä lähempänä elementti on käyttäjää.
Seuraavassa muutamia esimerkkejä asemoinnista
- Erilaisia asemointeja
- asemointi.html - lähdekoodi
- asemointi.css - lähdekoodi
- Suhteellinen (engl. relative) asemointi, jossa elementti sijoitetaan
top
-,left
-,right
- jabottom
-ominaisuuksilla suhteutettuna normaaliin sijaintiinsa..up { position: relative; top: -1em; }
- relative.htm-lähdekoodi
- relative.css-lähdekoodi
- Absoluuttinen (engl. absolute) asemointi, jossa
elementti sijoitetaan
top
-,left
-,right
- jabottom
-ominaisuuksilla absoluuttisesti isä-elementin sisälle välittämättä normaalista sijainnista.
Asemoitu elementti vierii dokumentin sisällön mukana..vasenylanurkka { position: absolute; top: 10%; left: 10%; width: 30%; height: 10%; }
- Kiinnitetty (engl. fixed) asemointi, jossa
elementti sijoitetaan
top
-,left
-,right
- jabottom
-ominaisuuksilla absoluuttisesti isä-elementin sisälle välittämättä normaalista sijainnista.
Asemoitu elementti EI vieri dokumentin sisällön mukana..vasenylanurkka { position: fixed; top: 10%; left: 10%; width: 30%; height: 10%; }
- navbar.htm - lähdekoodi
- navbar.css - lähdekoodi
- z-index
ominaisuudella voidaan määritellä elementin taso ruudulla.
Mitä suurempi arvo, niin sitä lähempänä elementti on käyttäjää.
- z-level.htm - lähdekoodi
- z.css - lähdekoodi
- Kikkailua asemoinnilla, z-indexillä ja hoverilla. (Toimii oikein Mozilla 1.1:ssä)
- palikat.html - lähdekoodi
- palikat.css - lähdekoodi
Muutamia float- ja clear- ominaisuuteen liittyviä esimerkkejä
- Elementtejä rinnakkain
- Rinnakkaisuuden esto
- Sarakejako
- Liukuva sarakkeiden määrä esim. kuvagalleriassa
- Lomake
Esimerkki
Muokataan yliopiston kotisivu siistiin xhtml-muotoon ja määritellään uusitun version ulkoasu css:n avulla. Lähdekoodi:
Sivujen rakennetta voi vertailla seuraavien kuvien avulla:
Käyttäjien kommentit