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.
Luentotaltiointi
Ongelmia videon katselussa?Käsitellään ensin kuitenkin display-ominaisuus, jota ei ehditty käydä läpi edellisellä luennolla.
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 CSS 2.1:sen 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.
Lisätietoa: position-ominaisuus
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ää.
Lisätietoa: position-ominaisuuden kanssa tarvittavat ominaisuudet
Liu'utus
Lisätietoa: float- ja clear-ominaisuudet
Absoluuttinen asemointi (engl. absolute positioning)
Absoluuttisessa
(engl. absolute) asemoinnissa elementti sijoitetaan top
-,
left
-, right
- ja bottom
-ominaisuuksilla
absoluuttisesti tai kiinteästi asemoidun äiti-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.
Paljon tilaa vieviä lohkoja ei yleensä kannata kiinnittää näyttöön, koska ne vievät paljon tilaa sivun muulta sisällöltä.
Kiinnitetty asemointi ei toimi Internet Explorerissa 6:ssa, mutta versioissa 7-9 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ää. Ominaisuus toimii vain position-asemoitujen lohkojen kanssa.
- 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
CSS 2.1 (ja toki jo CSS2) antaa useita erilaisia mahdollisuuksia WWW-sivujen visuaaliseen muotoilemiseen. Käytetystä tavasta huolimatta sivu kannattaa suunnitella seuraavan ohjeistuksen mukaan:
- Mieti erilaisten sivun elementtien (navigoinnit, 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 mielellään (jos mahdollista) koko sivun pääasemointi float-ominaisuudella.
- Asemoitujen/leijutettujen lohkojen sisällä voi edelleen käyttää asemointia tai float-ominaisuutta.
Käyttäjien kommentit