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 :

Adapter en hauteur un menu en utilisant flex


Sujet :

Positionnement en CSS avec flexbox

  1. #1
    Nouveau Candidat au Club
    Femme Profil pro
    Chomeuse
    Inscrit en
    juillet 2016
    Messages
    36
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Chomeuse

    Informations forums :
    Inscription : juillet 2016
    Messages : 36
    Points : 0
    Points
    0
    Par défaut Adapter en hauteur un menu en utilisant flex
    J'ai un soucis sur lfex. Je débute, j'ai suivi quelque tuto, mais un truc m'échappe concernant la hauteur.

    En mettant "flex-grow: 1;" sur le centre, il s'adapte sur toute la hauteur (super pratique), par contre le menu ca ne veut pas.
    Ca déborde si je met du padding sur les liens du menu.

    Donc on ne pourrait mettre qu'un flex-grow à 1 ?

    JSFiddle : https://jsfiddle.net/SuperLow/ofubqxba/1/

    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
    		<header class="entete">
    					Lorem ipsum
    		</header>
     
    		<nav class="nav">
    				<nav>
    					<ul>
    					<li><a href="Alpha">Alpha</a></li>
    							<li><a href="Beta">Beta</a></li>
    							<li><a href="Charlie">Charlie</a></li>
    							<li><a href="Delta">Delta</a></li>
    			</ul>				</nav>
    		</nav>
     
    		<main class="centre">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis nibh vitae justo hendrerit faucibus in at magna. Praesent ultrices tincidunt lectus id facilisis. In ornare venenatis purus nec dictum. Fusce quis tellus ut risus viverra posuere a at lectus. Curabitur luctus elit a ultricies convallis. Cras vitae metus ut lorem interdum sagittis. Duis viverra venenatis odio blandit cursus. Duis venenatis purus vel neque aliquam, sit amet blandit lectus luctus. Nunc ac commodo metus, eget semper dui. Fusce congue nunc massa.
     
    Integer pellentesque, ligula venenatis ornare viverra, tortor tellus gravida eros, a porta nisi purus at est. Mauris eleifend non turpis in dictum. Ut egestas nisl eget fringilla ultrices. Ut vitae placerat est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis mi metus, pharetra non libero sed, aliquet blandit quam. Sed malesuada vel dolor quis vestibulum.
     
    Sed vel bibendum ante. Proin condimentum enim a urna aliquam lacinia. Nullam ultricies vitae arcu ac placerat. Nunc nec leo sodales, ultrices arcu quis, lacinia nunc. Proin bibendum posuere dictum. Ut porta ut nibh quis elementum. Sed sagittis tempus condimentum. Morbi eget lobortis tortor. Sed eget feugiat nibh. Vivamus vitae ligula ultricies, pellentesque turpis nec, mattis sapien. 
    		</main>
     
    		<footer class="block-pied">
    		</footer>


    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
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    html
    {
    	font-size: 1rem;	
    }
     
    *
    {	
    	margin:0;
    	padding:0;
    	text-decoration:none;
    }
     
    *, *:before, *:after
    {
    	box-sizing:border-box;
    }
     
    ul
    { 
    	list-style-type: none; 
    }
     
    li
    {
    	list-style: none;
    }
     
    main,
    aside,
    nav
    {
    	display:block;
    }
     
    html, body
    {
    	height: 100%;
    	display: flex;
    	flex-direction: column;
    	background-color: grey;
    }
     
    a{
    	color:#333333;
    }
     
    .entete,
    .nav,
    .centre,
    {
    	font-size: 0;
    }
     
    /* 	--- HEADER -------------------*/
     
    .entete
    {
    	color: white;
    	font-size: 3rem;
    	text-align: center;
    	background-color: black;
    }
     
     
    /* 	--- NAV ----------------------*/
    .nav
    {
    	color: white;
    	background-color: purple;
      line-height: 1rem;
    }
     
    .nav nav ul
    {
    	font-size: 0;
      	flex-grow: 1;
     
    }
    .nav nav ul li
    {	
    	display: inline-block;
    }
     
    .nav nav ul li a
    {	
    	color: white;
    	font-size: 1rem;
    	padding: 5px 10px 5px 10px; /* < Debordement */
    	background-color: red;
      border-right: 1px solid green;
    }
     
    .nav nav ul li a:hover
    {	
    	background-color: yellow;
      color: black;
     
    }
     
     
    /* 	--- CENTER -------------------*/
    .centre
    {
    	flex-grow: 1;
    }

  2. #2
    Modérateur
    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 114
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 114
    Points : 37 562
    Points
    37 562
    Par défaut
    Bonjour,
    revoie quand même la structure de ta page <nav> dans <nav> on ne voit pas bien l'intérêt mais commence par mettre tes <a> en display:block et ton soucis devrait disparaître.

Discussions similaires

  1. Réponses: 5
    Dernier message: 16/01/2008, 14h13
  2. hauteur du menu fixe!
    Par rems033 dans le forum Mise en page CSS
    Réponses: 9
    Dernier message: 25/10/2007, 14h10
  3. [TImageList] Adapter dynamiquement hauteur et largeur
    Par gerardTar dans le forum C++Builder
    Réponses: 7
    Dernier message: 27/11/2005, 10h06
  4. [Menu Plugin Eclipse]créer un menu et utiliser ActionFactory
    Par Nanoulov dans le forum Eclipse Java
    Réponses: 1
    Dernier message: 01/07/2005, 14h42

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