Hotová řešení > Spodní lišta jako na Facebooku

Spodní lišta jako na Facebooku

Tato kapitola ukazuje možné řešení lišty naspodu okna prohlížeče, která neroluje spolu s obsahem. Její šřka je 90 % šířky okna prohlížeče – je tedy natahovací. Toto je výsledek.

Řešení je funkční i v IE 6 s téměř nepostřehnutelným nedostatkem (viz dále). Nevím, jak to mají uděláno na Facebooku, ale tam se lišta chová perfetně i v IE 6. :-)

CSS

* {margin: 0; padding: 0;}
html {height: 100%; font-size: 62.5%;}
body {
   height: 100%;
   background-color: #FFFFFF;
   color: #101010;
   text-align: center;
   font: 1.6em Verdana, Arial, Helvetica, sans-serif;
   }

#wrapper {height: 100%; margin: 0 auto;}
#page {width: 86%; margin: 0 auto; text-align: left;}
p {margin: 0 0 18px 0; line-height: 1.8;}

#lista {
   position: fixed;
   bottom: 0;
   left: 5%;
   background-color: #DDD;
   width: 90%;
   line-height: 40px;
   border: 1px solid gray;
   border-bottom: 0;
   }

Lišta je umístěna na spodek okna prohlížeče pomocí position: fixed. Vycentrována je pomocí left: 5 % — šířka lišty je 90 % šířky okna prohlížeče. Pokud tedy lištu šoupneme o 5 procent od levého okraje, mezera mezi lištou a pravým okrajem bude pak taky 5 procent, lišta je tedy uprostřed.

CSS pro Internet Expolrer 6 a nižší

html, body {height: 100%; overflow: hidden;}

#wrapper {height: 100%; overflow: auto;}

#lista {
   position: absolute;
   bottom: 0;
   left: 3.9%;
   }

Pro Internet Explorer 6 a nižší je lišta pozicována pomocí position: absolute (protože fixní pozici nepodporuje) na spodek okna prohlížeče. Blok s obsahem má výšku 100 % výšky okna prohlížeče a pomocí vlastnosti overflow: auto; je zajištěno rolování obsahu; aby zajížděl pod lištu a ta se nehýbala. Více o tomto řešení se můžete dočíst u Pixyho.
Jelikož u tohoto řešení se posuvník počítá do šířky okna prohlížeče, přesně vycentrovat lištu je obtížné. Proto je vlastnost left nastavena na 3.9% (nastaveno od oka, aby to sedělo). Úplně přesně na středu tedy lišta není, zkuste měnit šířku okna. Jedná se ale o tolerovatelný nedostatek.

Na Facebooku však lišta sedí přesně i s vypnutým Javascriptem. Pokud tedy víte o lepším řešení, než jsem uvedl já, napište mi.


HTML

<div id="wrapper">
<div id="page">

   <p>…</p>

</div>
</div>

<div id="lista">Lišta jako na Facebooku</div>

Stáhnout uvedené řešení ↓ (ZIP, staženo 1906×)

 

Rovnou k použití

Novinky na webu

Chronologický přehled novinek na tomto webu

Důležité a užitečné

Vstup do diskusního fóra

Diskusní fórum

Mapa webu

Prohlédněte si strukturu webu pro snažší orientaci.

Stažení tohoto webu

Stáhnout celý web (V budoucnu)

Vytvoření webu od A do Z

Nemáte čas nebo nechcete studovat?
Přečtěte si návod, jak vytvořit web od A do Z, aneb snadno a rychle… (V budoucnu)

Ódy na tento web

Zapějte taky nějakou…

Podpora webu

Jak můžete podpořit tento web

Aktualizace webu

Poslední aktualizace webu proběhla
24. 3. 2010.

 

 TOPlist