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 :

[CSS] Centrer menu horizontal


Sujet :

Centrer un élément en CSS

  1. #1
    Expert confirmé
    Avatar de Aspic
    Homme Profil pro
    Étudiant
    Inscrit en
    Août 2005
    Messages
    3 905
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Électronique et micro-électronique

    Informations forums :
    Inscription : Août 2005
    Messages : 3 905
    Points : 4 388
    Points
    4 388
    Par défaut [CSS] Centrer menu horizontal
    Bonsoir,

    Je cherche désespérément à centrer mon menu :
    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
    ul#nav
    {	
    	list-style-type:none;
    	height:41px;
    	background-image:url(../images/degrade_menu_nav.png);
    	background-repeat:repeat-y;
    	padding:10px;
    	width:1000px;
    }
     
    ul#nav li
    {
    	float:left; /*pour IE*/
    	padding-right:20px;
     
    }
     
    ul#nav li a
    {
    	display:block;
    	float:left;   
    	width:90px;
    	line-height:41px; /*hauteur de l'image de fond*/
    	background:url(../images/btn_normal.png);
    	background-repeat:no-repeat;
    	text-decoration:none;
    	text-align:center;
    	color:#FFFFFF;
     
    }
     
    ul#nav li a:hover
    {
    	background:url(../images/bouton_survole.png);
    	background-repeat:no-repeat;
    }
    Et le code html :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <ul id="nav">
     <li><a href="#">Item 1</a></li>
     <li><a href="#">Item 2</a></li>
     <li><a href="#">Item plus long</a></li>
    </ul>
    Mais rien à faire, j'obtiens toujours un menu non centré (cf pièce jointe).

    Une idée ?

    Merci
    Images attachées Images attachées  

  2. #2
    Expert éminent
    Avatar de 12monkeys
    Homme Profil pro
    Webmaster
    Inscrit en
    Novembre 2006
    Messages
    4 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Service public

    Informations forums :
    Inscription : Novembre 2006
    Messages : 4 093
    Points : 9 031
    Points
    9 031
    Par défaut
    Bonsoir

    Pour centrer un élément horizontalement voici comment procéder http://css.developpez.com/faq/?page=...orizontalement

  3. #3
    Expert confirmé
    Avatar de Aspic
    Homme Profil pro
    Étudiant
    Inscrit en
    Août 2005
    Messages
    3 905
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Électronique et micro-électronique

    Informations forums :
    Inscription : Août 2005
    Messages : 3 905
    Points : 4 388
    Points
    4 388
    Par défaut
    Bonjour,
    J'avais déjà utilisé cette méthode mais ca ne marche pas :
    Peut être est ce parce que j'ai défini ca dans mon css :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    *{
    margin:0;
    padding:0;
    outline:none;
    }
    De plus, le "text-align:center" dans le body va me centrer le texte de tous le site, ce que je ne veux pas

    Une audre idée ?

  4. #4
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 905
    Détails du profil
    Informations personnelles :
    Âge : 41
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 905
    Points : 14 822
    Points
    14 822
    Par défaut
    La largeur (width) de ton ul doit être égale à la largeur (width+padding+border+margin) des li et ensuite mettre un margin:auto sur ton ul.
    Comme tu donnes une largeur à tes liens, tes li font 20+90 soit 110px chacun. Donc le width de ton ul doit être de 330px et non pas 1000px.

  5. #5
    Expert confirmé
    Avatar de Aspic
    Homme Profil pro
    Étudiant
    Inscrit en
    Août 2005
    Messages
    3 905
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Électronique et micro-électronique

    Informations forums :
    Inscription : Août 2005
    Messages : 3 905
    Points : 4 388
    Points
    4 388
    Par défaut
    Merci beaucoup ca fonctionne


+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Centrer le texte d'un menu horizontal CSS
    Par neaux dans le forum Mise en page CSS
    Réponses: 26
    Dernier message: 08/12/2012, 15h24
  2. Menu horizontal en CSS et liste
    Par SYL666 dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 21/06/2006, 16h03
  3. menu horizontal css
    Par Bibouda dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 09/01/2006, 03h29
  4. [css] Centrer un menu
    Par kilinette dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 04/06/2005, 17h47

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