Dnes je Přidat k oblíbeným
Layout pomocí relatvního pozicování
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="description" content="Název webu">
<meta name="keywords" content="Klíčová slova pro vyhledávače">
<title>Titulek stránky</title>
<style>
/*Základní nastavení stránky*/
html {margin: 0;padding: 0;}
body {
margin: 0;
padding: 0;
font-family: Tahoma, Verdana, lucida, sans-serif;
background: #e6e6e6;
text-align: center;}
/*Největší div, který obaluje všechny ostatní*/
#hlavni {
width: 1000px;
min-height: 400px;
position: relative;
overflow: hidden;
margin: 0 auto;
text-align: center;
background: #aacded;
line-height: 1.5;
}
/*Vlastni layout*/
#hlavicka {
width: 1000px;
height: 150px;
position: relative;
background: #aa2288;
border-bottom: 2px solid #fff;
}
#hornimenu {
width: 1000px;
height: 25px;
position: relative;
background: #aacded;
border-bottom: 2px solid #fff;
}
#levypruh {
width: 200px;
position: relative;
float: left;
overflow: hidden;
background: #aacded;
}
#pravypruh {
width: 798px;
min-height: 400px;
_height: 400px;
position: relative;
float: right;
background: #aacded;
text-align: left;
}
#obsah {
width: 590px;
position: relative;
float: left;
background: #ffffdf;
min-height: 400px;
_height: 400px;
padding: 0 0 5px 15px;
}
#ankety{
width: 190px;
position: relative;
float: right;
background: #aacded;
min-height: 400px;
_height: 400px;
}
#paticka {
width: 1000px;
height: 25px;
clear: both;
background: #aacded;
border-top: 2px solid #fff;
}
</style>
</head>
<body>
<div id="hlavni"> <!-- Tento div obaluje všechny ostatní divy -->
<div id="hlavicka"></div> <!-- hlavička -->
<div id="hornimenu"></div> <!-- menu pod hlavičkou -->
<div id="levypruh">Nabídka vlevo</div> <!-- menu - levý pruh -->
<div id="pravypruh"> <!-- pravý pruh- obsahuje text a ankety -->
<div id="obsah"> <!-- prostřední pruh s textem -->
<h3>Morbi tempus posuere tortor</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent cursus, risus et cursus posuere, libero leo bibendum velit, eget suscipit diam arcu fermentum tellus. In vitae neque. Vivamus sapien leo, congue ac, placerat non, fringilla vitae, ante. Donec tempus. Donec mollis, risus iaculis tincidunt cursus, libero eros egestas arcu, vitae tincidunt quam nibh sit amet quam. Sed pulvinar. Suspendisse porttitor risus at odio. Suspendisse vulputate molestie orci. Ut eros dolor, scelerisque quis, rutrum in, posuere non, nisi. Mauris sed ipsum. Proin scelerisque enim in metus. Ut enim ligula, dapibus vel, sollicitudin non, cursus non, dolor. Suspendisse quam nulla, varius nec, consectetuer at, eleifend ut, elit.</p>
</div>
<div id="ankety">
Líbí se Vám tento web?<!-- pravý pruh- ankety -->
</div>
</div> <!-- konec pravého pruhu s textem a anketami -->
<div id="paticka">Made by Kookie Kekel</div><!-- patička -->
</div> <!-- konec divu hlavni -->
</body>
</html>
Jak to bude vypadat?
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="description" content="Název webu">
<meta name="keywords" content="Klíčová slova pro vyhledávače">
<title>Titulek stránky</title>
<style>
/*Základní nastavení stránky*/
html {margin: 0;padding: 0;}
body {
margin: 0;
padding: 0;
font-family: Tahoma, Verdana, lucida, sans-serif;
background: #e6e6e6;
text-align: center;}
/*Největší div, který obaluje všechny ostatní*/
#hlavni {
width: 1000px;
min-height: 400px;
position: relative;
overflow: hidden;
margin: 0 auto;
text-align: center;
background: #aacded;
line-height: 1.5;
}
/*Vlastni layout*/
#hlavicka {
width: 1000px;
height: 150px;
position: relative;
background: #aa2288;
border-bottom: 2px solid #fff;
}
#hornimenu {
width: 1000px;
height: 25px;
position: relative;
background: #aacded;
border-bottom: 2px solid #fff;
}
#levypruh {
width: 200px;
position: relative;
float: left;
overflow: hidden;
background: #aacded;
}
#pravypruh {
width: 798px;
min-height: 400px;
_height: 400px;
position: relative;
float: right;
background: #aacded;
text-align: left;
}
#obsah {
width: 590px;
position: relative;
float: left;
background: #ffffdf;
min-height: 400px;
_height: 400px;
padding: 0 0 5px 15px;
}
#ankety{
width: 190px;
position: relative;
float: right;
background: #aacded;
min-height: 400px;
_height: 400px;
}
#paticka {
width: 1000px;
height: 25px;
clear: both;
background: #aacded;
border-top: 2px solid #fff;
}
</style>
</head>
<body>
<div id="hlavni"> <!-- Tento div obaluje všechny ostatní divy -->
<div id="hlavicka"></div> <!-- hlavička -->
<div id="hornimenu"></div> <!-- menu pod hlavičkou -->
<div id="levypruh">Nabídka vlevo</div> <!-- menu - levý pruh -->
<div id="pravypruh"> <!-- pravý pruh- obsahuje text a ankety -->
<div id="obsah"> <!-- prostřední pruh s textem -->
<h3>Morbi tempus posuere tortor</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent cursus, risus et cursus posuere, libero leo bibendum velit, eget suscipit diam arcu fermentum tellus. In vitae neque. Vivamus sapien leo, congue ac, placerat non, fringilla vitae, ante. Donec tempus. Donec mollis, risus iaculis tincidunt cursus, libero eros egestas arcu, vitae tincidunt quam nibh sit amet quam. Sed pulvinar. Suspendisse porttitor risus at odio. Suspendisse vulputate molestie orci. Ut eros dolor, scelerisque quis, rutrum in, posuere non, nisi. Mauris sed ipsum. Proin scelerisque enim in metus. Ut enim ligula, dapibus vel, sollicitudin non, cursus non, dolor. Suspendisse quam nulla, varius nec, consectetuer at, eleifend ut, elit.</p>
</div>
<div id="ankety">
Líbí se Vám tento web?<!-- pravý pruh- ankety -->
</div>
</div> <!-- konec pravého pruhu s textem a anketami -->
<div id="paticka">Made by Kookie Kekel</div><!-- patička -->
</div> <!-- konec divu hlavni -->
</body>
</html>
Jak to bude vypadat?
Rozbor jednotlivých částí
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">Klasické !DOCTYPE.
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="description" content="Název webu">
<meta name="keywords" content="Klíčová slova pro vyhledávače">
<title>Titulek stránky</title>
</head>
Hlavička s titulkem a meta informacemi.
html {margin: 0;padding: 0;}
body {
margin: 0;
padding: 0;
text-align: center;}
Tímto kouskem kódu jsme vycentrovali hlavní div na střed.
#hlavni {
- Div, který obaluje všechno ostatní min-height: 400px;
Zajišťujeme, aby se při malém množství textu stránka rapidně nesnížila. position: relative;
overflow: hidden;
Co se nevejde, bude oříznuto- zajišťujeme, aby se při enormním zvětšení písma uživatelem stránky nerozpadly. margin: 0 auto;
text-align: center;
Zajišťujeme vycentrování tohoto divu i pro IE, který moc nechápe, že by to mělo být uprostřed line-height: 1.5;
Vyšší řádkování pro lepší čtení }
/*Vlastni layout*/
#hlavicka {
Vyplňuje celou šířku divu #hlavni, takže jí nenastavujeme žádné float }
#hornimenu {
Je tu jen pro okrasu a demonstraci možných hrátek s kódem, jestli ho nepotřebujete, klidně ho celé vynechte =). Nezapomeňte ho ale vymazat z CSS i z HTML =) }
#levypruh {
menu, umístěné doleva position: relative;
float: left;
}
#pravypruh {
obsahuje dva další divy- s textem a s anketami width: 798px;
necháváme vůli 2px, aby se to nerozpadlo, pokud bychom někde nastavovali padding, border nebo margin min-height: 400px;
minimální výška _height: 400px;
nastavení minimální výšky i pro IE, který nechápe min-height. Je to ale nevalidní, takže to možná někdy v budoucnosti nebude fachat background: #aacded; Zde nastavujeme modré pozadí. Předpokládáme, že text bude vždy delší než ankety (to ještě ošetříme u textu) a kdybychom nastavili žluté, pak by byl sloupec anket modrý jen nahoře a dole by byl žlutý. Takhle to vypadá, že je sloupec anket modrý až úplně dolů, ale ve skutečnosti je pod anketami modrý právě tento #pravypruh. Tím jsme vyřešili velký problém absolutního pozicování- podbarvení sloupců až dolů při jakékoli výšce textu. }
#obsah {
float: left;
Umístění vlevo v rámci divu #pravypruh. background: #ffffdf;
Žluté podbarvení textu min-height: 400px;
_height: 400px;
Zajišťujeme, aby byl text vždy delší než ankety a aby pod textem nevznikalo prázdné modré místo padding: 0 0 5px 15px;
zajišťujeme, aby se nám text nelepil na okraj. Musíme ale počítat s tím, že IE připočítává do width padding a border a tak musíme zmenšit width o levý + pravý padding, aby se sloupec s anketami neposunul až pod text, protože by se doprava nevešel. Čtyři hodnoty paddingu jsou v pořadí horní- pravý- dolní- levý. }
#ankety{
Jsou umístěné vpravo, mají modré pozadí, jinak nic zvláštního }
#paticka {
Je přes celou šířku divu hlavni clear: both;
vykresluje se až pod všemi plovoucími prvky }
</style>
Kód HTML je dostatečně okomentovaný již ve zdrojovém kódu a není na něm nic těžkého na pochopení. Celkově je to už docela složitější- nemusíte chápat úplně všechno jak funguje, do toho přijdete časem. Stačí, že chápete alespoň ten základní princip. Tento zdroják si klidně zkopírujte a použijte ho na svých stránkách. Nikdo se potom nebude zlobit, pokud někam na své stránky vložíte odkaz <a href="http://www.kekel.tym.cz">CSS relativní pozicování (nebo cokoliv jiného)</a>.
Jak se dělá web?
Jazyk HTML
Kompletní přehled HTML tagů
CSS kaskádové styly
Úvod do CSS
Zápis CSS a propojení s HTML
Selektory
Výstupní zařízení
Dědičnost a kaskáda
Typy prvků v CSS
Kompletní přehled CSS vlastností
Rozdílný vzhled v prohlížečích
Délkové jednotky v CSS
Ořezávání a posun
Obtékání
Absolutní pozicování v CSS
Relativní pozicování v CSS
Layout absolutním pozicováním
Layout relativním pozicováním
Pokročilý layout - tzv. Svatý grál
Rady a tipy
Užitečné nástroje
Problém? Poradíme!
Reference a odkazy
O autorovi