[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
 Etsi sivuiltani: [Apua]
Aihepiiriluettelo > CSS-oppaan etusivu > Opassivut > 8. Miten CSS annetaan elementtien taustoille ja reunoille > Erityisogelmia > Lohkojen dimensiot (jakso 5b/5)

Lohkojen dimensiot

Monesti on mielekästä määritellä reunustettavalle elementille width ja height ominaisuudet. Niiden määrittelyssä on kuitenkin eräitä ongelmia.

Perussyy ongelmiin lienee siinä, että HTML spesifikaatioissa width ja height attribuutit lasketaan toisinaan eri lailla kuin CSS:ssä. CSS2:ssa em. ominaisuudet ovat aina sisällön dimensioita ilman että mukaan lasketaan padding, border tai margin arvoja. HTML:ssä width ja height attribuutit sisältävät joskus reunukset ja täytteet eli koko lohkolaatikon (block box) dimensiot.

Sisältöleveys (content width) merkitsee konkreettiselle sisällölle annettavaa varauslaatikkoa, esim. tilaa kuvalle, jolla on tietyt dimensiot. Esim. lohkoon, jolla on width:200px pitää mahtua seuraavat sisällöt:

<IMG src="..." alt="..." width="200" border="0">
<DIV style="width:200px; border-width:0; padding:0; margin:0">...<DIV>
W3C: CSS2: 8 Box model, 8.1 Box dimensions[Pw], 10.2 Content width: the 'width' property[Pw].
Muita sivustoja: Keijo Kortelainen: CSS:n lohkot ja laatikot; Web Design group: CSS Properties[Pw].

Tästä dimensio-ongelmasta voi osittain päästä sillä, että käyttää ylimääräistä tai ylimääräisiä elementtikerroksia. Ulompi elementtikerros määrittää kokonaisdimension ja sisemmälle annetaan margin, padding ja border -ominaisuudet. Näin ainakin lohkon leveys on sama yleisesti käytetyissä uusissa selaimissa. Taulukoissa tämän voi hoitaa siten, että taulukkosoluille laitetaan täytearvoja vaan taulukkosoluissa sisältö on aina jonkin lohkon sisällä. Vanhoja selaimia ajatellen voi antaa täytearvon cellpadding-attribuutilla, joka sitten ohitetaan CSS:n avulla.

Alla koodiesimerkki molemmista tapauksista ([M][S][Pw] - mallin lopussa on uusi testilohko):

td, th, div.sailytinLohko {padding:0; margin:0; border-width:0; width:220px} /* padding:0 eliminoi cellspacing="10" vaikutuksen */
div.sailytinLohko div, th div, td div {margin:10px; padding:10px; border:10px solid black}

<div class="sailytinLohko"><div>Sisältö. </div></div>...

<table summary="Sisältöesimerkki" cellspadding="10">
<tr><td><div>Sisältö.</div></td></tr>
</table>

CSS3 tarjoaa mahdollisuuden valita paras laskentatapa (käsittelen tätä asiaa sivulla, joka käsittelee spesifikaation ongelmia[S].

Toinen eteen tuleva ongelma on se, että kuinka tiukasti dimensiot on tulkittava. HTML-attribuutein määritellyissä taulukoissa dimensiot ovat vain minimiarvo. Näin CSS:ssä ei voida tavanomaisille lohkoille menetellä. Jos sisältö ei sovi annettuun arvoon, loppusisältö menee elementin ulkopuolelle - pahimmassa tapauksessa muun sisällön päälle.

CSS2:ssa tämä ongelma on ratkaistu antamalla mahdollisuus määritellä korkeudelle ja leveydelle raja-arvot (min-height, max-height, min-width ja max-width). Vaihtoehtoinen tapa on määrittää overflow:scroll tai overflow:auto, jolloin sitä osaa, joka ei mahdu lohkon sisälle voidaan skrollata.

Sen sijaan, että laittaa suuren määrän kerroksia, on yksinkertaisempaa määritellä perus CSS useimmille selaimille siten, että sivut toimivat suhteellisen hyvin ilman JavaScript tukea. Selainkohtainen CSS määritellään niille selaimille, jotka sitä todella tarvitsevat (katso malliksi lukemasi sivun lähdekoodi). Erityisen CSS:n tarve vaihtelee, sillä jokaisella selaimella on erilaiset viat.

Edellä esitettyjen asioiden lisäksi on otettava huomioon se, että selainten käyttäjät voivat pitää vasemmalla ja oikealla sivustalla työkalurivejä. Jos heillä on käytössä 800x600 pikselin monitori, käytettävissä olevan katselukanavan (viewport) eli ikkunan leveys on noin 730 pikseliä.

Suositukseni:

  1. Älä anna ainakaan padding eikä mielellään myöskään border ominaisuuksia elementeille, joille haluat tarkat leveysarvot (yhden pikselin reunukset eivät useimmissa tapauksissa ole haitallisia).

  2. Jos käytät DIV-elementtiä perusrakennuselementtinä anna lapsielementeille vaakatason marginaalit (taulukoille on syytä määritellä luokat, jotta useampikerroksisisia taulukoita käytettäessä marginaalit koskisivat vain ulointa kerrosta).

  3. Jos haluat, että asiasisältö näkyy kaikilla selaimilla keskellä sivua, määritä asiasisällön kokoavalle elementille margin-left:auto; margin-right:auto ja laita asiasisällön kokoavan elementin ympärille vielä CENTER elementti ilman mitään mittasuhteita.

  4. Vältä korkeusarvoissa tarkkoja mittasuhteita. Jos haluat antaa elementeille minimikorkeuden, tee se seuraavalla tavalla:

    div.jokinLuokka {height:...px} /* selaimille, jotka tulkitsevat korkeuden minimikorkeudeksi */
    div[class="jokinLuokka"] {height:auto !important; min-height:...px} /* selaimille, joille height ja min-height ovat kaksi eri asiaa */

  5. Määrittele leveydet niin, että sisältö mahtuu 800x600 näytölle. Alla olevassa esimerkissä leveys on määritelty DIV elementille:

    body, html {padding:0; margin:0}
    div.perusLohkolaatikko {margin:10px; width:710px} /* laskentakaava on 730 pikseliä - perussisältölohkon marginaalit */
    p, h1, h2, ... {margin-left:20px; margin-right:20px}     /* muiden lohkojen dimensioita ei tarvitse välttämättä määritellä lainkaan, pelkät marginaalit riittävät */

Selainkohtaisia huomautuksia:

  1. MS IE Windows -selaimet laskevat width ja height ominaisuudet väärin (em. ominaisuuksiin lasketaan useimmiten mukaan täytteet ja reunukset) aina MS IE 6.0 Windows asti, mikäli selain ei toimi ns. standard-compliant moodissa[S]. Siinä kuten on MS IE 5.x Mac -selaimissa on ns. "DTD-kytkin". MS IE 6.0 toimii suhteellisen oikein lukuunottamatta elementtiä TABLE sekä arvoa 100%, joka ei toimi, sillä esim. body.CssSite {width:100%; border-width:0; margin:0; padding:0} aiheutti toisinaan vaakavierityspalkin, vaikka sen ei pitäisi sitä tehdä. MS IE 5.x Mac -selaimessa kytkin toimii kunnolla myös taulukoissa (käsittelen taulukoiden dimensio-ongelmia sivulla 10[S]).

    Microsoft: CSS Enhancements in Internet Explorer 6 Public Preview.

  2. Dimensioihin tulee selainten välille suurempi ero, jos käytetään lohkoille ja niiden marginaaleille prosenttiarvoja (testasin margin:33%; width:67% vaikutusta). MS IE 5.x Windows laskee prosentin jäljellä olevan tilan mukaan kun vasen marginaali on ensin otettu pois laskuista, ei emoelementin sisällön leveydestä käsin. Tämä laskentatapa aiheuttaa sen, että Opera ja Netscape -selaimille saattaa tulee vaakavierityspalkit, mikäli sivut optimoidaan MS IE 5.x Windows-versioiden mukaan. Otin kaksi kuvaruutukaappausta:

  1. Dimensio-ongelmia voi yrittää ratkaista käyttämällä attribuuttivalitsimia, joita MS IE ei ymmärrä, esim. (vertaa lohkojen dimensioita sivustoilla oleviin "mittakeppeihin", jotka osoittavat oikeat dimensiot ([M][S][Pw])):

    div.nav, div.nav2 {padding:10px; border:10px solid black} /* reunojen ja sisennysten tulisi kasvattaa laatikon kokonaiskorkeutta */
    div.nav {height:180px; width:180px} /* height toimii koko lohkolaatikon minimikorkeutena MS IE:lle vaikka ei pitäisi; mikäli selain ei tue attribuuttivalitsimia, lohkon dimensioiden tulisi olla 220x220 pikseliä */
    div[class="nav"] {height:auto; min-height:160x; max-width: 160px;} /* koska sisältö ei välttämättä mahdu edellä annettuun kiinteään korkeusarvoon, Opera 4.x+:lle ja Netscape 6.x+:lle on annettu attribuuttivalitsinta käyttäen uudet ominaisuudet, joita MS IE ei ymmärrä - height:auto eliminoi height:180px merkityksen; huomaat että olen vähentänyt sisennysarvot korkeus- ja leveysominaisuuksien dimensioista */
    div.nav2 {height:160px; width:160px}     /* vertailulohko, jolla tulisi olla samat dimensiot */

    Sain seuraavat testitulokset, jotka esitän kuvaruutukaappauksilla:

    • Mozilla 0.6[S] - täysin oikein.
    • Opera 5.01[S] - muuten oikein, mutta min-height on sama kuin lohkon kokonaiskorkeuden minimiarvo; se käyttäytyy tavallisesti samalla lailla kuin MS IE 5.x Windows -selaimella ominaisuus height.
    • MS IE 5.5[S] - molempien lohkojen kokonaismittasuhteet ovat liian pieniä. Käytetyllä DTD:llä MS IE 5.0 Mac - ja MS IE 6.0 Windows -selainten pitäisi näyttää päätestilohkojen oikealla puolella olevat vertailulohkot oikein.

  1. Prosenttiarvoiset korkeus ja leveysarvot eivät toimi oikein myöskään asemoiduilla elementeillä (käsittelen asemoitujen elementtien ongelmia sivulla 11[S]).

  2. MS IE tulkitsee height ja width väljästi ja sille ne merkitsevät minimiarvoa, jotka voi ylittyä, jos sisältö ei sovi annettuihin arvoihin. Opera ja Mozilla Gecko -selaimet tulkitsevat arvot tavanomaisissa lohkoissa tiukasti.

  3. Ominaisuudet min-height, max-height, min-width ja max-width toimivat yleisillä lohkoelementeillä vain Opera 4.x+, Mozilla Gecko, Konqueror (Linux) ja Safari (Mac - arvio tehty erään kuvakaappauksen perusteella) selaimissa. Koska haluan tämän sivuston kaventuvan käyttäjän tarpeiden mukaan, en ole asettanut kiinteää sivunleveyttä. Toivon, että MS voisi joskus tukea max-width jne. ominaisuuksia, sillä ne ovat ihanteellinen tapa hallita sivujen perusrakenteiden dimensioita.

  4. overflow:scroll ja overflow:auto eivät toimi Opera 6.x -selaimissa. Ne toimivat ainakin MS IE 4.x+, Mozilla Gecko ja Opera 7.x+ -selaimissa.

  5. Ominaisuudella height on myös ongelma, jota käsittelin lohko- ja rivinsisäiselementit yhteydessä.

  6. Mozilla Gecko -selaimet aiheuttavat erään ongelman, jota käsittelen sivulla Listat[S].

  7. MS IE -selaimille saa JavaScript-koodauksen avulla luotua max-width kaltaisen toiminnallisuuden, minkä selostan eräällä sivulla[S]).

  1. Kun kokeilin tätä prosettiarvolla (div.doc {width:99%}), MS IE 5.0 ei näyttänyt kaikkia elementtejä, jos kuville ei oltu annettu pikseliarvoja.

  2. Koska leveysarvot elementeille BODY ja HTML eivät toimi kaikissa selaimissa, on suositeltavaa käyttää elementtiä DIV (tai TABLE) peruslohkona.

  3. Koska eri selaimilla elementillä BODY voi olla oletusarvona joitakin sisennyksiä tai marginaaleja, sisennykset ja marginaalit tulee määritellä.

  4. .

Seuraava sivu käsittelee listoja, joissa myös on hyvä tietää, miten niille määrittelee eri ominaisuuksia, jotta ongelmilta vältyttäisiin.

[Alku]
   
Copyright Tapio Markula 1999-2003, Salo (kotisivu, s-posti - lisää s-postiosoiteeseen pisteellä erotettuna nimeni, Tapio Markula) (@dnainternet.net) - ei julkiskäyttöön ilman sopimusta.
Get Expression!
Editori, jolla saa luotua standardit täyttäviä HTML ja XML dokumentteja. Tämän sivuston sivut on useimmissa tapauksissa tarkastettu Dave Raggetin (W3C) tekemällä HTML-Tidy apuohjelmalla ja satunnaisesti W3C-organisaation virallisella koodintarkastusohjelmalla. Useimpien sivujen syntaksin pitäisi olla sopusoinnussa W3C:n XHTML 1.0 spesifikaation kanssa. Testaa tämä sivu!
Informaatiota selaimista, jotka näyttävät tai tulostavat tämän sivuston parhaiten.
[Hae Opera] [Hae Mozilla!]
CSS-opasta on viimeksi muutettu 20.12.2004