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.

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

Kuvien liu'utus (esimerkki)

• float
• clear

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

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.

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

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.