28172 sujets

CSS et mise en forme, CSS3

Centrer mon menu

Bonjours !!

J' ai un menu en barre qui fonctionne mais je n'anrrive pas a le centre dans ma page la balise float m'en empeche. comment corriger le css pour que le menu soit centré horizontallement.
Merci !!!

<style type="text/css"> 
<!-- 
body { 
margin: 0; 
padding: 0; 
background: white; 
font: 80% verdana, arial, sans-serif; 
} 
dl, dt, dd, ul, li { 
margin: 0; 
padding: 0; 
list-style-type: none; 
} 
#menu { 
position: absolute; 
top: 0; 
left: 0; 
z-index:100; 
width: 100%; 
} 
#menu dl { 
[#red]float: left; [/#]
width: 12em; 
margin: 0 1px; 
} 
#menu dt { 
cursor: pointer; 
text-align: center; 
font-weight: bold; 
background: #ccc; 
border: 1px solid gray; 
} 
#menu dd { 
border: 1px solid gray; 
} 
#menu li { 
text-align: center; 
background: #fff; 
} 
#menu li a, #menu dt a { 
color: #000; 
text-decoration: none; 
display: block; 
height: 100%; 
border: 0 none; 
} 
#menu li a:hover, #menu dt a:hover { 
background: #eee; 
} 

#site { 
position: absolute; 
z-index: 1; 
top : 70px; 
left : 10px; 
color: #000; 
background-color: #ddd; 
padding: 5px; 
border: 1px solid gray; 
} 

a {text-decoration: none; 
color: black; 
color: #222; 
} 
--> 
</style>

Modifié par wombat (17 Aug 2008 - 15:05)
Salut ,

tu veux centrer le menu ou bien toutes la page?

Pourrait-on avoir la source html pour mieu comprendre la structure de ton code ?

Sinon si tu met un position:absolute tu ne pourra certainement pas centrer ton menu.

Essaye avec ceci :


#menu { 
[#red]margin:auto[/#]

top: 0; 

left: 0; 

z-index:100; 

width: 100%; 

} 

#menu dl { 

float: left; 

width: 12em; 

margin: 0 1px; 

}

Modifié par FunK (17 Aug 2008 - 15:17)
slt,

je ne suis pas expert en la matiere mais en rajoutant :

margin : 0 auto;

je pense que cela devrait faire l'affaire !

M'enfin sa marche chez moi...
slt Funk

Voici le reste du code

<body> 

