Asemointi CSS:n avulla
- CSS Flow Layout
- Display-ominaisuus
- Laatikkomallin koko
- Listojen muotoilu
- Liu'utus (float)
- Flexbox-asemointi
- CSS-ruudukko (grid)
- Keskittäminen
- Transformointi
- CSS-sarakkeet (columns)
- Asemointi position-ominaisuudella
- Asemoinnin suunnittelu
- Asemointiesimerkkejä
- Vanha luento
- Lisätietoa
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
-
voi sisältää (1) block-elementtejä (esim.
div
toisendiv
-elementin sisällä) ja/tai (2) inline-elementtejä (esim.img
-elementtip
:n sisällä), - oletuksena alkaa ja päättyy rivinvaihtoon eli lohkot tulevat vertikaalisesti peräkkäin
- käytetään rakennuspalikkana isompien layout-rakenteiden luomiseen (toisin kuin inline-elementtejä).
- Vie horisontaalisesti kaiken käytettävissä olevan tilan
- Yhdistelevät pystysuunnassa peräkkäisiä marginaaleja. Esim. Jos dokumentissa on peräkkäin kaksi p-elementtiä joilla on 1em alamarginaalia ja 2em ylämarginaalia. Nämä toisiinsa koskevat marginaalit yhdistetään ja vain suurempi marginaalimääritys jää voimaan (2em). Kts. Mastering Margin Collapsing
vertical-align
-ominaisuus ei vaikuta block-elementteihin vaan vain inline-elementteihin
Inline (teksti)-tason elementti
- sisältää (1) dataa (esim.
a
sisältää linkin osoitteen) ja/tai (2) muita inline-elementtejä (esim.span
voi sisältääem
-merkittyä tekstiä), - oletuksena eivät ala eivätkä pääty rivinvaihtoon.
- Tulevat peräkkäin horisontaalisesti samalle riville. Jos tila ei riitä niin jatkuvat seuraavalle riville
- inline-elementeissä ei ole vaikutusta ylä- ja ala-marginaalilla, paitsi jos onkin kysessä
inline-block
-tyyppinen elementti text-align
-ominaisuudella ei ole vaikutusta
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.
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:
display: inline;
tekstitason (inline) elementtidisplay: block;
lohkotason (block) elementtidisplay: none;
elementtiä ei esitetä sivulla ollenkaandisplay: list-item;
listaelementtidisplay: flex;
display: grid;
Esimerkki block- ja inline-elementeistä
Laatikkomallin koko
Asemoinnin yhteydessä on tärkeä ymmärtää miten CSS laskee elementin koon. Kts. CSS box model.
- width- ja height-ominaisuudet asettavat elementin sisältölaatikoon koon. Tämän päälle lisätään vielä mahdollinen välistys (padding) ja raja (border).
box-sizing
-ominaisuudella voidaan muuttaa laatikkomallin oletustoimintatapaabox-sizing: content-box
tarkoittaa oletustoimintamalliabox-sizing: border-box
sisällyttää rajan ja välistyksen mukaan elementin kokoon
- Marginaali lisätään aina box-sizing-ominaisuuden arvosta riippumatta elementin kokoon
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
- float (MDN)
- float
- clear (MDN)
- clear-ominaisuudella kielletään jonkin lohkon tuleminen floatatun sisällön rinnalle
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:
align-items: stretch;
venyttää elementit äitielementtinsä korkeuteenalign-items: flex-start;
tasaa alkuun eli ylös, jos flex-directionon row tai row-reversealign-items: flex-end;
tasaa loppuunalign-items: center;
keskittää
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ää:
justify-content: space-between;
jakaa mahdollisen tyhjän tilan tasan kaikkien elementtien väleihin, mutta ei jätä yhtään tilaa kumpaankaan päähänjustify-content: space-around;
tasaa saman määrän tyhjää kaikkien elementtien sivuille paitsi alussa ja lopussa on puolet vähemmänjustify-content: space-evenly;
on sama kuin space-around muuten, mutta alussa ja lopussa on sama määrä tilaa kuin elementtien välissäkin
Flexbox-esimerkki 4
Aligning Items in a Flex Container
Flexboxiin liittyvät CSS-ominaisuudet
Tärkeimmät Flexboxin CSS-ominaisuudet ovat:
flex-direction
määrää pääakselin suunnan eli asemoidaanko riveittäin vai sarakkeittain ja vasemmalta oikealle/oikealta vasemmalla vai ylhäältä alas/alhaalta ylösflex-grow
mahdollistaa elementtien koon kasvamisenflex-shrink
määrää voivatko elementit kutistuaflex-wrap
määrää rivitetäänkö vai tungetaanko kaikki peräkkäinorder
määrää elementtien järjestyksenjustify-content
tasaus pääakselin suunnassaalign-items
tasaus poikkiakselin suunnassaalign-self
yksittäisen elementin tasaus poikkiakselin suunnassa
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-template-columns
grid-template-rows
grid-auto-rows
grid-auto-columns
column-gap
sarakkeiden välirow-gap
rivien väligap
sama kuin column-gap ja row-gapminmax()
repeat()()
grid-column-start
grid-column-end
grid-row-start
grid-row-end
grid-template-areas
fr
-yksikkö
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.
<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:
rotate()
rotatoi elementtiä kaksiulotteisestirotateX()
rotatoi elementtiä X-akselin ympärirotateY()
rotatoi elementtiä Y-akselin ympäriscale()
skaalaa elementtiä suuremmaksi tai pienemmäksitranslate()
siirtää elementtiä horisontaalisesti sekä vertikaalisestitranslateX()
siirtää elementtiä horisontaalisestitranslateY()
siirtää elementtiä vertikaalisestiscale()
skaalaa elementin kokoa
Transform-esimerkki
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.
column-count
: sarakkeiden lukumääräcolumn-width
: sarakkeiden leveyscolumn-gap
: sarakkeiden välicolumn-rule
: sarakkeiden välissä oleva rajacolumn-span
: lohkon laajeneminen kaikkien sarakkeiden leveydellebreak-inside
: lohkon jakautuminen useamman sarakkeen sisälle
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:
- 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.
- sticky toimii kuten suhteellinen (relative) asemointi, kunnes elementti ylittää skrollaamisen takia jonkin sille määritellyn rajan, jonka kohdalla elementti muuttuu kiinnitetysti asemoiduksi
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ää.
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:
- 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ö.
Sijoita sivun pääsisältö ensimmäiseen html-tiedostossa esiintyvään lohkoon, jos suinkin mahdollista
- Jokainen edellisistä lohkoista kannattaa merkitä div-elementillä tai main-, nav-, header- ja footer-elementeillä.
- Tee päälayout käyttäen flexboxia tai gridia, jos layout tarvitsee useita eri osille sivua sijoitettavia alueita
- Jollain tavalla asemoidun lohkon sisällön asemointiin voi käyttää mitä tahansa asemointitapaa. Esim. sivun päälayout voidaan määritellä gridillä. Navigointilohkon sisällä voidaan käyttää flexboxia. Pääsisällössä voidaan käyttää floatia.
- Käytä position-ominaisuutta vain, jos mikään muu tapa ei toimi.
Asemointiesimerkkejä
Seuraavassa on listattu useita hieman vanhempia esimerkkejä.
- Sarakejako
- Float-sarakkeet
- Ongelmana jatkuva tausta.
- Sarakkeiden paikkoja voidaan hienosäätää negatiivisten marginaalien avulla.
- Skaalautuvuus ikkunan kokoon kunnossa.
- Peruslayout Flexboxilla toteutettuna
- Liukuva sarakkeiden määrä esim. kuvagalleriassa
- Lomake
- Esimerkki absoluuttisesta asemoinnista
- Kiinnitetty asemointi -esimerkki
- navbar.htm - lähdekoodi
- navbar.css - lähdekoodi
- Suhteellinen asemointi -esimerkki
- relative.htm - lähdekoodi
- relative.css - lähdekoodi
- Z-index-esimerkki
- z-index.html - lähdekoodi
- z-index.css - lähdekoodi
Vanha luento
vanha luentomalli.html, vanha luentomalli.css
Käyttäjien kommentit