Jump to content
pat251

CSS - posunutí zápatí stránky

Recommended Posts

Zdravím,

nevíte jak v CSS zapsat, aby se zápatí zobrazovalo vždy na konci obsahu stránky? Přičemž pokud bude obsahu málo tak na spodní části obrazovky? Například na stránce obchodní podmínky je zápatí uprostřed obrazovky, protože článek zatím neobsahuje text. Pro lepší pochopení screen..snad pomůže :)

Absolutní pozicování použít nelze, protože při scrollování zůstane na místě. Relativní ani sticky nepomáhá. Zkoušel jsem i přes flexbox, pozicování stylem "bottom: 0px" a kdeco... Hádám že to asi není raketová věda, ale prostě se mi nedaří...

 

Díky.

Bez názvu-2.png

Share this post


Link to post
Share on other sites

Verze Prestashopu ?

Jde o defaultní šablonu ?

Share this post


Link to post
Share on other sites

Jo sorry, verze 1.7.6.1, šablona defaultní... classics

Share this post


Link to post
Share on other sites

V pohodě.

Dám kávu a mrknu na to.

Standardně by měl footer být zakotvený úplně dole.

Kdyžtak mi napiš do PM odkaz na stránky.

Share this post


Link to post
Share on other sites

No, asi byl přepsán styl, protože v defaultní šabloně je vše v pořádku.

./themes/classic/templates/_partials/footer.tpl

zobrazuje se newsletter v {hook h='displayFooterBefore'}, informace a odkazy v {hook h='displayFooter'} a {hook h='displayFooterAfter'} a nakonec copyright.

<div class="container">
  <div class="row">
    {block name='hook_footer_before'}
      {hook h='displayFooterBefore'}
    {/block}
  </div>
</div>
<div class="footer-container">
  <div class="container">
    <div class="row">
      {block name='hook_footer'}
        {hook h='displayFooter'}
      {/block}
    </div>
    <div class="row">
      {block name='hook_footer_after'}
        {hook h='displayFooterAfter'}
      {/block}
    </div>
    <div class="row">
      <div class="col-md-12">
        <p class="text-sm-center">
          {block name='copyright_link'}
            <a class="_blank" href="https://www.prestashop.com" target="_blank" rel="nofollow">
              {l s='%copyright% %year% - Ecommerce software by %prestashop%' sprintf=['%prestashop%' => 'PrestaShop™', '%year%' => 'Y'|date, '%copyright%' => '©'] d='Shop.Theme.Global'}
            </a>
          {/block}
        </p>
      </div>
    </div>
  </div>
</div>

CSS styly pro tyto háčky jsou:

#footer, .block_newsletter, .block-social, .footer-container

Share this post


Link to post
Share on other sites
Posted (edited)

Díky za odkaz.

Chybu ti způsobuje chat modul Smartsupp.

Zakaž modul Smartsupp a uvidíš, jestli se vše opraví. 😁

Hlavně position: fixed a bottom:24px

Modul je zaháčkovaný hned pod body, což je špatně.

Měl by být zaháčkovaný až pod <main> .....

<div id="chat-application" style="background: transparent none repeat scroll 0% 0%; overflow: hidden; display: block; margin: 0px; padding: 0px; bottom: 24px; transition: none 0s ease 0s; z-index: 2147483647; position: fixed; width: 72px; height: 72px; right: 11px; max-height: 72px; max-width: 72px; box-sizing: border-box;"><iframe id="chat-application-iframe" title="Smartsupp" aria-hidden="true" style="background: transparent none repeat scroll 0% 0%; overflow: hidden; position: relative; width: 100%; height: 100%; margin: 0px; border: medium none; min-width: inherit; max-width: inherit; min-height: inherit; max-height: inherit; transition: none 0s ease 0s; z-index: 10000001;"></iframe></div>

 

Edited by D. Tengler (see edit history)

Share this post


Link to post
Share on other sites

Bohužel ani po vypnutí modulu nedošlo ke změně. Popravdě jsem Smartsupp instaloval teprve v pátek a to jsem se již tenhle problém snažil několik dní vyřešit.

Zkusil jsem nahradit celou složku themes za jinou - zkopírovanou z čistě nainstalované presty... žádná změna.

 

Share this post


Link to post
Share on other sites

Aha, presta to neumí ani po instalaci.

 

 

2020-07-07 10_58_52-.png

Share this post


Link to post
Share on other sites

Myslíš na e-apps.eu? Stránky "váš účet" - pokud nejsi zalogovaný.

Share this post


Link to post
Share on other sites
#footer{padding-top:2.5rem;position:fixed; bottom:0px; width:100%;}

😁

  • Thanks 1

Share this post


Link to post
Share on other sites

Díky, bohužel to řeší problém pouze částečně. Pokud je stránka dlouhá - například výpis zboží, tak to produkty překrývá....potřebuji aby byla vždy na konci stránky, přičemž pokud bude obsahu málo, tak na spodní hraně obrazovky.

Share this post


Link to post
Share on other sites
Posted (edited)

Vyřešeno. Jen doplnit obalující div...

#cms #footer {
padding-top:2.5rem
position:fixed;
bottom:0px;
width:100%;
}

#authentication #footer {
padding-top:2.5rem
position:fixed;
bottom:0px;
width:100%;
}

Díky za pomoc D. Tengler 😉 👍

Edited by pat251
chyba kopírování :) (see edit history)
  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More