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.

Keskitys

Keskittäminen vaatii erilaisia toteutustapoja riippuen siitä minkälainen keskitettävä sisältö on kyseessä. Yleisimmät temput käydään läpi dokumentissa Centering things

Tyypillinen ongelma on saada keskitettyä esim. kuvateksti tai jokin muu asia. Jos keskittämistä ei tehdä koko normaalin lohkon sisällä niin pitää hieman kikkailla. Tavallisen lohkon, jonka display-tyyppi on block, leveys on yleensä 100% eli kaikki käytettävissä oleva tilat. Jos muutetaan elementin esitystavaksi display: inline-block niin elementti käyttäytyy sisäisesti kuin lohko, mutta asemoituu muuten kuten inline-elementit. Tässä tapauksessa elementin koko voidaan määritellä tai se määrittyy itsestään sisältönsä mukaan.

Hämähäkki
Hämähäkki
<figure class="inlineblock">
   <img src="http://appro.mit.jyu.fi/2002/syksy/tietoverkot/luennot/luento3/hamis.jpg" alt="Hämähäkki" />
    <figcaption>Hämähäkki</figcaption>
</figure>

seuraavalla css-koodilla saat otsikon keskelle:

.inlineblock {
  display: inline-block; 
  text-align: center;"
}

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/>
2018-11-02 13:46:49
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta