| Autor | Zpráva | ||
|---|---|---|---|
| hellboy80 Profil |
#1 · Zasláno: 26. 2. 2016, 17:16:58
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 |
#2 · Zasláno: 26. 2. 2016, 23:06:51
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 |
#3 · Zasláno: 27. 2. 2016, 11:34:47
Tam zadny divy nejsou. Tady je kdyz tak ta sablona:
wordpress.org/themes/download/solofolio.7.0.108.zip |
||
| Tomáš123 Profil |
#4 · Zasláno: 27. 2. 2016, 18:41:53
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 |
#6 · Zasláno: 27. 2. 2016, 22:38:03
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 |
#7 · Zasláno: 28. 2. 2016, 12:42:10
Ok, diky za vysvetleni :)
|
||
|
Časová prodleva: 7 let
|
|||
0