« 1 2 »
Autor Zpráva
dobron
Profil *
#1 · Zasláno: 5. 10. 2007, 19:14:22
Odpovědět Citovat
Ahoj všem. Jak mám udělat menu pomocí css a html, aby mi při přejetí myší vyjela další nabídka?

Když mám a:hover {...existuje nějakej příkaz, kterej bych takhle jednoduše sem napsal a jelo by to?...}
nebo to je složitější? Nebo to vůbec nejde a musí se použít javascript?

Děkuju mockrát.
Manq
Profil
#2 · Zasláno: 5. 10. 2007, 19:15:37
Odpovědět Citovat
dobron
Aby vyjela, tak musíš JavaScript.
dobron
Profil *
#3 · Zasláno: 5. 10. 2007, 19:20:22
Odpovědět Citovat
dobron
Aby vyjela, tak musíš JavaScript.

Ach jo. JS zrovna neumim. Asi se začnu učit, protože vyjížděcí menu mi přijde jako dost základní prvek na stránce. Díky moc.
Railbot
Profil
#4 · Zasláno: 5. 10. 2007, 19:22:18
Odpovědět Citovat
protože vyjížděcí menu mi přijde jako dost základní prvek na stránce
Většinou spíš úplně zbytečný.
dobron
Profil *
#5 · Zasláno: 5. 10. 2007, 19:33:34
Odpovědět Citovat
Většinou spíš úplně zbytečný.

A ty by si to menu udělal teda jak? Mě nic šikovnějšího nenapadá. Je to hezký, šetří místo a lidi jsou na to zvyklý, protože to je skoro na každý druhý stránce.
Manq
Profil
#6 · Zasláno: 5. 10. 2007, 19:35:44
Odpovědět Citovat
dobron
Pokud máš v menu hodně položek, tak to můžeš vyyřešit podobně jako na http://aktualne.centrum.cz/ .
Ale nekopíruj to.
yFang
Profil
#7 · Zasláno: 5. 10. 2007, 19:47:29
Odpovědět Citovat
Manq
Stejně bude potřebovat JS, tak už je to jedno, ne?

dobron
Já bych se zamyslel, jestli jsou ty položky obravdu všechny nutné, nebo jestli je to jen proto, aby to bylo jako na každý druhý stránce. :) Jestli jsou opravdu nutné, tak už je to jedno. Mě osobně se víc líbí vyjíždějící menu.
Railbot
Profil
#8 · Zasláno: 5. 10. 2007, 19:53:40 · Upravil/a: Railbot
Odpovědět Citovat
Manq yFang
Jo tak menu Aktualne bych zrovna jako priklad nedoporucoval, neni to zrovna moc dobra prace. Navíc JS svým způsobem také používá (htc pro IE). Už bych měl konečně udělat nové :)
Manq
Profil
#9 · Zasláno: 5. 10. 2007, 20:00:06
Odpovědět Citovat
Railbot
Jo tak menu Aktualne bych zrovna jako priklad nedoporucoval, neni to zrovna moc dobra prace.
Taky po delší době vidíš chyby, které jsi dříve neviděl? Mě se to menu líbí. Když ho předěláš k ještě lepšímu, tak není problém. :-)

yFang
Doporučil jsem ho proto, protože je IMHO použitelnější než celojavascriptové nebo něco podobného. Mnou dělaný web teď čeká na spuštění, je tam rozbalovací menu s htc pro IE. Zdá se mi celkem použitelné (musím se pochválit, nikdo jiný to za mě neudělá).
yFang
Profil
#10 · Zasláno: 5. 10. 2007, 20:04:49 · Upravil/a: yFang
Odpovědět Citovat
Manq
je tam rozbalovací menu s htc pro IE
a pro ostatní si to udělal v CSS?

