Autor | Zpráva | ||
---|---|---|---|
Jakub8472 Profil * |
#1 · Zasláno: 12. 4. 2008, 07:29:25
Zdravím. Mám tady podle mne úplně jednoduchý kod na vysouvaci hover menu. A zde je dost diskutovaná otázka. Jak to rozběhat v IE. Dočetl jsem se mnohokrát - vložit nějaký "hover.htc" Jenže já jsem v začátcích a vůbec nevím co to hover.htc je....., jak a kam se to vkládá. Prosím po lopatě nebo rovnou esli pošlete řešení.. dík Jakub
CSS: .menu { color: #900; padding: 0; margin: 0; list-style-type: none; display: block; } .menu ul { margin-top: 0; position: absolute; visibility: hidden; background-color: #fbf6d0; margin: 0; padding: 0; list-style-type: none; } .menu li { float: left; padding: 0; width: 200px; white-space: nowrap; } .menu a { padding: 3px; text-align: center; padding-left: 15px; color: #900; background-color: #fbf6d0; display: block; text-decoration: none; font-weight: normal; } .menu ul a:link { color: #900; border-bottom: none; padding-left: 15px; _padding-left: 19px; } .menu ul a:visited { color: #900; border-bottom: none; padding-left: 15px; _padding-left: 19px; } .menu ul a:hover { color: #fbf6d0; background-color: #900; } .menu li:hover ul, ul.menu li.hover ul { visibility: visible; } .menu li li { float: none; border: none; padding: 0; margin: 0; } HTML: <table> <tr> <td> <ul class="menu"> <li><a href="../html/">HTML</a> <ul> <li><a href="../html/text.php">Textové značky</a></li> <li><a href="../html/seznamy.php">Seznamy</a></li> <li><a href="../html/odkazy.php">Odkazy</a></li> </ul> </li> </ul> </td> <td> <ul class="menu"> <li><a href="../css/">CSS</a> <ul> <li><a href="../css/border/">border</a></li> <li><a href="../css/margin/">margin</a></li> <li><a href="../css/font/">font</a></li> <li><a href="../css/color/">color</a></li> </ul> </li> </ul> </td> <td> <ul class="menu"> <li><a href="../php/">PHP</a> <ul> <li><a href="../php/kniha_navstev.php">Kniha návštěv</a></li> <li><a href="../php/generovani-formulare.php">Generování formuláře</a></li> </ul> </li> </ul> </td> </table> |
||
Bubák Profil |
#2 · Zasláno: 12. 4. 2008, 09:02:19
Přidej do CSS:
body {behavior: url(csshttp://diskuse.jakpsatweb.cz/index.php?action=vthread&forum=7&t opic=71511#8);} Stáhni si soubor csshover.htc Pokud ti to nepoběží v IE7, koukni co jinde v diskusi poradil Plaváček. vůbec nevím co to hover.htc je Zjednodušeně, IE6 a starší umí CSS hover jen na odkazech. Aby IE dělal hover i na jiných elementech přidává se komponetna, která se jmenuje "hover.htc", nebo podobně, a ta IE hover "naučí". Více třeba www.jakpsatweb.cz/css/behavior.html - hlavně pozor při složitější adresářové struktuře na "Bug s relativní adresou". |
||
Miloš Profil |
#3 · Zasláno: 12. 4. 2008, 10:24:28
Bubák
IE6 a starší umí CSS hover jen na odkazech IE7 sice :hover umí i jinde, ale nesmí být v quirku Jakub8472 A je takový problém – když něco nevím, nejprve hledat sám, a teprve pak se ptát? Poněvadž kdybys opravdu hledal, pak bys mohl položit gůglovic strejdovi primitivní otázku hover.hct http://www.google.com/search?hl=cs&rls=cs&hs=01a&q=hover.htc&btnG=Hled at&lr=lang_cs Takže propříště nebuď líný a ptej se teprve tehdy, když nenajdeš nebo když nalezenému nedokážeš porozumět. |
||
jakub8472 Profil * |
#4 · Zasláno: 12. 4. 2008, 11:25:14
No.. opravdu to neni tak jednoduche, aspon pro mne ne. Do ext. dokumentu se styly jsem pridal "body {behavior: url...." Ale stahnout obsah toho odkazu "csshover.htc" mam kam, do ceho?? J
|
||
jakub8472 Profil * |
#5 · Zasláno: 12. 4. 2008, 11:50:12
mimochodem nemam potuchy co je quirk a nagoogloval jsem se uz dost.. proste s weby teprve zacinam
|
||
Miloš Profil |
#6 · Zasláno: 12. 4. 2008, 12:16:45 · Upravil/a: Miloš
Quirk, neboli režim zpětné kompatibility; na vykreslovacím režimu (quirk × standard) závisí řada věcí, v IE pak především tzv. boxmodel. Víc najdeš na adresách http://wellstyled.com/html-doctype-and-browser-mode.html a http://www.jakpsatweb.cz/css/mody-prohlizecu.html
A na větu nagoogloval jsem se uz dost mohu odpovědět jen to, že položit jednoduchý dotaz googlu (v tomto případě quirk, respektive quirk html) není nic složitého: http://www.google.com/search?hl=cs&rls=cs&hs=81H&q=quirk+html&btnG=Hle dat&lr=lang_cs U IE7 jde o to, že CSS slušně podporuje pouze ve standardním režimu; v quirku se chová jako IE 5.x Udělal jsem pro tebe malou stránečku, na které ukazuju použití tohoto htc scriptu – prostuduj si její zdroják. http://kesolim.sweb.cz/TMP/hover_htc/ Ve zkratce jde o to, že FF, Opera či IE7 použijí pro odkrytí odstavců v nadřazeném divu pomocí následující konstrukce: .obal_bloku:hover p {display: block;} IE6 (a starší) tuto konstrukci nezná; přilinkovaný script: <!--[if lt IE 7]> <style type="text/css"> div.obal_bloku {behavior: url('hover.htc');} </style> <![endif]--> hover.htc vytváří dynamicky třídu .hover, se kterou pak v CSS naložíš stejně, jako nakládáš s pseudotřídou :hover takto: .obal_bloku.hover p {display: block;} |
||
jakub8472 Profil * |
#7 · Zasláno: 12. 4. 2008, 12:37:20
Díky. Až se tím prokoušu, dám vědět jesli eště žiju.. J
|
||
Časová prodleva: 3 dny
|
|||
jakub8472 Profil * |
#8 · Zasláno: 15. 4. 2008, 22:30:03
Mám to. Díky!!!!! Jakub
|
||
Časová prodleva: 10 měsíců
|
|||
swosh Profil |
#9 · Zasláno: 28. 1. 2009, 14:08:45
Nevíte někdo co je tohle za konstrukci
.menu li:hover ul, ul.menu li.hover ul zkoušel jsem vždy jednu zapoznámkovat....pak to nefungovalo, nevyjely linky druhy kategorie.....jedině, když jsou obe dve spolu, tak to funguje |
||
swosh Profil |
#10 · Zasláno: 28. 1. 2009, 14:44:34 · Upravil/a: swosh
a i s tou visibilitou to nechapu. ".Menu ul" by mělo být neviditelný ne? když jsem dal neviditelnost pod .menu a .menu li, tak to nefungovalo. Stejně tak, když jsem .menu dal jako třídu divu a ul nechal bez třídy..... vlastnosti jsem nechal stejný .menu a .menu ul. Funguje mi to. Jen příde prostě záhadný fungování visibility. Chová se tedy jinak pro ul a div?
|
||
panther Profil |
#11 · Zasláno: 28. 1. 2009, 14:59:51
swosh
„Nevíte někdo co je tohle za konstrukci .menu li:hover ul, ul.menu li.hover ul “ to je právě ono. první část pro !IE, druhá pro IE s *.htc souborem |
||
swosh Profil |
panther
Možná taky, ale tady né. Autor ani já nepoužíváme .htc a hrál jsem si s tím jen ve FF. A když jsem jednu z nich vynechal, tak to nefungovalo. Nevyjížděli spodní linky. http://www.tvorba-webu.cz/css/vysouvaci-menu.php |
||
Bubák Profil |
#13 · Zasláno: 28. 1. 2009, 15:29:12 · Upravil/a: Bubák
ul.menu li.hover ul Pravděpodobně jsi při testech zakomentoval nesprávně takto: .menu li:hover ul, /* ul.menu li.hover ul */ { visibility: visible; } Správně zakomentováno je takto: .menu li:hover ul /*, ul.menu li.hover ul*/ { visibility: visible; } Můžeš si vyzkoušet rozdíl, jak správnou i nesprávnou deklaraci vidí prohlížeč: http://selector-shell.appspot.com/ |
||
swosh Profil |
#14 · Zasláno: 28. 1. 2009, 15:36:29
Výborně :) se s tím mořím, gogluju a přitom neumím zakomentovávat :) Už jsem si řikal, že nebudu nad tím přemýšlet, ale jen copypasovat. Díky moc za rychlou odpověď
ještě to s tou visibilitou:hidden pro ul to nechápu. Kouknu na to ještě jednou....třeba jsem udělal jen chybu při konstrukci |
||
Str4wberry Profil |
#15 · Zasláno: 28. 1. 2009, 15:56:09
Při hoveru na položce <li> se zobrazí vnitřní <ul>.
|
||
Bubák Profil |
#16 · Zasláno: 28. 1. 2009, 16:03:05
swosh
Tys to zakomentoval tak, že ti za selektorem zůstala čárka, kdybys to místo zakomentování vymazal, tak vy sis nadbytečné čárky pravděpodobně všimnul. Odpověť bys měl ještě rychlejší, kdybys dal hned odkaz, takhle jsem se neměl čeho chytit. |
||
swosh Profil |
#17 · Zasláno: 28. 1. 2009, 16:06:34 · Upravil/a: swosh
Bubák
No přímo v tomhle kódu se nachází .menu li:hover ul, ul.menu li.hover ul Proto jsem začal ptát tady, ale je fakt, že jsem to nijak nezdůraznil.....aspoň vím, že na každé čárce záleží. |
||
swosh Profil |
#18 · Zasláno: 28. 1. 2009, 19:51:53
„Při hoveru na položce <li> se zobrazí vnitřní <ul>.“
aha, takže .menu ul se týká k vniřnímu ul a né né k vnějšímu ul, který tady představuje to .menu Pak to chápu, proč je ten link "HTML" vidět a po najetí na něj změní ten vnitřní ul na visible |
||
Časová prodleva: 15 let
|
0