Asemointi CSS:n avulla

Tällä luennolla käsitellään sivun ulkoasun asemointia CSS:n avulla.

luentomalli.html, luentomalli.css

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ä myös elementtien marginaaleilla, float-ominaisuudella, Flexbox-ominaisuudella, Grid-ominaisuudella ja position-ominaisuudella. Tällä kurssilla käydään läpi float- ja flexbox-ominaisuuksien käyttäminen.

Liu'utus (float)

float-ominaisuudella voidaan irrottaa lohko normaalista dokumenttivirrassa ja liu'uttaa se vasempaan tai oikeaan laitaan. Muu sisältö tulee floatatun lohkon rinnalle.

Kuvien liu'utus (esimerkki)

Lisätietoa: float- ja clear-ominaisuudet

Flexbox-asemointi

Flexbox on uusin ja ehkä myös kätevin tapa tehdä asemointia

Perusongelma asemoinnin kanssa on saada aikaan monisarakkeinen sivusommittelu mutta Flexbox tekee tämän helposti.

Asemointiesimerkkejä

Asemoinnin suunnittelu

CSS antaa useita erilaisia mahdollisuuksia WWW-sivujen visuaaliseen muotoilemiseen. Käytetystä tavasta huolimatta sivu kannattaa suunnitella seuraavan ohjeistuksen mukaan:

Lisätietoa

Käyttäjien kommentit

Kommentoi Lisää kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/itkp1011/luennot/css-asemointi/
© Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
2017-09-22 16:52:43
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta