28221 sujets

CSS et mise en forme, CSS3

[résolu]Centrer un menu déroulant en CSS et XHTML

salut a tous
je viens de decouvrir le site alsacration, parce que je cherchais a faire un menu deroulant facilement et , j'ai trouvé celui la qui est tres bien.
J'ai opté pour le menu deroulant horizontal celui la et il marche tres bien mais voila je n'arrive pas a le centrer. ça parait tout bete mais j'y arive pas Smiley decu je vais vous mettre mon code

<!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" lang="fr">
<head>
<title>Menu déroulant horizontal</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<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 href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div align="center">
<br>
<br>
<h2 align="center"> Mon site</h2>
</div>
<br>
<div id="menu">
	<dl>
		<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
	</dl>
	
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Rapport 1 </dt>
			<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
				<ul>
					<li><a href="#">Projet/implication</a></li>

					<li><a href="#">Calendrier</a> </li>		
					<li><a href="#">Budjet prévisionnel</a> </li>				
					
				</ul>

			</dd>
	</dl>
		<dl>	
		<dt onmouseover="javascript:montre('smenu3');">Rapport 2</dt>
			<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">

				<ul>
					<li><a href="#">AVP existant</a></li>
					<li><a href="#">Nouvel AVP</a></li>
					<li><a href="#">Etapes réalisées</a></li>

				</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu2');"><a href="#">Rapport final </a></dt>

	</dl>
</div>
</body>
</html>


et la feuille de style
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 {

top: 0;
left: 0;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 15.3em;
margin: 0 1px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #9999FF;
border: 1px solid gray;
}
#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;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}

#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray; 
}

a {text-decoration: none;
color: black;
color: #222;
}


h2 {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-style: italic;

Modifié par laloote (17 Feb 2005 - 13:24)
Dans ton html on trouve ceci :<div align="center">
Faudrait peut être mieux centrer un calque (une div quoi !) avec les techniqes que tu trouveras dans les tutoriels de ce site.
Notamment ici
ou encore en te servant de la recherche du forum !


Bienvenue !
Sujet clos
Aller à