0 Kč bez DPH

Patička vždy dole v šabloně ERIS

5. 3. 2014

Často se stává, že vlastní obsah stránky je příliš krátký a patička stránky, která se zobrazuje standardně podle délky obsahu, je někde uprostřed stránky. Což nemusí vždy vypadat hezky. V tomto návodu si ukážeme, jak se to dá na šabloně ERIS změnit a mít patičku stránky vždy při spodním okraji okna.

Web skříně.eu     Web neonpower.cz
Ukázky webů vyhotovených v rámci balíčku, kde je použita patička vždy dole

Klíčem je vlastní CSS styl

Šablona ERIS je vytvořena tak, že nabízí velké možnosti stylování. Stačí tedy pouze dopsat do vlastního CSS stylu následující kód, který doporučujeme umístit až na konec vlastního stylopisu:

/*------------ patička vždy dole -----------------*/
html, body {
    height: 100%;
}
#wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -149px; /* spodní margin je negativní hodnota od výšky patičky + horní hranice 'border' (tady 4px) */
}
#footer, .push {
    height: 145px;  /* '.push' musí být stejnou výšku jako 'footer' */
}
/*----------// konec patičky vždy dole ------------*/ 

Uvedený zápis je pro výchozí stav šablony ERIS (původní patičku webu), pokud používáte vlastní patičku, je třeba upravit hodnoty (výšku patičky a záporný horní margin).

Princip řešení

Element <div>  s třídou .push, který již je součástí šablony ERIS, "dělá místo" pro následnou patičku, která je záporným marginem posunuta na místo  elementu .push nebo na konec stránky.

Pokud je stránka delší než 100 % okna, patička se zobrazí normálně na konci stránky, chová se jako obvykle. Pokud je obsah kratší než 100 % výšky okna, patička se zobrazí na spodním okraji okna.

Zápis vlastního stylu musí být přesně v pořadí, jako je uvedeno výše, jinak výsledek nebude fungovat.

Řešení je převzato z anglického originálu: http://ryanfait.com/sticky-footer/

 

Další návody k úpravám šablony ERIS

 

Vladimír Souš
admin(zav)zoner.cz

Přidat komentář

Přehled komentářů

  • patička vždy dole v šabloně ERIS

    16. 1. 2017 14:33:15 | Radek Trnka

    Dobrý den
    můžete prosím poradit jak uvedený postu nastavit na šabloně ONE
    děkuji
    Radek Trnka

    Odpovědět | Zobrazit odpovědi

    • Re: patička vždy dole v šabloně ERIS

      19. 1. 2017 17:32:05 | Tým inPage

      Dobrý den,

      návod naleznete nově v článku https://blog.inpage.cz/inpage/paticka-vzdy-dole-v-sablone-one/.

      Odpovědět

  • RE: Patička

    28. 7. 2014 12:18:27 | Vladimír Souš

    Dobrý den pane Holečku,
    patičku můžete vypnout pomocí vlastního CSS zápisu:
    #footer {display: none;}
    anebo lepší a čistější řešení vytvořit prázdnou stránku a tu připojit jako vlastní patičku.

    Odpovědět

  • Patička

    25. 7. 2014 20:56:51 | Roman Holeček

    Dobrý den, chtěl bych se zeptat, zda se dá patička dle nějakého zápisu odstranit z webu ?
    Děkuji.

    S pozdravem
    Roman Holeček

    Odpovědět

inPage

Webhosting

Domény

Ostatní