Ligne de menu vertical trop haute

**moimp** · 22/02/2017, 19h08

Bonjour,

J'ai un menu vertical qui s'affichait correctement. D'un seul coup suite à une série de modifications php et sans toucher au css, chaque ligne du menu s'allonge désespérément dans le sens vertical.

Un premier indice: Chaque fois que j'ajoutais un var_dump en php, j'avais ce phénomène qui disparaissait en supprimant le var_dump.

Un second indice: L'allongement est constant est voisin d'une hauteur de fenêtre + 2 lignes.

Voici la partie de css correspondante au 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
37
38
39
40
41
42
43
44
45
/* Menu gauche */
nav ul
{
    margin: 0;
    border: 1px solid #666;
    border-bottom: none;
}
nav ul ul,
nav ul ul ul
{
    width: 175px;
    border: 1px solid #666;
    border-bottom: none;
    position: absolute;
    top: -1px;
    left:118px;
    display: none;
    z-index:15;
}
nav ul li,
nav ul li ul li,
nav ul li ul li ul li
{
    position: relative;
    list-style: none;
    border-bottom: 1px solid #666;
    height: auto;
    line-height: 20px;
}
nav li a
{
    text-decoration: none;
    padding: 4px 8px;
    display: block;
    width: auto;
    height: 100%;
    line-height: 20px;
}
nav ul.col1 li.smenu:hover ul.col2, nav ul.col2 li.smenu:hover ul.col3 {
    display: block;
}
nav ul, nav ul ul, nav ul ul ul
{
    background-color: #ddd;
}

Pour info voici le code source de la page html générée en php

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>essai</title>
    <meta name="description" content="visitez notre démonstration." />
    <meta name="keywords" content="plein de choses" />
    <link rel="stylesheet" media="all" type="text/css" href="_css/structure.css" /> <!-- Dimensions et positions -->
    <link rel="stylesheet" media="screen" type="text/css" href="_css/screen.css" />
    <!-- <link rel="stylesheet" media="screen" type="text/css" href="./_css/perso0.css" /> <!-- Personnalisation des styles -->
    <!-- Ce script permet de faire reconnaître les balises de structure par IE<9 -->
    <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
 
    <!-- Suite pour IE6, d'après "http://blog.infiniclick.fr/articles/un-menu-vertical-en-css-partie-1.html". -->
    <!-- Ce script permet à IE6 de reconnaître le hover -->
    <!--[if IE 6]>
        <link rel="stylesheet" type="text/css" href="./css/menu8-ie6.css" />
    <![endif]-->
 
    <!-- Ce script permet de pallier à un bogue de IE -->
    <!-- [if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif] -->
</head>
 
<body onload="clock('fr')"> <!-- Ce script permet d'afficher une horloge constament à l'heure -->
 
    <header>
        <div id="calendar">
            <span id="timer"></span> <!-- Cette ligne sert à l'affichage de l'horloge -->
        </div>
        <h1>Sirap<br /><span>la gestion des bénévoles et salariés d'associations et de collectivités<span></h1>
    </header>
 
    <!-- Si la page en cours est la page index.php, on affiche formulaire de connexion sinon, on affiche le menu -->
        <!-- Menu d'après "http://blog.infiniclick.fr/articles/un-menu-vertical-en-css-partie-1.html" -->
    <nav>
        <ul class="col1">
            <li class="smenu"><a href="homeAbo.php">Accueil</a></li> <!-- Accueil -->
            <li class="smenu"><a href="displStaff.php"><strong>Fichier</strong></a> <!-- Lecture fichier -->
            </li>
            <li class="smenu"><a href="params.php">Réglages</a></li>
            <li class="smenu"><a href="#">Administrateur</a> <!-- Administrateur -->
                <ul class="col2">
                    <li><a href="">Edition abonné</a></li> <!-- Edition abonné -->
                    <li><a href="displServerData.php">Données serveur</a></li> <!-- Données serveur -->
                </ul>
            </li>
            <li class="smenu"><a href="#">Divers</a> <!-- Divers -->
                <ul class="col2">
                    <li><a href="logout.php">Déconnexion</a></li> <!-- Déconnexion : Efface les cookies de connexion avant de revenir à l'index -->
                    <li><a href="aide/fr/000.php" target="_blank">Aide</a></li> <!-- Aide -->
                </ul>
            </li>
        </ul>
    </nav>
 
    <article id="right">
 
 
 
        </article>
        <footer class="footer">
            <br/>&nbsp;
            <hr/>
            * N° de semaine selon ISO 8601      </footer>
        <script>
            clockData = {"weekDays":["Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi"],"monthes":["janvier","f\u00e9vrier","mars","avril","mai","juin","juillet","ao\u00fbt","septembre","octobre","novembre","d\u00e9cembre"],"week":"Semaine","language":"fr"}; // Transfert de clockData de PHP vers JS
        </script>
        <!-- Appel du script de l'horloge -->
        <script src="_libraries/_routines.js">
        </script>
    </body>
 
</html>

**moimp** · 24/02/2017, 17h50

Bonjour,

Bien que le code précédent ait marché, j'ai trouvé une solution dans le CSS. Malheureusement, dans "nav li a", je ne comprends pas ce qui se passe au niveau de ma modification et du commentaire que j'ai ajouté (lignes 35 et 36).

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
nav ul
{
	margin: 0;
	border: 1px solid #666;
	border-bottom: none;
}
nav ul ul, 
nav ul ul ul
{
	width: 175px;
	border: 1px solid #666;
	border-bottom: none;
	position: absolute;
	top: -1px;
	left:118px;
	display: none;
	z-index:15;
}
nav ul li, 
nav ul li ul li, 
nav ul li ul li ul li
{
	position: relative;
	list-style: none;
	border-bottom: 1px solid #666;
	height: auto;
	line-height: 20px;
}
nav li a
{
	text-decoration: none;
	padding: 4px 8px;
	display: block;
	width: auto;
	/*height: 100%;*/ /* Crée un affichage sur toute la hauteur de la fenêtre au lieu de la hauteur du li */
	height: auto;
	line-height: 20px;
}
nav ul.col1 li.smenu:hover ul.col2, nav ul.col2 li.smenu:hover ul.col3 {
	display: block;
}
nav ul, nav ul ul, nav ul ul ul
{
	background-color: #ddd;
}

