Ovládněte tvorbu webu!
S námi to zvládne opravdu každý.
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>
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.
- 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.
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>
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
Copyright (c) 2004 Tvorba Webu - Kontakt - mapa webu