Layoutin määrittely position-ominaisuudella
Position-ominaisuus
Layoutin rakentamisessa float-elementin ohella erityisen hyödyllinen on position. Ominaisuudelle annetaan arvoksi elementin sijoittelu
- suhteessa sen luonnolliseen sijaintiin (relative)
- suhteessa koko dokumenttiin (absolute)
- suhteessa selainikkunaan (fixed) – elementti pysyy paikallaan, vaikka sivua vieritetään TAI
- luonnollisella paikallaan (static)
Tätä ominaisuutta käytetään yleensä aina yhdessä sijainnista kertovien ominaisuuksien left, top, right ja bottom kanssa. Sijaintiominaisuudet määrittävät elementin reunan etäisyyden sen sisältävän elementin/dokumentin/selainikkunan reunasta.
Arvoilla absolute ja fixed sijoiteltu elementti poistuu samalla elementtien "luonnollisesta virrasta". Toisin sanottuna niiden jälkeen html-dokumentissa tuleva sisältö sijoittuu aivan kuin näitä elementtejä ei olisi olemassakaan.
Absoluuttinen sijoittelu (absolute)
Esimerkki. Määritellään sivuston kielivalinnat sisältävä div-elementti (#lang) sijaitsemaan sivu oikeassa ylänurkassa 10 pikselin päässä reunoista.
#lang {
position:absolute;
top:10px;
right:10px
}
Huom! Tämän olisi voinut tehdä myös määrityksellä float:right ja määrittämällä tyylissä marginaalit oikealle ja ylös.
Tehtävä 1
- Tallenna kansiosta http://users.jyu.fi/~tatjana/htkp315/position/ löytyvät tiedostot koneellesi.
- Lisää sivustolle taustakuva, joka toistuu oikeassa reunassa pystysuunnassa.
- Määritä otsikon jälkeen tulevien div-elementtien (#laatikot) absoluuttinen sijainti niin, että oikealle jää taustakuvan verran tilaa.
Tehtävä 2
- Tallenna kansiosta http://users.jyu.fi/~tatjana/htkp315/position/ löytyvät tiedostot koneellesi.
- Määritä otsikkopalstalle (#otsikko) absoluuttinen korkeus ja pystypalstoille (#navi ja #sisalto) absoluuttiset leveydet makusi mukaan. (Ks. lisätietoa mittayksiköistä).
- Määritä pystypalstoille absoluuttiset sijainnit suhteessa dokumentin yläreunaan ja sivuihin nykyisen float-ominaisuuteen perustuvan asemoinnin sijaan.
Sijoittelu suhteessa selainikkunaan (fixed)
Esimerkki. Sivulla on pystynavigaation sisältävä div-elementti, joka halutaan sijoittaa vasempaan reunaan niin, että se pysyy paikallaan, vaikka sivua vieritetään.
#navi {
position:fixed;
top:0;
left:0;
}
Tehtävä 3
- Tallenna kansiosta http://users.jyu.fi/~tatjana/htkp315/position/ löytyvät tiedostot koneellesi.
- Muokkaa sivun otsikon sisältävän div-elementin tyyliä (#otsikko) niin, että otsikko pysyy paikallaan, vaikka sivun sisältöä vieritetään. Määritä otsikon leveydeksi 100 %.
- Muokkaa vielä otsikon jälkeen tulevan sisällön (#laatikot) tyyliä niin, että se ei jää otsikon alle. Tätä tarkoitusta varten sinun tulee (1) ensin määrittää otsikon sisältävälle div-elementille jokin korkeus, jota (2) voit sitten käyttää #laatikot-tyylissä ylämarginaalina TAI määritellä sen avulla #laatikot-tyylin absoluuttisen sijainnin.
Materiaalin on laatinut Tanja Välisalo.