Obtékání
Pomocí obtékání můžeme připravit celé rozvržení www stránky a tak se zbavit tabulkového rozvržení, obtékání se používá i při plavání obrázků v textu.
float
Může nabývat hodnot: left, right, none a intherit, při použití left, nebo right bude prvek zarovnán vlevo, nebo vpravo a z druhé strany bude obtékán textem. Při použití none prvek neplave. Intherit znamená že hodnota se zdědí po rodičovském prvku.
V následujícím příkladu je použita vlastnost float k obtékání obrázků:
img.right {float:right}
img.left {float:left}
</style>
Neberte tento text moc vážně je tu pouze aby bylo vidět jak jsou ty obrázky obtékány a nějaké další texty <img src=“../../logo.gif“ class=“right“>a nějaké další texty a nějaké další texty a nějaké další texty a nějaké další texty v a nějaké další texty a nějaké další texty a nějaké další texty <img src=“../../logo.gif“ class=“left“>a nějaké další texty a nějaké dalšía nějaké další texty a nějaké dalšía nějaké další texty a nějaké dalšía nějaké další texty a nějaké dalšía nějaké další texty a nějaké dalšía nějaké další texty a nějaké dalšía nějaké další texty a nějaké další
clear
Vlastnost clear určuje kde se má prvek zobrazit. Až pod plovoucím prvkem vlevo, vpravo, pod všemi plovoucími prvky nebo bez vlivu na polohu boxu.
Hodnoty: left, right, both, none a intherit.
- left – Prvek se zobrazí až pod plovoucím prvkem s nastavenou vlastností float:left.
- right – Prvek se zobrazí až pod plovoucím prvkem s nastavenou vlastností float:right.
- both – Prvek se zobrazí až pod všemi plovoucími prvky.
- none – Výchozí hodnota prvek se zobrazí normálně.
V následujícím příkladu je dvousloupcový laylout z hlavičkou a patkou který funguje ve všech nejmodernějších prohlížečích.
<html>
<head>
<style>
body {
text-align: center;
background-color: black;
margin: 0px 0px 20px 0px;
padding: 0px 0px 0px 0px;
}
div.body {
width: 47em;
text-align: left;
background-color : White;
margin : 10px auto;
padding : 0px 0px 0px 0px;
border : 1px solid black; }
div.head {
width: 100%;
height : 100px;
clear: both;
background-color : #8AAFE3;
margin : 0px 0px 0px 0px;
padding : 0px 0px 0px 0px;
}
div.obsah {
width: 34em;
float: right;
background-color : white;
margin : 10px 0px 0px 0px;
padding : 0px 0px 0px 0px;
}
div.pravy {
width: 12em;
float: left;
margin: 0px 0px 0px 0px;
padding : 0px 0px 0px 0px;
background-color : #F9F9F9;
border-right : 1px solid #cccccc;
}
div.konec-obsahu {
clear: both;
margin : 5px 0px 5px 0px;
padding : 0px 0px 0px 0px;
}
div.patka {
clear: both;
width: 47em;
text-align: left;
background-color: white;
margin : 5px auto 5px auto;
}
</style>
<title>design pomocí obtékání</title>
</head>
<body><div class=“body“><!–začátek div-body–>
<div class=“head“><!–začátek hlavičky–>
hlavička
</div><!–konec hlavičky–>
<div class=“obsah“><!–začátek obsahu–>
Hlavní obsah stránky
</div><!–konec obsahu–>
<div class=“pravy“><!–začátek pravého menu–>
levé menu a nejaké
</div><!–konec pravého menu–>
<div class=“konec-obsahu“></div></div><!–konec div-body–>
<div class=“patka“><!–začátek patky–>
patka…
</div><!–konec patky–>
</body>
</html>
Při návrhu stránky pomocí obtékání v CSS je třeba pečlivě testovat ve všech nejrozšířenějších prohlížečích, stránka by mohla vypadat v IE 6 pěkně, ale v mozille zcela špatně.