Změna velikosti písma

Drobečková navigace

CSS blog > Fixně ukotvené prvky

Fixně ukotvené prvky



K čemu je použít a kdy? Nejvhodnější je použít je pro ty prvky, které mají upoutat návštěvníka, kdy by jinak zapadli v grafice nebo těm prvkům, kterým budeme návštěvníkovi strkat pod nos neustále to, co chceme  :) Tj., sociální sítě, kontakt, akce, kalendář, ... aj.

Jak na to a kdy? Fixní pozice vyjme prvek z vrsty podle svého umístění v HTML a ukotví ho tak, že je neustále na daném místě i při scrollování aktivního okna. Nejjednodušší varianta je tyto prvky ukotvit k okrajům obrazovky. Ta horší varianta, kvůli IE, je pozicovat přes fixní pozici, kdy nastavíme odsazení z aktuální pozice přes margin, viz. ikony "Youtube" a "Facebook" u levého okraje obsahu těchto stránek.

Fixně ukotvené prvky proto umisťujte vhodně do HTML v layoutu, aby pokud nebudou ukotvené k okrajům okna obrazovky, aby jste je posouvali co nejmíň. 


Ukázka



HTML

Ukázka je na facebook like boxu.

<div class="fix-element">
   <div id="fb-root"> </div>
   <div class="fb-like" style="width: 200px !important;" data-send="true" data-layout="button_count" data-width="200" data-show-faces="false" data-font="arial"> </div>
</div>

CSS

.fix-element {
position: fixed;
right: -220px;
width: 200px;
padding: 20px 0px 20px 80px;
background: url('image.php?nid=11524&oid=3597548') no-repeat 0 50% #5A7BC3;
-moz-border-radius: 8px 0 0 8px;
-webkit-border-radius: 8px 0 0 8px;
border-radius: 8px 0 0 8px;
top: 200px;
}
.fix-element:hover {
right: 0;
}

Levý padding slouží pro zobrazení části ikony. Není nutné zobazovat celý prvek, stačí na hover přidat posun zprava na 0, kdy při defaultu je část prvku "zasunuta" mimo obrazovku. Likebox je bez určení cílové url na like. Pokud návštěvník klikne na sdílet/like, tak se pak v akcích uživatele FB na profilu ukáže, že se mu líbí konkrétní stránka, nikoliv skupina. To lze samořejmě nahradit za cokoliv.

Pokud budete chtít být jo freecoolin, můžete pro .fix-element přidat třeba transition a výsuv prvku bude animovaný.

Obsah html je čistě na Vás. Obdobně se nechají nastylovat i další prvky v IPO, např. kontaktní formulář ve sloupci.


Komentáře


  • 9. 1. 2014 12:46
    Ivan Vovk
    A jde to i na fotogalerii (v IPO)

    Jde to udělat uživatelsky i na šabloně fotogalerie v IPO? Cvičně jsem si to (jen tak v rychlosti, buttonek si asi ještě pedělám) nastavil tady - http://www.abproles.cz/mapy . Ale na fotogalerii mi to celkem logicky nešlo....


  • 9. 1. 2014 13:27
    O.K.
    Re: A jde to i na fotogalerii (v IPO)

    No jedině že by jsi to přidal do odstavce v galerii. Je to především určené pro grafiky a Backoffice, kteří mají přístup do editace HTML v layoutu, které se pak aplikuje na všechny stránky buď do sloupců/horního html nebo do patičky. Pokud to přidáš do obsahu, tak to bude jen do jedné stránky.


  • 9. 1. 2014 19:15
    Ivan Vovk
    Re: A jde to i na fotogalerii (v IPO)

    Do odstavce jsem to zkoušel. Ale IPO to html při uložení vyhodí. Celkem logicky. Jen mě to napadlo, protože jsem to chtěl dát na stránku, na kterou směruju PPC a přitom je na šabloně Fotogalerie. Zadám to kdyžtak přes podporu...


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