Asemointi CSS:n avulla - Luento 5
- Luentotaltiointi
- Asemointi
- Liu'utus
- Absoluuttinen asemointi (engl. absolute positioning)
- Kiinnitetty asemointi (engl. fixed positioning)
- Suhteellinen asemointi (engl. relative positioning)
- Asemointi z-suunnassa
- Asemointiesimerkkejä
- Asemoinnin suunnittelu
Tällä luennolla käsitellään sivun ulkoasun asemointia CSS:n avulla.
Asemointi
Normaalisti block-level-elementit järjestyvät allekkain äitilohkon vasempaan laitaan ja inline-elementit vierekkäin, kunnes äitilohkon leveys on täyttynyt. CSS-ominaisuuksilla voidaan kuitenkin irrottaa tietyt elementit perusjärjestyksestä ja asemoida ne sivulle uuteen paikkaan.
Asemointia voidaan tehdä taulukoilla (ei suositeltava), elementtien marginaaleilla, float-ominaisuudella ja CSS2:n position-ominaisuudella. Myös kehyksien (engl. frame) käyttöä voitaisiin ajatella asemointina, mutta niiden käyttö ei ole sallittua mm. esteettömyys- ja saavutettavuusongelmien vuoksi.
Asemointi position-ominaisuudella
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 äiti-elementin paikan ja koon suhteen, jossa lohko sijaitsee.
- fixed-kiinnittää positioinnin siten, että elementtiä ei vieritetä näytöllä ja positiointi tapahtuu aina koko näytön suhteen eikä äiti-elementin suhteen.
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ää.
Liu'utus
Absoluuttinen asemointi (engl. absolute positioning)
Absoluuttisessa
(engl. absolute) asemoinnissa elementti sijoitetaan top
-,
left
-, right
- ja bottom
-ominaisuuksilla
absoluuttisesti tai kiinteästi asemoidun isä-elementin sisällä välittämättä
normaalista sijainnista.
Absoluuttisesti asemoitu elementti vierii dokumentin sisällön mukana.
.vasenylanurkka {
position: absolute;
top: 10%;
left: 10%;
width: 30%;
height: 10%;
}
Kiinnitetty asemointi (engl. fixed positioning)
Kiinnitetyssä
(engl. fixed) asemoinnissa elementti sijoitetaan top
-, left
-,
right
- ja bottom
-ominaisuuksilla absoluuttisesti näyttöalueen sisällä.
Asemoitu elementti EI vieri dokumentin sisällön mukana.
Kiinnitetty asemointi ei toimi Internet Explorerissa 6:ssa, mutta versiossa 7 toimii.
.vasenylanurkka {
position: fixed;
top: 10%;
left: 10%;
width: 30%;
height: 10%;
}
Kiinnitetty asemointi -esimerkki
- navbar.htm - lähdekoodi
- navbar.css - lähdekoodi
Suhteellinen asemointi (engl. relative positioning)
Suhteellisessa
(engl. relative) asemoinnissa, elementti sijoitetaan top
-, left
-,
right
- ja bottom
-ominaisuuksilla suhteutettuna normaaliin sijaintiinsa.
.up {
position: relative;
top: -1em;
}
- relative.htm-lähdekoodi
- relative.css-lähdekoodi
Asemointi z-suunnassa
z-index ominaisuudella voidaan määritellä elementin taso ruudulla. Mitä suurempi arvo, niin sitä lähempänä elementti on käyttäjää.
- z-index.html - lähdekoodi
- z-index.css - lähdekoodi
Asemointiesimerkkejä
- Erilaisia asemointeja
- asemointi.html - lähdekoodi
- asemointi.css - css
- Sarakejako
- Liukuva sarakkeiden määrä esim. kuvagalleriassa
- Lomake
Asemoinnin suunnittelu
CSS2 antaa useita erilaisia mahdollisuuksia WWW-sivujen visuaaliseen muotoilemiseen. Käytetystä tavasta huolimatta sivu kannattaa suunnitella seuraavan ohjeistuksen mukaan:
- 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ä div-elementillä.
- Jos jokin lohko halutaan asemoida absoluuttisesti/kiinteästi, niin myös kaikki muut lohkot on syytä asemoida.
- Jos aiot käyttää yhteen lohkoon float-ominaisuutta, niin tee koko sivun pääasemointi float-ominaisuudella.
- Asemoitujen/leijutettujen lohkojen sisällä voi edelleen käyttää asemointia tai float-ominaisuutta.
Käyttäjien kommentit