| Autor | Zpráva | ||
|---|---|---|---|
| Blue.Shark Profil |
Zdravím!
S použitím flexboxů jsem vytvořil poněkud atypické responzivní menu, jehož součástí je i panel pro aktuality zobrazovaný v pravé části obrazovky. Samotné menu reaguje na změnu velikosti okna správně, avšak jakmile skrze PHP načtu do panelu pro aktuality text, tento panel se vertikálně roztáhne podle obsahu, přičemž s sebou bere i menu - obojí totiž leží ve stejném wrapperu. Mým cílem je, aby panel zůstal responzivní, zachovával celkovou velikost menu a měl k dispozici scrollbar pro rolování obsahem. Řešení hledám již třetí den, ale stále bez úspěchu. Je možné, že se jedná o úplnou hloupost, ale jelikož se problematikou tvorby stránek zabývám zhruba měsíc, jsou mé znalosti dosti povrchní. Stránka je k dispozici zde. Doufám, že se neleknete, grafiku jsem zatím moc neřešil. Postranní panel je momentálně záměrně zmenšen, aby bylo při změně velikosti okna zřejmé jeho nežádoucí chování. Budu vděčný za jakékoliv náznaky řešení. |
||
| Coompiik Profil |
#2 · Zasláno: 18. 4. 2016, 19:57:05
Ahoj,
tady se nespíš zase jedná jen o mojí únavu ale nemůžu najít problém, myslíš že bys mohl na tu stránku hodit ten výpis aktualit z php? |
||
| Blue.Shark Profil |
Coompiik:
Nejsem si jistý, jestli správně rozumím tvému požadavku. Momentálně jsou v pravém sloupci vypsány dvě aktuality, jen je použito lorem ipsum místo smysluplného textu. Problém se ukáže, když změníš velikost okna - tlačítka mají zůstat čtvercová, což se neděje. Pro názornost přidávám obrázek. Vypadá to, že roztahování se děje primárně ve Firefoxu. 
Chtěl bych, aby byl panel s aktualitami stejně vysoký jako menu a aby zároveň měl scrollbar. Zatím jsem zjistil, že se scrollbar objeví, pokud zadám panelu fixní výšku. To ale udělat nemůžu, protože chci, aby svými rozměry reagoval na změnu velikosti okna. Je to zapeklité. |
||
| Tomáš123 Profil |
#4 · Zasláno: 19. 4. 2016, 15:16:47
Blue.Shark:
Percentuálna výška sa počíta z výšky nadradeného prvku. V tvojom prípade prvku #short_news_text_main, nadradenému stĺpcu s generovanými informáciami, chýba nastavenie výšky... Mohlo by stačiť pridať do CSS jednu deklaráciu, html, body, #flat-menu_wrapper, #short_news_text_main {height: 100%}, ale pri menšom množstve pixelov vo zvislom smere sa všetko rozpadá.
Keďže flexbox na tom s podporou nie je práve najlepšie, pripravil som ukážku s využitím tabuľkových hodnôt vlastnosti display: Živá ukázka.
Na požadované štvorcové položky by možno šlo využiť drobný hack... Fixnú šírku pravého stĺpca by tiež šlo zariadiť absolútnym poziciovaním ľavého stĺpca ( position: absolute; top: 0; left: 0; right: 200px;). Bolo by ale nutné pridať ešte jeden obalový prvok.
|
||
| Blue.Shark Profil |
#5 · Zasláno: 19. 4. 2016, 18:28:18
Tomáš123:
Přemýšlel jsem o tom a nakonec jsem se rozhodl pro standardnější menu, které bude jednodušší na implementaci. Flexboxy skutečně nejsou úplně šťastnou volbou. Tím pádem vám děkuji za rady a přeji příjemný zbytek dne :) |
||
|
Časová prodleva: 8 let
|
|||
0