**NoSmoking** · 25/02/2017, 15h24

Bonjour,
compte tenu des données que tu mets à notre disposition, impossible de visualiser/reproduire le problème que tu rencontres.

**moimp** · 25/02/2017, 15h45

Bonjour,
J'ai fourni le code html généré, la feuille css qui gère le menu et les aspects esthétiques. J'ajoute ici une autre feuille css qui gère les aspects dimensionnels. Je ne vois pas ce que je pourrais ajouter de plus.

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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
/* --- STRUCTURE ET STYLES DE BASE --- */
/* Les lignes qui suivent permettent de s'affranchir des valeurs par défaut des navigateurs */
 
/* Page */
html {
	font-size: 100%; /* Évite un bug d'IE 6-7. (1) */
}
body {
	margin: 0;
	padding: 1em;
	font-family: Arial, Helvetica, sans-serif;/* Pensez à utiliser une collection de polices (2), par ex: font-family: Arial, Helvetica, FreeSans, sans-serif; */
	font-size: 1em; /* À adapter pour la police choisie. (3) */
	line-height: 1.1; /* À adapter au design. (4) */
	overflow:auto;
}
 
nav {
	float:left;
	width:120px;
	margin:0;
	margin-top:60px;
	font-size:.9em;
}
 
/* Titres */
h1, h2, h3, h4, h5, h6 {
	margin: 1em 0 .5em 0; /* Rapproche le titre du texte. (5) */
	line-height: 1.2;
	font-weight: bold; /* Valeur par défaut. (6) */
	font-style: normal; /* normal ou italique */
}
h1 {
	margin:0px;
	font-size: 1.75em;
}
h2 {
	font-size: 1.5em;
}
h3 {
	font-size: 1.25em;
}
h4 {
	font-size: 1em;
}
 
/* Listes */
ul, ol {
	margin: .75em 0 .75em 32px;
	padding: 0;
}
dt, dd, dl {
		list-style-position:outside;
}
dl {
	margin: 0.2em 0 0 0;
}
 
/* Paragraphes */
p {
	margin: .75em 0; /* Marges plus faibles que par défaut. (7) */
}
 
/* Liens */
a {
	text-decoration: underline;
}
a:link {
	color: #11C;
}
a:visited {
	color: #339;
}
a:hover, a:focus, a:active {
	color: #00F;
}
 
/* Pas de bordure autour des images dans les liens */
a img {
	border: none;
}
 
 
/* Divers éléments de type en-ligne (8) */
em {
	/*font-style: italic;*/
}
strong {
	font-weight: bold;
}
sup {
	height: .9em;
}
 
/* Formulaires */
form {
	margin: 0;
	padding: 0;
}
fieldset {
	margin-top:5px;
}
input, button, select {
	vertical-align: middle; /* Solution pb. d'alignement. (9) */
	margin-top:1px;
}
input[type='text'] {
	min-width:115px;
}
input[type="checkbox"] {
	width:25px;
}
input[name="sujet"], textarea {
	width:400px;
}
select {
	margin-left:-4px;
	min-width:115px; /* pour Chrome */
}
option {
	min-width:115px; /* pour Firefox */
}
label {
	font-size:.9em;
	display:inline-block;
	min-width:7em;
	vertical-align:bottom;
}
.lineHeightInput { /* même hauteur que les balises input */
	line-height:19px;
	padding-top:0px;
}
 
/* Partie personnalisée */
/* .............................................................................................................................. */
 
/* Entête */
#calendar {
	float:left;
	width:200px;
	height:50px;
	text-align:center;
	font-size:.9em;
	background-color:#eee;
	padding: 5px 0;
	margin-right: 10px;
}
 
/* Article principal */
#right {
	z-index:5;
	margin-top:0;
	margin-left:140px;
	min-height:175px; /* oblige le pied de page à passer sous le menu */
}
 
.log {
	float:left;
	width:120px;
	margin:0;
	margin-top:30px;
	font-size:.9em;
}
.log label {
	width:100px;
}
.log input[type="text"], .log input[type="password"] {
	min-width:100px;
	width:100px;
}
.log label[for='save'] {
	width:90px;
}
.log input[type="checkbox"] {
	width:15px;
}
 
.flex {
	display:flex;
	flex-wrap:wrap;
}
.flexItem {
	margin-top:0;
}

**NoSmoking** · 25/02/2017, 18h18

Désolé mais je ne reproduit pas ton problème et pour moi pas de soucis particulier.

Peux tu mettre une page reproduisant celui-ci en ligne et nous dire avec quel(s) navigateur(s) tu observes ce phénomène.

**moimp** · 26/02/2017, 18h58

J'ai le problème sur Chrome, IE et Mozilla mais vu mon message du 24/02/2017, 17h50, je mets en attente cette recherche et je considère le problème comme provisoirement résolu, même si j'aurais aimé trouvé. D'autre part, je suppose que ton temps est précieux et que je ne dois pas en abuser. J'y reviendrai ultérieurement si nécessaire.

Ligne de menu vertical trop haute

Tableau en CSS

Discussions similaires

Partager

Partager