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í.

Ř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.

HTML

<div id=“wrapper“>
<div id=“page“>

   <p>…</p>

</div>
</div>

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

Jiří Šarišský
Latest posts by Jiří Šarišský (see all)

Související příspěvky:

Změna obrázku při najetí kursoru Default ThumbnailJiří Tvrdek – rozhovor Lukáš Havrlant (Timy) – rozhovor Třídy a identifikátory