Sivun asemointi CSS:llä - Demo 3

Mallivideot

Ongelmia videon katselussa?

Näissä demoissa tutustutaan WWW-sivun ulkoasun asemointiin CSS:n avulla.

Jos et vielä ehtinyt tehdä loppuun demo 2:n tehtäviä niin viimeistele ne ennen näihin tehtäviin siirtymistä.

Absoluuttinen asemointi

Absoluuttinen asemointi -mallivideo

Kiinnitetty asemointi

Kokeile mitä tarkoittaa kiinnitetty asemointi. Muuta joidenkin lohkojen position: absolute; -määritys muotoon position: fixed;. Kokeile miten sivun käyttäminen muuttui Mozillalla, Firefoxilla tai Operalla. Pienennä sivu niin pieneksi että joudut rullaamaan sen sisältöä.

Asemointi float-ominaisuuden avulla

Mallivideo float -asemointiin

Absoluuttista asemointia ei ole mikään pakko käyttää vaan hyvin usein tismalleen samanlainen ulkoasu saadaan aikaan sopivalla float-ominaisuuden käytöllä.

Lisätehtävät

Tee vielä seuraava tehtävä mikäli aikaa riittää.

Sovellusharjoitus: Matematiikan ja tilastotieteen laitoksen sivu

maths -mallivideo

Sovella asemoinnista oppimiasi taitoja ja siivoa Matematiikan ja tilastotieteen laitoksen kotisivu. Sivu on yläosaltaan samanlainen kuin edellä tehty sivu. Käytä apunasi mallipohjaa ja tee CSS:n avulla mallipohjasta ulkoasultaan samankaltainen kuin alkuperäinen sivu. Tee alkuperäisestä poiketen omasta versiostasi skaalautuva.

Kommentoi tätä sivua

Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/www/demot/demo3/
© Tommi Lahtonen (tommi.j.lahtonen@jyu.fi)< http://hazor.iki.fi/>
2006-12-14 11:43:02