Päivitetty: 09.02.2003

display

display

Asemointi

Display

Position

Top, right, bottom left

Flot ja clear

Taso, z-index, overflow

display

Esimerkit sisältävät aina kaksi eri vaihtoehtoa: 'Oletusarvo' ja 'CSS-sääntö'. Esimerkit on kirjoitettu HTML-muodossa, joista pitäisi selvitä idea ja toiminta. Jos oletusarvo ja CSS-sääntö laatikoiden sisällöt näyttävät samanlaisilta ominaisuus ei toimi selaimellasi.

toimivuus

Tämän sivun esimerkkien perusteella CSS tuki 'Display' -ominaisuudelle on siis seuraava:

  1. Opera 6:   6/6
  2. NN 6.2:    4/6
  3. IE 5.5:      3/6

<< Alkuun

 

block

Toimivuus: [IE: 5.5]   [NN: 6.2]   [Opera: 6.0]

Oletusarvo: b { display: inline }

Normaali <P> -kappale, jossa <b>lihavointi</b>

CSS-sääntö: b { display: block }

Normaali <P> -kappale, jossa <b>lihavointi</b>

<< Alkuun

inline

Toimivuus: [IE: 5.5]   [NN: 6.2]   [Opera: 6.0]

Oletusarvo: p { display: block }

<div> -lohko, jossa

<p>kappale</p>

...</div>

CSS-sääntö: p { display: inline }

<div> -lohko, jossa

<p>kappale</p>

...</div>

<< Alkuun

list-item

Toimivuus: [IE:---]   [NN: 6.2]   [Opera: 6.0]

Oletusarvo: b { display: inline }

<p><b>Tässä</b><b>on</b><b>lista</b></p>

CSS-sääntö: b { display: list-item }

<p><b>Tässä</b><b>on</b><b>lista</b></p>

 

<< Alkuun

none

Toimivuus: [IE: 5.5]   [NN: 6.2]   [Opera: 6.0]

Oletusarvo: b { display: inline }

Normaali <P> -kappale, jossa <b>lihavointi</b

CSS-sääntö: b { display: none }

Normaali <P> -kappale, jossa <b>lihavointi</b

<< Alkuun

run-in

Toimivuus: [IE: ---]   [NN: ---]   [Opera: 6.0]

Oletusarvo: h5 { display: block }

<h5> -otsikko

Normaali <P> -kappale.

CSS-sääntö: h5 { display: run-in }

<h5> -otsikko

Normaali <P> -kappale, joka asemoidaan nyt osaksi otsikkoa!

<< Alkuun

compact

Toimivuus: [IE: ---]   [NN: ---]   [Opera: 6.0]

Oletusarvo: dl dt { display: list-item }

DT 1
Alakohta 1
DT 2
Alakohta 2

CSS-sääntö: dl dt { display: compact }

DT 1
Alakohta 1
DT 2
Alakohta 2

<< Alkuun

© Petteri Perälä 2002.
E-mail: [ petepe@mbnet.fi ]