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 :

Aligner un menu et les <li>


Sujet :

Positionnement en CSS

  1. #1
    Débutant  
    Profil pro
    Inscrit en
    Mai 2005
    Messages
    3 093
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Mai 2005
    Messages : 3 093
    Points : 943
    Points
    943
    Par défaut Aligner un menu et les <li>
    Bonjour,

    Je me "casse la tete" (mais grave) depuis plusieurs jours à formater mon menu.

    J'ai un menu qui se compose de <nav> <ul> et <li>.
    Il se trouve dans un container, qui a une largeur de max-width:470px

    J'aimerais que mon menu soit justifié sur le div parent. Mais j'aimerais aussi qui mes li soit aussi justifié et centré.

    Chaque li à un
    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    border-left:1px solid #red
    et il faut que l'espace entre le bord rouge, soit égal entre le texte du mnu précédent et celui qui le suit
    Nom : exemple.png
Affichages : 2425
Taille : 3,5 Ko

    Pour avoir ces expaces, j'ai utilisé des padding left et right.

    Le problème qui se pose (et je m'excuse si je n'ai pas été assez explicite), c'est que lorsque je diminue la taille de mon navigateur pour simuler la taille d'un smartphone, les padding ne dimnue pas, donc les li passe l'un dessous l'autre.

    Je dois faire en sorte que les li reste toujours aligné horizontalement et lorsque le navigateur diminue, la distance entre le texte et les bords du li (padding) diminuent aussi dynamiquement. Il faudrait s'assurer qu'il y ait au moin un padding de 3px, de manier à ce que les bords ne "touchent" jamais les textes.

    Comment faire alors pour que mes li soient
    • Justifié (soir aligner sous une image de 470px, par exemple)
    • que la largeur et les padding de mes li soient dynamiquement redimenssionné
    • que le texte de li soit centré
    • que les li restent alignés horizontalement et qu'ils ne passe pas l'un dessous l'autre, au contraire (donc jouer sur une largeur et padding dynamiquement)


    J'ai essayé de mettre ceci dans mon ul
    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    ul.menu-ul2 {
    		display: flex;
    		flex-wrap: nowrap;*/
    		justify-content: space-between;
     
    	}
    sans succès car je n'arrive pas à controler mes li...

    Voyez-vous mon problème?

    Je vous remercie
    Il ne suffit pas de tout savoir. Vouloir et persévérer, c'est déjà presque tout!

  2. #2
    Membre éclairé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    Juin 2012
    Messages
    519
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Juin 2012
    Messages : 519
    Points : 705
    Points
    705
    Par défaut
    Une solution ... A toi de l'adapter avec ton image.
    Code html : 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
    76
    <!doctype html>
    <html lang="fr">
    <head>
    <meta charset="utf-8">
    <title>>Menu horizontal flex au clic</title>
    <style>
    * {                                                                                                                                                                                                       
            margin: 0;                                                              
            padding: 0;                                                             
            border: 0;                                                                                                                                                                                 
            box-sizing: border-box;                                 
    }                                                                                                                                                                                                          
    html, body {                                                                                                                                                                               
            height: 100%;                                                   
            font-size: 100%;                                                
    }                                                                                                                                                                                                          
    body {                                                                                                                                                                                             
            font-family: "Times New Roman", Times, serif; 
            font-size: 100%;                                                
    }                                                                                                                                                                                                          
    div             {
            width:auto;
            min-width: 480px;
     
    }
    nav ul {
            list-style-type: none;
    }
    nav > ul {
            width: 100%;                                                            
            margin: 0 auto;                                                 
            display: -webkit-flex;                                  
            display: flex;                                                  
            justify-content: center;                                        
    }
    nav> ul > li {
            -webkit-flex: 1 1 1%;                                   
            flex: 1 1 1%;
            border-right:1px solid black;                                                   
    }
    nav> ul > li a {
            display: block;
            font: bold 12px/25px Arial, Helvetica;
            padding: 5px 0;                                                         
            text-align: center;                                                     
            background: #031c4b;                                            
            color: #fff;                                                            
            text-decoration: none;                                          
            font-style: italic;
            font-size: 80%;
    }
    nav> ul > li {
            border-right:1px solid white;                                           
    }
    nav> ul > li:last-type {
            border-right:none;                                                      
    }
    }
    </style>
    </head>
     
    <body>
    <div>
     
    <nav>
      <ul>
        <li><a href="#">Accueil</a></li>
        <li><a href="#">Shiatsu</a></li>
        <li><a href="#">Praticienne</a></li>
        <li><a href="#">contact</a></li>
        <li><a href="#">liens</a></li>
      </ul>
    </nav>
    </div>
    </body>
    </html>

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

Discussions similaires

  1. comment aligner mon menu : images les unes a coté des autres
    Par gaya102 dans le forum Mise en page CSS
    Réponses: 19
    Dernier message: 09/03/2009, 13h42
  2. Alignement de variables dans les <option> d'un <select>
    Par Crowell dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 18/07/2007, 18h42
  3. [JMenu] Largeur d'un menu avec les images
    Par Don ViP dans le forum AWT/Swing
    Réponses: 3
    Dernier message: 04/04/2007, 17h06
  4. Réponses: 9
    Dernier message: 07/02/2007, 16h57
  5. Problème d'alignement de menu
    Par BnA dans le forum Balisage (X)HTML et validation W3C
    Réponses: 5
    Dernier message: 17/08/2006, 10h18

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