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

komentáře (0)