Rollover en CSS, probleme sous IE [ impossible, merci IE ]

Rollover en CSS, probleme sous IE [ impossible, merci IE ] - HTML/CSS - Programmation

Marsh Posté le 29-10-2004 à 10:11:25    

Je rencontre un leger soucis avec IE, je "m'amuse" à faire un menu en css/html en jouant sur les propriété display, mais IE refuse de cooperer
 
html

<div id="test">
<a href="#">menu 1</a>
<div id="test2">hello</div>
</div>


 
css

#test {
 width:150px;
 height:20px;
}
#test a {
 background-color:#bbb;
 height:100%;
 width:100%;
 display:block;
 border:1px solid black;
}
#test a:hover {
 background-color:#ddd;
}
#test2 {
 border:1px solid black;  
 width:150px;
 height:20px;  
 display:none;  
}
#test:hover #test2 {
 display:block;  
}


 
au survol de #test le div test2 devrait se montrer, mais il n'en est rien.
testé sous FF, ca fonctionne tres bien
 
une idée?


Message édité par Profil supprimé le 29-10-2004 à 12:11:38
Reply

Marsh Posté le 29-10-2004 à 10:11:25   

Reply

Marsh Posté le 29-10-2004 à 10:33:27    

IE ne gère la propriété hover que pour "a".

Reply

Marsh Posté le 29-10-2004 à 10:36:16    

c'est vrai :)
 
et j'avais tester
 

#test a:hover > #test2 {
 display:block;  
}

mais ca changeait rien

Reply

Marsh Posté le 29-10-2004 à 10:41:18    

c'est :
a.test  
a.test:hover

Reply

Marsh Posté le 29-10-2004 à 10:42:41    

heuuu plus rien ne marche la hein

Reply

Marsh Posté le 29-10-2004 à 10:46:08    

chacal_one333 > je ne crois pas que ce soit possible en css! ECMAScript !


---------------
from here and there -- \o__________________________________ -- la révolution de la terre, en silence
Reply

Marsh Posté le 29-10-2004 à 10:47:11    

simogeo a écrit :

chacal_one333 > je ne crois pas que ce soit possible en css!  


 
meu si, marche bien sous ff :o
 

simogeo a écrit :


ECMAScript !


 
pas moyen [:mmmfff]

Reply

Marsh Posté le 29-10-2004 à 10:50:35    

Reply

Marsh Posté le 29-10-2004 à 10:56:02    

chacal_one333 a écrit :

meu si, marche bien sous ff :o


 
ben ui mais la on parle d'ie [:moule_bite]


---------------
from here and there -- \o__________________________________ -- la révolution de la terre, en silence
Reply

Marsh Posté le 29-10-2004 à 10:58:31    

DTC

Citation :

In other CSS-aware browsers, like Internet Explorer, you'll see the toplevel links, and they'll work just fine. The popout menus won't work, that's all. Of course, this means that the browser is downloading the contents of the complete menu, but only able to display a small part of what it downloaded. This is in some respects unfortunate, but at least the basic menu will still function. And the amount of markup involved is probably a lot fewer characters than a similar Javascript-driven menu intended to serve a similar purpose.
 
(And if you're grumbling that you don't see why anyone would deploy a menu system that only worked in one browser, then you should see how many Javascript menus I deal with that don't work in more than one or two browsers-- usually because they're doing browser sniffing as if this were still 1998. But I digress.)
 
If the browser is too old to understand CSS, or doesn't support CSS because (for example) it's a text-mode browser like Lynx, then the user will get the entire menu as a set of nested lists. No problem.
 
It would also be possible to construct the selectors in the CSS so that the hiding of the submenus could only be understood by advanced browsers, thus giving the complete set of nested lists to any browser that wouldn't have been able to deal with the popouts. I didn't take this step for the demo, because it cluttered up the CSS. Besides, it just didn't seem like as much fun that way.


Le dernier trick est celui qui est utilisé par les CSS très avancées (à menus déroulants) de CSSZG, sous Firefox on a des menus déroulants, sous MSIE on a des menu déroulés (et pas très beaux)
 
Les menus déroulants qui déroulent sous MSIE, c'est impossible sans IE7 [:spamafote]


Message édité par masklinn le 29-10-2004 à 10:58:58

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 29-10-2004 à 10:58:31   

Reply

Marsh Posté le 29-10-2004 à 10:59:34    

j'ai reussi \o/
 
en mettant un id sur le link et en faisant un id:hover [:moule_bite]
 

<div id="test">
<a href="#" id="menu1">menu 1
<div id="sub1">sub menu 1</div>
<div id="sub1">sub menu 2</div>
<div id="sub1">sub menu 3</div>
</a>
</div>
 
#test {
 width:150px;
 height:20px;
 border:1px solid black;
}
#test a {
 background-color:#bbb;
 height:100%;
 width:100%;
 display:block;
}
#test a:hover {
 background-color:#ddd;
}
#sub1 {
 border-top:1px solid black;  
 width:150px;
 height:20px;  
 display:none;  
}
 
