Centrer un menu CSS
VerreDeLait
Messages postés
2
Statut
Membre
-
dariumis Messages postés 583 Statut Membre -
dariumis Messages postés 583 Statut Membre -
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;
}
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;
}
A voir également:
- Centrer un menu CSS
- Menu déroulant excel - Guide
- Canon quick menu - Télécharger - Utilitaires
- Windows 11 menu contextuel classique - Guide
- Windows 11 menu démarrer classique - Guide
- Réinitialiser menu démarrer windows 10 - Guide
2 réponses
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:
sinon moi je ferais comme ceci:
.centremenu {
width:88%;
margin:auto;
padding:0;
border:0;
}
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...
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...
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;
}