<div id="menu"> 
   <dl> 
      <dt onmouseover="javascript:montre();"><a href="http://sploutchsploutch.free.fr" title="Retour à l'accueil">Accueil</a></dt> 
   </dl> 
    
   <dl>          
      <dt onmouseover="javascript:montre('smenu1');">Logiciels</dt> 
         <dd id="smenu1"> 
            <ul> 
               <li><a href="http://sploutchsploutch.free.fr/phpBB2/viewforum.php?f=1">Logiciels divers</a></li> 

               <li><a href="http://sploutchsploutch.free.fr/phpBB2/viewforum.php?f=4">Logiciels msn/wlm</a></li> 
               <li><a href="http://sploutchsploutch.free.fr/phpBB2/viewforum.php?f=18">Logiciels jeux</a></li> 
               <li><a href="http://sploutchsploutch.free.fr/Partenariat.html">Liens</a></li> 
            </ul> 

         </dd> 
   </dl> 
    
    
   <dl>    
      <dt onmouseover="javascript:montre('smenu2');">MSN/WLM</dt> 
         <dd id="smenu2"> 
            <ul> 
               <li><a href="http://sploutchsploutch.free.fr/phpBB2/viewforum.php?f=10">Script messenger+ Live</a></li> 
               <li><a href="http://sploutchsploutch.free.fr/phpBB2/viewforum.php?f=11">Emoti-sons</a></li> 

               <li><a href="http://sploutchsploutch.free.fr/phpBB2/viewforum.php?f=14">Meegos</a></li> 
               <li><a href="http://sploutchsploutch.free.fr/phpBB2/viewforum.php?f=14">Fonds dynamique</a></li> 
               <li><a href="http://sploutchsploutch.free.fr/phpBB2/viewforum.php?f=14">Clins d'oeil</a></li> 
               <li><a href="http://sploutchsploutch.free.fr/phpBB2/viewforum.php?f=17">Skins WLM</a></li> 
            </ul> 
         </dd> 
   </dl> 
    
   <dl>    
      <dt onmouseover="javascript:montre('smenu3');">Tutoriaux</dt> 
         <dd id="smenu3"> 

            <ul> 
               <li><a href="http://sploutchsploutch.free.fr/phpBB2/viewforum.php?f=9">Tutos pour votre pc</a></li> 
               <li><a href="http://sploutchsploutch.free.fr/phpBB2/viewforum.php?f=3">Tutos logiciels</a></li> 
               <li><a href="http://sploutchsploutch.free.fr/phpBB2/viewforum.php?f=2">Tutos webmaster</a></li> 
               <li><a href="http://sploutchsploutch.free.fr/smileys.html">Smileys</a></li> 
               <li><a href="http://sploutchsploutch.free.fr/Pub.html">?</a></li> 
                    <li><a href="http://sploutchsploutch.free.fr/FontsEcrans.html">Fonds d'écran</a></li> 
            </ul> 
         </dd> 
   </dl> 
    
   <dl>    
      <dt onmouseover="javascript:montre('smenu4');">Divers et aides</dt> 
         <dd id="smenu4"> 
            <ul> 
                    <li><a href="http://sploutchsploutch.free.fr/phpBB2/viewforum.php?f=24">Supports</a></li> 
               <li><a href="http://sploutchsploutch.free.fr/phpBB2/viewforum.php?f=22">Les tests</a></li> 
               <li><a href="http://sploutchsploutch.free.fr/phpBB2/viewforum.php?f=21">Sondages</a></li> 
               <li><a href="http://sploutchsploutch.free.fr/Chater.html">T'chat</a></li> 
               <li><a href="http://aubonendroit.com.xooit.com/portal.php">Le sploutch-site</a></li> 
               <li><a href="http://sploutchsploutch.free.fr/Contact">Contact</a></li> 
               <li><a href="http://sploutchsploutch.free.fr/m%E9t%E9o.html">Météo</a></li> 
               <li><a href="http://xooit.xooit.com/index.php">Support xooit</a></li> 
               <li><a href="http://sploutchsploutch.free.fr/">Le 100% Gratuits !</a></li> 
            </ul> 
         </dd> 
   </dl> 
    
   <dl>    
      <dt onmouseover="javascript:montre('smenu5');">TITRE ICI</dt> 
         <dd id="smenu5"> 
            <ul> 
               <li><a href="URL DE DIRECTION">Sous-TITRE</a></li> 

               <li><a href="URL DE DIRECTION">Sous-TITRE</a></li> 
               <li><a href="URL DE DIRECTION">Sous-TITRE</a></li> 
            </ul> 
         </dd> 
   </dl> 
    
   <dl>    
      <dt onmouseover="javascript:montre('smenu6');">TITRE ICI</dt> 
         <dd id="smenu6"> 
            <ul> 
               <li><a href="URL DE DIRECTION">Sous-TITRE</a></li> 

               <li><a href="URL DE DIRECTION">Sous-TITRE</a></li> 
               <li><a href="URL DE DIRECTION">Sous-TITRE</a></li> 
            </ul> 
         </dd> 
   </dl> 
    
   <dl>    
      <dt onmouseover="javascript:montre('smenu7');">TITRE ICI</dt> 
         <dd id="smenu7"> 
            <ul> 
               <li><a href="URL DE DIRECTION">Sous-TITRE</a></li> 

               <li><a href="URL DE DIRECTION">Sous-TITRE</a></li> 
               <li><a href="URL DE DIRECTION">Sous-TITRE</a></li> 
            </ul> 
         </dd> 
   </dl> 
    

    
</div>
wombat a écrit :
la balise float m'en empeche

Juste pour rappel: il n'y a pas de «balise» float. Il y a une propriété CSS float. Les balises, c'est en HTML. Smiley cligne

FunK et benjo: votre solution ne fonctionnera pas. Elle sert uniquement à centrer horizontalement un bloc dont la largeur est connue (propriété width).

À vue de nez, le seul moyen de centrer les éléments de ce menu serait d'utiliser:
- display: inline-block;
- display: table-cell;
- un tableau de mise en forme (TABLE, TR, TD...).
Les deux premières solutions posent trop de problèmes de compatibilité (notamment avec Internet Explorer) pour être utilisées ici. La troisième risque d'être compliquée à mettre en place avec un menu déroulant...
Modifié par Florent V. (17 Aug 2008 - 15:23)
Ah oui effectivement je n'avais pas vu le width:100%, donc c'est logique ici que tu n'arrive pas a centrer vu que pour le navigateur ton menu fait toutes la largeur de ta page.

Essaye de lui mettre une taille en largeur et d'utiliser le margin:auto Smiley smile
Sujet clos
Aller à