Problème centrage menu avec css
tipi75
Messages postés
723
Statut
Membre
-
Sam222 -
Sam222 -
Bonjour,
Je n'arrive pas à centrer mon menu.
Voici un extrait du code html:
<div id="menu">
<ul>
<li class="collection">
<p><a href = "collections.php">Collections</a></p>
<p class="subtext">Accueil du site</p>
</li>
<li class="actualites">
<p><a href = "actualites.php">Actualités</a></p>
<p class="subtext">actualite du site</p>
</li>
<li class="point_de_vente">
<p><a href= "pointdevente.php">Point de Vente</a></p>
<p class="subtext">Point de vente du site</p>
</li>
Voici le CSS:
#menu ul
{
margin: 0 auto;
}
ul
{
margin: auto;
padding:0;
}
li
{
width:105px;
height:50px;
float:left;
color:#191919;
text-align:center;
overflow:hidden;
}
a
{
color:#FFF;
text-decoration:none;
}
p
{
padding:0px 5px;
}
.subtext
{
padding-top:15px;
}
/*Classes des couleurs du menu*/
.collection
{
background:#6AA63B;
}
.actualites
{
background:#FBC700;
}
.point_de_vente
{
background:#D52100;
}
Je ne vois pas pourquoi il ne veut pas être centrer
Merci de votre aide
Je n'arrive pas à centrer mon menu.
Voici un extrait du code html:
<div id="menu">
<ul>
<li class="collection">
<p><a href = "collections.php">Collections</a></p>
<p class="subtext">Accueil du site</p>
</li>
<li class="actualites">
<p><a href = "actualites.php">Actualités</a></p>
<p class="subtext">actualite du site</p>
</li>
<li class="point_de_vente">
<p><a href= "pointdevente.php">Point de Vente</a></p>
<p class="subtext">Point de vente du site</p>
</li>
Voici le CSS:
#menu ul
{
margin: 0 auto;
}
ul
{
margin: auto;
padding:0;
}
li
{
width:105px;
height:50px;
float:left;
color:#191919;
text-align:center;
overflow:hidden;
}
a
{
color:#FFF;
text-decoration:none;
}
p
{
padding:0px 5px;
}
.subtext
{
padding-top:15px;
}
/*Classes des couleurs du menu*/
.collection
{
background:#6AA63B;
}
.actualites
{
background:#FBC700;
}
.point_de_vente
{
background:#D52100;
}
Je ne vois pas pourquoi il ne veut pas être centrer
Merci de votre aide
Configuration: Windows XP Internet Explorer 6.0
3 réponses
-
C'est plus que brouillon ça... tu as un "div id menu" qui n'est pas fermé dans ton HTML, et dans ton CSS rien n'est attaché à l'id menu...
-
pour le html je n'ai mis tous le code. Mais voici tous le code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>page d'accueil </title>
<!-- ressources utiles-->
<link rel = "stylesheet" type = "text/css" href = "page_style.css"/>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="javascript/jquery.js"></script>
<script src="animated_menu.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<!-- les liens ne sont pas soulignés-->
<style>
a{
text-decoration:none;
}
</style>
</head>
<body>
<!-- le LOGO-->
<div id="en_tete"></div>
<!-- Trait dessus-->
<div class="trait_dessus"><hr></div>
<div class="trait_dessus"><hr></div>
<div id="menu">
<ul>
<li class="collection">
<p><a href = "collections.php">Collections</a></p>
<p class="subtext">Accueil du site</p>
</li>
<li class="actualites">
<p><a href = "actualites.php">Actualités</a></p>
<p class="subtext">actualite du site</p>
</li>
<li class="point_de_vente">
<p><a href= "pointdevente.php">Point de Vente</a></p>
<p class="subtext">Point de vente du site</p>
</li>
<!--<li class="Histoire">
<p><a href = "histoire.php">Histoire</a></p>
<p class="subtext">Histoire du site</p>
</li>-->
<!--<li class="Presse">
<p><a href = "presse.php">Presse</a></p>
<p class="subtext">Presse du site</p>
</li>-->
<!--<li class="archive">
<p><a href="archives.php">Archives</a></p>
<p class="subtext">Archives du site</p>
</li>-->
<li class="Vente_en_ligne">
<p><a href = "ventenligne.php">Boutique en ligne</a></p>
<p class="subtext">Vente en ligne du site</p>
</li>
<li class="Recherche">
<p><a href = "public/ChoixBijouxPublic.php">Recherche</a></p>
<p class="subtext">Recherche sur le site</p>
</li>
<!--<li class="contact">
<p><a href="contact01.php">Contact</a></p>
<p class="subtext">Contact du site</p>
</li>-->
</ul>
</div>
<div class="trait_dessous"><hr></div>
</body>
</html>
Et ce qui est attaché à l'id menu c'est menu ul (dans css). Mais j'ai fais une erreur en ajoutant ul. -
au lieu de faire des <li class="collection">... transforme le "li" en "div"
Faudrait que ton code ressemble plus à ça :
<div id="menu">
<div class="collection"> <!-- Cadre correspondant à un sous-menu -->
<h3>Collection</h3> <!-- Titre du sous-menu -->
<ul>
<li>Lien</li> <!-- Liste des liens du sous-menu -->
<li>Lien</li>
<li>Lien</li>
</div>
....
