Asemointi CSS:n avulla - Luento 5

• Luentotaltiointi
• Asemointi
  • Asemointi position-ominaisuudella
• 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. Lisäksi alussa käydään nopeasti läpi viime luennolla kesken jääneitä asioita.

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

Kuvien liu'utus (esimerkki)

• float
• clear

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%;
}

Vierivä kehyksien korvike

• abs.htm - lähdekoodi
• abs.css - lähdekoodi

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
  • columns.htm
  • columns.css
• Liukuva sarakkeiden määrä esim. kuvagalleriassa
  • galleria.html
  • kuvagalleria.css
• Lomake
  • form.htm
  • form.css
    

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.