18041 sujets

Questions générales et questions de débutants

Comportement d'image dans menu déroulant

Bonjour!

J'utilise le script de menu dynamique horizontal décrit ici-> http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal[/url]

cependant je souhaite mettre des images à la place des liens.

J'ai donc remplacé :
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 0;
left: 0;
}
#menu {
width: 15em;
}
#menu dt {
cursor: pointer;
margin: 2px 0;;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px solid gray;
background: #ccc;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}
-->
</style>


par :

<!-- 
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 0;
left: 0;
z-index:100;
width: 100%; /* correction pour Opera */
}
#menu dl {
float: left;
width: 91px;


}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
[b]#menu dt a, #menu li a{
color: #000;
background: url('bouton.jpg');
text-decoration: none;
display: block;
height: 26px;
border: 0 none;
}[/b]

[b]#menu dt a:hover, #menu dt a:focus {
background: url('bouton2.jpg');
}[/b]
#menu li a:hover, #menu li a:focus {
background: #eee;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray; 
}
-->
</style>


J'ai bien mon image sur les liens non-déroulants c'est à dire "accueil" et "menu 2" qui chargent une autre image au survol de la souris (images : bouton.jpg et bouton2.jpg),
mais pas sur les liens déroulants menu1, 3 et 4. Par contre elle apparait dans les sous-menus de ces onglets.

Avez-vous une solution?
Merci
Modifié par numero7 (23 Jan 2008 - 19:35)
Bonjour!

Je réitère ma question posée hier.

Pourquoi l'image que je désire sur mes onglets ne se chargent-elle pas quand il y a un sous-menu?

J'ai essayé cette solution :
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
[b]background: url('bouton.jpg');[/b]
border: 1px solid gray;
margin: 1px;
}
#menu dt a {
color: #000;
[b]background-image: url('bouton.jpg');[/b] 
text-decoration: none;
display: block;
height: 26px;
border: 0 none;
}
#menu dt a:hover, #menu dt a:focus {
[b]background-image: url('bouton2.jpg');[/b]
}


mais cette fois j'ai l'image "bouton" affichée partout mais pas l'image "bouton2" au survol des onglets contenant un sous-menu.

C'est bien sur les listes <dl> (conteneur), <dt> (terme de définition), <dd> (description de définition) qu'il faut intervenir non?

Je sèche.
Bonjour j'insiste sur ce problème car le site sera bientôt en ligne ici -> http://www.jassport.fr[/url].

Donc je répète les problèmes et en rajoute un.

1- Les onglets possédant un sous-menu déroulant, sont tronqués.

2-Je n'arrive pas à faire changer l'image de ces onglets quand la souris passe dessus (contrairement aux autres onglets qui ne déroulent pas)

3-Quand les sous-menus apparaissent, ils poussent le contenu de la partie vers le bas au lieu de passer par dessus.

Voila, je vous re-poste le code et je pense que le site sera visible demain ce qui sera plus facile pour comprendre mes soucis.

Merci de votre aide.

code html de la page :

<!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-15" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<meta http-equiv="Content-Language" content="fr" />
		<meta name="description" content="parc de multi-activités, activités sportives, stages d'équitation, stages de basket, stages de multi-activités">
		<meta name="keywords" content="Jas, Feurs, vélo, VTT, équitation, basket, acrobranche, tir à l'arc, piscine, veillées, passage de galops, compétition, saut d'obstacle">
<title>Jassport</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>


<link rel="stylesheet" href="feuille-de-style.css" type="text/css">
<link rel="stylesheet" href="menu.css" type="text/css">
</head>

<body>

<div id="conteneur">

	  <div id="header">

