28173 sujets

CSS et mise en forme, CSS3

[résolu] Problème menu sous IE PC

Bonjour à tous,

Je suis en train de faire un menu du type suivant :
upload/11284-image1.jpg
(Le triangle correspond à la partie selectionnée.)

Et avec des rollover de ce type :
upload/11284-Image2.jpg

Vous pouvez visualiser le tout ici

Le tout codé de la manière suivante :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">	
	<head>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<title></title>
		<style type="text/css">
body{
	margin: 0px;
	padding: 0px;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	background-color: #ffffff;
}

#menu{
	margin: 0;
	padding: 0;
	color: #ffffff;
	float: left;
	width: 100%;
	background-image: url(../fond_menu2.gif);
}
#menu ul{
	margin: 0;
	padding: 0;
}
#menu li{
	margin: 0 5px;
	padding: 0;
	float: left;
	list-style: none;
}
#menu a{
	margin: 0;
	padding: 0;
	color: #ffffff;
	text-decoration: none;
	display: block;
}
#menu span{
	margin: 0 0 12px 0;
	padding: 12px 0;
	white-space: nowrap;
	font-size: 12px;
	line-height: 12px;
	display: block;
}
#menu span span{
	margin: 0;
	padding: 0 3px;
	display: inline;
}
#menu li.select span{
	background-image: url(../selecteur.gif);
	background-repeat: no-repeat;
	background-position: bottom center;
}
#menu  li.select span span{
	background-image: none;
}
#menu li a:hover span span{
	background-color: #988f0c;
}
		</style>
	</head>
	<body>
		<div id="menu">
			<ul>
				<li class="select"><a href="#"><span><span>Menu 1</span></span></a></li>
				<li><a href="#"><span><span>Menu 2</span></span></a></li>
				<li><a href="#"><span><span>Menu 3</span></span></a></li>
				<li><a href="#"><span><span>Menu 4</span></span></a></li>
				<li><a href="#"><span><span>Menu 5</span></span></a></li>
			</ul>
		</div>
	</body>
</html>


J'ai juste deux soucis :

1 - Sur IE PC, pas de triangle présent !
2 - Sur IE PC, pas de rectangle vert en roll-over !!

J'ai du mal à déterminer ce qu'il ne va pas et j'en appelle donc à votre aide !

Merci,

Antoine
Modifié par RockMakesMeSweat (13 Jun 2007 - 13:02)
J'ai un peu le meme problème avec mon menu déroulant. Ce dernier s'affiche pas sous IE, je pense que cela revient un peu a ton roll-over. D'apres ce que j'ai cru comprendre le problème viendrais des feuilles CSS ainsi que de la classe hover. Mais j'en sais aps plus (je suis dessus depuis hier a temps complet Smiley bawling )
Salut,

En effet, IE ne connait la pseudo classe :hover que pour la balise <a>.

Impossible donc de l'appliquer au span qu'il contient, à moins d'attribuer l'image de background à la balise <a>.

Ca reviendra sensiblement au même car le span fait partie du lien, ce qui rendra l'affichage du background au survol effectif aussi sur IE. Smiley cligne
Désolé mais je vais faire mon noob la. Mais comment tu ferais ca? J'ai un peu de mal a voir (je débute en CSS et Javascrypte)
Salut Mikachu et merci pour ta réponse !

