Stylování-pozicování seznamu (rozdíly prohlížečů)*

Petr ZZZ:
Ale když je v LI vložený seznam (druhá úroveň menu), tak se nemůže hover ztratit. Leda v IE ve quirku, nebo v IE6 a starších, ale to se standardně řeší .htc souborem vyvoženým pro tento účel, na netu se jich pár hotových válí.

Jcas:
Nechápu smysl toho kousku CSS, navíc nikde nevidím li:hover. To je problém udělat odkaz na živou ukázku?

Bubák:
„Ale když je v LI vložený seznam (druhá úroveň menu), tak se nemůže hover ztratit.“
A jo, to jsem špatně pochopil, pardon.

Jcas:
Nechceš se zaregistrovat, abys nemusel během dvou minut posílat tři příspěvky a mohl´s je editovat?

Jcas:
A hele, dvířka se otvírají, blahopřeji! :-) Text menu se sice v IE nekryje s kotci a taky se zdá, že je to buď na nějakém pomalém hostingu, nebo je to datově objemné, protože to fachčí nějak pomalu, ale vcelku bych řekl, že jsi na dobré cestě. Ještě to popírá perspektivu, ale to jsem ti už psal. Postav si na stůl dvě krabice jabkové šťávy do jedné roviny, s mezerou mezi sebou, a podívej se na ně s jedním okem zavřeným. Vidíš současně jejich vnější nebo jejich vnitřní strany? To je perspektiva.

Jcas:
Jo, načtení stránky je teď mnohem rychlejší.
Mimochodem, možná je špatnou perspektivou myšlený to, že se kotce směrem dozadu rozšiřujou, a to je fakt "neperspektivní"

Jcas:
„sloupky brány…“
Tak se na ty sloupky brány podívej někde na fotce. Tvoje kotce patří naopak: levý doprava a pravý doleva, pak se budou podle zákonů perspektivy do dálky zužovat. Tak, jak jsou teď, perspektivu popírají. Současně by jejich vnější strany mohly být vidět tehdy, pokud by byly natočené, ale jednak není důvod je stáčet a jednak je nemaluješ natočené, ale vyrovnané v jedné lajně.

Takto vypadají perspektivně správně nakreslené dva sloupce:

Jcas:
„Jestli teda existuje metoda pro přednačítaní“
Preload na JPW

V IE8 to je rozbité, pro zaměň svůj podobný meta tag za tento:

V IE6 taky nic moc, ale netuším, zda tam funduje hover pro podmenu, na oba screenshoty jsem totiž využil vzdálenou službu.
NN - to má být co? Starým NN4.x se nemá cenu zabývat (NN4.8 se na stránku nedostal) a nové verze běží na jádru tomtéž jádru Gecko, jako Firefox, takže se tím taky nemá cenu zabývat.

Jcas:
„Tímto způsobem si Panter zajistil přednačtení?“
Rozhodně, nevím, co ho k tomu vedlo a je v podstatě jedno, kde je umístěný obrázek pro klidový stav.
V současnosti je nejběžnější způsob několik obrázků v jednom, v nejjednodušším případě dva základní princip je jednoduchý.
Dokonce by šlo udělat, že bys měl všechny kotce, pravé, levé, horní, dolní, otevřené, zavřené v jednom obrázku a jenom měnil byckground-position, ale asi to nestojí za tu námahu, ale třebas vyhledávač Google takové obrázky používá.

Jcas:
Koukám, že jsi pochopil špatně bubákův příklad, na který jsem odkazoval 29.7.2010 20:01:54, i mou úpravu, na kterou jsem odkazoval 30.7.2010 11:32:37. Chtěl jsem říct, že potřebuješ dva obrázky na dva sloupce menu, protože v každém sloupci se dvířka otvírají na jinou stranu. Ty dva obrázky ale mají znázorňovat celkem čtyři stavy, každý obrázek dva stavy (levé kotce zavřené a otevřené v jednom obrázku, pravé kotce zavřené a otevřené v druhém obrázku). V obou příkladech, jak v bubákově, tak v mé úpravě, je použitý obrázek vidět. Tak se na ty kódy prosimtě podívej, ulož si je u sebe na disk a trochu s nimi experimentuj. Potom se nestane, že použiješ dva obrázky místo jednoho.