</div>

	  <div id="haut"></div>
	  
	  		<div id="menu">
	<dl>

		<dt onmouseover="javascript:montre();"><a href="index.php" title="Retour à l'accueil">Accueil</a></dt>
	</dl>
	
	<dl>

		<dt onmouseover="javascript:montre();"><a href="equitation.php" title="Concours hyppiques">Equitation</a></dt>
	</dl>
	
	<dl>

		<dt onmouseover="javascript:montre();"><a href="organisation.php" title="Organisation">Organisation</a></dt>
	</dl>
	
	<dl>

		<dt onmouseover="javascript:montre();"><a href="formation.php" title="Formation">Formation</a></dt>
	</dl>
	
	<dl>

		<dt onmouseover="javascript:montre();"><a href="activites.php" title="Activités">Activités</a></dt>
	</dl>
	
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Stages</dt>

		<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="stage-multisport">Multisport</a></li>
				<li><a href="stage-equitation.php">Equitation</a></li>
				<li><a href="stage-basket.php">Basket</a></li>
				
				</ul>
		</dd>
	</dl>
	
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu2');">Centre</dt>

			<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="velo.php">VTT/Vélo</a></li>
				<li><a href="loisirs.php">Loisirs</a></li>
				<li><a href="vacances.php">Vacances</a></li>
				
			</ul>

			</dd>
	</dl>
	
	<dl>

		<dt onmouseover="javascript:montre();"><a href="Liens.php" title="Liste des liens amis">Liens</a></dt>
	</dl>
	
	<dl>

		<dt onmouseover="javascript:montre();"><a href="photos.php" title="Albums">Photos</a></dt>
	</dl>
	
	</div>

	  <div id="gauche"><p>plaquette</p>
	  	<p>largeur fixe : 150px</p>
	  	</div>
	  
	  <div id="droite"><p>flash infos</p>
	  <p>largeur fixe : 150px</p>
	  </div>
	  
  	<div id="centre">

  	  partie centrale qui "pousse" les colones vers le bas.<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />

  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />

  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />

  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />

  	  partie avec du contenu occupant le reste de la largeur<br />
  	  partie avec du contenu occupant le reste de la largeur<br />
  	</div>
	  
	  <div id="bas"></div>
	  <div id="pied"><p>pied de page</p></div>

</div>
	  

</body>
</html>


code css de cette page :
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
background-color:#90B300;
}

#header {
height: 150px;
background: url(images/banniere.jpg);
background-repeat: no-repeat;
}

#haut {
height: 31px;
background-color:#90b300;
background-repeat: no-repeat;
background: url(images/haut-contour.jpg);
}

#conteneur {
position: relative;
width: 800px;
margin: 0 auto; 
background-color:#90B300;
}

#centre {
background-color:#FFF48A;
margin-left: 150px;
margin-right: 150px;
border: 2px solid gray;
}

#gauche {
position: absolute;
left:0;
width: 150px;
background-color:#90D03F;
}

#droite {
position: absolute;
right:0;
width: 150px;
background-color:#90D03F;
}

#bas {
height: 32px;
background-color:#90b300;
background-repeat: no-repeat;
background: url(images/bas-contour.jpg);
}

#pied p{
text-align: center;
position: relative ;
top: 25px;
}

#pied {
height: 80px;
background: url(images/pied-de-page.jpg);
background-repeat: no-repeat;
}

p {margin: 0 0 10px 0;}


code css du menu :

<!-- 
body {
margin: 0;
padding: 0;
font: 80% verdana, arial, sans-serif;
}

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}

#menu {
 /* placement du menu, à modifier selon vos besoins */
background: #90b300;
height: 32px;
z-index:100;
width: 100%; /* correction pour Opera */
}

#menu dl {
float: left;
width: 84px;
position: relative;
left : 20px;
}

#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: url(images/bouton.jpg);
border: 0px solid gray;
margin: 0px;
}

#menu dd {
display: none;
border: 1px solid gray;
}

#menu li {
text-align: center;
background: #fff;
}

#menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 30px;
border: 0 none;
}

#menu dt a:hover, #menu dt a:focus {
background-image: url(images/bouton2.jpg);
}

#menu li a {
background: #fff;
}

#menu li a:hover, #menu li a:focus {

background: #eee;
}

#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray; 
}
-->
</style>
Sujet clos
Aller à