Elementin esitystapa: display
Elementin yleisen esitysmuodon määrää sen display-ominaisuus, joiden tärkeimmät muodot ovat block ja inline.
Lohko (block) tarkoittaa CSS:n käsitteistössä sellaista esitystapaa, jossa elementti on yhden suorakaiteen sisällä. Selain asemoi lohkot oletusarvoisesti siten, että lohkot alkavat aina uudelta riviltä. Myös lohkon jälkeinen sisältö alkaa aina uudelta riviltä.
Esimerkiksi http://raulihaverinen.fi/varasto/hy2007k/luento1_lorem.html
Lisätietoa: http://www.cs.tut.fi/~jkorpela/styles/termit.html#block
Sisäelementti: Elementti, jonka esitys voi olla osa sitä edeltävän sisällön esitystä kuten kappaleen tekstiä. (Lähde: http://www.cs.tut.fi/~jkorpela/styles/termit.html)
display-elementin käytöstä: http://raulihaverinen.fi/varasto/hy2007k/luento3_css.html
CSS-asemoinnin perusteet
CSS-asemointi on elementtien sijoittelua verkkosivulle tiettyjen sääntöjen mukaan. Yksinkertaisimmillaan lohkoelementit asetellaan allekkain ja sisäelementit samaan tapaan kuin sanat kappaleessa, eli peräkkäin.
Asemoinnin neljä ominaisuutta ovat:
* top
* right
* bottom
* left
Asemointia voi tehdä
Staattisesti (oletusarvo)
Absoluuttisesti: elementin sijainti asetetaan suhteessa johonkin koordinaatistoon (joko sivun vasempaan yläkulmaan tai suhteessa sisimpään asemoituun elementtiin, jonka sisällä ollaan)
- arvo: absolute
- Lisätietoa: http://webdesign.about.com/od/advancedcss/a/aa061307.htm
Esimerkkejä:
- http://www.dynamicdrive.com/style/layouts/item/css-fixed-layout-21-fixed-fixed/
- http://www.maxdesign.com.au/presentation/process/example23.htm
No Format #elementti { position:absolute; top:50px; left:50px; }
Kiinteästi: kuten absoluuttinen, mutta koordinaationa on aina selaimen näyttöalue. Elementti pysyy paikallaan, vaikka selainikkunaa vierittäisi.
- arvo: fixed
- Esimerkiksi http://www.w3.org/Style/Examples/007/
- IE 6 ei tue
No Format #elementti { position:fixed; top:50px; left:300px; }
Suhteellisesti: elementin sijainti asetetaan suhteessa siihen, missä elementti sijaitsisi ilman asemointia.
- arvo: relative
- http://webdesign.about.com/od/advancedcss/a/aa061307.htm
- Esimerkki: http://www.w3schools.com/css/tryit.asp?filename=trycss_position_relative
| No Format |
|---|
#elementti {
position:relative;
}
|
Kelluva asemointi
Asemoinnin vaihtoehtoina on myös kelluva sisältö, joka tehdään float-elementillä. Kelluva elementti sijoittuu joustavasti sivun muun sisällön vasemmalle tai oikealle puolelle.
Esimerkkejä:
- http://www.pixelache.ac/2003/hki/program_suomi.php
- http://www.maxdesign.com.au/presentation/liquid/example10.htm
- http://www.tuseta.fi/vinokino/2004/movies/index.html
- http://www.dhtmlgoodies.com/scripts/floating_gallery/floating_gallery.html
Arvot:
- left
- right
- none
- inherit (arvo periytyy ympäröivältä ellementiltä)
| No Format |
|---|
#elementti {
float:left;
}
|
Jos elementti on kelluva, siitä tulee lohkotyyppinen elementti. Siksi kelluva elementti alkaa aina uudelta riviltä, vaikka sen oikealle tai vasemmalle puolelle saattaakin tulla muuta sisältöä.
Kelluttaminen lopetetaan clear-määritteellä, joka voidaan liittää esim. kelluvaa elementtiä seuraavaan div-elementtiin, p-elementtiin tai br-elementtiin, johon kellutuksen lopetus liitetään:
| No Format |
|---|
<div style="clear:both"></div> tai <p style="clear:both"></p>
|
Linkkejä
Selkeä tutorial kelluvan css-asemoinnin tekoon
Esimerkkejä:
http://communication.utsa.edu/mbatch/3413/layoutexamples.html
Taulukoiden ulkoasun muotoilu tyylitiedostoilla
Listat ja navigaation rakentaminen
Harjoituksia.