Tvorba webu krok za krokem
od HTML až po SEO a webhosting
Návrh stránky pomocí pozicování
Pomocí CSS můžete umístit element na libovolné místo webové stránky, aniž by záleželo na tom, kde je element zapsán ve zdrojovém kódu stránky.
To lze velmi dobře využít při návrhu stránky a navíc to má spoustu výhod oproti tabulkám.
Jednou z výhod je možnost poskládat stránku ve zdroji z elementů DIV. Pokud důležité části zapíšete dříve, stránka se bude načítat podle pořadí ve zdroji a nejdůležitější části se zobrazí jako první.
Stejně lze postupovat, pokud máte v horní části stránky banner: ve zdroji ho můžete zapsat až nakonec. Při načítání stránky se tak začne banner stahovat teprve poté, co se načte její důležitější obsah.
Position, top, left, z-index a width
Ve stylovém předpisu si vystačíme s vlastnostmi position, top, left a width; hodit se bude také vlastnost z-index.
Nejprve si připravíme styl. Začneme vlastností position a nastavíme ji na position: absolute. Element se pak zobrazí absolutně na souřadnicích určených vlastnostmi top a left.
Vlastnost top určuje vzdálenost horního okraje elementu od rodičovského prvku. Podobná vlastnost left určuje vzdálenost levé strany 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á v případě překrývání elementů určuje, který se zobrazí nejvýše. 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. Je sice velmi jednoduchý, ale i pomocí pozicování lze vytvořit pěknou webovou stránku (například 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>Layout 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