« 1 2
Autor Zpráva
Bubák
Profil
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?
Jcas
Profil *
www.zocschmoravskebranice2.websnadno.cz/adresa/Oblastni_vybor.html

Jednak se podívej, jak se to oramovalo (border) a to mám prakticky stejný hodnoty
A potom se taky podívej, kdy vzniká hover.
Tak jak je levé menu chci i pravé.
Jcas
Profil *
Jsou tam teda dva. Jeden na prvek <li>, kterej zobrazí podmenu (zatím nenastylováno) a druhej na <a>
Jcas
Profil *
jo a zatím se to snažím vyladit pro firefox, takže hover.htc nepotřebuji. Potřebuji levý okraj pro pravé menu
Petr ZZZ
Profil
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
Profil *
Jednoduche řešení, prostě podmenu nalepit těsně na obr. Pak se nestane, že by se ztratil hover.
Výsledek je ale na houby, protože i když to funguje, tak jsem to nepochopil. Prostě jsem pouze ustoupil.
Pěti-pixelová mezera je hezčí.

A protože jsem to nepochopil, tak mám hned další detail.
Ukázka stylu pro podmenu. Všimněte si posunu a opět necháu proč každá strana potřebuje jinou hodnotu na to, aby bylo podmenu nalepeno na obrázek.

ul.podseznam {
	visibility: hidden;
	padding: 0;
	margin: 0;
	position: absolute;
}
ul#left ul.podseznam {left: 210px;}
ul#right ul.podseznam {right: 292px;}

ul.podseznam li {
	width: 200px;
	line-height: 150%;
	position: relative;
	top: -100px;
}
ul#left ul.podseznam li {
	background: url("pozadi.png") repeat-y;
	text-align: left;
}
ul#right ul.podseznam li {
	background: url("pozadi2.png") repeat-y;
	text-align: right;
}
Jcas
Profil *
http://www.zocschmoravskebranice2.websnadno.cz/adresa/Oblastni_vybor.html


Tak se na to podivejte.

Dvířka (prave a leve menu) Co je hezčí?
Je tam nějaká prasárna? Můžu to takhle nechat?
Teď už je pouze potřeba doladit pro IE (popravdě nevím jak -z tohoto prohlížeče jsem nešťastnej). Já má chuť použít podmíněné komentáře.
Jcas
Profil *
www.zocschmoravskebranice2.websnadno.cz/adresa/Oblastni_vybor.html
Petr ZZZ
Profil
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
Profil *
může tu pomalost dělat ta animace nahoře. Je to dost velky obrazek. 4.5MB
To s těmi krabicemi je sice pravda, ale přece by jsi je nenechal stajně natočené? Jak to bude vypadat.

A takhle se přeci dělá optické kreslení. Představ si vstupní bránu a uprostřed dlouhou rovnou cestu.
Cesta se bude postupně zužovat a sloupky brány se nakreslí přesně takto.
Jcas
Profil *
Taková drobnost jako (Gimp) filtry -> animace -> optimalizovat (rozdíly)
Dokázala ze 4.5MB udělat 270KB. To už je myslím dostačující?
pavuk
Profil
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
Profil *
No teď se to snažím vyladit pro IE.
Jednak nechápu, proč se mi v IE nevejde div#tělo mezi kotce.

A hlavně nemůžu přijít na to, proč mi <a> nereaguje na padding. viz
<!--[if lt IE 8]>
        <style type="text/css">
            h1.nadpis {height: 218px;}
            li.menu {}
            a.polozka {display: block; padding: 40px 0 0 0; text-align: center;}
        </style>
Petr ZZZ
Profil
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
Profil *
Když se podíváte na ukázku od Panthera
tak použil jeden obrazek pro <li> a druhý pro a:hover.
Tímto způsobem si zajistil přednačtení?

Protože mi nikdo neporadil s tím, že <a> nereagoval na padding-top (pro IE), tak jsem i druhý obrázek přiřadil elementu <li> a nastavil jsem padding-top pro <li>.
Teď už to asi vypadá všude stejně. (položky uprostřed boxu, správné umístění podmenu)
Jestli teda existuje metoda pro přednačítaní obr. pomocí css, tak bych mohl jednotlivé položky hodit do <span> a posunout jenom <span>.

Můžete to prosím otestovat v IE6, IE8, NN
http://www.zocschmoravskebranice2.websnadno.cz/adresa/Oblastni_vybor.html
pavuk
Profil
Jcas:
Jestli teda existuje metoda pro přednačítaní
Preload na JPW
Bubák
Profil
V IE8 to je rozbité, pro zaměň svůj podobný meta tag za tento:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

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á.
Petr ZZZ
Profil
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 ;-).
Bubák
Profil
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.
Petr ZZZ
Profil
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
Profil *
Na animaci zapomeňte. Předseda svazu si tam přál mít animaci a až mu vysvětlím, že je tam na houby, tak ju odstraním. (ps. mě se její desing líbý)

Použít jeden obrázek a posouvat jsem už zkoušel. Levou strnu udělám v poho, ale mám obrovské problémy s pozicováním s pravou stranou a se vším napravo (obrázek, podmenu atd.).

Můj výraz "s pozicováním" neznamená vlastnost position:, ale prostě umístění prvku (margin, padding, backgrount position ....)

Už jsem zjistil, že občas považuje jako okraj- okraj okna = při přiblížení, nebo odálení se to pozice kazí.
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ý.
Když jsem nalevo použil a:hover {background-image: * -192px 0} tak napravo se stejný obr. převrácený posunul úplně blbě. Když už jsem ho posunul správně v mozile, tak IE si ho posunul o 5px jinak.

Jak jsou vnímany okraje u float:right?
panther
Profil
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.
Petr ZZZ
Profil
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"
Bubák
Profil
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.
Petr ZZZ
Profil
</OT>
Bubák:
Dal jsem na web kotvy
Bezva, bude se líp odkazovat! :-)
</OT>
Jcas
Profil *
Obr vyměněny, to je fajn. Boční posum mi nešel, ale když jsem dal pod sebe a použil pisition: bottom, tak je to fajn.

Přidal jsem ten meta tag, Takže prosím jak to teď vypadá v IE8.
Jinak já tam dal podmíněnej kom. "menší než IE8". Tak bych to třeba mohl změnit na "lte"
« 1 2

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: