CSS: Ulottuvuudet 2008-08-02 11:32

Elementin ulottuvuuksia määritellään seuraavilla ominaisuuksilla:

• margin: reunuksen ulkopuolelle jäävät tyhjä tila, eli etäisyys vieressä olevaan elementtiin
• border: reunus
• padding: täyttö, eli reunuksen ja sisällön väliin jäävä tyhjä tila
• width: sisällön leveys
• height: sisällön korkeus (määrittyy yleensä automaattisesti)

Box Model

Ominaisuudet margin, padding ja border W3C:n CSS-spesifikaatiossa.

Marginaali margin

Elementin ulkopuolelle jäävä tyhjä tila määritettynä joka reunalle erikseen margin-ominaisuutta käyttäen. Arvojen järjestys kulkee myötäpäivään ylhäältä alkaen: ylä, oikea, ala, vasen.

#kuva {
	margin: 10px 20px 10px 0px;
}

Yksittäisiä sivuja voidaan käsitellä myös ominaisuuksilla margin-top, margin-right, margin-bottom, ja margin-left.

#kuva {
	margin-top: 10px;
	margin-right: 20px;
	margin-bottom: 10px;
	margin-left: 0;
}

Halutulta elementiltä voidaan myös poistaa kaikki oletusmarginaalit.

p {
	margin: 0;
}

Kahden vierekkäisen elementin välinen etäisyys määräytyy suuremman marginaaliarvon mukaan. Arvoja ei siis lasketa yhteen.

Uncollapsing Margins

Artikkeli CSS-marginaalien käyttäytymisestä: alielementin marginaalit tulevat ulos ympäröivästä elementistä, mutta ympäröivälle elementille annettu border tai padding saa ympäröivän elementin sisällyttämään alielementin marginaalit.

Täyttö padding

Elementin sisäpuolelle jäävä tyhjä tila määritellään padding-ominaisuudella. Täyttö lasketaan elementille annettavan leveyden tai korkeuden lisäksi, eli se tekee elementistä suuremman.

#asettelu {
	/* sama täyttö kaikille sivuille */
	padding: 10px; 
}
#asettelu {
	/* ylös ja alas 10px, oikea ja vasen 30px; */
	padding: 10px 30px;
}

Oletusmarginaalien ja -täyttöjen poistaminen universaalivalitsimella

Tarkan työn kannalta saattaa olla hyödyllistä poistaa oletusmarginaalit ja -täytöt kaikilta elementeiltä kerralla, ja antaa ne sitten halutuille elementeille. Käytä tätä määrittelyä vain jos olet valmis tekemään ylimääräistä pikkutarkkaa työtä, se ei ole välttämätön.

/* poistetaan oletusmarginaalit ja -täytöt */


* {
	margin: 0;
	padding: 0;
}

Tämän jälkeen tavallisimpien elementtien ylä- ja alamarginaalit voidaan määritellä esimerkiksi seuraavasti:

/* lisätään valmiiksi ylä- ja alamarginaaleja elementeille */

h2,h3,h4,h5,h6,p,ul,ol,dl,table,pre {
	margin-top: 1em;
	margin-bottom: 1em;
}

/* ... ja listoille vasen marginaali */

ul, ol { 
	margin-left: 2em; 
}

Erityisesti listarivien kanssa tulee vielä lisäyllätyksiä. Ratkaisua voi etsiä tähän tyyliin:

/* kaikilta li-elementin sisältämiltä elementeiltä 
(lähinnä muita listoja) ylä- ja alamarginaalit pois */

li * { 
	margin-top: 0; 
	margin-bottom: 0; 
}

6 Popular CSS Reset Techniques

Eri tapoja selainten CSS-oletusarvojen nollaamiseksi web-sivuilla.

Reunus border: none/solid/double/dotted/dashed/ridge/groove

Ominaisuudella border muutetaan reunuksia. Ensin annetaan reunan tyyli, sitten paksuus, ja lopuksi väri. border on yhdistelmä ominaisuuksista border-width, border-style ja border-color. Kaksi tapaa tehdä sama määritys reunukselle:

