Autor Zpráva
Martin Adámek
Profil
Zdravím,
na svém stávajícím webu adamek.cz jsem si onehdy udělal levý sloupec fixed,
aby menu při listování stránkou neutíkalo z monitoru, a pořád bylo na obrazovce vlevo nahoře.
Pro případ, že menu bude vyšší než obrazovka, tam mám ještě overflow-y:auto; adamek.cz/kolo/bosna.
(Pro IE jsem to tehdy nerozeběhl vůbec, tak to mám v ie.css obojí zrušené, a menu nechávám utíkat. Ale o to mi teď nejde.)

Horší je, že jsem to tehdy dokázal udělat jen za tu cenu, že ten levý sloupec bude odshora až dolů.
Tedy že stránka bude mít tři sloupce, a že hlavička nebude nad nimi, přes celou šířku stránky.


Teď jsem si na to znova vzpomněl, a pokusil jsem se oprášit ten pokus o schéma hlavička na celou šířku, a až pod ní tři sloupce.
HTML5 pokus
Letos jsou oproti tehdy dvě změny:
- místo XHTML je to HTML5 (to je hlavní účel tý stránky - otestovat podporu html5 sémantických elementů v různých prohlížečích)
- místo pořadí "levý sloupec, pravý sloupec, unikátní obsah" (width, float:left; width, float:right; nic) na živém webu,
mám teď v tom pokusu výrazně přístupnější a přizpůsobivější pořadí "levý sloupec, unikátní obsah, pravý sloupec" (s využitím max-width, které dřív neexistovalo, takže proto se dřív nemohlo dát unikátnímu obsahu float)

Jenže jak mám nahoře tu hlavičku, tak levý sloupec nezobrazuje scrollbar. Tzn při delším menu a nižším monitoru (větším písmu) je kus menu nedostupný, tzn katastrofa.

Zkusil jsem overflow-y natvrdo zapnout (scroll; ne auto) - scrollbar se objevil, ale pořád byl disabled (šedý a nepoužitelný), prohlížeč netušil, že už je posuvník potřeba.
Zkusil jsem dát height: 100%, ale to jen způsobilo přetečení menu dolů pod monitor (o výšku hlavičky), a scrollbar se stejně nepovolil.

Tuší někdo, jak udělat levý sloupec listovací (jako na adamek.cz/kolo/bosna)
ale pod hlavičkou, která by byla nad všemi sloupci, jako v pokusu ?


(Nevýhodou toho řešení sice je, že někteří středně pokročilí webotvůrci, kteří příliš neznají možnosti CSS, si mylně myslí, že tam mám historické rámy, což mi pak zkoušejí vyčítat, ale i tak to považuju za docela praktické řešení, aby menu při listování stránkou nemizelo. Jen bych to rád celé rozběhal pod všezastřešující hlavičkou)
Davex
Profil
Zkus přidat souřadnice.

aside {
  /* ... */
  top: 40px;
  bottom: 0;
}

Nedávno jsem se pokoušel řešit v podstatě stejný problém s fixním menu, ale zvolil jsem raději JavaScript, aby menu delší než zobrazený kus stránky nemělo vlastní posuvník a reagovalo na směr posunu celé stránky (s efektem jako „sticky sidebar“), ale JavaScript moc neumím, tak se mi to nepodařilo dokončit.
Martin Adámek
Profil
Davex:
Funguje to.
Ale vyzaduje to znalost vysky zahlavi a paticky, coz bez JS nejde.

Jako nejrozumnejsi me napada tu vlastnost fixed jenom pridavat javaskriptem tehdy,
kdy je menu vyznamne nizsi nez okno.
Cimz ziskam i tu vyhodu, ze pri listovani clankem lidi uvidi dolni polozky menu, aniz by jim museli samostatne listovat.

Navic na stavajicim webu se to obcas zvlastne chova na android tabletu (ruzne prohlizece),
a k tomu tablet nezobrazuje scrollbar (posun funguje, ale uzivatel se moznosti extra listovani musi dovtipit).
A na PC staci pro navrat nahoru stisknout home.

Tak to asi jen via JS zamknu pri nizkym menu a vysokym okne;
a listovani velkym menu necham spolecny.

Je to sice osekání původního záměru, ale asi to bude nejrozumnější kompromis, při zohlednění všech hledisek.
(...většinu příspěvku jsem si předepsal na mobilu, tak to je trochu necesky)

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: