Ovládněte tvorbu webu!
S námi to zvládne opravdu každý.
Design stránky pomocí pozicování
Pomocí CSS můžete umístit na libovolné místo www stránky element a přitom nebude záležet kde bude element zapsán ve zdroji www stránky.
To lze velice dobře využít při návrhu stránky a navíc to má spousty výhod proti tabulkám.
Jednou z výhod je že stránku můžete ve zdroji poskládat z elementů DIV a co bude důležitější zapsat dříve stránka se pak bude načítat podle toho jak je zapsána ve zdroji a nejdůležitější části se zobrazí jako první.
Dále se toho dá využít pokud máte v horní části stránky banner můžete ho zapsat ve zdroji až nakonec, při zobrazování stránky se začne načítat stránka a teprve když bude celá načtená začne se stahovat banner.
Position, top, left, z-index a width
Ve stylovém předpisu si vystačíme z vlastnostmi position, top, left a width taky se bude hodit vlastnost z-index.
Nejprve si připravíme styl, začneme vlastností position a nastavíme na position:absolute to znamená, že element se zobrazí absolutně na souřadnicích podle vlastností TOP a LEFT.
Další vlastností je top, vlastnost top určuje jak daleko se zobrazí horní okraj elementu od rodičovského prvku podobnou vlastností je left která udává jek daleko se zobrazí levá strana elementu od rodičovského prvku. Jako hodnoty se uvádějí délky (procenta, px, em,).
Další nezbytnou vlastností je width která určuje šířku elementu, jako hodnoty se uvádějí délky (procenta, px, em,).
A nakonec vlastnost z-index, která určuje pokud se budou elementy překrývat, který se zobrazí nejvýš jako hodnota se uvádí číslo (element s vyšším z-index překryje element s nižším z-index).
Prohlédněte si příklad, nebo si ho klidně zkopírujte, příklad je sice velice jednoduchý, ale přesto se pomocí pozicování dá vytvořit velice pěkná www stránka (např. tyto stránky byly původně dílem pozicování).
Zdrojový kód
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>laylout pomocí pozicování v CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<style>
DIV.head{
POSITION:absolute;
LEFT:10px;
TOP:0px;
WIDTH:750px;
HEIGHT:100px;
background-color:#92A7BE;
}
DIV.levy{
POSITION:absolute;
LEFT:10px;
TOP:105px;
WIDTH:165px;
background-color:#92A7BE;
}
DIV.obsah{
POSITION:absolute;
LEFT:185px;
TOP:100px;
WIDTH:410px;
}
DIV.pravy{
POSITION:absolute;
LEFT:595px;
TOP:105px;
WIDTH:165px;
background-color:#92A7BE;
}
</style>
</head>
<body>
<div class="head">
Hlavička ...
</div><!--konec hlavičky -->
<div class="levy">
levý sloupec a spousty odkazů
</div><!--konec levého sloupce -->
<div class="obsah">
Hlavní odsah stránky a další texty
</div><!--konec hlavního obsahu -->
<div class="pravy">
Pravý sloupes a další texty, ikonky, reklama...
</div><!--konec pravého sloupce -->
</body>
</html>
Reklama
Copyright (c) 2004 Tvorba Webu - Kontakt - mapa webu