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
...
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
Kellutus lopetetaan clear-määritteellä: http://www.w3schools.com/Css/pr_class_clear.asp
No Format #elementti { position:fixed; top:50px; left:300px; }
Suhteellisesti: elementin sijainti asetetaan suhteessa siihen, missä elementti sijaitsisi ilman asemointia.
- arvo: relative
- Esimerkki: http://webdesign.about.com/od/advancedcss/a/aa061307.htm
- Esimerkki: http://www.dynamicdrivew3schools.com/style/layouts/category/C13/css/tryit.asp?filename=trycss_position_relative
| No Format |
|---|
#elementti {
position:relative;
}
|
Kelluva asemointi
Asemoinnin vaihtoehtoina on myös Lisäksi asemoinnin vaihtoehtoina on 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
- esimerkki: 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
Sivujen taitto kokonaisuutena: kiinteä vai mukautuva taitto?
Taulukkotaitosta kiistellään paljon verkkosuunnittelijoiden parissa. Osa haluaa leimata sen vääräksi, koska layoutin voi nykyisin tehdä myös CSS-asemoinnilla. Jos taitto tehdään CSS:llä, sivuston rakenne ja ulkoasu erottuvat omiksi kokonaisuuksikseen.
Taulukkotaittoa on hyvin monenlaista, ja sen voi tehdä käyttäjän kannalta helpolla tai vaikealla tavalla. Yksinkertaisessa taitossa tieto vian jaetaan kahteen sarakkeeseen, ja monimutkainen taitto voi sisältää monia sisäkkäisiä soluja, joista osa on tehty ulkoasun vuoksi (kuten tyhjän tilan luomiseksi tms.) Taulukkotaitto oli pitkään ainoa tapa muokata html-sivun layoutia, ja nykyisinkin selaimet tukevat vaihtelevasti CSS-taiton ominaisuuksia.
Jukka K. Korpelan suositus:
Taulukkotaiton ja CSS-asemoinnin välillä kannattaa tehdä tietoisia ja harkittuja ratkaisuja. Sekamuodot voivat johtaa isoihin ongelmiin. Taulukkotaitto ei kuitenkaan estä käyttämästä CSS:ää muuhun muotoiluun, kuten sarakkaiden leveyden määrittämiseen, reunaviivojen ulkoasuun jne.