Vtip jednoho obrázku na oba stavy dvířek (zavřeno/otevřeno) je v tom, že se ten obrázek už nemusí načítat, ale jenom se přes CSS posouvá, podle toho, zda na něm zrovna je nebo není myš. Když na to samé použiješ místo jednoho obrázku dva, je to pomalé. Možná by ale stála za úvahu bubákem zmíněná možnost použít na všechny čtyři stavy dvířek ne dva ale jen jeden obrázek, protože když si brouzdal přejede myší z levého sloupce kotců do pravého, už se zas musí načítat jiný obrázek. Tento problém by snad mohl zmírnit design témat v tom smyslu, že levý sloupec kotců by obsahoval výrazně jiná témata než pravý a potom by snad šlo doufat, že brouzdal nebude příliš často skákat zleva doprava a naopak, ale bude se pohybovat především v rámci buď levého nebo pravého sloupce. Ale jak známo, brouzdal je nevypočitatelný, takže optimální řešení to není.

Ať už to ale uděláš jakkoli, rozhodně musíš vynaložit veškeré úsilí na co nejmenší objem dat, protože pomalým načítáním to ztrácí nejen veškerý lesk, ale i použitelnost. Hlavička například vypadá otřesně a v současném stavu je pouze dokladem toho, že ji vyrobil někdo, kdo sice umí udělat pohyblivý obrázek, ale nemá kousek výtvarného cítění (omlouvám se za příkrý tón, ale tak to vidím). Vzhledem k tomu, že ta animace slušně brzdí, opravdu bych doporučil ji nahradit statickým obrázkem. Chceš-li mermomocí jezdící text, dej ho do <marquee> a napozicuj do obrázku. Nebude to jezdit ve všech prohlížečích, ale však jezdící text není nutnost (i když se někdy hodit může; např. na mrtvé dřevo jako předpoklad zachování druhového bohatství, když chceš čtenáři dopřát dostatek času, aby měl šanci pochopit hloubku a význam myšlenky ;-).

Petr ZZZ:
„když si brouzdal přejede myší z levého sloupce kotců do pravého, už se zas musí načítat jiný obrázek.“
Ale tam už taky bude sloupec kotců načtený, není v tom problém.

Výhoda sloučení obrázků do jednoho je o něco nižší datový objem a snížení počtu HTTP požadavků. Ale u tohohle webu zatím nemá smysl hledat tady zrychlení načtení, zatím bych optimalizoval grafiku, zvlášť místo GIFů použít PNG.
Pokud je na webu obří animovaný GIF, tak si myslím, že je zbytečné hledat zrychlení jinde.

Bubák:
„Ale tam už taky bude sloupec kotců načtený, není v tom problém.“

Sloupec jako takový ano, ale obrázek? Když bude na pozadí pravého sloupce jiný než obrázek na pozadí levého sloupce? Nebude v tom stejný zádrhel jako kdyby se použily dva obrázky na jednu položku menu místo jednoho, který se jen posouvá?

Jcas:
[#18] „Tímto způsobem si zajistil přednačtení?“
ne, jen jsem minimalizoval obrázek pro :hover, stačí mu menší rozměry a tím pádem je datově menší (jako hover jsem bral odstranění dvířek, ale to nevadí).


„Jak jsou vnímany okraje u float:right?“
stejně jako u jných prvků. Normálně :-) Jen, pokud bude zadáva k pravému floatu pravý margin, hrozí double-margin bug v IE6.

Jcas:
„Jak jsou vnímany okraje u float:right?“
V pojmech je trochu zmatek, ale ve skutečnosti je to jednoduché (viz zprava, zleva).

„Chcílama jsem měl pocit, že i když je seznam float:right, tak pro další kroky ho stejně nezájímá pravý okraj, ale levý.“
Nevím, co je chcílama, ale snad pomůže čistič.

Doporučuji přečíst také Pixyho článek Jak funguje "float" a "clear"

Není problém udělat dva stavy kotce jako jeden obrázek, dalším spojením do jednoho velkého by se moc neušetřilo, musel bych počítat pozice pro většinu stavů a v CSS by "strašila" spousta číselných pozic, podobně jako v tomto menu.
Dal jsem na web kotvy

Ukázka je na http://moje-testy.ic.cz/kotce.html
Celé je stažení http://moje-testy.ic.cz/kotce-web.zip

Mezera mezi menu a podmenu jse udělat elegantněji, než průhledným místem v obrázku, viz ukázka, ve které má orámování a změna kurzoru na přesýpací hodiny jen ilustrační význam.

</OT>
Bubák:
„Dal jsem na web kotvy“
Bezva, bude se líp odkazovat! :-)
</OT>