Překryté zápatí
Publikováno 3. 4. 2020
V kategorii Z poradny
Použité štítky: CSS, footer

Klient požadoval něco co prý někde viděl a neuměl to dokonale popsat. Prý zápatí které se zasouvalo. Přiznám, nebyl jsem z toho příliš moudrý. Postupně jsme se ale dopracovali k tomu o co vlastně šlo.

Zápatí mělo být fixní a web měl být vlastně zobrazen před ním. A jak jste rolovali směrem dolů, zápatí „nepřijede“ spolu s obsahem webu jako jeho součást, ale postupně se odhalí jak web bude rolovat nahoru.

Když jsme se dobrali k požadované úpravě tak byla vlastně jednoduchá. Spočívala v jednoduchém vložení několika řádků CSS do šablony.

Jak tedy na to? Do nastavení šablony Divi > Nastavení šablony > Všeobecné > Přizpůsobené CSS vložíme následující CSS:

/*** zasunuti paticky - Zabza.eu ***/
#main-content {
margin-bottom: 800px;
z-index: 2;
}
#main-footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}

A výsledek? Třeba na tomto webu by vypadal následovně:

Určitě se nespletu když řeknu že to je jednoduché.

2 komentáře

  1. JanaM

    Ahoj mám problém. Dá se nějak srovnat aby se do toho překrytí vešlo jen menší zápatí? Mám ho na blogu hodně malé a dělá mi to pak prázdnou mezeru. Prostě bych potřebovala aby to nevyjelo tak moc vysoko jestli rozumíš?
    Díky Jana

    Odpovědět
    • Zabza

      Rozumím. Je potřeba upravit hodnotu “margin-bottom” (3. řádek publikovaného CSS) podle potřeby.

      Odpovědět

Přidat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Buďte v obraze

Jednou za týden, zpravidla v neděli v dopoledních hodinách, vám pošleme přehled nových článků.
S vašimi daty nakládáme maximálně zopodvědně a uchováváme je v bezpečí. Slouží výhradně k zasílání novinek z našeho webu.

Buďte jednoduše v obraze

Jednou týdně vám pošleme přehled nových článků abyste nemuseli nic hledat a měli všechno najednou pohromadě. Stačí jen vložit email, odeslat a potvrdit ve zprávě kterou vám obratem zašleme odběr novinek.

Přihlášení k odběru novinek proběhlo v pořádku.

Sdílet na Pinterestu

Sdílej