Je connaissais cette restriction mais je pensais que dans ce cas, ça passait.
En effet pour moi, avec cette portion de code (#menu li a:hover span span), la pseudo-class était appliquée au lien (a:hover) et non au span final.

Pouvez-vous me confirmer que j'étais dans l'erreur et que le problème ne vient pas d'ailleurs ?

Skelarh, je t'ai mis une réponse dans ton post qui revient à ce qui vient d'être dis par Mikachu.


Antoine
Effectivement 
#menu li a:hover span span
devrait être compris par IE puisque le :hover est appliqé au a.
Modifié par <nicolas> (12 Jun 2007 - 18:12)
Une piste peut-être. Essaie de mettre un espace avant les acollades dans tes déclarations CSS. IE est assez pénible là-dessus.

Et cela dit, ton image selecteur.gif pourrait très bien être donnée au li. Puisque c'est à lui que tu donne la classe. Cela simplifierait un peu ton menu.

(Je trouve pas très logique le fait de donner une image de fond à tous les span, puis l'enlever après pour ceux qui ne doivent pas en avoir.)
Modifié par <nicolas> (12 Jun 2007 - 18:13)
<nicolas> a écrit :
Effectivement 
#menu li a:hover span span
devrait être compris par IE puisque le :hover est appliqé au a.

C'est juste, mais le background est appliqué au span dans la feuille de style. Le changement d'état de la balise <a> n'influencera pas le span. Smiley cligne
<nicolas> a écrit :
Une piste peut-être. Essaie de mettre un espace avant les acollades dans tes déclarations CSS. IE est assez pénible là-dessus.
Malheureusement, cela n'a rien résolu !

<nicolas> a écrit :
Et cela dit, ton image selecteur.gif pourrait très bien être donnée au li. Puisque c'est à lui que tu donne la classe. Cela simplifierait un peu ton menu.
Bien vu ! C'est corrigé !

<Mikachu> a écrit :
C'est juste, mais le background est appliqué au span dans la feuille de style. Le changement d'état de la balise <a> n'influencera pas le span.
Qu'est-ce qui est "juste" ?
Si "#menu li a:hover span span" ne donne pas le résultat escompté c'est donc que IE ne le comprend pas ou alors c'est moi qui ne comprend pas un truc Smiley smile

Quoiqu'il en soit comment faire pour arriver au résultat voulu (le rectangle vert autour du texte et le lien actif sur toute la hauteur de la bande orange) ?

Je vous donne ma dernière version du code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">	
	<head>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<title></title>
		<style type="text/css">
body {
	margin: 0px;
	padding: 0px;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	background-color: #dddddd;
}

#menu {
	margin: 0;
	padding: 0;
	color: #ffffff;
	float: left;
	width: 300px;
	background-image: url(../fond_menu2.gif);
}
#menu ul {
	margin: 0;
	padding: 0;
}
#menu li {
	margin: 0 5px;
	padding: 0;
	float: left;
	list-style: none;
}
#menu li.select {
	background-image: url(../selecteur.gif);
	background-repeat: no-repeat;
	background-position: center 29px;
}
#menu a {
	margin: 0;
	padding: 0;
	color: #ffffff;
	text-decoration: none;
	display: block;
}
#menu span {
	margin: 0 0 12px 0;
	padding: 12px 0;
	white-space: nowrap;
	font-size: 12px;
	line-height: 12px;
	display: block;
}
#menu span span {
	margin: 0;
	padding: 0 3px;
	display: inline;
}
#menu li a:hover span span {
	background-color: #988f0c;
}
		</style>
	</head>
	<body>
		<div id="menu">
			<ul>
				<li class="select"><a href="#"><span><span>Menu 1</span></span></a></li>
				<li><a href="#"><span><span>Menu 2</span></span></a></li>
				<li><a href="#"><span><span>Menu 3</span></span></a></li>
				<li><a href="#"><span><span>Menu 4</span></span></a></li>
				<li><a href="#"><span><span>Menu 5</span></span></a></li>
				<li><a href="#"><span><span>Menu 6</span></span></a></li>
				<li><a href="#"><span><span>Menu 7</span></span></a></li>
				<li><a href="#"><span><span>Menu 8</span></span></a></li>
				<li><a href="#"><span><span>Menu 9</span></span></a></li>
				<li><a href="#"><span><span>Menu 10</span></span></a></li>
			</ul>
		</div>
	</body>
</html>

Le résultat est visualisable ici

J'ai augmenté le nombre d'item du menu et diminué sa largeur pour que vous voyez le comportement que je souhaite obtenir lors des retours à la ligne.

Pour vous faire une idée en live, vous pouvez mater avec FF, tout fonctionnne nickel-chrome.


Antoine
Salut,

Vite fait pour une idée 
  <style type="text/css">
body {
	margin: 0px;
	padding: 0px;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	background-color: #dddddd;
}

#menu {
	margin: 0;
	padding: 0;
	color: #ffffff;
	float: left;
	width: 300px;
	background-image: url(../fond_menu2.gif);
}

