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

**Soward** · 03/03/2015, 10h23

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

**black-hawk-down** · 03/03/2015, 11h08

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 !!!

**Soward** · 03/03/2015, 12h06

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

**NoSmoking** · 03/03/2015, 19h13

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>

**Soward** · 05/03/2015, 12h13

Merci beaucoup pour votre aide, ça fonctionne parfaitement en effet

Je met le thread en résolu.

Bon courage à vous et merci encore !

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

CSS

Discussions similaires

Partager

Partager