*edit: úprava dotazu
Railbot
Profil
#11 · Zasláno: 5. 10. 2007, 20:05:06
Odpovědět Citovat
Manq
To menu jsem nedělal já, je převzato ze staré verze. Ale to je jedno. Je docela v pohodě, ale jen do té doby než si ho vyzkoušíš v IE7. To je takový krásný bug, že už chvíli dumám, co s tím...
Railbot
Profil
#12 · Zasláno: 5. 10. 2007, 20:05:41
Odpovědět Citovat
yFang
Zbytek prohlížečů krom IE6- si vystačí s CSS.
Manq
Profil
#13 · Zasláno: 5. 10. 2007, 20:22:45
Odpovědět Citovat
Railbot
Aha. No, já IE7 nevlastním. Vždy obě IE hodím do quirku a kontroluji vzhled tady http://www.totalvalidator.com/validator/Validator. Ale přestává mi to stačit.

Rozjížděcí nebo jakákoliv odlišná menu jsou kategorie samy pro sebe. Prohlížeče si leckdy dělají co chtějí. Většinou to vyřeší například špatně nastavený z-index.
habendorf
Profil
#14 · Zasláno: 5. 10. 2007, 20:42:54
Odpovědět Citovat
Většinou to vyřeší například špatně nastavený z-index.

No už jsem pár drop-down menu dělal a nepamatuju se, že bych potřeboval z-index.
Jinak nic složitého na tom není, princip je v tom, že na hover měníš display zanořeného menu. Žádná věda.
Manq
Profil
#15 · Zasláno: 5. 10. 2007, 20:50:46
Odpovědět Citovat
habendorf
Nevzpomínám si přesně, měl jsem na nějakém "zkoušecím" čtyř úrovňové menu, které se různě překrývalo.
dobron
Profil *
#16 · Zasláno: 5. 10. 2007, 21:29:24
Odpovědět Citovat
Mám ještě několik dotazů a nechci zbytečně zakládat nové téma, tak píšu sem. Byl bych moc rád za pomoc.

Dobrý den. Potřeboval bych nutně help nebo už na to fakt vezmu kladivo.

1.- Mám stránku .html, kterou otvírám v Internet Exploreru a v ní:

...text</p><img src="aktual_2.jpeg"><p>text...

Tady se obrázek načte a pak mám:

...text</p><img src="mwav.jpeg"><p>text...

No a tohle už IE nenačte. Proč se druhý (je jich víc) obrázek nenačte, když zdroják je stejnej? Zřejmě to bude nějaká banalita, ale pořád se točím dokola a nedokážu si najít chybu nebo nedokážu vysvětlit, proč to blbne.Dokáže mi někdo poradit nebo to mám nechat nevyladěné pro IE.

1.- A další problém. Opět v IE. Mám:

div#nabidka p:hover {border-left:1px solid olive; border-top:1px solid olive; border-right:1px solid olive; border-bottom:1px solid olive; background-color: white;}

a na stránce <div id="nabidka">
<p><a href="uvod.html" title="úvod"><b>úvod</b></a></p>

v Mozille Firefox to dělá přesně co chci (ostatně jako v prvním případě) a to to, že se mi zvýrazní celej řádek od kraje ke kraji toho divu. V IE se zvýrazní jen část za textem a zbytek je stejný jako když nepřejíždím myší. Poradíte prosím, jak udělat stejný efekt v obou prohlížečích (zvíraznění celého divu od kraje ke kraji)?


Určitě to je mnou, ale zlatá Mozilla Firefox, která přechroupe i třeba trochu horší kód. Děkuju mockrát za ochotu a pomoc. Už si fakt nevím rady.
Manq
Profil
#17 · Zasláno: 5. 10. 2007, 21:34:21
Odpovědět Citovat
dobron
...text</p><img src="mwav.jpeg"><p>text...
Máš tam ten obrázek vůbec? :-)

a na stránce <div id="nabidka">
<p><a href="uvod.html" title="úvod"><b>úvod</b></a></p>
IE<7 umí :hover jenom na odkaz - A. Na <p> neumí.
dobron
Profil *
#18 · Zasláno: 5. 10. 2007, 21:39:12
Odpovědět Citovat
...text</p><img src="mwav.jpeg"><p>text...
Máš tam ten obrázek vůbec? :-)

No obrázek tam samozřejmě je, funguje jen první obrázek na stránce a další už nefungujou.


