Autor Zpráva
hellboy80
Profil
Muzu poprosit o mensi pomoc? Potreboval bych na svy pripravovanym webu posunout navigaci fotogalerie z levyho sidebaru (viz zde: mibro.webz.cz/jidlo) pod samotny fotky (jako je to k videni treba tady: www.hawksleyvisuals.com).

Ten web jsem nedělal já. Je to jen stažená šablona. U tý navigace je problém, že když je menu příliš dlouhé, tak ho může začít překrývat.
Jsem v zásadě CSS začátečník. Napadlo me přidat do CSS tý navigace:
position: fixed
left: 820px
Ale nevim, jestli je to ideální řešení :) Díky za jakýkoliv tipy :)
veredico
Profil
Jestli to chapu dobre, tak ti staci prehodit akorad ty DIVy...
pro jistotu ti posilam, co mi vyhodil chrome po manualnim presunuti divu

<div class="solofolio-cyclereact-slide cycle-slide cycle-slide-active" id="29" data-cycle-hash="29" data-cycle-title="" style="position: absolute; top: 0px; left: 0px; z-index: 99; opacity: 1; display: block; visibility: visible;">        
  <div class="image" style="max-width: 558px; max-height: 372px">            
    <img data-sizes="auto" data-srcset="         http://mibro.webz.cz/wp-content/uploads/2016/02/Make-your-own-gingerbread-men.jpg 558w,         http://mibro.webz.cz/wp-content/uploads/2016/02/Make-your-own-gingerbread-men.jpg 558w" class=" lazyautosizes lazyloaded" style="max-height: 916px;" width="558" height="372/" sizes="558px" srcset="         http://mibro.webz.cz/wp-content/uploads/2016/02/Make-your-own-gingerbread-men.jpg 558w,         http://mibro.webz.cz/wp-content/uploads/2016/02/Make-your-own-gingerbread-men.jpg 558w">  
    <div class="solofolio-cyclereact-controls">          
      <a class="thumbs" href="#" data-cycle-cmd="pause">
        <i class="fa fa-th"></i></a>          
      <span class="arrows">            
        <a class="prev" href="#">
          <i class="fa fa-caret-left"></i></a>            
        <a class="next" href="#">
          <i class="fa fa-caret-right"></i></a>          
      </span>          
      <span class="solofolio-cyclereact-count">29 / 29
      </span>        
    </div>
  </div>
  <div class="solofolio-cyclereact-sidebar buttons thumbnails-enabled" style="display: block">
    <p class="solofolio-cyclereact-caption">
    </p>                   
  </div>    
</div>
hellboy80
Profil
Tam zadny divy nejsou. Tady je kdyz tak ta sablona:
wordpress.org/themes/download/solofolio.7.0.108.zip
Tomáš123
Profil
hellboy80:
Zmeny ide vykonať aj v čistom CSS.

Súčasná podoba má nastavené odsadenie zľava pre prvok s triedou .solofolio-cyclereact-stage. Túto deklaráciu potrebuješ presunúť ku prvku, ktorý je spoločným rodičom časti s obrázkom a navigácie. Asi najlepšie je to predstaviteľné na obrázku.

Prvok .wrapper je ten vhodný rodič a prvok .solofolio-cyclereact-sidebar.buttons.thumbnails-enabled je tá navigácia. V pravej časti je zvýraznená deklarácia, ktorú treba presunúť (ten !important tam asi radšej nedávaj).

Navigácii potom treba prestaviť pozíciu na absolútnu (s fixnou nevníma hranice obmedzujúcich blokov) a vystrediť ju cez (left: 50%; margin-left: -polovica_šírky;). Ešte pridať text-align: center a máš to presne v strede. Avšak, bude ešte potrebné analogicky upraviť tieto časti aj pre iné rozlíšenia.

Problémom ale je, že teraz ti navigácia zasahuje do obrázku. Potrebuješ sa pohrať s pozíciami:
1.) Odstráň overflow: hidden prvku .wrapper.
2.) Zmeň prvku .wrapper odsadenie zdola na 80px (bottom: 80px).
3.) Nastav overflow: hidden prvku .solofolio-cyclereact-wrap.thumbnails-enabled (prvok s obrázkom).
4.) Prvku .solofolio-cyclereact-sidebar.buttons.thumbnails-enabled (navigácia) nastav bottom: -40px.

Teraz by to malo byť funkčné. Snáď.

Šlo by to napísať ešte konkrétnejšie aj s informáciami, na ktorom riadku čo hľadať. Bude ale lepšie, keď sa naučíš používať vývojárske nástroje a nájdeš si potrebné informácie sám.

Pozerám ale, že v tom článku nie je to, čo ti chcem ukázať:


Môžeš si preštudovať:
Position
hellboy80
Profil
Diky. Zkusim.
Ale proc tam nejde dat jen:
position: fixed
left: 820px
Prijde mi, ze to tak funguje, ale nejsem expert. Treba muze byt nekde problem.

Jinak - kdybych to chtel celou tu navigaci trochu zmensit? Jde to nejak jednoduse najednou, nebo to musim zmensovat button po buttonku atd.?

Jo, a jak se v tom developer toolu přesouvaj ty divy? Mně vůbec nejdou označit, vymazat a vkládat. Můžu pouze editovat určitý hodnoty.
Tomáš123
Profil
hellboy80:
Prijde mi, ze to tak funguje
Nefunguje. Absolútna hodnota odsadí prvok o definovanú vzdialenosť. Všade rovnakú. Tebe to zobrazí navigáciu pod obrázkom, ale ja som mal notebook s menším rozlíšením a 820px zľava zďaleka nebol stred. Napadne ti odsadzovať percentami. To je lepšie. Panel ale nemá percentuálne rozmery. Hodnota percenta je daná šírkou nadradeného bloku. A nadradený blok sa v tvojom prípade rozťahuje podľa rozlíšenia. Na Full HD monitore môže jedno percento nadobúdať hodnoty 19.2px, na inom monitore môže byť 1% šírky iba 13.6px. Ako odhadneš akou hodnotou odsadiť navigáciu, ak vlastne nevieš ako široký je posatranný panel? Môžeš to skúsiť približnou hodnotou. Nejakých 65%? Možno. Presne pod obrázkom to ale pri rôznych rozlíšeniach aj tak nebude. Navyše, ak by sa tvoja šablóna chcela previesť do mobilnej podoby (a pravdepodobne by bolo treba vertikálne scrollovať) s fixnou pozíciou sa nezaobídeš (prečítaj si ten zdroj) a na využitie absolútnej potrebuješ obmedzujúci blok. Toto riešenie teda nie je dosť dobre schodné.
hellboy80
Profil
Ok, diky za vysvetleni :)

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: