18041 sujets

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

[Résolu]Tutoriel du menu déroulant en CSS avec images de fond ?

Bonjour à tous,

Suite au tutoriel sur les menus déroulant en css, que j'ai trouvé très pratique :
http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-deroulant-en-CSS-et-XHTML-vertical-et-horizontal
J'ai essayé de le compléter en mettant des images de fond sur les liens dans les "dt" et sur les "dd" afin d'habiller tout ca, mais qui aurait cru que tout ce serait passé comme prévu ? Je m'explique..

Voici le lien vers le rendu : http://apanhaleux.free.fr/cameleo/menuderoulantcss/menu.html

Au niveau du code html, j'ai simplement ajouté un lien auquel j'attribue une classe dans les éléments dt, afin d'éviter les conflits avec les liens situés dans les li, voici un exemple de code :


<dl>			
   <dt onclick="javascript:montre('smenu1');"><a class="aProd1" href="#">Menu 1</dt>
	<dd id="smenu1">
		<ul>
		   <li><a href="#">Sous-Menu 1.1</a></li>
                   <li><a href="#">Sous-Menu 1.2</a></li>
		  etc...
		</ul>
	</dd>
</dl>


Pour ce qui est du css, j'ai attribué un arrière plans aux liens dans les dt, qui ont donc une classe précise, et un arrière plan à l'élément dd qui se répete verticalement. Il se trouve que le fond des premiers lien se répète bizarrement sous Firefox lorsque je clique sur un bouton, alors que l'image de fond des "dd" ne s'affiche pas sous IE7...

Voici le code css :

@charset "utf-8";
/* CSS Document */

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 {
width: 168px;
}

#menu dt {
margin-top : 1px;
}

a.aProd1 {
width: 128px;
height:21px;
display : block;
background: #ddd url(../img/site/nav-prod-bg.jpg) left top no-repeat;
font: bold 0.9em Tahoma,Verdana,sans-serif;
padding: 4px 0 0 40px;
text-transform:uppercase;
text-decoration:none;
color : #fff;
/* Box model hack IE5.x */
width: 168px;
height: 25px;
voice-family:"\"}\"";
voice-family:inherit;
width: 128px;
height: 21px;
}

/* Opera 5 */
html>body a.aProd1 { width:128px; height:21px;}

a.aProd1:hover, a.aProd1:focus {
background-position: 0 -25px;
}

#menu dd {
display: none;
background: #c90 url(../img/site/nav-prod-ul2-bg.gif) left top repeat-y;
}

#menu ul {
}

#menu li {
}
#menu li a {
width: 128px;
padding-left: 40px;
font: bold 0.6em Tahoma, Verdana, Sans-serif;
color: #333;
}

#menu li a:hover, #menu li a:focus {
color : #c90;
}


Seriez vous en mesure de m'aider ?
Merci d'avance
Modifié par aphax (03 Sep 2007 - 10:00)
moi aussi j'ai le meme probleme (du moins c'est le meme principe)

voila l'Html->
 <table width="950" border="2" bordercolor="#FF0000">
    <tr>
      <td height="103" colspan="2" bordercolor="#FF0000"><img src="../Images/logo.JPG" alt="" width="950" height="107" longdesc="../Images/logo.JPG" /></td>
    </tr>
    <tr>
      <td width="241" height="842" valign="top" bordercolor="#FF0000" bgcolor="#000000"><dl id="menu">

		<dt onclick="javascript:montre();"><a href="#">News</a></dt>
			
		<dt class="groupe" onclick="javascript:montre('smenu2');"> </dt>

  <dd id="smenu2">
				<ul>
					<li><a href="#">Biographie</a></li>
					<li><a href="#">Discographie</a></li>

					<li><a href="#">Les Membres</a></li>
                    <li><a href="#">Jeff Waters</a></li>
			</ul>
			</dd>	

		<dt onclick="javascript:montre('smenu3');">Live</dt>
       
<dd id="smenu3">
				<ul>
					<li><a href="#">Les Dates</a></li>
					<li><a href="#">Live Reports</a></li>

				</ul>
			</dd>

		<dt class="media" onclick="javascript:montre('smenu4');"> </dt>

  <dd id="smenu4">
				<ul>
					<li><a href="#">La Presse</a></li>
					<li><a href="#">Les Photos</a></li>
                    <li><a href="#">Les Videos</a></li>
                    <li><a href="#">Les Paroles</a></li>

			  </ul>
			</dd>
	<dt class="forum" onclick="javascript:montre('smenu4');"> </dt>
    <dt class="liens" onclick="javascript:montre('smenu4');"> </dt>
</dl>
</td>
      <td width="691" bordercolor="#FF0000"> </td>
    </tr>
  </table>


et le css
body {
	margin: 0;
	padding: 0;
	background: white;
	font: 80% verdana, arial, sans-serif;
	background-color: #000000;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
	position: absolute; /* placement du menu, à modifier selon vos besoins */
	top: 150px;
	left: 30px;
}

#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;
}
.groupe {background-image:url(../Images/groupe.jpg);
}
.liens {background-image:url(../Images/liens.jpg);
}
.forum {background-image:url(../Images/forum.jpg);
}
.media {background-image:url(../Images/media.JPG);
}
-->

</style>
Bon j'ai trouvé moi même, apparemment en attribuant à tes balises dl, ol les propriétés :
float:left;
position: relative;
display: inline;

Cela résout pas mal de problèmes, au niveau de la largeur des éléments, de la répétition du background sur les ul sous IE (qui ne s'affichait que dans le champ d'action des 'li' et laissant entrevoir le fond de couleur du premier parent de l'ul, etc..)

A mon avis ca va t'aider Smiley cligne
Sujet clos
Aller à