a na stránce <div id="nabidka">
<p><a href="uvod.html" title="úvod"><b>úvod</b></a></p>
IE<7 umí :hover jenom na odkaz - A. Na <p> neumí.

Co to je za prohlížeč proboha, když to neumí takovouhle věc? Možná není častá, ale jako začátečník o ní vím a profíci z microsoftu o ní asi teda nevědí nebo co...to bych se.....

Ale dost. Nevíš, jak to udělat, aby to šlo v tom IE?
yFang
Profil
#19 · Zasláno: 5. 10. 2007, 21:44:12
Odpovědět Citovat
dobron
Zkus tohle:
http://interval.cz/clanky/prirazeni-skriptu-stylem-behavior-a-htc/
Manq
Profil
#20 · Zasláno: 5. 10. 2007, 21:44:35
Odpovědět Citovat
Ale dost. Nevíš, jak to udělat, aby to šlo v tom IE?
Udělat to tak, aby jsi v CSS neměl p:hover ale a:hover :-).

IE<7 prostě hover umí jenom na odkazy. Na odstavec ho uděláš jenom JavaScriptem.
dobron
Profil *
#21 · Zasláno: 5. 10. 2007, 21:52:49
Odpovědět Citovat
Udělat to tak, aby jsi v CSS neměl p:hover ale a:hover :-).

No zkoušel jsem tam dát všechno možný, ale když dám jen a:hover, tak se mi zvýrazní část jen za textem (né od kraje ke kraji divu - tak, jak to chci) a to ani v Mozille. A to jsem samozřejmě zkoušel místo <p><a href="uvod.html" title="úvod"><b>úvod</b></a></p> dát <li>...</li>, nebo nic a na konci jen zalomit řádek,atd.... Jak to teda udělat?
yFang
Profil
#22 · Zasláno: 5. 10. 2007, 21:56:04
Odpovědět Citovat
dobron
tak nastav a{display:block;width:100%}
Manq
Profil
#23 · Zasláno: 5. 10. 2007, 21:56:13
Odpovědět Citovat
dobron
p a {display:block;}
habendorf
Profil
#24 · Zasláno: 5. 10. 2007, 21:56:21
Odpovědět Citovat
a {display:block;}

Třeba.
dobron
Profil *
#25 · Zasláno: 5. 10. 2007, 21:59:44
Odpovědět Citovat
Zkusím, uvidím, ozvu se. A co ty nenačítající se obrázky?
dobron
Profil *
#26 · Zasláno: 5. 10. 2007, 22:02:20
Odpovědět Citovat
Tak zatím díky. Ozvu se až zítra, dnska už mám dost.
dobron
Profil *
#27 · Zasláno: 6. 10. 2007, 12:11:52
Odpovědět Citovat
Mockrát děkuju, už to jede i v IE. Akorát nejedou ty obrázky. Neví někdo? V mozille se normálně načtou.

Jo a ještě jeden problém, pro změnu opět s IE. Mám na stránce tabulku, která se mi v mozille normálně načte tam, kde má, ale v IE se zobrazí až dole na stránce. Jak udělat, aby se zobrazila tam, kde má? Díky moc.
Manq
Profil
#28 · Zasláno: 6. 10. 2007, 14:48:57
Odpovědět Citovat
dobron
Jak udělat, aby se zobrazila tam, kde má?

Potřebujeme celý kód. Z těch pár vět, co jsi sem napsal nám na vyřešení tvých problémů opravdu nestačí.
amon
Profil *
#29 · Zasláno: 6. 10. 2007, 14:54:19
Odpovědět Citovat
HTML: 

