Centrer un menu CSS

Fermé

VerreDeLait Messages postés 2 Date d'inscription dimanche 5 février 2012 Statut Membre Dernière intervention 5 février 2012 - 5 févr. 2012 à 10:18
dariumis Messages postés 571 Date d'inscription mardi 16 mars 2010 Statut Membre Dernière intervention 18 avril 2018 - 5 févr. 2012 à 12:03

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;
}

A voir également:

Centrer un menu CSS
Menu déroulant excel - Guide
Windows 11 menu démarrer classique - Guide
Réinitialiser menu démarrer windows 10 - Guide
Canon quick menu - Télécharger - Utilitaires
Windows 11 menu contextuel classique - Guide

2 réponses

Réponse 1 / 2

dariumis Messages postés 571 Date d'inscription mardi 16 mars 2010 Statut Membre Dernière intervention 18 avril 2018 63
5 févr. 2012 à 11:34

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;
}

Réponse 2 / 2

VerreDeLait Messages postés 2 Date d'inscription dimanche 5 février 2012 Statut Membre Dernière intervention 5 février 2012
5 févr. 2012 à 11:43

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...

dariumis Messages postés 571 Date d'inscription mardi 16 mars 2010 Statut Membre Dernière intervention 18 avril 2018 63
Modifié par dariumis le 5/02/2012 à 12:05

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;   
}

Discussions similaires

menu caché

Déblocage du mode hôtel Philips 20HF5234/10

Mon PC marque press the esc key for startup menu