[résolu] Hover ok dans FF / hover dans ie

RE

Comme vou spouvez le voir sur le lien, quand vous allez sur le menu, une image plus clair apparait... .menu et .menu:hover...



Comment faire la même chose avec ie ?

Merci

PS : La SOLUTION SE TROUVE LA : http://forum.alsacreations.com/topic-5-15056-1-Hover-dans-IE.html
Modifié par yank (12 Jun 2006 - 09:56)

C'est à dire que Internet Explorer ne supporte que les hover sur les liens, comme ceci :

a:hover {
...
}

mais ne supporte pas

div#iddemondiv:hover {
...
}

Comme Internet Explorer actuel ne reconnaît pas la deuxième déclaration, contrairement à Firefox, il faut utiliser le Javascript.

Donc c'est impossible en CSS, sauf pour les navigateurs récents respectant les standards. Internet Explorer a beaucoup de retard à ce niveau.
Modifié par Tony Monast (07 Jun 2006 - 22:44)

ok merçi pour les infos

Mais comment faire alors en javascript... Je n'ai pas tout compris vers ton lien hack ie7 ...

Merçi

yank a écrit :
Mais comment faire alors en javascript... Je n'ai pas tout compris vers ton lien hack ie7 ...

Tu n'en auras pas besoin (de la librairie « IE7 ») pour réaliser cet effet.

En Javascript ?
Je ne connais pas la syntaxe exacte, mais ça devrait être très basique.

Hello Yank...
Alors y'a une technique de sioux, comme d'hab pas très propre mais qui fonctionne.

Je vais pas rentrer dans le détail, mais en fouinant sur le forum tu devrais trouver la solution qui te convient.
Ton div deco qui contient ton menu a des tailles fixes.
Tu vas donc coller un a dans un coin auquel tu vas donner les dimensions égales à celles de ton div.

Tu lui fais un a:hover avec l'image que tu veux faire apparaitre, tu recalle ton menu gentiement dans le div et ohhh magie u as un hover qui fonctionne sur IE.

Je ne t'explique pas plus la démarche, en cherchant bien dans le forum ou les sources Alsacréations tu trouvera ta réponse complète.

Aymeric, oui j'ai honte et alors?

hummm ça m'interresse ...

Même si ce n'est pas le mieux à faire je vais essayer quand même ne serait ce que pour voir le résultat

Merçi à toi

désolé mais je n'y arrive pas

Je comprends tres bien le principe et le détournement du a puisque ie ne comprend que ça mais je ne vois pas ni ou le mettre ni comment le mettre

un bout de code css :

body {
	margin: 0;
	text-align: center;
	background-color: #402D20;
	color: #FFFFFF;
}
#global {
	position:absolute;
	left: 50%;
	top: 50%;
	width: 750px;
	height: 550px;
	margin-top: -275px;
	margin-left: -375px;
	background-color: #BFA38F;
	color: #FFFFFF;
}
.header {
	height: 100px;
	color: #ffffff;
	background-color: #BFA38F;
	background-image:  url(visuels/png/a.png);
}
.menu {
	left: 0px;
	width: 200px;
	position: absolute;
	height: 400px;
	color: #ffffff;
	background-color: #BFA38F;
	background-image:  url(visuels/png/b.png);
}
.menu:hover {
	background-color: #BFA38F;
	background-image:  url(visuels/png/_menuhover.png);
}
.frame {
	margin-left: 200px;
	overflow: auto;
	width: 530px;
	height: 400px;
	color: #FFFFFF;
	margin-right: 20px;
	background-color: #BFA38F;
}
.right {
	right: 0px;
	width: 20px;
	position: absolute;
	height: 400px;
	color: #ffffff;
	background-color: #BFA38F;
	background-image:  url(visuels/png/c.png);
}
#footer {
	height: 50px;
	font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;
	font-size: 0.8em;
	font-style: normal;
	font-weight: normal;
	color: #FFFFFF;
	background-color: #BFA38F;
	background-image:  url(visuels/png/d.png);
}
.foot_left {
	float: left;
	margin-left: 5px;
}
.foot_right {
	float: none;
}
a {
	text-decoration: none;
	color: #FFFFFF;
}
a:visited {
	text-decoration: none;
	color: #FFB580;
}
a:hover {
	text-decoration: none;
	color: #FF8F40;
	background: url(none); /* correction d'un bug IE */
}
a:active/*ie*/ {
	text-decoration: none;
	color: #FF6A00;
}
a:focus/*gecko*/ {
	text-decoration: none;
	color: #FF6A00;
}
h1 {
	font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;
	font-style: normal;
	color: #402D20;
	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
	margin-top: 20px;
}
h2 {
	font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;
	font-style: normal;
	color: #402D20;
	font-size: 1em;
	font-weight: bold;
	text-align: left;
	margin-right: 20px;
	margin-left: 15px;
	margin-top: 20px;
}
p {
	font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;
	font-style: normal;
	color: #402D20;
	font-size: 0.9em;
	font-weight: normal;
	text-align: justify;
	margin-right: 20px;
	margin-bottom: 20px;
	margin-left: 15px;
	margin-top: 20px;
}
.menugauche {
	margin: 20px 0px 0px 20px;
	list-style-type: none;
	text-align: left;
	padding: 0px;
	color: #ffffff;
}
.menugauche li {
	font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;
	font-size: 0.9em;
	font-style: normal;
	font-weight: bold;
	color: #ffffff;
	margin-bottom: 5px;
}
.menugauche a {
	margin: 0px;
	color: #402410;
	text-decoration: none;
	font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;
	font-size: 0.9em;
	font-style: normal;
	font-weight: bold;
}
.menugauche a:visited {
	margin: 0px;
	color: #FFB580;
	font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;
	font-size: 0.9em;
	font-style: normal;
	font-weight: bold;
	text-decoration: none;
}
.menugauche a:hover {
	margin: 0px;
	color: #FF8F40;
	font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;
	font-size: 0.9em;
	font-style: normal;
	font-weight: bold;
	text-decoration: none;
}
.menugauche a:active/*ie*/ {
	margin: 0px;
	color: #FF6A00;
	font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;
	font-size: 0.9em;
	font-style: normal;
	font-weight: bold;
	text-decoration: none;
}
.menugauche a:focus/*gecko*/ {
	margin: 0px;
	color: #FF6A00;
	font-family: "Trebuchet MS", Arial, Heveltica, sans-serif;
	font-size: 0.9em;
	font-style: normal;
	font-weight: bold;
	text-decoration: none;
}

