Päivitetty: 22.06.2002 .

flot ja clear

flot ja clear

Asemointi

Display

Position

Top, right, bottom left

Flot ja clear

Taso, z-index, overflow

flot ja clear

Ominaisuus 'flot' asettaa elementille kierron, joka voidaan katkaista 'clear' -ominaisuudella. Kierto vastaa siis HTML:ssä <img> -elementin aling -ominaisuutta. Ero on siinä, että float mahdollistaa kaikkien (x)HTML -elementtien kierron.

toimivuus

Float ja clear kuuluivat jo CSS1-määrittelyyn. Ne toimivat kaikilla nykyisillä selaimilla. Ongelmia voi tulla esim. IE 4 selaimella, jos kierrettävä elementti ei ole kuva.

  1. Opera 6:  2/2  | NN 6.2:   2/2 | IE 5.5:     2/2

float

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

Esimerkeissä kuvalle on annettu seuraava CSS-sääntö: img { position: relative }. Eli pallon paikka lasketaan siitä kohdasta jossa se normaalisti olisi.

Oletusarvo: img { float: none }

Pallo<p>Tässä on normaali tekstikappale</p>

<p>Tässä on normaali tekstikappale</p>

CSS-sääntö: img { float: left }

Pallo<p>Tässä on normaali tekstikappale</p>

<p>Tässä on normaali tekstikappale</p>

CSS-sääntö: img { float: right }

Pallo<p>Tässä on normaali tekstikappale</p>

<p>Tässä on normaali tekstikappale</p>

<< Alkuun

clear

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

Kuvan CSS: img { float: left }

Pallo<p>Tässä on normaali tekstikappale</p>

<p>Tässä on normaali tekstikappale</p>

Kuvan CSS: img { float: left }
CSS-sääntö: .clearL { clear: left }

Pallo<p>Tässä on normaali tekstikappale</p>

<p class="clearL">Kierto katkeaa tässä</p>

Kuvan CSS: img { float: right }
CSS-sääntö: .clearR { clear: right }

Pallo<p>Tässä on normaali tekstikappale</p>

<p class="clearR">Kierto katkeaa tässä</p>

<< Alkuun

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