V minulé lekci jsme vytvořili "třísloupcový" layout pomocí absolutního umístění divů (vlastnosti position). Divy s touto vlastností jakoby "plavou" nad obsahem stránky, v této lekci použijeme pro divy s nabídkami (vlevo a vpravo) vlastnost float, takové divy zůstávají prvky stránky a ostatní objekty kolem nich obtékají podobně jako například text kolem obrázků zarovnaných pomocí parametru align (left, right).
Třísloupcový layout pomocí float
Zaměříme se na jádro problému, část mezi hlavičkou a patičkou, kterou chceme rozdělit na tři části. Způsob rozdělení i další postup jsem převzal z knihy Mistrovství v CSS autorů Croft, Lloyd, Rubin.
První bude dělení na dvě části a to divy s identifikátory #navigace (levá nabídka) a #obal_obsahu, to je pravá část, která bude obsahovat vlastní obsah a pravou nabídku.
#obal_obsahu
{
float:right;
width:75%;
}
#navigace
{
width:25%;
float:left;
padding-top:5px;
}
Jak vidíte, jedna část má vlastnost float nastavenou na left a druhá na right a zároveň jsou určené jejich šířky v procentech, přičemž součet šířek je 100%.
V další fázi rozdělíme div s identifikátorem #obal_obsahu opět na dvě části, vlevo bude vlastní obsah #obsah_vnitrni a vpravo druhá nabídka #podobne:
#obsah_vnitrni
{
width:70%;
padding:10px 0 10px 15px;
float:left;
}
#podobne
{
float:right;
width:25%;
}
Tentokrát je na šířku ponechaná rezerva pro případné paddingy, které různé prohlížeče počítají různě (tedy hlavně IE).
Základní princip není tedy složitý, ale protože budeme chtít opět všechny divy uzavřít do celku (#obal), je nutné do divu s identifikátorem #obal za uvedené divy umístit ještě jeden div (#zapati) s vlastností clear:both;. Díky této vlastnosti se #zapati zobrazí až za všemi plovoucími prvky a tak vlastně "natáhne" #obal (jinak by se #obal "zhroutil", neměl by žádnou výšku):
#zapati
{
clear:both;
}
Pokud jste princip pochopili, můžeme se pustit do vlastní práce (ne vždy se ale všechno povede napoprvé:-)).
Tři sloupce s hlavičkou a patičkou pomocí float
Hlavní problém - rozdělení stránky - byl vyřešený v minulém odstavci, doplňme už jen vlastní obsah a několik drobností ve stylu.
V některých prohlížečích může dojít k chybě při zobrazování nadpisu <h1> použitého v hlavičce, proto je mu ve stylu vynulovaný margin.
Zdroj stránky (html) bude velmi podobný všem předcházejícím (kromě samotného obsahu), nezapomeňte doplnit hlavičku stránky a chybí také jeden nenápadný ale důležitý div zmiňovaný výše:
<div id="obal">
<div id="zahlavi"><h1>Naše výlety</h1></div>
<div id="obal_obsahu">
<div id="obsah_vnitrni">
<p>V 6. třídě jsme byli na škole v přírodě ve Špindlerově Mlýně. Nachodili jsme po horách spoustu kilometrů až z toho někoho (z učitelů) bolely nohy :-) .<br/>
Přes všechno fyzické utrpení tam ale bylo krásně...<br/><br/>
<center>
<img src="hory.jpg" width=300>
</center>
</p>
</div>
<div id="podobne">
<h2>Turistické odkazy</h2>
<ul>
<li><a href="http://www.turistika.cz">www.turistika.cz</a></li>
<li><a href="http://www.virtualniprohlidky.cz">www.virtualniprohlidky.cz</a></li>
<li><a href="http://www.alpina.cz">www.alpina.cz</a></li>
</ul>
</div>
</div>
<div id="navigace">
<h2>Naše výlety</h2>
<ul>
<li><a href="sestka.html">6. třída - Krkonoše</a></li>
<li><a href="praha.html">7. třída - Praha</a></li>
<li><a href="orlicke.html">7. třída - Orlické hory</a></li>
</ul>
</div>
</div>
Ani styl by nás už neměl překvapit, všimněte si vlastností float:
body
{
margin:10px 40px;
padding:0;
text-align:center;
background: #f0f0f0;
font-family: arial;}
#obal
{
text-align:left;
background:#dade75;
border:1px solid gray;
}
#zahlavi
{
background: url(poz_blednouci.gif) repeat-x bottom left;
padding:10px 15px 10px 13px;
color: Silver; text-align: center;
}
#obal_obsahu
{
float:right;
background:#fff url(prechod_nav_obsah.gif) repeat-y left;
width:75%;
}
#navigace
{
width:25%;
float:left;
padding-top:5px;
}
#obsah_vnitrni
{
width:70%;
padding:10px 0 10px 15px;
float:left;
}
#podobne
{
float:right;
width:25%;
}
#podobne ul
{
margin:0;
padding-left:15px;
}
#navigace h2 {
font-size: large; padding-left: 10px;
}
#podobne h2
{
font-size:large;
}
#zapati
{
clear:both;
}
h1 {
margin: 0px;
}
#podobne a:hover {
color: Aqua;
}
Všimněte si, že u žádného z divů nebyly použité rámečky (border), vzhledem ke známým problémům s výškami sloupců a různě počítaným šířkám v různých prohlížečích. Ve stylu najdete řešení takzvaného falešného rámečku pomocí obrázku na pozadí divu #obal_obsahu. Můžete použít i další obrázek:
prechod_nav_obsah.gif: 
poz_blednouci.gif: 
Úkoly:
Úkol (5 bodů):
Vytvořte stránku podle textu lekce alespoň s jedním obrázkem, odkazy nemusí fungovat (měla by se zobrazit správně alespoň v IE a Mozille). Pozor - chybí jeden důležitý div! Chybné zobrazení může způsobit i špatná hlavička zdroje. Upravte také vlastnosti odkazů v navigaci a další vzhled podle sebe.
Další prémiové body můžeš získat za další funkční odkazy na této stránce, tedy další stránky o výletech se stejným stylem.
| Název školy: | Základní škola, Hradec Králové, M. Horákové 258 |
| Název projektu: | EU peníze školám |
| Číslo projektu: | CZ.1.07/1.4.00/21.2575 |
| Téma: | Tvorba WWW stránek |
| Název: | VY_32_INOVACE_19_10B_tvorba www19 |
| Autor: | Pavel Petr |