28172 sujets

CSS et mise en forme, CSS3

Résolu-Changement du background dans le menu principal

Bonjour
Je suis débutant et je n'arrive pas à changer le background du menu principal quand la souris survole ce menu.
Je suppose que c'est avec a:hover, mais ou et comment mettre cette instruction.
Merci de votre aide
Ci-joint le code de css.alsacreations
<!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>Document sans nom</title>
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>

<style type="text/css">
<!--
/* CSS issu des tutoriels http://css.alsacreations.com */
body {
background: white;
padding:0;
margin:0;
font-family: verdana, arial, sans-serif;
font-size: 90%;
color: black;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 1em;
left: 1em;
width: 10em;
}

#menu dt {
cursor: pointer;
background: #A9BFCB;
height: 20px;
line-height: 20px;
margin: 2px 0;
border: 1px solid gray;
text-align: center;
font-weight: bold;
}

#menu dd {
position: absolute;
z-index: 100;
left: 8em;
margin-top: -1.4em;
width: 10em;
background: #A9BFCB;
border: 1px solid gray;
}

#menu ul {
padding: 2px;
}
#menu li {
text-align: center;
font-size: 85%;
height: 18px;
line-height: 18px;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
}

#menu li a:hover {
text-decoration: underline;
}


#mentions {
font-family: verdana, arial, sans-serif;
position: absolute;
bottom : 200px;
left : 10px;
color: #000;
background-color: #ddd;
}
#mentions a {text-decoration: none;
color: #222;
}
#mentions a:hover{text-decoration: underline;
}

-->
</style>
</head>

<body>
<table width="926" height="620" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="150" rowspan="3"><!-- Menu -->
<dl id="menu">
<dt onmouseover="javascript:montre('smenu1');"><a href="#">Menu 1</a></dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
<ul>
<li><a href="#">Sous-Menu 1.1</a></li>
<li><a href="#">Sous-Menu 1.2</a></li>
<li><a href="#">Sous-Menu 1.3</a></li>
</ul>
</dd>

<dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">Menu 2</dt>
<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
<ul>
<li><a href="#">Sous-Menu 2.1</a></li>
<li><a href="#">Sous-Menu 2.2</a></li>
</ul>
</dd>

<dt onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">Menu 3</dt>
<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">
<ul>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>

<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>
<li><a href="#">Sous-Menu 3.1</a></li>
</ul>
</dd>

<dt onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">Menu 4</dt>
<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">
<ul>
<li><a href="#">Sous-Menu 4.1</a></li>
<li><a href="#">Sous-Menu 4.1</a></li>
</ul>
</dd>
</dl>

&nbsp;</td>
<td height="99">&nbsp;</td>
</tr>
<tr>
<td height="473">&nbsp;</td>
</tr>
<tr>
<td height="35">&nbsp;</td>
</tr>
</table>
</body>
</html>
Modifié par sborcet (10 Nov 2008 - 15:17)
Je n'ai pas de chance, je n'ai pas de réponse.
Ma question est peut être imprécise.
Je voudrais simplement changer la couleur du fond des menus 1,2,3 et 4 quand la souris survole ces boutons.
Dans le code actuel seuls les boutons des sous menus changent d'état quand la souris les survolent.
Cela est sùrement très simple pour un spécialiste, ça fait des jours que je galère avec ce problème.
merci de votre aide.
Bonjour,

Des conseils pour que tu ais plus de réponses:
> Utilise les fonction mises à ta disposition par les forums(en bas).
> Epure tes codes. Ne laisse que ce qui concerne ton problème. Pas besoin du doctype, de liens détaillé etc...

Pour en revenir à ton problème, il suffit simplement de mettre un :hover à ton ul. Par exemple:
<ul>
	<li>Lien 1</li>
	<li>Lien 2</li>
	<li>Lien 3</li>
	<li>Lien 4</li>
</ul>

	  ul
	  {
	  width:200px;
	  height:500px;
	  background:yellow;
	  }
	  ul:hover
	  {
	  background:red;
	  }
	  li
	  {
	  width:100px;
	  height:30px;
	  }
	  li:hover
	  {
	  width:100px;
	  height:30px;
	  background:blue;
	  }

Modifié par ThePatatoes (10 Nov 2008 - 12:46)
Merci à ThePatatoes
Mais ce n'est pas tout à fait ce que je veux faire.
Pour le menu dd (sous menu) c'est bon.
Par contre je n'arrive pas à changer le background du menu dt (principal)
#menu dt {
cursor: pointer;
background: #A9BFCB;
height: 20px;
line-height: 20px;
margin: 2px 0;
border: 1px solid gray;
text-align: center;
font-weight: bold;
}
Merci, dès qu'il est fait je donnerai l'url
Bonjour sborcet,

1- Pour une meilleure lisibilité, il t'est demandé de baliser le code que tu présentes sur ce forum à l'aide des boutons prévus à cet effet ([ code][ /code] sans espace après chaque crochet ouvrant)
Peux-tu, s'il te plait, éditer tes messages et te conformer à cette règle, je t'en remercie par avance Smiley cligne

2- Ce menu est obsolète (et défaillant) le tutoriel a d'ailleurs été supprimé il y a peu, nous n'assurons plus vraiment le "service après vente", tu pourras te tourner avantageusement vers la librairie jQuery et le plugin Superfish (faire une petite recherche sur le sujet Smiley cligne )

3- Dans l'absolu, si tu veux affecter un style au survol de tes dt :

#menu dt:hover {
background:couleur; 
color:couleur;
ce que tu veux;
}

Mais pour rappel, cela ne fontionnera pas sur IE6 (qui n'applique la pseudo-classe dynamique :hover que sur les liens (a) ) et il semblerait qu'il reste quelques utilisateurs...

Ceci vaut donc pour la proposition de ThePatatoes Smiley cligne auquel je rappelle également que le mieux concernant une demande d'aide, reste une page en ligne ou à défaut le code le plus complet possible (il n'est pas inintéressant de connaître le Doctype) car certaines déclarations peuvent également "perturber" le style que l'on souhaite affecter à un élément particulier Smiley cligne

Cdt,
Sylvain
Sujet clos
Aller à