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 tila. 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;
}

text-align-ominaisuus toimii järkevästi vain lohkoissa (block tai inline-block). Jos yrität asettaa text-align-ominaisuutta esim. strong-elementti, joka on tyypiltään tekstitason elementti eli inline niin mitään ei tapahdu.

Asemointiesimerkkejä

Asemoinnin suunnittelu

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

Asemointi position-ominaisuudella

position-ominaisuudella voidaan määritellä kuinka elementti sijoittuu näytölle. Käytä position-ominaisuutta vain erikoistapauksissa. Erilaisia arvoja ovat seuraavat:

Lisätietoa: position-ominaisuus

Positioinnin yhteydessä määritellään usein myös seuraavat 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%;
}

Esimerkki

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

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

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.

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/>
2019-02-12 12:55:15
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta