Esimerkkisivu 2 - CSS:

Sisältöä:

Kaksoisrivivälitys ilmaistaan määreellä line-height:2em. Toinen tapa osittaa se on line-height:200%. Kummankin pitäisi antaa sama tulos, mutta ainakin IE on joskus toiminut väärin tässä suhteessa.

Tekstialkioiden ja kuvien sijoittelu suhteessa toisiinsa

Tällainen on baseline box kuva.

Tällainen on middle box kuva

Tällainen on top box kuva.

Tällainen on bottom box kuva.

<p> Tällainen on baseline <img style="vertical-align:baseline" src="../myimg/toolpack.gif"> kuva. </p;gt;
<p>Tällainen on middle <img style="vertical-align:middle" src="../myimg/toolpack.gif"> kuva </p;gt;
<p> Tällainen on top <img style="vertical-align:top" src="../myimg/toolpack.gif"> kuva. </p;gt;
<p> Tällainen on bottom <img style="vertical-align:bottom" src="../myimg/toolpack.gif"> kuva.</p;>

Tekstin korostusmerkintöjä

overline
underline
line-through
blink(ei vilku IE:ssä)
none

Väritetään

Värikarttoja:

Reunuksen piirtotapoja

Elementtien sijoittelua

box box

Tämän tekstin pitäisi sijoittua kuvien väliin

 

 

 

<div style="position:relative; top:0px;left:0px; height:120px;">
<img style="position:absolute; left:30px; top:20px;" src="../myimg/toolpack.gif">
<img style="position:absolute; left:190px; top:70px;" src="../myimg/toolpack.gif">
<p style="position:absolute; left:100px; top:40px; width:100px;">
Tämän tekstin pitäisi sijoittua kuvien väliin</p> </div>

Float elementit

Tämä tesksti on float elementissä.

Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä.

<div style="border:solid thin blue; bacground-color:#F0F8FF">
<p style="background-color:yellow; width:100px; float:right; border: solid thin blue">
Tämä tesksti on float elementissä. </p>
<p>Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. </p>
</div>

 

Tämä tesksti on float elementissä nro 1.

Tämä tesksti on float elementissä nro 2.

Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä.

<div style="border:solid thin blue; bacground-color:#F0F8FF">
<p style="background-color:yellow; width:100px; float:right; border: solid thin blue">
Tämä tesksti on float elementissä nro 1. </p>
<p style="background-color:yellow; width:100px; float:right; border: solid thin blue">
Tämä tesksti on float elementissä nro 2. </p>
<p>Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. Ympäröivä teksti väistää float-elementtiä. </p>
</div>

Kerrostuvat alueet

Ei kerrostusta

Alue 1
Alue 2
Alue 3
<div style="background-color:silver;width:600px; height:240px;
border:solid thin black;position:relative; top:0px;left:0px; ">
<div style="border:solid thin blue; width:200px; height:200px;
background-color:#F0F8FF; position:absolute; left:20px; top:20px">Alue 1</div>
<div style="border:solid thin blue; width:200px; height:200px; background-color:#F0F8FF; position:absolute;left:240px; top:20px">Alue 2</div>
<div style="border:solid thin blue; width:200px; height:50px; background-color:#EEE8AA ; position:absolute; left:120px; top:60px">Alue 3</div>
</div>

Kerrokset: Alue 1:0, Alue 3: 1, Alue 2:2

Alue 1
Alue 2
Alue 3
<div style="bacKground-color:silver;width:600px; height:240px;
border:solid thin black;position:relative; top:0px;left:0px; ">
<div style="border:solid thin blue; width:200px; height:200px;
background-color:#F0F8FF; position:absolute; left:20px; top:20px">Alue 1</div>
<div style="border:solid thin blue; width:200px; height:200px;
z-index:2; background-color:#F0F8FF; position:absolute;left:240px; top:20px">Alue 2</div>
<div style="border:solid thin blue; width:200px; height:50px;
z-index:1; background-color:#EEE8AA ; position:absolute; left:120px; top:60px">Alue 3</div>
</div>

Alue 3 päällä, läpinäkyvyys

Alue 1
Alue 2
Alue 3
<div style="bacKground-color:silver;width:600px; height:240px;
border:solid thin black;position:relative; top:0px;left:0px; ">
<div style="border:solid thin blue; width:200px; height:200px;
background-color:#F0F8FF; position:absolute; left:20px; top:20px">Alue 1</div>
<div style="border:solid thin blue; width:200px; height:200px;
background-color:#F0F8FF; position:absolute;left:240px; top:20px">Alue 2</div>
<div style="border:solid thin blue; width:200px; height:50px;
z-index:1; opacity:0.7; background-color:#EEE8AA ; position:absolute; left:120px; top:60px">Alue 3</div>
</div>