CSS-taitto

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

#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

#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

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

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

Child pages