#menu1:hover #sub1 {
 display:block;  
}

Reply

Marsh Posté le 29-10-2004 à 11:00:37    

Oui enfin #menu1:hover dans ton cas c'est équivalent à a:hover [:franck75]

Reply

Marsh Posté le 29-10-2004 à 11:02:09    

fastclemmy a écrit :

Oui enfin #menu1:hover dans ton cas c'est équivalent à a:hover [:franck75]


A a#menu1:hover pour être précis [:cupra]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 29-10-2004 à 11:03:06    

Masklinn a écrit :

A a#menu1:hover pour être précis [:cupra]

ben nan #menu1 etant le a [:klem3i1]

Reply

Marsh Posté le 29-10-2004 à 11:06:32    

chacal_one333 a écrit :

ben nan #menu1 etant le a [:klem3i1]


Tu peux avoir d'autres balises a
donc #menu1 != a
mais #menu1 == a#menu1
 :o  
et c'est la raison pour laquelle ton truc marche (puisque MSIE gère a:hover)


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 29-10-2004 à 11:09:00    

Masklinn a écrit :

Tu peux avoir d'autres balises a
donc #menu1 != a
mais #menu1 == a#menu1
 :o  
et c'est la raison pour laquelle ton truc marche (puisque MSIE gère a:hover)

ben ecoute j'ai fait
 

<div id="test">
<a href="#" id="menu1">Livres
<div id="sub1">Policier</div>
<div id="sub1">Sci-fi</div>
<div id="sub1">Romance</div>
</a>
</div>
<div id="test">
<a href="#" id="menu1">Dvd
<div id="sub1">Action</div>
<div id="sub1">Comedie</div>
<div id="sub1">Humoriste</div>
</a>


 
ca fonctionne parfaitement [:spamafote]

Reply

Marsh Posté le 29-10-2004 à 11:14:11    

Citation :

<a href="#" id="menu1">Livres
 
<a href="#" id="menu1">


[:totoz]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 29-10-2004 à 11:14:58    

ouais en fait nan, ya un ptit bug :o
 
vais voir ca, je mettrait la version finie plus tard :p

Reply

Marsh Posté le 29-10-2004 à 11:17:25    

Et de toute facon il est pas bien ton menu :o
En plus du fait que tu utilises un hack (puisque la construction/destruction des sous menus se fait en triggerant sur <a>, mais bon ca se comprend vu qu'MSIE ne gère que ca) t'as fait ton menu à coup de <div> alors que ca se fait à coup de <ul><li>, histoire que les navigateurs non-CSS-compliant et les navs texte aient un truc potable à afficher


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 29-10-2004 à 11:20:48    

je sait ca ;)
 
et ou je vais mettre des class ;)
edit : ce n'est qu'un test de toute maniere, j'en ai pas besoin pour un site


Message édité par Profil supprimé le 29-10-2004 à 11:21:13
Reply

Marsh Posté le 29-10-2004 à 11:34:38    

oué ben je me rend à l'evidence comme le poste de maklinn le disait, c'est pas faisable sous IE :cry:
 
rien à faire, ca deroule le menu si on met pas de lien dessus, donc aucun interet :cry:
 
vais continuer un peu mais je croit vraiment pas que ca soit faisable :cry:

Reply

Marsh Posté le 29-10-2004 à 11:38:15    

chacal_one333 a écrit :

vais continuer un peu mais je croit vraiment pas que ca soit faisable :cry:


Non, il faut faire en sorte que les éléments de menus soient accessibles à partir de liens sur les top-level (en gros, des pages/menus intermédiaires), ou alors il faut faire un CSS cachant le menu... uniquement sur les navigateurs capables de le réafficher (donc en gros sur MSIE tu laisses le menu déployé en permanence)
 
> !important hack
 
et en bas de la page, tu mets un petit sticky pour dire aux gens que la page est plus belle avec un vrai browser (genre fireOpera)


Message édité par masklinn le 29-10-2004 à 11:38:55

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 29-10-2004 à 11:48:29    

chacal_one333 a écrit :

