28172 sujets

CSS et mise en forme, CSS3

Pb de centrage de menu

bonjour,

j'ai ce menu et je ne comprends pas pourquoi il n'est pas centré alors que si je fais un div avec marge 0 auto; il est centré


voila le code :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Untitled Document</title>
</head>
<style type="text/css">

body {
margin: 0;

color: #000;
background-color: #CCC;
}

.hovermenu ul{
font: bold 13px arial;
height: 22px;
margin: 0 auto;

}

.hovermenu ul li{
list-style: none;
display: inline;
margin: 0 auto;
}

.hovermenu ul li a{
padding: 2px 0.5em;
text-decoration: none;
float: left;
color: black;
background-color: #FFF2BF;
border: 2px solid #FFF2BF;
margin: 0 auto;
}

.hovermenu ul li a:hover{
background-color: #FFE271;
margin: 0 auto;
}

html>body .hovermenu ul li a:active{ /* applique un effet mousedown sur les navigateurs autres que IE */
border-style: inset;
margin: 0 auto;

}
</style>
<body>
<div class="hovermenu">
<ul>
<li><a href="#">Cool menu</a></li>
<li><a href="#">En avant</a></li>
<li><a href="#">Toujours plus</a></li>
<li><a href="#">Et très simple</a></li>
<li><a href="#">Sur Team-Masters</a></li>
</ul>
</div>

</body>
</html>

merfi d'avance pour votre réponse
cordialement
bonjour,

float envoie tes liens a gauche malgré les li en inline.
Il n'y a pas de text-align:center sur ul ou de largeur définie.

Quelle technique veut tu mettre en place ?
text-align:center et display:inline ou width + margin:auto ?
Voila un code qui devrait donner ce que tu cherches.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Untitled Document</title>
</head>
<style type="text/css">

body {
margin: 0;

color: #000;
background-color: #CCC;
}

.hovermenu ul{
font: bold 13px arial;
height: 22px;
margin: 0 auto;
text-align: center;
padding:0;
}

.hovermenu ul li{
list-style: none;
display:inline-block;
text-align:center;
}

.hovermenu ul li a{
padding: 2px 0.5em;
text-decoration: none;
color: black;
background-color: #FFF2BF;
border: 2px solid #FFF2BF;
line-height:22px;
}

.hovermenu ul li a:hover{
background-color: #FFE271;
margin: 0 auto;
}

html>body .hovermenu ul li a:active{ /* applique un effet mousedown sur les navigateurs autres que IE */
border-style: inset;
margin: 0 auto;

}
</style>
<body>
<div class="hovermenu">
<ul>
<li><a href="#">Cool menu</a></li><li><a href="#">En avant</a></li><li><a href="#">Toujours plus</a></li><li><a href="#">Et très simple</a></li><li><a href="#">Sur Team-Masters</a></li>
</ul>
</div>

</body>
</html>
hooo super merci ca fonctionne!!!
comme je n'y arrivais pas j'etais allé cherché un autre menu sur le net!!
merci beaucoup ca fonctionne !! j'ai plus qu'a changé les couleurs
bonne soiree
cordialement
Sujet clos
Aller à