Comment centrer mon menu horizontaux
Utilisateur anonyme
-
Utilisateur anonyme -
Utilisateur anonyme -
Bonjour,
je crée mon site, et j'ai fais un menu horizontaux déroulant. Problème, je n'arrive pas à le centrer sur ma page.
Donc si vous pouvez m'aider c'est assez important.
Voici mon CSS.
body {
background-color: #000;
}
#en_tete {
color: #FFF;
}
#menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
#menu li {
float:left;
margin:inherit;
padding:0;
background-color:#333;
}
#menu li a {
display:block;
width:116px;
color:white;
text-decoration:none;
padding:1px;
}
#menu li a:hover {
color:#FFD700;
}
#menu ul li ul {
display:none;
}
#menu ul li:hover ul {
display:block;
}
#menu li:hover ul li {
float:none;
}
#menu li ul {
position:absolute;
}
#menu {
height:50px;
}
#corps
{
color: #FFF;
background-color: #626262;
background-image: url("font gris.jpg");
background:no-repeat
border: 1px solid black;
margin-left:240px;
margin-right:240px;
}
#pied_de_page {
color:#FFF;
background-color: #626262;
background-image: url("dégrader bas.jpg");
border: 1px solid black;
margin-left:240px;
margin-right:240px;
}
Merci beaucoup d'avance.
je crée mon site, et j'ai fais un menu horizontaux déroulant. Problème, je n'arrive pas à le centrer sur ma page.
Donc si vous pouvez m'aider c'est assez important.
Voici mon CSS.
body {
background-color: #000;
}
#en_tete {
color: #FFF;
}
#menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
#menu li {
float:left;
margin:inherit;
padding:0;
background-color:#333;
}
#menu li a {
display:block;
width:116px;
color:white;
text-decoration:none;
padding:1px;
}
#menu li a:hover {
color:#FFD700;
}
#menu ul li ul {
display:none;
}
#menu ul li:hover ul {
display:block;
}
#menu li:hover ul li {
float:none;
}
#menu li ul {
position:absolute;
}
#menu {
height:50px;
}
#corps
{
color: #FFF;
background-color: #626262;
background-image: url("font gris.jpg");
background:no-repeat
border: 1px solid black;
margin-left:240px;
margin-right:240px;
}
#pied_de_page {
color:#FFF;
background-color: #626262;
background-image: url("dégrader bas.jpg");
border: 1px solid black;
margin-left:240px;
margin-right:240px;
}
Merci beaucoup d'avance.
Configuration: Windows XP Firefox 3.5.7
3 réponses
-
Je n'ai pas essayé mais voilà 2 techniques qui pourraient être la/les solution(s) :
- Mettre le menu dans un div à width fixe avec margin:auto
- Mettre tes éléments en display:inline-block et faire un text-align:center sur l'élément parent. -
on dit pas un menu horizontal ? tu as des exemple ? un lien ou on pourrai se rendre compte du souci ?
-
Ok, merci.
Pour l'apperçu je mes le script HTML de mon menu.
<div id="menu">
<ul>
<li><a href="Accueil.html"> <img src="bouton accueil.jpg"width="114" height="45"/></a></li>
<li><a href="Contacts.html"><img src="bouton contact.jpg"width="114" height="45"/></a>
<li><a href="Accueil.html"><img src="bouton inscriptions.jpg"width="114" height="45"/></a>
<ul>
<li><a href='Inscription Membres.html'><strong>Inscription Membres</strong></A></li>
<li><a href='Inscription Films.html'><strong>Inscription Films</strong></A></li>
<li> <a href='Inscription Newsletter.html'><strong>Newsletter</strong></A></li>
</ul>
<li><a href="Accueil.html"><img src="bouton films.jpg"width="114" height="45"/></a>
<ul>
<li><a href='Nouveauté.html'><strong>Nouveauté</strong></A>
<li><a href="Projets.html"><strong>Projets</strong></a>
<li><a href="Vidéos.html"><strong>Vidéos</strong></a>
<li><a href="#"><strong>Films</strong></a>
</ul>
<li><a href="Accueil.html"><img src="bouton présentation.jpg"width="114" height="45"/></a>
<ul>
<li><a href='#'><strong>Histoire</strong></A>
<li><a href="#"><strong>Présentation du site</strong></a>
<li><a href="#"><strong>Membres</strong></a>
<li><a href="#"><strong>Matériels</strong></a>
</ul>
<li><a href="Accueil.html"><img src="bouton divers.jpg"width="114" height="45"/></a>
<ul>
<li><a href='#'><strong>Goodies</strong></A>
<li><a href="#"><strong>Agenda</strong></a>
<li><a href="#"><strong>Facebook</strong></a>
</ul>
<li><a href="Livre d'or.html"><img src="bouton livre d'or.jpg"width="114" height="45"/></a>
</div>
Voila merci d'avance.
