IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

centrer un menu dans une page


Sujet :

Centrer un élément en CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Profil pro
    Inscrit en
    Novembre 2009
    Messages
    390
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2009
    Messages : 390
    Par défaut centrer un menu dans une page
    Bonsoir a tous,

    De nouveau je rencontre un problème pour centrer un menu
    voici le code de ma page

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" CONTENT="">
    <meta HTTP-EQUIV="IMAGETOOLBAR" content="no" SCROLLING="yes" >
    <meta name="keywords" CONTENT="">
    <style type="text/CSS">
    ul {
     padding:0;
     margin:10;
     list-style-type:none;
     }
    li {
     
     margin-left: 2px;
     float:left; /*pour IE*/
     }
    ul li a {
     display:block;
     float:left;   
     width:138px;
     background-color:#FFFACD;
     color:black;
     text-decoration:none;
     text-align:center;
       -moz-border-radius:10px;
      -webkit-border-radius:10px;
      border-radius:10px;
      -moz-box-shadow:0 0 10px #555;
      -webkit-box-shadow:0 0 10px #555;
      box-shadow:0 0 10px #555;
     padding:5px;
     border:2px solid;
     /*pour avoir un effet "outset" avec IE :*/
     border-color:#696969 #696969 #696969 #696969;
     
     }
    ul li a:hover {
     background-color:#D3D3D3;
     border-color:#696969 #696969 #696969 #696969;
     } 
    </style>
    </HEAD>
    <BODY>
    <ul>
     <li><a href="lamer.htm" target="bas">La mer</a></li>
     <li><a href="lesvagues.htm" target="bas">Les vagues</a></li>
     <li><a href="coucher.htm" target="bas">Coucher de Soleil</a></li>
     <li><a href="macro.htm"target="bas">
    Macrophotographie</a></li></BR></BR>
     <li><a href="v.htm" target="bas">Village </a></li>
    <li><a href="lacst.htm" target="bas">Le lac</a></li>
     <li><a href="contrej.htm" target="bas">Contre jour</a></li>
     <li><a href="cascadrs.htm" target="bas">Cascades</a></li></BR></BR>
    <li><a href="mars.htm" target="bas">Mars</a></li>
    <li><a href="astro.htm" target="bas">Astronomie</a></li>
    <li><a href="mars.htm" target="bas"></a></li>
    <li><a href="astro.htm" target="bas"></a></li>
    </ul>
     
    </body>
    </html>
    Malgrès beaucoup d'éfforts mon menu est centré vers la gauche de ma page alors que je le voudrais en haut au centre
    Merci par avance pour vos aides

  2. #2
    Membre éprouvé Avatar de redoran
    Homme Profil pro
    Développeur-Amateur
    Inscrit en
    Juin 2010
    Messages
    1 346
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : Algérie

    Informations professionnelles :
    Activité : Développeur-Amateur
    Secteur : Santé

    Informations forums :
    Inscription : Juin 2010
    Messages : 1 346
    Par défaut
    Salam ; si vous le permettez essaye de mettre le code css dans un fichier.css et le html dans un autre sa allège votre page html est c'est mieux structuré.
    pour centré votre menu essaye avec la class menu :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    margin-left: auto;
    margin-right: auto;

  3. #3
    Invité
    Invité(e)
    Par défaut
    Bonjour,
    pour utiliser les margin auto, il faut définir la largeur de l'élément.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    ul#menu {
     padding:0;
     width:610px; /* largeur = 4 x li (marges incluses) */
     margin:10px auto;
     list-style-type:none;
     }
    Attention : IE et les autres navigateurs ne gèrent pas de la même manière les "margin" et "padding".

    Si ta page contient d'autres listes, je te conseille de mettre un id :

  4. #4
    Membre très actif
    Avatar de buggen25
    Ingénieur développement logiciels
    Inscrit en
    Août 2008
    Messages
    554
    Détails du profil
    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Août 2008
    Messages : 554
    Par défaut
    Bonjour;
    J'ajoute, pour internet explorer il faut prevoir un div avec un text-align:center et a l'interieur un autre div avec le text centré a gauche par defaut
    Code HTML
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
     
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" CONTENT="">
    <meta HTTP-EQUIV="IMAGETOOLBAR" content="no" SCROLLING="yes" >
    <meta name="keywords" CONTENT="">
    <style type="text/CSS">
    body{
    	text-align:center;
    }
    #MenuNav{
    		 width:610px;
           text-align:left;
    	   margin:0 auto 0 auto;
     
    }
    #MenuNav ul {
     padding:0;
     margin:10;
     list-style-type:none;
     }
    li {
     
     margin-left: 2px;
     float:left; /*pour IE*/
     }
    #MenuNav ul li a {
     display:block;
     float:left;   
     width:138px;
     background-color:#FFFACD;
     color:black;
     text-decoration:none;
     text-align:center;
       -moz-border-radius:10px;
      -webkit-border-radius:10px;
      border-radius:10px;
      -moz-box-shadow:0 0 10px #555;
      -webkit-box-shadow:0 0 10px #555;
      box-shadow:0 0 10px #555;
     padding:5px;
     border:2px solid;
     /*pour avoir un effet "outset" avec IE :*/
     border-color:#696969 #696969 #696969 #696969;
     
     }
    #MenuNav ul li a:hover {
     background-color:#D3D3D3;
     border-color:#696969 #696969 #696969 #696969;
     } 
    </style>
    </HEAD>
    <BODY>
     
    <div id="MenuNav">
     <ul>
     <li><a href="lamer.htm" target="bas">La mer</a></li>
     <li><a href="lesvagues.htm" target="bas">Les vagues</a></li>
     <li><a href="coucher.htm" target="bas">Coucher de Soleil</a></li>
     <li><a href="macro.htm"target="bas">
    Macrophotographie</a></li></BR></BR>
     <li><a href="v.htm" target="bas">Village </a></li>
    <li><a href="lacst.htm" target="bas">Le lac</a></li>
     <li><a href="contrej.htm" target="bas">Contre jour</a></li>
     <li><a href="cascadrs.htm" target="bas">Cascades</a></li></BR></BR>
    <li><a href="mars.htm" target="bas">Mars</a></li>
    <li><a href="astro.htm" target="bas">Astronomie</a></li>
    <li><a href="mars.htm" target="bas"></a></li>
    <li><a href="astro.htm" target="bas"></a></li>
    </ul>
    </div>
    </body>
    </html>

  5. #5
    Membre éclairé
    Profil pro
    Inscrit en
    Novembre 2009
    Messages
    390
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2009
    Messages : 390
    Par défaut
    Merci a vous tous je vais essayer cela dès ce soir merci

Discussions similaires

  1. Centrer un texte dans une page
    Par Samanta dans le forum Mise en forme
    Réponses: 5
    Dernier message: 20/09/2010, 22h30
  2. Comment centrer plusieurs div dans une page.
    Par solorac dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 20/11/2008, 14h06
  3. Centrer un bloc dans une page
    Par jcaspar dans le forum Mise en page CSS
    Réponses: 7
    Dernier message: 07/04/2008, 12h21
  4. Centrer un formulaire dans une page Internet
    Par Stouille89 dans le forum GWT et Vaadin
    Réponses: 3
    Dernier message: 07/11/2007, 21h53
  5. position idéale pour placer un menu dans une page d'accueil
    Par Smix007 dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 01/02/2007, 12h14

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo