| Autor | Zpráva | ||
|---|---|---|---|
| radekt Profil |
#1 · Zasláno: 2. 4. 2015, 07:06:18
Dobrý den,
na této stránce jsem našel pěkný příklad obrázkové galerie. Nebyl však responsivní, nezmenšoval se proporciálně pro malé displeje. Upravil jsem kód, aby toto šlo, ale rozhodily se mi některé prvky a nevím, co s tím. Kód je zde. 1. problém: v levém horním rohu se mi zobrazuje radio button, i když mám ve stylu .slides input { display: none; }
2. problém: dolní navigaci mám nahoře vprostřed místo dole, i když jsem ji absolutně pozicoval 3. problém: když přejedu na postranní navigace (velké šipky), měl by je překrýt poloprůhledný pás stejné výšky, jako má galerie a není tam, opět: ve stylu to mám 4. problém: postranní navigační šipky mám pomocí line-height nastylované zhruba doprostřed. Na menším displeji se ale posouvají dolů a nevím jak to udělat, aby byly vždy v prostředku.
Uměl byste někdo poradit? Děkuji Radek Tůma |
||
| Tomáš123 Profil |
#2 · Zasláno: 2. 4. 2015, 10:25:50
radekt:
1. Ak máš na mysli tú čiernu bodku pri prepínači medzi obrázkami, nie je spôsobená <input>-om, ale vrodeným bodkovaním každej položky neočíslovaného zoznamu (ul li {list-style: none}).
2. Miesto pod obrázkom vzniká posúvaním panelu so šípkami. Šípky sú stále zarovnané v strede, ale ten zvyšok, oproti ktorému sa zdajú nebyť vycentrované sa posunie pod obrázok, kde vytvára prázdne miesto. 3. Náhodou som prišiel na to, čo myslíš. Funguje mi to s display: table (bohužiaľ ani pomocou neho a vertikálneho zarovnania sa mi nepodarilo vyriešiť štvrtý problém).
4. Problém spôsobuje neprispôsobiteľná výška riadku. Chcela by sa meniť tak, ako sa mení obrázok. |
||
| radekt Profil |
#3 · Zasláno: 2. 4. 2015, 11:43:24
Tomáš123:
1. to mě taky mohlo trknout 3. teď se zobrazuje, ale ne na celou výšku obrázku, i když má height: 100%
|
||
| Bubák Profil |
#4 · Zasláno: 2. 4. 2015, 13:04:57
radekt:
„1. to mě taky mohlo trknout“ Pokud bys používal vývojářský nástroj v prohlížeči, tak bys okamžitě viděl, že jde o položku menu V původní galerii se odrážka nezobrazuje proto, že položka menu má v CSS display: block;, není tedy list-item, ale takový způsob odstranění odrážky je matoucí.
|
||
| Tomáš123 Profil |
#5 · Zasláno: 2. 4. 2015, 22:41:14
radekt:
2. Navigácia ( .nav-dots) sa poziciuje vzhľadom ku nadradenému prvku .slides. Tento prvok nemá výšku, lebo všetko v ňom, je poziciované absolútne a teda deklarácia bottom: 9px sa odpočíta od vrchu obrázku (ktorý je o vrchu okna vzdialený 50px). Predpokladám, že dôvod chovania netreba bližšie vysvetľovať. V každom prípade, tu si sa pravdepodobne zasekol, lebo pozícia prvku .nav-dots nie je závislá na výške obrázku. Vyliečiť by to mohla deklarácia height: 100% (to isté aj pre <html> a <body> [pokračovanie nižšie*])
3.* Ak nastavíme obalu height: 100% funguje aj pozadie za šípkami. Inak povedané, z nulovej výšky sa nevie vypočítať 100%.
4. Stále mi nenapadá riešenie. Myslím si ale, že bude lepšie to celé prerobiť do hodnôt display: table(*)
Zajtra skúsim vytvoriť riešenie :-) |
||
| radekt Profil |
Tomáš123:
Po všech doporučených úpravách zbyl jen problém 2 a 4 a jeden další přibyl - postranní navigace někdy "poslouchá", někdy ne. Zjistil jsem, že to dělá display: table pro .nav label. Když se display: table přepíše na původní display: none, postranní navigace zůstává a poloprůhledný pás je přes celou výšku.
Budu rád, když na to koukneš. Díky moc. |
||
| Tomáš123 Profil |
#7 · Zasláno: 3. 4. 2015, 14:51:13
radekt:
Všetky problémy, ktoré máš sa spájajú s jedným hlavným: nastavenie výšky. Skúšal som rôzne variácie rozpoloženia prvkov, ale stále sa stretávam s problémom, kde potrebujem, aby prvok s relatívnou pozíciou naberal výšku od dcérskych prvkov. Ak sa nám podarí vyriešiť túto situáciu, pôjde zdola poziciovať prepínač a bude fungovať aj height: 100% pre postranné pruhy. Stále ale ostáva zarovnanie bez použitia line-height. Niečo ako vertical-align. Ten ale funguje iba s tabuľkovými hodnotami displayu. Preto som ho aj navrhoval, ale nemyslím, že je natoľko zázračný, aby všetko vyriešil. Bohužiaľ sám som ho nepoužil ani raz. Stretol som sa s ním v ukážkach tu na diskusii, ale nikdy som ho nepotreboval. Takže vlastne nemám požadované skúsenosti s jeho správnym používaním (idem študovať).
Tvoj problém ma ale veľmi zaujal a ak sa sem nikto nepridá, budem nad riešením rozmýšľať aspoň dovtedy, kým ho neobjavím. :-) |
||
| radekt Profil |
Tomáš123:
Zde je současný stav. Už šlape skoro vše. Poloprůhledný pruh na levých navigacích zde 100% šířku nemá, ale když to pustím z lokálu, tak funguje, takže to také beru za vyřešené. I ta dolní navigace je konečně dole, ale když simuluji zařízení s menším displejem zmenšením okna prohlížeče, uteče dolní navigace pod obrázek. |
||
|
Časová prodleva: 3 dny
|
|||
| Tomáš123 Profil |
#9 · Zasláno: 6. 4. 2015, 17:18:30
radekt:
Vytvoril som krátku ukážku. Je dôkazom toho, že ide vytvoriť podmienky, ktoré požaduješ. Mne ale obrázok rozťahuje nadradený prvok (lebo nemá absolútnu pozíciu). Tvoje obrázky však absolútnu pozíciu mať musia, takže neviem, či je možné bez JavaScriptu dosiahnuť požadovanej funkčnosti. Bohužiaľ, v CSS sa nevyznám natoľko, aby som bol schopný vymyslieť nejaký funkčný hack (nevravím ale, že to nie je možné). |
||
| radekt Profil |
#10 · Zasláno: 7. 4. 2015, 08:46:16
Tomáš123:
Díky mockrát za průzkum. Pokud budou mít obrázky stejnou velikost (což nyní nemají), snad se s tím dá něco udělat. Testoval jsem i ořezanou variantu (bez dolní navigace a poloprůhledného pásu), ta funguje. Ale jen samotná, když jsem galerii dal do html stránky, překrývala text pod ní - ano hraje tam roli absolutní pozicování, ale tu nemá .slides, ale až jeho podřízené prvky .slides, takže by se to nemělo dít, ale děje, čemuž nerozumím. Objevil jsem CSS slide generátor na http://cssslider.com/, ten funguje rozumně i po zúžení obrazovky, ovšem dojde ke ztrátě dolní navigace. Zkusím to ještě celé prozkoumat.
|
||
| Tomáš123 Profil |
radekt:
„čemuž nerozumím“ Keďže všetko vo vnútri je poziciované absolútne, nadradený prvok nemá čo roztiahnuť. Poskytuje hranice, ale sám nemá výškový rozmer (mám za to, že rozmery, ktoré si mu deklaroval v ukážke sa chovajú podobne ako o niečo posunutý relatívne poziciovaný prvok (pomocou top, left...) - stále zaberá pôvodné miesto v stránke ale okolité prvky nereagujú na jeho novú pozíciu). Nie som si týmto tvrdením istý.
Mimochodom: Môžem sa opýtať, prečo to nechceš riešiť JavaScriptom? Boli by na to aspoň dva dôvody: 1. Počet užívateľov, ktorí majú zapnutý JavaScript je väčší ako počet návštevníkov, ktorí majú tak moderný prehliadač, aby dokázal animácie prečítať. 2. Ak má užívateľ vypnutý JS, čaká, že niečo také sa mu nebude hýbať. |
||
| radekt Profil |
#12 · Zasláno: 7. 4. 2015, 09:28:22
Tomáš123:
Je to věc osobní preference, ale JavaScriptu se nebráním. Spousta věcí, co dříve nešla, se nyní řeší čistým CSS, tak zkoumám hranice ;o). |
||
|
Časová prodleva: 9 let
|
|||
0