Centrer un menu CSS

[Fermé]
Signaler
Messages postés
2
Date d'inscription
dimanche 5 février 2012
Statut
Membre
Dernière intervention
5 février 2012
-
Messages postés
571
Date d'inscription
mardi 16 mars 2010
Statut
Membre
Dernière intervention
18 avril 2018
-
Bonjour,

Je galère depuis hier a centrer mon menu CSS. J'y suis presque arrivé mais il y a des défauts dès qu'on redimensionne la fenetre.

Pourriez-vous me filer un coup de main ?

Ma page HTML :



<html>

<head>
<title>Lili Angels</title>
<link rel="stylesheet" type="text/css" href="E:\Site\menus.css" />
<link rel="stylesheet" type="text/css" href="E:\Site\style.css" />
</head>

<body><center><img src="E:\Site\Images\bannière.jpg"border=0></center><br>
<div class="centremenu"><ul>
<li><a href="E:\Site\photo.html">Photos</a></li>
<li><a href="E:\Site\video.html">Videos</a></li>
<li><a href="E:\Site\webcam">Webcam</a></li>
<li><a href="E:\Site\chat.html">Chat</a></li>
<li><a href="E:\Site\vetements">Vêtements</a></li>
<li><a href="E:\Site\contacts">Contacts</a></li>
<li><a href="E:\Site">Rencontres</a></li>
</ul></div>

</body>

</html>




Ma Page CSS :


.centremenu {
position:absolute;
left:34%;
width:88%;
margin-top:0px;
margin-left:-100px;
padding:0;
border:0;
}


ul {
margin: 0 ;
padding: 0 ;
list-style: none ;
text-align: center ;
}
li {
float:left; /*pour IE*/
border-left:1px solid black;
}
ul li a {
display:block;
float:left;
width:100px;
line-height:50px; /*hauteur de l'image de fond*/
background:black url(E:\Site\Images\menu1.png) repeat-x;
color:#DCDCDC;
text-decoration:none;
text-align:center;
}
ul li a:hover {
background:black url(E:\Site\Images\menu2.png) repeat-x;
color:white;
}

2 réponses

Messages postés
571
Date d'inscription
mardi 16 mars 2010
Statut
Membre
Dernière intervention
18 avril 2018
61
Salut, t'es obligé d'utiliser le position:absolute, faut l'utiliser que si c'est absolument nécessaire.

sinon moi je ferais comme ceci:

.centremenu {
width:88%;
margin:auto;
padding:0;
border:0;
} 
Messages postés
2
Date d'inscription
dimanche 5 février 2012
Statut
Membre
Dernière intervention
5 février 2012

Ce code me décale à nouveau le menu...
Le position:absolute est justement ce qui maintient le tout au milieu.

Je trafique dans tous les paramètres possible, mon site en plein écran est parfaitement proportionné et dès que je réduis la fenetre tout part en sucette...
Messages postés
571
Date d'inscription
mardi 16 mars 2010
Statut
Membre
Dernière intervention
18 avril 2018
61
Le position:absolute ça sert a faire de la superposition de div, ou de sortir le div du flux général de ta page, en position:absolute, tous va devenir plus compliqué s'il n'y a pas de raisons de s'en servir, enfin... la position n'influe en rien sur le centrage, pour centrer un div le code que j'ai posté suffit normalement.. mais c'est peut être les float mis sur les éléments enfants qui font beuguer le menu, alors peut être comme ceci:

.centremenu {   
overflow:hidden;   
width:88%;   
margin:auto;   
padding:0;   
border:0;   
}