Centrer un menu

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Centrer un menu

Message par mimi-76- le Sam 28 Avr 2012 - 15:22

Bonjour,

phpbb2
http://funnycraft.forumpro.fr


bonjour, je suis sur le pion de crée une page html. Et voila mon problème, en ajoutant mon menu. Je voudrait que mon menu se trouve au centre de la page, je n'y arrive pas voila mon code et le lien de la page.

Code:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
 <style>
 
/* menu */
ul#menu0
{
top: 0px;
   margin:0;
   padding:0;
   list-style-type:none;
   width:650px;
   position:fixed;
   display:block;
   height:30px;
   font-size:12px;
   font-weight:bold;
   background-color: black;
   font-family:Arial, Helvetica, sans-serif;
   border-bottom:1px solid #000000;
   border-top:1px solid #000000;
        border-radius: 0px 0px 15px 15px;
}

ul#menu0 li
{
   display:block;
   float:left;
   margin:0;
   padding:0;
}
ul#menu0 li a
{
   display:block;
   float:left;
   color:#999999;
   text-decoration:none;
   font-weight:bold;
   padding:8px 20px 0 20px;
}
   
ul#menu0 li a:hover
{   
   color: red;
   height:22px;
      
}   

   
ul#menu0 li a.current
{
   display:inline;
   height:22px;   
   float:left;
   margin:0;
}
       
</style>
        <title>Funnycraft- Accueil </title>
    </head>

    <body><div><center>
         <ul id='menu0'>
         <li class="button"><a class='current' href='http://funnycraft.forumpro.fr/' >Accueil</a></li>
         <li class="button"><a href='http://funnycraft.forumpro.fr/forum'  >Forum</a></li>
         <li class="button"><a href='#'  >Commande</a></li>
         <li class="button"><a href='#'  >Dynmap</a></li>
                        <li class="button"><a href='http://funnycraft.forumpro.fr/?pid=5' >Team Speak 3</a></li>
                        <li class="button"><a href='http://funnycraft.forumpro.fr/h4-dons' >Dons</a></li>
                        <li class="button"><a href='#Prochainement disponible'>Contact</a></li>
         </ul></center>
      </div>   
    <div class="Accueil">
</div>
    </body>
</html>

lien: http://funnycraft.forumpro.fr/h5-page-d-accueil

Merci, pour votre aide.


Dernière édition par mimi-76- le Sam 28 Avr 2012 - 16:46, édité 1 fois

mimi-76-
****

Messages : 279
Inscrit(e) le : 14/03/2012

http://lord-of-cubs.jeun.fr
mimi-76- a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer un menu

Message par Mousse151 le Sam 28 Avr 2012 - 15:40

Bonjour,

pour avoir le menu centré dans la page, vous devez enlever la position fixed de votre menu et mettre des marges automatiques. Vous aurez donc ceci :

Code:
ul#menu0
{
top: 0px;
  margin:auto;
  padding:0;
  list-style-type:none;
  width:650px;
  display:block;
  height:30px;
  font-size:12px;
  font-weight:bold;
  background-color: black;
  font-family:Arial, Helvetica, sans-serif;
  border-bottom:1px solid #000000;
  border-top:1px solid #000000;
        border-radius: 0px 0px 15px 15px;
}

Et vous pouvez retirer la balises center dans votre html Smile

Mousse151
***

Messages : 172
Inscrit(e) le : 14/04/2010

http://agedeglace.superforum.fr/index.htm
Mousse151 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer un menu

Message par mimi-76- le Sam 28 Avr 2012 - 15:45

Bonjour, je voudrait que mon menu soit coller en haut du navigateur.

mimi-76-
****

Messages : 279
Inscrit(e) le : 14/03/2012

http://lord-of-cubs.jeun.fr
mimi-76- a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Centrer un menu

Message par Mousse151 le Sam 28 Avr 2012 - 16:21

Ok donc si tu souhaites garder la position fixe de ton menu, la solution à laquelle je pense est celle-ci :

Code:
ul#menu0
        {
          top: 0px;
          margin:0 -325px; /* on applique une marge négative de la moitié  de la largeur du menu*/
          left:50%;  /* on positionne le menu à la moitié de l'écran */
          padding:0;
          position:fixed;
          list-style-type:none;
          width:650px;
          display:block;
          height:30px;
          font-size:12px;
          font-weight:bold;
          background-color: black;
          font-family:Arial, Helvetica, sans-serif;
          border-bottom:1px solid #000000;
          border-top:1px solid #000000;
          border-radius: 0px 0px 15px 15px;
        }

Mousse151
***

Messages : 172
Inscrit(e) le : 14/04/2010

http://agedeglace.superforum.fr/index.htm
Mousse151 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrer un menu

Message par mimi-76- le Sam 28 Avr 2012 - 16:46

Merci, sa fonctionne actuellement.

mimi-76-
****

Messages : 279
Inscrit(e) le : 14/03/2012

http://lord-of-cubs.jeun.fr
mimi-76- a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum