Změna velikosti písma

Drobečková navigace

CSS blog > Nastavení patičky na 100% šířky monitoru

Nastavení patičky na 100% šířky monitoru



Níže naleznete jednoduchý způsob, jak nastavit pozadí patičky přes celou šíři stránek, kdy pozadí bude funkční i v aplikaci IE. Některé Vaše návrhy tak budou funkční i pro zákazníky využívající právě tuto aplikaci:)

CSS

body #ipocontainer {
    /* image.php?... nahraďte svým obrázkem */
background: url("image.php?nid=11679&oid=3301651") repeat-x scroll center bottom transparent;
    /* nastavení 100% šířky velikosti okna */
    width: 100%;
    /* nastavení paddingu zespoda podle výšky obrázku */
    padding-bottom: 346px;
}
/* rozvržení */
#ipotopmenuwrapper, #ipoheader, #ipomain {
    /* nastavení šířky hlavních bloků podle rozvržení. Záměna bude zpravidla 1024px/910px */
    width:1024px;
    /* nastavení zarovnání hlavních bloků na střed */
    margin: 0 auto;
}

Nastavení specifických prvků do patičky (bloky kontaktů, navigace, apod.) se nemění. Podmínkou je, že do patičky musí být vždy vložen obrázek. Pro úsporu dat návštěvníka nezapomínejte na to, že stačí vyříznout pozadí, pokud to patička umožní, o šířce 1px a nastavit mu opakování pozadí horizontálně (repeat-x).

Pokud je patička graficky složitější, snažte se kapacitu obrázku snížit vzhledem ke kvalitě co nejvíc pro úsporu dat návštěvníka

Pozn.:Takto nastavené pozadí překrývá standardní vnější pozadí. Obrázek do patičky již nemusíte standardní cestou vkládat přes ikonu vložení obrázku.


Kalendář akcí

Po Út St Čt So Ne
29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 1 2