Asemointi CSS:n avulla

Tällä luennolla käsitellään sivun ulkoasun asemointia CSS:n avulla. Saavuttaaksesi arvosanan kolme on sinun ymmärrettävä vähintään lohko- ja tekstitason elementtien ero, float, flexbox ja keskitys. Parhaaseen arvosanaan (5) päästäksesi on lisäksi osattava ainakin grid ja transformointi.

Aihe on käsitelty hyvin myös MDN:n dokumentissa CSS layout

CSS Flow Layout

HTML:n elementit voidaan ryhmitellä kahteen kategoriaan: block-tason elementteihin ja inline-elementteihin. Block-tason elementeillä, joita ovat esimerkiksi div ja p, merkitään osioita tai isompia kokonaisuuksia. Inline-tason elementit, kuten a, img, ovat pienempi osa joko toista inline-elementtiä tai block-elementtiä.

Block (lohko) -tason elementti

lohkotason elementti

Inline (teksti)-tason elementti

tekstitason elementti

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.

Kts. Visual formatting model

Display-ominaisuus

CSS:n display-ominaisuudella voi vaihtaa elementin käyttäytymistapaa. Yksinkertaisimmillaan muutetaan lohko (block) teksti (inline) -elementiksi tai toistepäin. display-ominaisuuden toiminta on muuttumassa ja vaatii tulevaisuudessa aina kahden eri ominaisuuden määrittelyä. Tässä vaiheessa tyydymme kuitenkin käyttämään vielä vanhaa versiota, jossa määrittely onnistuu yhdellä sanalla.

Tärkeimmät display-ominaisuuden vaihtoehdot:

Esimerkki block- ja inline-elementeistä

Laatikkomallin koko

Asemoinnin yhteydessä on tärkeä ymmärtää miten CSS laskee elementin koon. Kts. CSS box model.

Box-sizing-esimerkki

Listojen muotoilu

Listat eli ul- tai ol-elementti ja näihin liittyvä li-elementti ovat joskus kinkkisiä muotoilla. Listan listamerkki määrätään list-style-type-ominaisuudella. Listamerkin sijaintipaikka on täysin selainriippuvainen! Halutessasi varmistaa, että listamerkki tulee varmasti haluamaasi paikkaan, on muistettava määritellä sekä ul/ol-elementin padding- ja marginaali, että li-elementin padding ja marginaali. Selain sijoittaa listamerkin aina marginaalin tai paddingin alueelle. Jos sekä marginaali että padding ovat nollia, ilmestyy listamerkki elementin alueen ulkopuolelle.

Listamuotoiluesimerkki

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 ellei tätä kielletä clear-ominaisuudella

Esimerkki float-ominaisuudesta

Lisätietoa: float- ja clear-ominaisuudet

Flexbox-asemointi

Flexbox on yksi kätevimpiä ja skaalautuvimpia tapoja tehdä asemointia

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

Oletuksena flexbox sijoittaa elementit peräkkäin samalle akselille (pystyyn tai vaakaan) ja jos mahdollista kutistaa elementtejä. Elementtejä ei kuitenkaan pienennetä alle minimileveyden tai -korkeuden. flex-direction-ominaisuudella asetetaan akselin suunta. Oletuksena flex tunkee kaiken samalle akselille, mutta haluattaessa voidaan käyttää myös rivitystä. Kts. flex-wrap.

order-ominaisuudella voi määrätä elementeille eri järjestyksen, kuin dokumentissä oleva järjestys. Järjestys annetaan järjestysnumeroina aloittaen ykkösestä.

Flexbox-esimerkki 0

Flexbox-esimerkki 1

Yksittäisen elementin laajenemiseen tai kutistumiseen voi vaikuttaa flex-grow- ja flex-shrink-ominaisuuksilla.

Flexbox-esimerkki 2

Flexbox-esimerkki 3

Tasaus ja keskitys Flexboxissa

Elementtien tasaus poikkiakselin suunnassa tapahtuu align-items-ominaisuudella:

Yksittäinen elementti voi ylimääritellä tasauksensa poikkiakselin suunnassa align-self-ominaisuudella. Vaihtoehdot ovat: stretch, center, start ja end

Elementtien tasaus pääakselin suunnassa tapahtuu justify-content-ominaisuudella. Käytettävissä on samat flex-start, flex-end ja center, kuin align-items-ominaisuudessa edellä. Lisäksi voi käyttää:

Flexbox-esimerkki 4

Aligning Items in a Flex Container

Flexboxiin liittyvät CSS-ominaisuudet