Et html :

<body>
<div id="global">
<div class="header">
</div>
<div class="menu">
<ul class="menugauche">
<li>Menu</li>
...ETC

Voila...Ou mettre ce fameux a dans le html et dans le css

Merçi

AymericJ a écrit :
Hello Yank...
Alors y'a une technique de sioux, comme d'hab pas très propre mais qui fonctionne.

Je vais pas rentrer dans le détail, mais en fouinant sur le forum tu devrais trouver la solution qui te convient.
Ton div deco qui contient ton menu a des tailles fixes.
Tu vas donc coller un a dans un coin auquel tu vas donner les dimensions égales à celles de ton div.

Nom de dieu, je vais commencer à croire que les gens sont effrayés d'utiliser le Javascript pour ce genre d'effet. Une petite touche de Javascript, ce serait propre et efficace, beaucoup plus que détourner l'utilisation d'une balise de lien. L'utilisation d'une balise X ne se fait pas pour un effet visuel, mais bien pour sa valeur sémantique.

S'il-vous-plaît, pour le respect de ce que nous défendons ici, évitez de proposer de pareille solution lorsqu'il en existe déjà une : le Javascript. Votre site ne deviendra pas innaccessible, il ne va pas exploser et fonctionnera très bien. Le résultat sera là dans Internet Explorer, sauf pour ceux ayant désactivé JS. Ce qui ma foi, n'a rien de dramatique.

Si je trouve quelques minutes cet après-midi, je vais te pondre un petit quelque chose. cot-cot.
Modifié par Tony Monast (08 Jun 2006 - 19:12)

Tony Monast a écrit :

Nom de dieu, je vais commencer à croire que les gens sont effrayés d'utiliser le Javascript pour ce genre d'effet. Une petite touche de Javascript, ce serait propre et efficace, beaucoup plus que détourner l'utilisation d'une balise de lien. L'utilisation d'une balise X ne se fait pas pour un effet visuel, mais bien pour sa valeur sémantique.

Tony Monast a écrit :

évitez de proposer de pareille solution lorsqu'il en existe déjà une : le Javascript.

Tony Monast a écrit :

Votre site ne deviendra pas innaccessible, il ne va pas exploser et fonctionnera très bien.

Tony Monast a écrit :

Le résultat sera là dans Internet Explorer, sauf pour ceux ayant désactivé JS. Ce qui ma foi, n'a rien de dramatique.

Tony Monast a écrit :

Si je trouve quelques minutes cet après-midi, je vais te pondre un petit quelque chose. cot-cot.

Mais moi je demande que ça un truc propre et simple, le javascript je suis preneur c'est juste que je n'est pas reussi à le faire... Meme si ce n'est pas compliqué un rollover...

En tout cas MERCI beaucoup et j'attends ton oeuf avec impatience

AymericJ a écrit :

je respècte énormément ce qui se construit ici, c'est bien pour ça que je précise presque tout le temps des trucs du genre : "attention, solution pas très propre".

Merçi quand même d'avoir proposé, certes "une technique de sioux" mais c'est sympa
Modifié par yank (08 Jun 2006 - 19:25)

AymericJ a écrit :

PS : et merci je respècte énormément ce qui se construit ici, c'est bien pour ça que je précise presque tout le temps des trucs du genre : "attention, solution pas très propre".

Oui oui, c'était très bien de le préciser. Ce n'était pas directement dirigé contre toi, c'est juste que je vois souvent des questions de ce type et j'ai comme l'impression qu'il y a comme de la discrimination envers le Javascript et souvent les gens essayent de tout faire en CSS lorsque ca devrait être le job du Javascript.

Faut dire aussi que j'ai passé une très mauvaise soirée hier... il me reste peut-être un peu d'humeur massacrante de ce moment intense...
Modifié par Tony Monast (08 Jun 2006 - 19:48)

Tony Monast a écrit :

Faut dire aussi que j'ai passé une très mauvaise soirée hier... il me reste peut-être un peu d'humeur massacrante de ce moment intense...

Je me disais aussi...que ce n'était surement pas que le javascript

Troll Mode ON

Tatata, tu veux une journée de merde :

Comment foirer une journée de boulot.

Troll Mode OFF

Aymeric, en sachant que j'habite un petit village de campagne au milieu de nul part et loin de tout.
Modifié par AymericJ (22 Jun 2006 - 21:30)

AymericJ a écrit :

Comment foirer une journée de boulot.

excellent la fin

vive les aristocats
Modifié par yank (08 Jun 2006 - 19:58)