4. Taitto verkkosivuilla II

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
http://www.dynamicdrive.com/style/layouts/item/css-fixed-layout-21-fixed-fixed/

http://www.maxdesign.com.au/presentation/process/example23.htm

#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

#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
http://www.dynamicdrive.com/style/layouts/category/C13/

#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.

esimerkki: http://www.maxdesign.com.au/presentation/liquid/example10.htm

Arvot:

left
right
none
inherit (arvo periytyy ympäröivältä ellementiltä)

#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:

<div style="clear:both"></div> tai <p style="clear:both"></p>

Linkkejä

CSS-asemointi

Selkeä tutorial kelluvan css-asemoinnin tekoon

Position-ominaisuuden käyttö

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.

Child pages