/* reunus sisältöalueelle, erikseen */
#asettelu {
	border-width: 3px;
	border-style: double;
	border-color: #000;
}

/* reunus sisältöalueelle, yhdistettynä */
#asettelu {
	border: 3px double #000;
}

Reunuksen asettamisen yhteydessä kannattaa usein antaa elementille myös täyttöä padding-ominaisuudella, ettei sisältö tule reunukseen kiinni.

/* pre-elementille vaaleanharmaa reunus */
pre {
	border: 1px solid #ccc;
	/* täyttöä ettei sisältö tule reunukseen kiinni */
	padding: 10px;
}

Reunukset yksitellen border-top border-right border-bottom border-left

Reunuksia voi käsitellä myös yksitellen ominaisuuksilla border-top, border-right, border-bottom, ja border-left.

h2 {
	border-bottom: 1px solid #ccc;
}

Linkkien alleviivaus voidaan haluttaessa korvata esimerkiksi pisteviivallisella reunuksella.

/* Linkeille pisteviivareunus alleviivauksen sijaan */
a {
	text-decoration: none;
	border-bottom: 1px dotted;
}

/* poistetaan kun hiiri linkin päällä */
a:hover {
	border-bottom: 0;
}

/* poistetaan reunus myös navigoinnista ja linkkikuvilta */
#navigointi a, .kuvalista a {
	
	border-bottom: 0;
}

Muita ominaisuuksia: border-collapse,border-spacing.

CSS Border

Erilaisia reunusmäärittelyjä, myös esimerkkikuvina.

Leveys width

width-ominaisuudella voidaan antaa elementeille leveys.

#navigointi {
	/* sivun reunaan sijoitettavan navigointipalkin leveys */
	width: 200px;
}

Kun leveys on määritetty, elementti voidaan keskittää vaakasuunnassa margin-ominaisuutta käyttäen:

#asettelu {
	/* määritetään leveys */
	width: 600px; 
	/* oikea ja vasen marginaali automaattisesti */
	margin: 20px auto; 
}

Määritetään neljäsarakkeisen taulukon solut tasaleveyksisiksi.

col {
	width: 25%;
}

Ideal line length for content

Ehdotus sisältöalueen leveydeksi: 30em.

Korkeus height

Korkeus määrittyy yleensä automaattisesti sisällön mukaan. Tarvittaessa sekin voidaan määrittää height-ominaisuudella.

#kuva {
	height: 400px;
}

Elementille annettu float-määritys, sekä position: absolute saavat aikaan sen ettei elementtiä lasketa ympäröivän elementin sisällöksi. Tämä aiheuttaa joskus sen että korkeus täytyy määrittää.

Vähimmäis- ja enimmäisarvot korkeudelle ja leveydelle min-height, max-height, min-width, max-width

Mikäli jonkun useilla sivuilla toistuvan elementin sisällön määrä vaihtelee huomattavasti, elementille voidaan asettaa vähimmäiskorkeus.

#kaavio {
	min-height: 500px;
}

Sisältöelementin leveys kannattaisi antaa max-width-ominaisuudella, jolloin sisältö ei pääse levenemään liian leveäksi isolla resoluutiolla, mutta mahtuu kapenemaan pienempiresoluutioisella näytöllä. Myös kaventumiselle voi antaa alarajan min-width-ominaisuudella.

#sisalto {
	min-width: 700px;
	max-width: 1000px;
}

IE6 ja vanhemmat eivät tue vähimmäis- ja enimmäisarvoja. Jos käytät ominaisuuksia, yksinkertaisinta on tehdä IE:n ehdollisten kommenttien avulla kiinteä leveys IE:n vanhemmille versioille. Linkeissä muita ratkaisuja.

max-width in Internet Explorer

Enimmäisleveyden asettaminen Internet Explorer 6:lle ja vanhemmille. Sivun lopussa yksinkertaisempi ohje pikseliarvona.

min-height: fixed;

min-height -ominaisuuden jäljittely margin- ja padding-ominaisuuksilla.