<div id="seznam_nabidka">

 <ul>

  <li><a href="#">Položka 1. úrovne</a>

      <ul>

        <li><a href="#">Položka 2. úrovne</a></li>

        <li><a href="#">Položka 2. úrovne</a></li>

        <li><a href="#">Položka 2. úrovne</a></li>

        <li><a href="#">Položka 2. úrovne <img src="icon.gif" border="0"></a>

			<ul>

            <li><a href="#">Položka 3. úrovne</a></li>

            <li><a href="#">Položka 3. úrovne</a></li>

            <li><a href="#">Položka 3. úrovne</a></li>

            <li><a href="#">Položka 3. úrovne <img src="icon.gif" border="0"></a>

			

			  <ul>

              <li><a href="#">Položka 4. úrovne</a></li>

              <li><a href="#">Položka 4. úrovne</a></li>

              <li><a href="#">Položka 4. úrovne</a></li>

              <li><a href="#">Položka 4. úrovne</a></li>

			 </ul>

			

			</li>

			</ul>

			</li>

			<li><a href="#">Položka 2. úrovne</a></li>

        </ul>

	</li>

   <li><a href="#">Položka 1. úrovne</a>

      <ul>

        <li><a href="#">Položka 2. úrovne</a></li>

        <li><a href="#">Položka 2. úrovne</a></li>

        <li><a href="#">Položka 2. úrovne</a></li>

        <li><a href="#">Položka 2. úrovne</a></li>

      </ul>

    </li>

    <li><a href="#">Položka 1. úrovne</a>

      <ul>

        <li><a href="#">Položka 2. úrovne</a></li>

        <li><a href="#">Položka 2. úrovne</a></li>

        <li><a href="#">Položka 2. úrovne</a></li>

        <li><a href="#">Položka 2. úrovne</a></li>

      </ul>

    </li>

   <li><a href="#">Položka 1. úrovne</a>

      <ul>

        <li><a href="#">Položka 2. úrovne</a></li>

        <li><a href="#">Položka 2. úrovne</a></li>

        <li><a href="#">Položka 2. úrovne</a></li>

        <li><a href="#">Položka 2. úrovne</a></li>

      </ul>

    </li>

  </ul>

</div>


CSS: 

body{font-family:verdana,arial,sans-serif; font-size:100%; behavior:url(csshover.htc);}

div#seznam_nabidka{width:100%; float:left; border-top:1px solid #069;border-bottom:1px solid #069;font-size:.8em;background-color:#CCF; margin-top:20px; }

div#seznam_nabidka ul{margin:0 0 0 30px;}

div#seznam_nabidka li{float:left;position:relative; list-style-type:none;background-color:#FFA; border-right:1px solid #069; }

div#seznam_nabidka li:first-child{border-left:1px solid #069; }

div#seznam_nabidka li:hover{background-color:#FFF; }

div#seznam_nabidka a{display:block; padding:0 6px; text-decoration:none; color:#069;}

div#seznam_nabidka a:hover{color:#F33;}

div#seznam_nabidka ul li ul{margin:0; position:absolute; width:12em; left:-1px; }

div#seznam_nabidka ul li ul li{width:100%; border-left:1px solid #069; border-bottom:1px solid #069;border-right:1px solid #069;padding:0 0 1px;}

div#seznam_nabidka ul li ul li:first-child{border-top:1px solid #069; }

div#seznam_nabidka ul li ul{display:none;}

div#seznam_nabidka ul li:hover ul{display:block; }

body div#seznam_nabidka ul li ul li ul{visibility:hidden; top:-1px;left:12em;}

div#seznam_nabidka ul li ul li:hover ul{visibility:visible;}

div#seznam_nabidka ul li ul li:hover ul li ul{display:none;}

div#seznam_nabidka ul li ul li ul li:hover ul{display:block; }

* html div#seznam_nabidka ul{float:left; border-left:1px solid #000; margin-left:15px; }

* html  div#seznam_nabidka ul li ul{border-top:1px solid #069;border-left:0px; }

* html  div#seznam_nabidka ul li ul li ul{left:9.85em;   voice-family:""}

"";   voice-family:inherit;  left:10em; }

html>body div#seznam_nabidka ul li ul li ul{top:-1px;  left:12em;}

@media all and (min-width:0px){body div#seznam_nabidka ul li ul{padding-bottom:70px;}

body div#seznam_nabidka ul li ul li ul{padding-bottom:22px;}

body div#seznam_nabidka ul li ul li ul li ul li:hover{visibility:visible;}
Manq
Profil
#30 · Zasláno: 6. 10. 2007, 14:57:27
Odpovědět Citovat
amon
A co soubor csshover.htc?
Téma pokračuje na další straně.
« 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:

0