18073 sujets

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

[Résolu]Menu déroulant vertical + Images

Salut et d'abord merci pour ce site qui m'est très utile. Smiley biggrin

Voila je suis en train de refaire mon site et j'utilise le menu déroulent vertical de votre tutoriel. Celui-ci

Je l'ai un peu modifié pour qu'ils m'affiche des images à la place de simple lien mais je n'e sais pas comment faire pour que chaque lien est sa propre image. Smiley bawling

Si quelqu'un peut m'aider merci d'avance.

Voici mon xhtml:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Clan TAZ</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="../css/style.css" rel="stylesheet" type="text/css"/>
<script language="JavaScript" type="text/JavaScript" src="../scripts.js"></script>
<!--[if gte IE 5.5000]>
<script type="text/javascript" src="../pngfix.js"></script>
<![endif]-->
</head>
<!--Electronique-->
<body onload="javascript:montre();">
<div id="conteneurbleu">
	<div id="headerbleu"><img src="../images/cadrehb.png" alt="Clan TAZ"/></div>
	<div id="gauche">	  	
		<dl id="menubleu">
		<dt onclick="javascript:montre();"><a id="2" href="#"></a></dt>	
		<dt onclick="javascript:montre('smenu2');"><a href="#"></a></dt>
			<dd id="smenu2">
				<ul>
					<li><a href="#"></a></li>
					<li><a href="#"></a></li>
					<li><a href="#"></a></li>
				</ul>
			</dd>	
		<dt onclick="javascript:montre('smenu3');"><a href="#"></a></dt>
			<dd id="smenu3">
				<ul>
					<li><a href="#"></a></li>
					<li><a href="#"></a></li>
					<li><a href="#"></a></li>
					<li><a href="#"></a></li>
					<li><a href="#"></a></li>
					<li><a href="#"></a></li>
				</ul>
			</dd>
		<dt onclick="javascript:montre('smenu4');"><a href="#"></a></dt>
			<dd id="smenu4">
				<ul>
					<li><a href="#"></a></li>
					<li><a href="#"></a></li>
				</ul>
			</dd>
</dl>
		<div id="basmenubleu"></div>
  </div>
	<div id="centre"></div>
	<div id="pied">Clan TAZ &copy;&reg;&trade; 2005 - Codage : Blackhawk - Graphisme : T-Bird</div>
</div>
</body>
</html>


et mon css :
body {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#FFF;
	margin:0;
	padding:0;
	background-image:url(../images/fn.gif);
	background-attachment:fixed;
}

#centre {
	margin-left:165px;
	margin-top:143px;
	min-height:334px;
}

#gauche {
	position:fixed;
	left:50%;
	margin-left:-375px;
	margin-top:143px;
	width:165px;
	visibility:visible;
}

#pied {
	height:15px;
	font-family:Tahoma,Verdana, Arial, sans-serif;
	font-size:9px;
	color:#FFF;
	text-align:center;
}

p {
	margin:0 0 10px 0;
}

/*Skin bleue ---------------------------------------*/

#headerbleu {
	height:143px;
	background-image:url(../images/fb.gif);
	position:fixed;
}

#conteneurbleu {
	position:absolute;
	width:749px;
	min-height:100%;
	left:50%;
	margin-left:-375px;
	background-image:url(../images/fb.gif);
	background-attachment:fixed;
	visibility:visible;
}

#basmenubleu {
	width:162px;
	height:14px;
	background-image:url(../images/basmenubleu.png);
}

#menubleu {
	list-style-type:none;
	margin:0;
	padding:10px 0 1px 0;
	background-image:url(../images/verticalmenubleu.gif);
	width:162px;
}

#menubleu dt {
	width:130px;
	margin:3px 0 0 17px;
}

#menubleu dt a{
	background-image:url(../images/boutonbleu.png);
}

#menubleu dt a:hover{
	background-image:url(../images/boutonbleu.png);
	background-position:0% -24px;
}

#menubleu dt a:active{
	background-image:url(../images/boutonbleu.png);
	background-position:0% -48px;
}

#menubleu li {
	margin-bottom:3px;
	list-style-type: none;
}

#menubleu li a {
	background-image:url(../Images/sousmenubleu.png);
	height:20px;
	width:110px;
}

#menubleu li a:hover {
	background-image:url(../images/sousmenubleu.png);
	background-position:0% -20px;
}

#menubleu li a:active {
	background-image:url(../images/sousmenubleu.png);
	background-position:0% -40px;
}

#menubleu dl {
	height:24px;
	width:130px;
}

#menubleu dd {
	margin:3px 0 0 -4px;
}

#menubleu a {
	width:130px;
	height:24px;
	display:block;
}

Modifié le 01 Dec 2004 - 23:21
Sujet clos
Aller à