Tärkeimmät Flexboxin CSS-ominaisuudet ovat:

Voit harjoitella flexboxia Flexbox Froggy-pelillä.

CSS-ruudukko (grid)

Gridillä voi määritellä sivulle tai sen osaan ruudukon, jonka eri ruutuihin voi sijoittaa haluttuja lohkoja. Ruudukko koostuu riveistä ja sarakkeista.

grid-template-columns asettaa ruudukon sarakkeiden lukumäärän ja leveyden. Voit käyttää absoluuttisia yksiköitä, mutta useimmiten järkevintä on käyttää suhteellisia mittoja. Grid tunnistaa oman fr-yksikön. 1fr tarkoittaa yhä joustavaa saraketta tai riviä Gridissä. 2fr olisi kaksi kertaa leveämpi kuin 1fr. fr-yksikön avula voi jakaa käytettävissä olevan tilan automaattisesti sarakkeiden kesken.

column-gap asettaa sarakkeiden välin ja row-gap rivien välin.

Grid automaattisesti säätää rivien ja sarakkeiden koon niiden sisällön mukaan. Voit kuitenkin itse määrätä koon grid-auto-rows ja grid-auto-columns-ominaisuuksilla.

Elementit voidaan sijoittaa gridissä mihin ruutuun tahansa. Suositeltavin tapa on nimetä gridin ruudut tai useamman ruudun alueet grid-template-areas-ominaisuudella ja tehdä sijoittelu nimien perusteella. Sijoittelu tehdään grid-column- ja grid-row-ominaisuuksilla.

Grid-esimerkki

Keskittäminen

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-elementille, joka on tyypiltään tekstitason elementti (inline), mitään ei tapahdu.

Yksinkertaisimmat yleiskäyttöiset keskitystavat ovat seuraavat:

.keskitys {
  display: grid;
  place-content: center;
}
.keskitys2 {
  display: flex;
  flex-direction: center;
  align-items: center;
  justify-content: center;
}

Keskitysesimerkki

Transformointi

Transform-ominaisuudella voi elementtiä siirtää, kääntää, vääntää, suurentaa ja pienentää

transform-origin asettaa pisteen, jonka suhteen transformaatiot suoritetaan.

Transform tuntee useita transformaatiofunktioita, joista tärkeimmät ovat:

Transform-esimerkki

Using CSS transforms

CSS-sarakkeet (columns)

CSS:llä on erittäin helppo toteuttaa sanomalehtityyppisiä sarakkeita. Käytä joko column-count-ominaisuutta, jos tiedät montako saraketta haluat tai column-width-ominaisuutta, jos tiedät kuinka leveitä sarakkeita haluat. Selain tekee automaattisesti sopivan määrän tai sopivan levyisiä sarakkeita. Tällä tavalla ei voi itse määrätä mikä elementti tulee mihinkin sarakkeeseen. Yleensä Grid on käyttökelpoisempi.

Sarakkeiden väliin voit vaikuttaa column-gap-ominaisuudella tai column-rule-ominaisuudella, joka vastaa tavallista border-ominaisuutta.

column-span: all-määrittelyllä saat halutun lohkon laajenemaan kaikkien sarakkeiden ylitse. Muita vaihtoehtoja ei ole eli et voi laajentaa lohkoa vain osan sarakkeiden ylitse.

break-inside-ominaisuudella voi vaikuttaa siihen jakautuuko lohko useamman sarakkeen sisälle vai ei. break-inside: avoid välttää lohkon jakaantumista useammalle sarakkeelle.

Sarake-esimerkki

Asemointi position-ominaisuudella

position-ominaisuudella voidaan määritellä kuinka elementti sijoittuu näytölle. Käytä position-ominaisuutta vain erikoistapauksissa. Usein on parempi käyttää float, grid tai flexbox. 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%;
}

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ä.

.vasenylanurkka {
  position: fixed;
  top: 10%;
  left: 10%;
  width: 30%;
  height: 10%;
}

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. Yleensä riittää, että asettaa position: relative;, jolloin saa asemoinnin aktivoitua, mutta elementti pysyy oletuspaikallaan ellei aseta koordinaatteja.

Position-esimerkki

Asemoinnin suunnittelu

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

Asemointiesimerkkejä

Seuraavassa on listattu useita hieman vanhempia esimerkkejä.

Vanha luento

vanha luentomalli.html, vanha luentomalli.css

Lisätietoa

Käyttäjien kommentit

Kommentoi Lisää kommentti
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta