Design pomocí obtékání: float, clear

Pomocí obtékání můžeme připravit celé rozvržení www stránky a tak se zbavit tabulkového rozvržení, které má spoustu nevýhod, dále se obtékání používá při plavání obrázků v textu.

Vlastnost 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ů

Zdrojový kód

<style>
img.right{float:right}
img.left{float:left}
</style>

<p>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ší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ší</p>

zobrazit výsledek

Vlastnost 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.

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.

Zdrojový kód

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><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-bottom : 1px solid Black; border-top : 1px solid Black; border-left : 1px solid Black; border-right : 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>

zobrazit výsledek

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ě.

Reklama

Webhosting C4



Copyright (c) 2004 Tvorba Webu - Kontakt - mapa webu - RSS