oué ben je me rend à l'evidence comme le poste de maklinn le disait, c'est pas faisable sous IE :cry:


 
 [:cyriadis]  [:cyriadis]  [:cyriadis]  [:cap'tain caca]  [:southpark1] [:tang]  


---------------
from here and there -- \o__________________________________ -- la révolution de la terre, en silence
Reply

Marsh Posté le 29-10-2004 à 11:49:46    

spa drole je trouve [:antp:9]
 
IE arrete pas de gacher tout ce que je fait :fou:

Reply

Marsh Posté le 29-10-2004 à 12:06:46    

chacal_one333 a écrit :

spa drole je trouve [:antp:9]
 
IE arrete pas de gacher tout ce que je fait :fou:


Welcome to the real world of W3C compliant websites [:spamafote]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 29-10-2004 à 12:08:00    

ben j'etait deja welcome avant [:antp:9]
 
mais ca la ca depasse les limite de la connerie, faire un truc banal comme ca et se faire planter en douce par IE c'est vraiment lamentable.
 

Reply

Marsh Posté le 29-10-2004 à 12:12:48    

http://www.alsacreation.com/articles/
Pas mal d'aide pour faire des menus en css (et eventuellement parfois du javascript).


---------------
Martin
Reply

Marsh Posté le 29-10-2004 à 12:18:05    

oué il mettent du JS sur les menus deroulants :(

Reply

Marsh Posté le 29-10-2004 à 12:22:12    

chacal_one333 a écrit :

oué il mettent du JS sur les menus deroulants :(


 
Bof, c'est pas la mort le JS, surtout si tu l'externalises complêtement via IE7 par exemple...
 
En ce qui me concerne,  je préfère continuer d'utiliser uniquement du JS pour mes menus. Par principe, je n'aime pas utiliser différents codes pour tel ou tel navigateur. [:spamafote]

Reply

Marsh Posté le 29-10-2004 à 12:23:44    

nan j'utilise pas de JS du tout, si ca marche pas tant pi, ca sera un autre menu

Reply

Marsh Posté le 29-10-2004 à 12:27:18    

chacal_one333 a écrit :

nan j'utilise pas de JS du tout, si ca marche pas tant pi, ca sera un autre menu


 
Ben c'est aussi une possibilité, mais dans ce cas là tu limites les possibilités. ET ça non plus, ça ne me plait pas. [:spamafote]

Reply

Marsh Posté le 29-10-2004 à 12:28:49    

ca te plait pas que je limite mes possibilités? [:mlc]

Reply

Marsh Posté le 29-10-2004 à 12:31:08    

chacal_one333 a écrit :

ca te plait pas que je limite mes possibilités? [:mlc]


 
 :D  

Reply

Marsh Posté le 29-10-2004 à 12:31:17    

chacal_one333 a écrit :

nan j'utilise pas de JS du tout, si ca marche pas tant pi, ca sera un autre menu


Regarde comment Organic Desire a été fait:
menu déroulant sous Firefox
menu normal (déroulé) sous MSIE
et en plus le CSS est bien commenté
 
Le CSS de Zaurus est également plutôt clair (en gros le principe est d'utiliser #a > #b, parce que MSIE n'est pas capable de le comprendre, donc tu crée le menu pour les navs qui ne comprennent pas, puis pour ceux qui comprennent [et comprennent donc !hover])


Message édité par masklinn le 29-10-2004 à 12:35:54

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 29-10-2004 à 12:34:35    

voué pas mal, mais bon c'est super con que IE limite autant le devellopement propre.
 
ca sera autre chose et c'est tout :o

Reply

Marsh Posté le 29-10-2004 à 12:36:12    

Masklinn a écrit :

Regarde comment Organic Desire a été fait:
menu déroulant sous Firefox
menu normal (déroulé) sous MSIE
et en plus le CSS est bien commenté


 
C'est très simple à réaliser, mais déjà la largeur des menus est définie, ya aucune adaptation dynamique au contenu possible etc...
 
Bref, gadget inutilisable si on fait un site dynamique dans lequel le contenu des menus change par exemple.
 
De plus, c'est pas propre, le menu ne disparait pas quand on le quitte (enfin si, mais au dela du menu en question).
 
des trucs comme ça, on en trouve à foison. C'est presque toujours la même histoire, jamais vraiment compatible, jamais propre etc...
 

Reply

Marsh Posté le 29-10-2004 à 12:37:28    

chacal_one333 a écrit :

voué pas mal, mais bon c'est super con que IE limite autant le devellopement propre.
 
ca sera autre chose et c'est tout :o


 
ça c'est clair.
 
Ceci dit, un javascript externalisé non indispensable au bon fonctionnement du site, je ne vois pas en quoi cela n'est pas propre.

Reply

Marsh Posté le 29-10-2004 à 12:39:45    

Hermes le Messager a écrit :

De plus, c'est pas propre, le menu ne disparait pas quand on le quitte (enfin si, mais au dela du menu en question).


 :??:


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 29-10-2004 à 12:40:09    

ben le menu est pour moi la base du site, donc si le truc est fait en JS, ben forcement ca bloque la naviguation à certain, qui l'ont choisi certe, mais ca bloque certain visiteurs, je prefere avoir un autre menu, different de mon idée, mais compatible avec tout le monde sans avoir besoin de script exterieurs

Reply

Marsh Posté le 29-10-2004 à 12:44:18    

chacal_one333 a écrit :

ben le menu est pour moi la base du site, donc si le truc est fait en JS, ben forcement ca bloque la naviguation à certain, qui l'ont choisi certe, mais ca bloque certain visiteurs, je prefere avoir un autre menu, different de mon idée, mais compatible avec tout le monde sans avoir besoin de script exterieurs


 
Non, fait intelligemment, un menu qui repose en partie sur du JS, peut parfaitement s'afficher déplié si pas de JS. [:spamafote]
 
C'est équivalent à un menu en CSS, vu que de toutes manière, on utilise le JS pour afficher ou cacher via des propriétés CSS.
 
Il n'y a pas de différences fondamentales.

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed