|
| olivier.pantz |  Posté le 19/03/2007 @ 12:23 |
Petit astucien
42 Messages
| Bonjour a tous,
Je suis toujours dans ma quete de faire un menu css qui correspond a mes attentes (voir mes precedents post).
Dans cette optique, j'ai realise le petit code html suivant. Je n'ai pu le tester que sous Firefox et
malheureusement, le resultat escompte n'est pas le bon:
Lorsqu on passe sur l'element1 du tableau, les autres elements appraissent (c'est ce que je veux).
Ils recouvrent le bandeau BAS= tres bien aussi.
Mais, lorsque que je retire la souris du tableau, c'est la cata: alors que tout devrait revenir
dans la situation intiale (en tout cas, c'est ce que je souhaite), le tableau ne retrecit pas:
Il conserve la meme longueur. Pire, il s'allonge a chaque activation de l'effet hover !
C est tres tres bizarre comme comportement de mon point de vu.
Quelqu'un a une explication et/ou une solution ? Voici mon code:
Test
table.conteneur {
border-width:2px; border-style:solid;margin:auto; background-color:yellow;
z-index:1;
}
table.conteneur:hover {
border-color:red;
}
tr.element {
display:none;
}
table.conteneur:hover tr.element{
display:block;
}
Test
HAUT
element 1
element 2
element 3
element 4000
BAS
|
| |
| |
| Publicité |
|
|
| Malcolm | Posté le 19/03/2007 à 12:45 |
 Astucien
7266 Messages
| attention, l'effet :hover n'est pas pris en compte par IE6 ailleurs que sur les balises a. Je ne sais pas ce qu'il en est sous IE7. Tu dois pouvoir rajouter un élément javascripty de type onmouseout="this.classname='default'" par exemple (avec le nom de ta classe CSS "normale"), non ? |
| |
|
| olivier.pantz | Posté le 19/03/2007 à 14:38 |
Petit astucien
42 Messages
| IE7 prend en compte l' effet hover sur toutes les balises: il faut par avoir precise le DOCTYPE, sinon IE7 passe le code en mode "crade" et ne tient pas compte de hover. De toute facon, c est avec Firefox que j'ai obtenu cet effet. Je ne sais pas comment c est interprete par IE7...
Mon code n'est pas passe dans mon precedent post. Le revoici: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<style type="text/css">
table.conteneur {
border-width:2px; border-style:solid;margin:auto; background-color:yellow;
z-index:1;
}
table.conteneur:hover {
border-color:red;
}
tr.element {
display:none;
}
table.conteneur:hover tr.element{
display:block;
}
</style>
</head>
<body>
<h1>Test</h1>
<div style="height:40px;">HAUT</div>
<div style="height:40px; z-index:1; position:relative;">
<table class="conteneur">
<tr style="background-color:red;"><td> element 1</td></tr>
<tr class="element"><td> element 2</td> </tr>
<tr class="element"><td> element 3</td> </tr>
<tr class="element"><td> element 4000</td> </tr>
</table>
</div>
<div style="background-color:green; z-index:0;"> BAS </div>
</body>
</html>
|
| |
|
| olivier.pantz | Posté le 19/03/2007 à 15:25 |
Petit astucien
42 Messages
| Bon, je reponds a mes propre message... J'ai trouve la reponse. Pour que cela marche, il suffit de remplacer le display:block; par display: table-row; dans table.conteneur:hover tr.element Je laisse le code, car je le trouve amusant... Le voici: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<style type="text/css">
table.conteneur {
border-width:2px;
border-style:solid;
margin:auto;
background-color:yellow;
z-index:1;
}
table.conteneur:hover {
border-color:red;
}
tr.element {
display:none;
}
table.conteneur:hover tr.element{
display:table-row;
}
</style>
</head>
<body>
<h1>Test</h1>
<div style="height:40px;">HAUT</div>
<div style="height:40px; z-index:1; position:relative;">
<table class="conteneur">
<tr style="background-color:red;"><td> element 1</td></tr>
<tr class="element"><td> element 2</td> </tr>
<tr class="element"><td> element 3</td> </tr>
<tr class="element"><td> element 4000</td> </tr>
</table>
</div>
<div style="background-color:green; z-index:0;"> BAS </div>
</body>
</html> |
| |
|
| El Konkonbré M@squed | Posté le 19/03/2007 à 16:25 |
Petit astucien
355 Messages
| Salut. Ben tu n'as vraiment pas de chance. Sous FF, Element1 est centré et passe par dessus ton pied de page.
Sous IE6, Element1 est à gauche et cela ne fonctionne tout simplement pas.
Sous Opera, Element1 est centré et pousse vers le bas ton pied de page. Bon courage pour la suite. Bye. |
| |
|
| olivier.pantz | Posté le 19/03/2007 à 16:37 |
Petit astucien
42 Messages
| Ouais, il faudra que je teste tout ca et que je m'arrange pour avoir un comportement a peu pres identique selon les navigateurs. Je suis deja content d'avoir un truc qui fonctionne pour FF. Pour IE6, ca m'etonne pas que cela ne marche pas. On peut toujours s'arranger en traitant ce cas a part (quitte a en faire un peu moins). Pour Opera, je sais pas... Est-ce que tu as teste sur IE7 (je l'ai pas sous la main) ? |
| |
|
| edon47 | Posté le 19/03/2007 à 16:40 |
Petit astucien
437 Messages
| |
| |
|
| olivier.pantz | Posté le 19/03/2007 à 16:43 |
Petit astucien
42 Messages
| Argh... Bon, ca m'occupera ce soir.
|
| |
|
| El Konkonbré M@squed | Posté le 19/03/2007 à 17:39 |
Petit astucien
355 Messages
| Pour ma part, je n'ose pas installer IE7, ne sachant pas si l'on peut continuer d'utiliser IE6. Et comme, il y a encore plus d'utilisateur de IE6, je préfère tester ce que je fais sous celui-ci. Bye. |
| |
|
| elle | Posté le 19/03/2007 à 18:11 |
 Maîtresse astucienne
15681 Messages
| El Konkonbré M@squed a écrit :
Pour ma part, je n'ose pas installer IE7, ne sachant pas si l'on peut continuer d'utiliser IE6. Et comme, il y a encore plus d'utilisateur de IE6, je préfère tester ce que je fais sous celui-ci. Bye.
Salut, Tu peux installer IE7 et une version autonome de IE6, pour tester... |
| |
|
| El Konkonbré M@squed | Posté le 22/03/2007 à 17:33 |
Petit astucien
355 Messages
|  Elle.
Mais est-ce que cette version autonome de IE6 fonctionne rigoureusement de la même façon que le IE6 fonctionnant avec le SP2 de mon Super XP. C'est surtout dans le but de vérifier les scripts que je fais et de voir s'il s'affichent correctement dans un max de navigateurs. Pour l'instant je teste sous FF2, IE6, Opera9.1, Netscape7 et Konqueror, donc si je pouvais ajouter une nouvelle corde à mon arc, cela m'éviterai d'être dépendant d'autres personnes, pour venir zieuter la chose à ma place. Et sinon on la trouve où, cette version indépendante? Bye. |
| |
|
| elle | Posté le 22/03/2007 à 17:46 |
Maîtresse astucienne
15681 Messages
| El Konkonbré, Pour les scripts, je ne sais pas, j'ai lu qu'il y avait quelque chose à faire pour que IE6 ne s'identifie pas comme étant la version du navigateur actuellement installé (donc IE7), je vais essayer de retrouver le lien. Tu peux toujours essayer, ça ne coûte rien  : http://browsers.evolt.org/?ie/32bit/standalone Modifié par elle le 22/03/2007 17:47 |
| |
|
| El Konkonbré M@squed | Posté le 22/03/2007 à 18:10 |
Petit astucien
355 Messages
| Re elle a écrit :
Pour les scripts, je ne sais pas, j'ai lu qu'il y avait quelque chose à faire pour que IE6 ne s'identifie pas comme étant la version du navigateur actuellement installé (donc IE7), je vais essayer de retrouver le lien.
Je n'ai pas bien compris ce que tu voulais dire.
A moins que tu ne me parles d'une astuce made in Microsoft? Tu peux toujours essayer, ça ne coûte rien : http://browsers.evolt.org/?ie/32bit/standalone J'ai téléchargé ie6eolas_nt.zip, je pense que c'est l'équivalent de ce que j'ai actuellement, mais je me gratte la tête pour savoir si j'upgrade vers IE7.
Je vais d'abord faire de multiples tests entre mon IE6 et celui-ci, pour voir si l'affichage est similaire. Sinon merci pour l'info et pour le lien. |
| |
|
| elle | Posté le 22/03/2007 à 19:13 |
Maîtresse astucienne
15681 Messages
| |
| |
|
| El Konkonbré M@squed | Posté le 22/03/2007 à 19:41 |
Petit astucien
355 Messages
| Ok merci, moi y'en n'avoir tout comprendre maintenant  . J'ai zieuté vite fait tes liens.
Dommage, l'anglais et moi on est pas très copains. Mais ceci dit, utilisant de toute façon FF pour naviguer, me fiche un peu de IE7.
Donc je vais rester comme la grande majorité des gens avec IE6 et installer IE7standalone et non pas, upgrader vers IE7 et utiliser une version IE6standalone.
IE7 comme je le disais plus haut, c'est juste pour voir comment s'affiche mon site et les autres trucs que je fais dans cette nouvelle version de navigateur. Je verrais ça demain. Merci à toi Elle, pour toutes ces recherches  . |
| |
|
| olivier.pantz | Posté le 22/03/2007 à 20:21 |
Petit astucien
42 Messages
| En effet, merci pour toutes ces infos. J ai installe IE6 et meme IE5 en standalone et cela semble bien reproduire leur comportement. J'en ai profite pour installer Opera et Netscape. Mon ordi est du coup barde de navigateurs. J'ai ainsi pu tester mon script de menu deroulant en css. Resultat: Personne ne reagit de facon identique ! J'arrive a faire une version pour IE7, une pour FF, Netscape accepte les 2 versions, Opera acune de ces solutions. Du coup, je pense abandonner definitivement l'idee de bosser en pure CSS: Le resultat est tellement aleatoire suivant les navigateurs (je vais pas m'amuser a tous les tester et faire des dizaines de hack). Je vais me resoudre a mettre un peu de javascript (snif, c'est si beau un menu CSS... du moins sur le papier) peut etre en incluant le truc de dean edwards (pour que IE comprenne les CSS) ou plus simplement en faisant le travail moi meme.
|
| |
|
|
| Haut de la page |
effet etrange de hover...
