Lohkoelementit ja sisäelementit
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.
Asemointia voi tehdä
Absoluuttisesti: elementin sijainti asetetaan suhteessa johonkin koordinaatistoon (joko sivun vasempaan yläkulmaan tai suhteessa sisimpään asemoituun elementtiin, jonka sisällä ollaan)
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
Suhteellisesti: elementin sijainti asetetaan suhteessa siihen, missä elementti sijaitsisi ilman asemointia
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.
Linkkejä
Selkeä tutorial kelluvan css-asemoinnin tekoon
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..