28220 sujets

CSS et mise en forme, CSS3

[Résolu] Aligner un menu horizontal au milieu

Bonjour,

j'ai créé un menu horizontal comme celui-ci http://css.alsacreations.com/modelesmenus/hd1.htm[/url] et j'aimerai aligner ce menu au centre de la page, comment faire ? j'ai utilisé la propriété text-align mais cela ne fonctionne pas...

voici le code de ma page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr">
<head>
<?php include ($_SERVER['DOCUMENT_ROOT'].'/MTI/Common/includes/rens.inc.php')?>
<title><?php echo $titre; ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<link rel="StyleSheet" type="text/css" href="/MTI/Fichiers/styles.css">
<? echo $metatags; ?>
<script type="text/javascript">
<!--
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>
</head>

<body>
<!-- Bandeau du haut -->
	<div id="header">
		<p>Votre Espace Informatique</p>
	</div>
<!-- Menu Principal -->
<div id="menu">
	<dl>
		<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
	</dl>
	
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Présentation</dt>
			<dd id="smenu1">
				<ul>
					<li><a href="#">Nous découvrir</a></li>
					<li><a href="#">Nos activités</a></li>
					<li><a href="#">Le livre d'or</a></li>
				</ul>

			</dd>
	</dl>
	<dl>	
		<dt onmouseover="javascript:montre('smenu2');">Privilèges</dt>
			<dd id="smenu2">
				<ul>
					<li><a href="#">Présentation</a></li>
					<li><a href="#">Comment l'utiliser</a></li>
					<li><a href="#">Les promos du mois</a></li>
				</ul>

			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');">Services</dt>
			<dd id="smenu3">
				<ul>
					<li><a href="#">Devis à la demande</a></li>
					<li><a href="#">Téléchargements</a></li>
					<li><a href="#">Newsletter</a></li>
				</ul>

			</dd>
	</dl>
	
	<dl>
		<dt onmouseover="javascript:montre();"><a href="" title="Sites utiles, informatique, ...">Liens</a></dt>
	</dl>	
	<dl>
		<dt onmouseover="javascript:montre();"><a href="" title="Pour contacter MTI">Contact</a></dt>
	</dl>
</div>


et le fichier css

/* CSS Document */

body {
margin: 0;
padding: 0;
background: white;
color: black;
font-size: 65%;
font-family: verdana, arial, helvetica, serif;
}

#header {
height: 140px;
background: #3a2e7a url(logo.jpg) top left no-repeat;
}

#header p {
margin: 0 0 0 210px;
padding-top: 40px;
font-weight: bold;
color: white;
font-size: 4.2em;
}

#menu {
margin: 0;
padding: 0.3em 0em 0.3em 0;
background-color: #9562a7;
color: white;
text-align: center;
height: 14px;
width: 100%; /* précision pour Opera */
}

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


#menu dl {
float: left;
width: 12em;
text-align:center;
}

#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
margin: 1px;
font-size: 1.1em;
}

#menu dd {
text-align: center;
display: none;
border: 2px solid #9562a7;
padding-top: 2px;
color: black;
font-size: 1.1em;
}

#menu li {
display: inline;
text-align: center;
background: #ffffff;
}

#menu dt a {
color: white;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}

#menu li a {
color: #3a2e7a;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}

#menu dt a:hover {
color: white;
}

#menu li a:hover {
background: #3a2e7a;
color: white;
}


De plus, sous IE lorsque l'on va dans un sous menu, cela affiche une grosse barre violette (#9562a7) jusqu'en bas du menu
upload/3213-capie1.jpg
mais pas sous Firefox ou Opéra
upload/3213-capie3.jpg

Merci pour votre aide
Modifié par Nefret (03 Nov 2005 - 17:45)
Salut a toi,

Pour centrer un élément de type bloc dans ta page (comme un div ici par exemple), tu ne peux pas utiliser text-align, il faut définir en auto les marges gauches et droites comme ceci :


div#menu {
margin-left:auto;
margin-right:auto;
}



Pour ton second problème, essaie de définir la hauteur de ton bandeau avec un 
div#bandeau {
height:20px;
}



Voilà, tiens nous au courant si tout fonctionne ou pas Smiley cligne
Bien cordialement,


PierreAd
j'ai réussi pour le deuxième problème avec le lien fourni par hroiian, mais pas le premier, je n'arrive toujours pas à centrer mon menu. Le problème doit venir du fait qu'il faut préciser le "width" dans le div#menu (si je mets 100% cela ne change rien et si je mets une valeur, par ex 750px, cela centre le menu mais j'ai du blanc sur les côtés)


#menu {
margin: 0;
padding: 0.3em 0em 0.3em 0;
background-color: #9562a7;
color: white;
height: 14px;
width: 100%; /* précision pour Opera */
}

div#menu {
margin-left: auto;
margin-right: auto;
}

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

#menu dl {
float: left;
width: 12em;
}

#menu dt {
cursor: pointer;
font-weight: bold;
margin: 1px;
font-size: 1.1em;
text-align: center;
}

#menu dd {
position: absolute; /*supprime le problème d'étirement*/
width: 11em; /*on précise la largeur*/
display: none;
border: 2px solid #9562a7;
padding: 2px 0 0 0;
color: black;
font-size: 1.1em;
}

#menu li {
display: inline;
background: #ffffff;
text-align: center;
}

#menu dt a {
color: white;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}

#menu li a {
color: #3a2e7a;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
text-align: center;
}
Dans tous les cas de figure, pour utiliser des marges en %, il faut avoir définit une largeur pour l'objet. Donc si tu as un conteneur (<div> avec une couleur de fond et que dans ce conteneur tu mets un menu tu devrais pouvoir centrer celui-ci comme cela :
#menu {
left: 50%;
width: 800px;
margin-left: -400px; /* 0,5 width + 1 border */
border: 1px solid white;
}

J'ai mis une bordure pour bien préciser comment on cacule margin-left
Sujet clos
Aller à