#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#menu li {
	width: 75px;/* pour ie6*/
	height: 30px
	padding: 0;
	float: left;
	text-align: center;
}

#menu li.select a em{
	display: block;
	background: red;
    height: 30px;
	margin: 0 5px 10px 0;

}

#menu li a em{
	display: block;
	background: lime;
    height: 30px;
	margin: 0 5px 10px 0;

}

#menu li a {
	margin: 0;
	padding: 0;
	line-height: 30px;
	color: #ffffff;
	text-decoration: none;
display: block;
}

#menu span {
	white-space: nowrap;
	font-size: 12px;
	display: inline;
}

#menu li a:hover span  {
	background-color: #988f0c;
}

#menu li a:hover  {/* pour éviter un bug ie6*/
	background: none;
}
		</style>
	</head>
	<body>
		<div id="menu">
			<ul>
				<li class="select"><a href="#"><em><span>Menu 1</span></em></a></li>
				<li><a href="#"><em><span>Menu 2</em></span></a></li>
				<li><a href="#"><em><span>Menu 3</em></span></a></li>
				<li><a href="#"><em><span>Menu 4</em></span></a></li>
				<li><a href="#"><em><span>Menu 5</em></span></a></li>
				<li><a href="#"><em><span>Menu 6</em></span></a></li>
				<li><a href="#"><em><span>Menu 7</em></span></a></li>
				<li><a href="#"><em><span>Menu 8</em></span></a></li>
				<li><a href="#"><em><span>Menu 9</em></span></a></li>
				<li><a href="#"><em><span>Menu 10</em></span></a></li>
			</ul>
		</div>
</body>
Salut Ghost !

Un grand merci à toi pour venir régulièrement en aide !

T'as proposition m'a été d'un grand secours.
En effet, ce sont les lignes suivante quis manquaient à mon code pour arriver au résultat voulu :
ghost a écrit :
...
#menu li a:hover  {/* pour éviter un bug ie6*/
	background: none;
}
...


Je refile donc le résultat au complet :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">	
	<head>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
		<title></title>
		<style type="text/css">
body {
	margin: 0px;
	padding: 0px;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	background-color: #dddddd;
}
#menu {
	margin: 0;
	padding: 0;
	color: #ffffff;
	float: left;
	width: 300px;
	background-image: url(../fond_menu2.gif);
}
#menu ul {
	margin: 0;
	padding: 0;
}
#menu li {
	margin: 0 5px;
	padding: 0;
	float: left;
	list-style: none;
}
#menu a {
	margin: 0;
	padding: 0;
	color: #ffffff;
	text-decoration: none;
	display: block;
}
#menu span {
	margin: 0 0 12px 0;
	padding: 12px 0;
	white-space: nowrap;
	font-size: 12px;
	line-height: 12px;
	display: block;
}
#menu span span {
	margin: 0;
	padding: 0 3px;
	display: inline;
}
#menu li.select {
	background-image: url(../selecteur.gif);
	background-repeat: no-repeat;
	background-position: center 29px;
}
#menu li a:hover span span {
	background-color: #988f0c;
}
#menu li a:hover  {/* pour éviter un bug ie6*/
	background: none;
}
		</style>
	</head>
	<body>
		<div id="menu">
			<ul>
				<li class="select"><a href="#"><span><span>Menu 1</span></span></a></li>
				<li><a href="#"><span><span>Menu 2</span></span></a></li>
				<li><a href="#"><span><span>Menu 3</span></span></a></li>
				<li><a href="#"><span><span>Menu 4</span></span></a></li>
				<li><a href="#"><span><span>Menu 5</span></span></a></li>
				<li><a href="#"><span><span>Menu 6</span></span></a></li>
				<li><a href="#"><span><span>Menu 7</span></span></a></li>
				<li><a href="#"><span><span>Menu 8</span></span></a></li>
				<li><a href="#"><span><span>Menu 9</span></span></a></li>
				<li><a href="#"><span><span>Menu 10</span></span></a></li>
			</ul>
		</div>
	</body>
</html>
Et vous pouvez voir le résultat ici.

Merci encore !
Sujet clos
Aller à