Asemointi ja CSS3 - luento 7

Tällä luennolla käsitellään sivun ulkoasun asemointia CSS:n avulla. Lisäksi käydään lyhyesti läpi CSS Mobile profile ja CSS3.

Luentotaltiointi

Ongelmia videon katselussa?

Visuaalinen muotoilu ja asemointi

CSS2 antaa erilaisia mahdollisuuksia WWW-sivujen visuaaliseen muotoilemiseen. Seuraavaan on koottu lyhyeksi listaksi erilaisia asioita, joita kannattaa miettiä jo sivun suunnitteluvaiheessa, jotta vältyttäisiin ylimääräisiltä ongelmilta sivun toteutusvaiheessa.

Sivun sisällön asetteluun voidaan käyttää seuraavia ominaisuuksia.

Asemointiin liittyviä ominaisuuksia

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

Positioinnin yhteydessä määritellään usein myös seuraavat ominaisuudet:

Seuraavassa muutamia esimerkkejä asemoinnista

Muutamia float- ja clear- ominaisuuteen liittyviä esimerkkejä

Esimerkki

Muokataan yliopiston kotisivu siistiin xhtml-muotoon ja määritellään uusitun version ulkoasu css:n avulla. Lähdekoodi:

Sivujen rakennetta voi vertailla seuraavien kuvien avulla:

Käyttäjien kommentit

Kommentoi tätä sivua Lisää uusi kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/www/luennot/luento7/
© Antti Ekonoja (anjoekon@jyu.fi) <http://users.jyu.fi/~anjoekon/>
Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
Jukka Mäntylä (jmantyla@iki.fi) <http://www.iki.fi/jmantyla/>
2005-01-14 18:47:17
Informaatioteknologia - Jyväskylän yliopiston IT-tiedekunta ja avoin yliopisto