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 :

Avoir des éléments de menu de même taille


Sujet :

CSS

  1. #1
    Membre du Club
    Profil pro
    Inscrit en
    avril 2007
    Messages
    91
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : avril 2007
    Messages : 91
    Points : 67
    Points
    67
    Par défaut Avoir des éléments de menu de même taille
    Bonjour,

    Je me permets de requérir votre aide sur un problème qui à la base me semblait très simple, mais qui s'est révélé ensuite bien pénible.

    Voici un screenshot pour que vous compreniez directement mon problème :




    J'utilise la navbar classique de boostrap, auquelle j'ajoute mes éléments de menu. Ce que je souhaiterai, c'est que tout les onglets soient de la même taille (autrement dit que "fidélité" soit de la même taille que les autres qui sont sur deux lignes).

    Bien sur j'aimerai éviter d'utiliser une taille fixe, car le design doit être responsive au maximum.

    J'ai bien entendu pensé à tout un tas de techniques un peu "triche" genre rajouter un <br />, mettre un texte invisible en dessous etc, mais j'aimerais votre avis sur la manière la plus propre pour avoir un menu uniforme (peut être qqch auquel je n'ai pas pensé ou que je ne connais pas)

    Merci à vous pour votre aide
    Images attachées Images attachées  

  2. #2
    Membre habitué
    Homme Profil pro
    Intégrateur Web
    Inscrit en
    juillet 2014
    Messages
    92
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Intégrateur Web
    Secteur : Boutique - Magasin

    Informations forums :
    Inscription : juillet 2014
    Messages : 92
    Points : 152
    Points
    152
    Par défaut
    Salut,

    Avec ton code HTML et CSS ça serait puet-être plus simple que de spéculer.

    Comme ça en vitesse, je te dirais de fixer la hauteur avec soit un vertical-align middle, soit un line-height égal au height. Mais tout dépend de ta structure et des types de tes éléments.

    Bref, on veut plus d'infos !!!

  3. #3
    Membre du Club
    Profil pro
    Inscrit en
    avril 2007
    Messages
    91
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : avril 2007
    Messages : 91
    Points : 67
    Points
    67
    Par défaut
    Merci de ta réponse

    Mon code HTML est assez simple, avec une liste à puce comme ceci :

    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
    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
    <div th:fragment="navbar-header">
    	<section class="col-md-12 style-section-navbar">
    		<nav class="xxx-navbar-header navbar" id="navbar-header-xxx">
    			<div class="navbar-inner">
    				<ul class="nav navbar-nav" role="navigation">
    					<li th:class="...">
    						<a id="drop1" href="#" role="button" th:text="#{customer.menu.navbar1.title}" class="dropdown-toggle" data-toggle="dropdown"></a>
    						<ul class="dropdown-menu onglets-header" role="menu" aria-labelledby="drop1">
    							<div class="bar-container">
    								<li>
    									<a class="col-md-12" tabindex="-1" th:href="...">
    										<span th:text="#{customer.menu.navbar1.text1}"></span>
    									</a>
    								</li>
    								<li>
    									<div th:if="...">
    										<a class="col-md-12" tabindex="-1" th:href="...">
    											<span th:text="#{customer.menu.navbar1.text2Bis}"></span>
    										</a>
    									</div>
    									<div th:unless="...">
    										<a class="col-md-12" tabindex="-1" th:href="...">
    											<span th:text="#{customer.menu.navbar1.text2}"></span>
    										</a>
    									</div>
    								</li>
    								<li>
    									 <a class="col-md-12" tabindex="-1" th:href="..." >
    										<span th:text="#{customer.menu.navbar1.text3}"></span>
    									</a>
    								</li>
    							</div>
    						</ul>
    					</li>
    					<li th:class="${...} ? 'li-new-card dropdown button-nav-header' : 'dropdown button-nav-header'">
    						<a id="drop1" href="#" role="button" th:text="#{customer.menu.navbar2.title}" class="dropdown-toggle" data-toggle="dropdown">
    							<b class="caret"></b>
    						</a>
    						<ul class="dropdown-menu onglets-header" role="menu" aria-labelledby="drop1">
    							<div class="bar-container">
    								<li>
    									<a class="col-md-12" tabindex="-1" th:href="...">
    										<span th:text="#{customer.menu.navbar2.text1}"></span>
    									</a>
    								</li>
    								<li>
    									<a class="col-md-12" tabindex="-1" th:href="...">
    										<span th:text="#{customer.menu.navbar2.text2}"></span>
    									</a>
    								</li>
    								<li>
    									<a class="col-md-12" tabindex="-1" th:href="...">
    										<span th:text="#{customer.menu.navbar2.text3}"></span>
    									</a>
    								</li>
    								<li>
    									<a class="col-md-12" tabindex="-1" th:href="...">
    										<span th:text="#{customer.menu.navbar2.text4}"></span>
    									</a>
    								</li>
    							</div>
    						</ul>
    					</li>
    					<li th:class="${...} ? 'li-new-card button-nav-header' : 'button-nav-header'">
    						<a th:href="..."></a>
    					</li>
    					<li th:if="${...}" th:class="${...} ? 'li-new-card dropdown button-nav-header'">
    						<a id="drop1" href="#" role="button" th:text="#{customer.menu.navbar5.title}" class="dropdown-toggle" data-toggle="dropdown">
    							<b class="caret"></b>
    						</a>
    						<ul class="dropdown-menu onglets-header">
    							<span class="bar-container">
    								<li>
    									<a class="col-md-12" tabindex="-1" th:href="...">
    										<span th:text="#{customer.menu.navbar5.text1}"></span>
    									</a>
    								</li>
    								<li>
    									<a class="col-md-12" tabindex="-1" th:href="'#'">
    										<span th:text="#{customer.menu.navbar5.text2}"></span>
    									</a>
    								</li>
    							</span>
    						</ul>
    					</li>
    					<li th:if="${...}" th:class="${...} ? 'li-new-card button-nav-header'">
    						<a id="drop1" href="#" th:text="#{customer.menu.navbar6.title}">
    							<b class="caret"></b>
    						</a>
    					</li>
    					<li th:if="${...}" th:class="${...} ? 'li-new-card button-nav-header'">
    						<a  th:href="@{...}" th:text="#{customer.menu.navbar7.title}">
    							<b class="caret"></b>
    						</a>
    					</li>
    					<li th:class="${...} ? 'li-new-card button-nav-header' : 'button-nav-header'">
    						<a th:href="@{...}"></a>
    					</li>
    				</ul>
    			</div>
    		</nav>
    	</section>
    </div>

    J'ai enlevé pas mal de code qui aurait alourdit la lecture, mais globalement on est sur une navbar simple de boostrap, à mon avis la modification serait plus à faire dans le css que dans le HTML.
    Voici mon CSS :
    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
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
     
    .xxx-navbar-header a
    {
    	text-decoration:none;
    	color:white;
    }
     
    .xxx-navbar-header .navbar-nav li a
    {
    	padding-top:8px;
    	padding-bottom:8px;
    	font-weight:bold;
    }
     
    .xxx-navbar-header .li-new-card
    {
    	width:13%;
    	height:100%;
    	padding:0px;
    	text-align:center;
    }
     
    @media screen and max-width: 640px
    {
    	.xxx-navbar-header .li-new-card
    	{
    		width:100%;
    		margin-bottom:4px;
    		margin-left:0px;
    	}
    }
     
    .xxx-navbar-header .li-new-card a
    {
    	padding-right:4px;
    	padding-left:4px;
    }
     
    .xxx-navbar-header .navbar-nav
    {
    	width:100%;	
    }
     
    .xxx-navbar-header li
    {
    	color:white;
    	background-color:black;
    	border-radius:4px;
    	margin-left:8px;
    }
     
    .first-li-navbar-header
    {
    	margin-left:0px !important;	
    }
     
    .xxx-navbar-header  .nav .open > a, .nav .open > a:hover, .nav .open > a:focus
    {
    	color:white;
    	background: -moz-linear-gradient(top, #6E2222 0%, #850000 28%, #B50000 65%, #BF0000
     	100%);
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6E2222),
    	 color-stop(28%, #850000), color-stop(65%, #B50000),
    	 color-stop(100%, #BF0000) );
    	background: -webkit-linear-gradient(top, #6E2222 0%, #850000 28%, #B50000 65%,
    	 #BF0000 100%);
    	background: -o-linear-gradient(top, #6E2222 0%, #850000 28%, #B50000 65%, #BF0000
    	 100%);
    	background: -ms-linear-gradient(top, #6E2222 0%, #850000 28%, #B50000 65%, #BF0000
    	 100%);
    }
     
    .nav > li > a:hover
    {
    	color:white;
    	background: -moz-linear-gradient(top, #6E2222 0%, #850000 28%, #B50000 65%, #BF0000
     	100%);
    	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6E2222),
    	 color-stop(28%, #850000), color-stop(65%, #B50000),
    	 color-stop(100%, #BF0000) );
    	background: -webkit-linear-gradient(top, #6E2222 0%, #850000 28%, #B50000 65%,
    	 #BF0000 100%);
    	background: -o-linear-gradient(top, #6E2222 0%, #850000 28%, #B50000 65%, #BF0000
    	 100%);
    	background: -ms-linear-gradient(top, #6E2222 0%, #850000 28%, #B50000 65%, #BF0000
    	 100%);
    }
     
    .xxx-navbar-header .dropdown .open
    {
    	margin-top:-4px;
    }
    .xxx-navbar-header .dropdown-menu
    {
    	background-color:#C30000;
    	opacity:0.95;
    }
     
    .xxx-navbar-header .dropdown-menu > li > a
    {
    	color:white;
    	font-weight:bold;
    	padding:0px;
    	padding-top:-4px;
    }
     
    .xxx-navbar-header .bar-container li a:hover
    {
    	background-color:orange;
    	text-align:left;
    }
     
    .xxx-navbar-header .bar-container li
    {
    	background-color:transparent;
    }
     
    .xxx-navbar-header .dropdown-menu
    {
    	margin-top:-2px;
    	padding-top:0px;
    }
     
    .onglets-header
    {
    	white-space:inherit;
    }
     
    .img-accueil
    {
    	vertical-align:baseline;
    }
     
    .bar-container
    {
    	width:100%;
    }
     
    .bar-container li
    {
    	margin-left:0px;
    }
     
    .bar-container li a
    {
    	color:white;
    	background-color:transparent;
    	display:block;
    	text-align:left;
    }
    Selon moi les class à modifier seraient :
    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
     
    .xxx-navbar-header .navbar-nav li a
    {
    	padding-top:8px;
    	padding-bottom:8px;
    	font-weight:bold;
    }
     
    .xxx-navbar-header .li-new-card
    {
    	width:13%;
    	height:100%;
    	padding:0px;
    	text-align:center;
    }
     
     
    .xxx-navbar-header .li-new-card a
    {
    	padding-right:4px;
    	padding-left:4px;
    }
    Je m'excuse pour les "xxx" mais je ne suis pas sur d'avoir le droit d'afficher le nom du client donc j'ai préféré le remplacer.

    Donc pour récapituler, l'objectif est d'avoir tout mes "li" de la même taille, sans utiliser un "height:20px;" par exemple, pour garder le côté responsive et éviter les pixels en dur.

    Merci beaucoup pour votre aide

  4. #4
    Modérateur

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

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 610
    Points : 39 604
    Points
    39 604
    Par défaut
    Bonjour,
    il te faut regarder du coté de display:table et consort

    exemple rapide
    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
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <meta charset="UTF-8">
    <title>[...]</title>
    <style>
    ul {
      display:table;
      border-collapse:      separate;
      border-spacing: 0.5em;
    }
    li {
      display:table-cell;
      background:#abc;
      width:7em;
      text-align:center;
    }
    </style>
    </head>
    <body>
    <ul>
      <li>Vos dépenses carte</li>
      <li>Vos documents</li>
      <li>Fidélité</li>
      <li>A propos de la carte</li>
    </ul>
    </body>
    </html>

  5. #5
    Membre du Club
    Profil pro
    Inscrit en
    avril 2007
    Messages
    91
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : avril 2007
    Messages : 91
    Points : 67
    Points
    67
    Par défaut
    Merci beaucoup pour votre aide, ça fonctionne parfaitement en effet

    Je met le thread en résolu.

    Bon courage à vous et merci encore !

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

Discussions similaires

  1. Désélectionner des éléments du menu déroulant
    Par devlm dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 28/09/2012, 22h38
  2. Réponses: 13
    Dernier message: 18/08/2010, 11h52
  3. Réponses: 2
    Dernier message: 11/08/2010, 17h27
  4. Réponses: 2
    Dernier message: 14/04/2009, 11h27
  5. Avoir pour toutes les images la même taille
    Par namstou3 dans le forum ActionScript 1 & ActionScript 2
    Réponses: 1
    Dernier message: 13/12/2007, 16h35

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