Autor Zpráva
Jakub8472
Profil *
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
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
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 *
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 *
mimochodem nemam potuchy co je quirk a nagoogloval jsem se uz dost.. proste s weby teprve zacinam
Miloš
Profil
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]-->
říká, že se má hover.htc použít na bloky <div class="obal_bloku">.
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 *
Díky. Až se tím prokoušu, dám vědět jesli eště žiju.. J
jakub8472
Profil *
Mám to. Díky!!!!! Jakub
swosh
Profil
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
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
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
ul.menu li.hover ul
To je nesmysl, můžeš to s klidem vymazat, v HTML se třída "hover" nevyskytuje

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
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
Při hoveru na položce <li> se zobrazí vnitřní <ul>.
Bubák
Profil
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
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
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

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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