28173 sujets

CSS et mise en forme, CSS3

Cihabitation de 2 menus

Bonjour,
je souhaite savoir comment faire cohabiter les deux scripts que vous proposez dans le tutorial au sujet de menu horizontal et vertical, (ils ont tous les deux le meme script javascript) . Merci d'ailleur pour ses deux scripts car ils sont super .
En effet, sur plusieurs pages je souhaite utiliser ces deux scripts en meme temps, mais malheureusement, je ne peu en regler qu' un seul l'horizontal, car le vertical se colle à l'horizontal comme s'il ces scripts ne faisait qu'un seul .
Merci d'avance de bien vouloir m'aider .

totophe75
Est ce qu'il serait possible de voir le passage de l'utilisation du script pour qu'on visualise mieux ?

Et si tu peux rappeler le script en dessous (tout le monde ne le connais pas de tête Smiley langue et ca sera plus facile que de switcher de page Smiley smile ) ca serait parfait Smiley biggrin
Ok, en fait j'ai réussi partiellement à régler certains problemes mais je bloque encore sur certains, alors je mets le script complet de la page et comme cela tu verras l'ensemble .
Merci d'avance 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8859-1" />
<title>T-shirt Homme</title>

<style type="text/css">
<!--
#Layer1 {
	position:absolute;
	left:12px;
	top:12px;
	width:1031px;
	height:100px;
	z-index:1;
}
-->
</style>

<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" media="screen">
<!-- 
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: 125px;
left: 11px;
z-index:100;
width: 100%; /* correction pour Opera */
}
#menu dl {
float: left;
width: 172px;
}
#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;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt 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; 
}

#Layer2 {
	position:absolute;
	left:252px;
	top:162px;
	width:524px;
	height:650px;
	z-index:3;
}
#Layer3 {
	position:absolute;
	left:792px;
	top:162px;
	width:251px;
	height:650px;
	z-index:4;
}
-->
</style>

<style type="text/css" media="screen">
<!-- 
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;
}
#menu1 {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 50px;
left: 1px;
}
#menu1 {
width: 15em;
}
#menu1 dt {
cursor: pointer;
margin: 2px 0;;
height: 20px;
line-height: 20px;
text-align: left;
font-weight: bold;
border: 1px solid gray;
background: #ccc;
}
#menu1 dd {
border: 1px solid gray;
}
#menu1 li {
text-align: left;
background: #fff;
}
#menu1 li a, #menu1 dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
#menu1 li a:hover, #menu1 dt a:hover {
background: #eee;
}
-->
</style>

</head>
<body>

<div id="Layer1">
 <div align="center"><img src="Titre du site.bmp" alt="Bande bleue avec titre du site" width="1031" height="100" align="absmiddle" position="absolute"/></div>
</div>

<div id="Layer2">
<br/>
<strong>Vetements Homme</strong>
<h2>T-shirt Homme</h2>
<h3>T-shirt Homme</h3>
</div>

<div id="Layer3">
Et demain aussi !!!
</div>

<div id="menu">
	<dl>
		<dt onmouseover="javascript:montre();"><a href="index.html" title="Retour à l'accueil">Accueil</a></dt>
	</dl>
	
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Vetements</dt>
		<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="vetements-homme.html">Homme</a></li>
				<li><a href="vetements-femme.html">Femme</a></li>
				<li><a href="vetements-bebe-enfant.html">Bebe / Enfant</a></li>
		  </ul>
		</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu2');">Informatique</dt>
		<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="pc-de-bureau.html">Pc de bureau</a></li>
				<li><a href="pc-portable.html">Pc portable</a></li>
				<li><a href="accessoires.html">Accessoires</a></li>
				<li><a href="peripheriques.html">Peripheriques</a></li>
				<li><a href="applications-logiciels.html">Applications / Logiciels</a></li>
			</ul>
		</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');">Image & Son</dt>
		<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="tv-ecran.html">TV / Ecrans</a></li>
				<li><a href="lecteurs-en-tous-genres.html">Lecteurs en tous genres</a></li>
				<li><a href="home-cinema.html">Home Cinema</a></li>
				<li><a href="hifi.html">Hifi</a></li>
				<li><a href="photo-video.html">Photo / Video</a></li>
			</ul>
		</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu4');">Maroquinerie</dt>
		<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="ceintures.html">Ceintures</a></li>
				<li><a href="porte-feuille.html">Porte feuille</a></li>
				<li><a href="porte-monnaie.html">Porte monnaie</a></li>
				<li><a href="sacs-sac-a-main.html">Sacs / Sac a main</a></li>
			</ul>
		</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu5');">A propos de nous</dt>
		<dd id="smenu5" onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre('');">
			<ul>
				<li><a href="qui-sommes-nous.html">Qui sommes nous</a></li>
				<li><a href="les-mentions-legales.html">Les mentions legales</a></li>
				<li><a href="mes-partenaires.html">Mes partenaires</a></li>
				<li><a href="mes-sites.html">Mes sites</a></li>
			</ul>
	  </dd>
	</dl>


<dl id="menu1">

		<dt onclick="javascript:montre();"><a href="vetements-homme-t-shirt.html">T-shirt</a></dt>
			
		<dt onclick="javascript:montre('smenu7');">Chemise</dt>

			<dd id="smenu7">
				<ul>
					<li><a href="#">Sous-Menu 7.1</a></li>
					<li><a href="#">Sous-Menu 7.2</a></li>
					<li><a href="#">Sous-Menu 7.3</a></li>
				</ul>
			</dd>	

		<dt onclick="javascript:montre('smenu8');">Pull / Sweat</dt>

			<dd id="smenu8">
				<ul>
					<li><a href="#">Sous-Menu 8.1</a></li>
					<li><a href="#">Sous-Menu 8.1</a></li>
					<li><a href="#">Sous-Menu 8.1</a></li>
					<li><a href="#">Sous-Menu 8.1</a></li>
					<li><a href="#">Sous-Menu 8.1</a></li>
					<li><a href="#">Sous-Menu 8.1</a></li>
				</ul>
			</dd>

		<dt onclick="javascript:montre('smenu9');">Jean / Pantalon</dt>

			<dd id="smenu9">
				<ul>
					<li><a href="#">Sous-Menu 9.1</a></li>
					<li><a href="#">Sous-Menu 9.1</a></li>

				</ul>
			</dd>
	    
		<dt onclick="javascript:montre();"><a href="#">Costume / Veste</a></dt>
		
		<dt onclick="javascript:montre();"><a href="#">Blouson / Manteau</a></dt>
		
		<dt onclick="javascript:montre();"><a href="#">Chaussures</a></dt>
		
		<dt onclick="javascript:montre();"><a href="#">Accessoires</a></dt>
		
		<dt onclick="javascript:montre();"><a href="#">Sous-Vetements</a></dt>
				
</dl>			

</body>
</html>
Sujet clos
Aller à