Smitka development

WEBtriky II.

Přišel čas na druhý díl seriálku o tvorbě webu. V prvním díle jsme si ukázali několik technik, které dnes zužitkujeme.

Úkol

Základní technikou dnešního dílu bude pevné umístění patičky webu na spodku stránky, tak aby zde zůstala i při nedostatku textu. Rozdělíme si stránku na 2 vertikální části: <div id="main"></div> <div id="paticka"></div> Nyní bude potřeba roztáhnout #main na celou výšku stránky. Problém je v tom, že celou výšku stránky neovlivňuje okno prohlížeče, ale výška vykresleného obsahu. Proto při nastavení height:100% pro prvek #main nám patička bude plavat podle výšky aktuální stránky. Zabráníme tomu tím, že na 100% roztáhneme i prvek html a body, stránka se pak při nedostatku textu roztáhne na celou výšku prohlížeče.
#Main tedy nyní máme na celou výšku plochy prohlížeče a pokud přidáme patičku, tak se nám stránku prodlouží a musíme scrollovat. I tento neduh lze jednoduše odstranit a to tím, že #patičce nastavíme horní margin na zápornou hodnotu její výšky - patička se tak "vcucne" do předchozího prvku.



Další věc, kterou musíme vyřešit je různé chování vlastnosti height v prohlížečích. V některých udává pevnou výšku a v jiných zase minimální výšku  prvek se může dále roztahovat podle aktuálního obsahu (IE). To napravíme nastavením minimální výšky pro ostatní prohlížeče  zápisem, který starý IE nezná.
A úplně poselní věc, ke zdárné funkci naší patičky je nastvit prvku #main dolní padding tak, aby obsah tohoto prvku nezasahoval do vcuclé patičky - tedy na výšku patičky a ještě lépe o něco více, aby se nestalo, že text na patičku bude nalepen.
Výsledný základní css kód  vypadá tedy takto:
html, body, #main {     height: 100%;     margin: 0 } body > #main {     height: auto;     min-height: 100%;     } #obsah {     padding-bottom: 5em; } #paticka {     clear: both;     height: 3em;     margin-top: -3em; }

Další prvky webu

Máme stránku rozdělenou na hlavní část a patičku. Do hlavní části umístíme běžné prvky webu - hlavičku, menu a samozřejmě obsah. Menu, jak už máme zažito z minulého dílu, uděláme plovoucí vedle obsahu a vše vycentrujeme - k tomu bude potřeba obalit obsah a menu do dalšího prvku, kterému nastavíme šířku a centrování. Struktura bude tedy taková:
<div id="main">   <div id="hlavicka"></div>   <div id="frame">     <div id="menu"></div>     <div id="obsah">     ...     </div>   </div> </div> <div id="paticka"></div>Hlavičce dáme nějaký pěkný obrázek na pozadí, opticky ji oddělíme border-bottom, uděláme nějaké pěkné menu například pomocí listu, můžeme přidat boxík pro aktuality, pohrajeme si s barvami a máme hotvo :-).
Komentovaný zdrojový kód včetně dalších detailů opět naleznete v příkladu.

Něco navíc

Samořejmě nezapomenu na nějaký trik na konec. Dnes to bude, jak jen to nazvat, informační prvek k odkazům. Prostě taková pěkná věc, že při najetí na odkaz se k němu zobrazí například nějaký obrázek, či doplňující popis.
Budeme skrývat část odkazu, které obsahuje doplňující informace.
<a class="nahled" href="#">Odkaz<span>Informace</span></a>V css si nadefinujeme třídu .nahled, ve které budeme skrývat/odkrývat prvek span po najetí myši na odkaz. Span bude absolutně pozicován.
.nahled{     position: relative; } .nahled span{    position: absolute;    visibility:hidden; } .nahled:hover span{     visibility:visible;     top: 18px;   left: 40px; }Konkrétní ukázku najdete v příkladu, včetně korekce pro IE.

Ukázkový příklad


linkuj.czjagg.czpošli na vybrali.sme.skdeliciousTopČlánky.cz
Nahoru HOME PC•Elektro Programování Blog Autor Lynt Speciální backlink: Šulislav
© 2006 Smitka development