Effet secondaire non désiré de "float"
J'ai un petit problème de positionnement.
En gros, j'ai un menu et un contenu, vous pouvez voir une ancienne version qui fonctionne ici : http://www.swgbase.net/dev/ , pour vous donner une idée.
A présent le contenu (anciennement coucou<br><br>...<br>pouet) est un tableau, toujours pour la mise en forme, ça n'est évidemment pas définitif.
Sur cette image, le menu est vertical, car j'ai supprimé la ligne : "float: left;" du style attaché à <li>.
http://www.swgbase.net/floatsideeffect_good2.jpg
Si je remets "float: left;" voici ce que j'obtiens :
http://www.swgbase.net/floatsideeffect_bad2.jpg
Pour plus de clarté, j'ai supprimé l'ensemble des styles, excepté les quelques styles qui entrent en jeu dans ce "bug", et voilà ce que j'obtiens :
sans "float: left;" :
http://www.swgbase.net/floatsideeffect_good.jpg
avec "float: left;" :
http://www.swgbase.net/floatsideeffect_bad.jpg
Vous pouvez voir dans ces images deux zones bordurées (une rouge en haut et une noire en bas).
La rouge correspond à la balise <ul id="menu">, quant à la noire, elle correspond à la balise <div id="workspace">.
Il semblerait que "float: left;" réduise la hauteur de la zone délimitée par <ul id="menu">, à tel point que cette zone ne contienne plus le menu, provoquant le bug.
Voici un extrait (celui qui nous intéresse) du code html de la page :
Code:
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
| <ul id="menu">
<li><a href="">menu item #1</a>
<ul class="sousMenu">
<li><a href="">sous-item #1</a></li>
<li><a href="">sous-item #2</a></li>
<li><a href="">sous-item #3</a></li>
</ul>
</li>
<li><a href="">menu item #2</a>
<ul class="sousMenu">
<li><a href="">sous-item #1</a></li>
<li><a href="">sous-item #2</a></li>
<li><a href="">sous-item #3</a></li>
</ul>
</li>
<li><a href="">menu item #3</a>
<ul class="sousMenu">
<li><a href="">sous-item machin bidule truc #1</a></li>
<li><a href="">sous-item #2</a></li>
<li><a href="">sous-item #3</a></li>
</ul>
</li>
<li><a href="">menu item #4</a>
<ul class="sousMenu">
<li><a href="">sous-item #1</a></li>
<li><a href="">sous-item #2</a></li>
<li><a href="">sous-item #3</a></li>
</ul>
</li>
<li id="logout"><a href="logout.php">Déconnexion</a></li>
</ul>
<div id="workspace">
<div>
<table>
<tr class="first">
<td>toto</td>
<td>toto</td>
<td>toto</td>
<td>toto</td>
</tr>
<tr>
<td>toto</td>
<td>toto</td>
<td>toto</td>
<td>toto</td>
</tr>
<tr>
<td>toto</td>
<td>toto</td>
<td>toto</td>
<td>toto</td>
</tr>
<tr>
<td>toto</td>
<td>toto</td>
<td>toto</td>
<td>toto</td>
</tr>
</table>
</div>
</div> |
Et voici le code CSS minimal mettant le problème en évidence :
Code:
1
2
3
4
|
#menu li {
float: left;
} |
C'est ballot, mais je peux supprimer l'ensemble du CSS excepté ces 3 lignes, et j'ai exclusivement le bug..
Le CSS complet :
Code:
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
| body {
background: url(bg_bottomright.png) no-repeat bottom right;
font: 10pt arial,sans-serif;
margin: 0;
padding: 0;
border: 0;
height: 100%;
}
#bgtopleft {
position: absolute;
z-index: 0;
background: transparent url(bg_topleft.png) no-repeat top left;
top: 0;
left: 0;
width: 800px;
height: 500px;
padding: 50px 0 0 0;
}
#logo h1 {
position: absolute;
top: 0;
right: 0;
margin: 0;
background: url(logo.png) no-repeat top right;
width: 229px;
height: 30px;
}
#logo h1 span {
display: none;
}
#menu li ul { display: none; }
#menu li:hover > ul { display: block; }
#menu {
list-style: none;
position: relative;
z-index: 2;
margin: 0;
padding: 10px 25px 0;
border: 1px solid red;
}
#menu li {
text-align: center;
float: left; <=== Ligne posant problème ici
margin: 5px 10px;
padding: 0;
width: 150px;
}
#menu li ul {
position: absolute;
margin: 0;
padding: 5px 0 0;
list-style: none;
}
#menu li ul li {
float: none;
margin: 1px 0 0;
padding: 0;
}
#menu a {
display: block;
background: #ddf;
border: 1px solid #99f;
color: #00f;
text-decoration: none;
}
#menu a:hover {
background: #99f;
color: #fff;
}
#logout a {
color: #f00;
border: 1px solid #f99;
background: #fdd;
}
#logout a:hover {
background: #f99;
}
#workspace {
position: relative;
top: 0;
z-index: 1;
margin: 0;
padding: 0;
border: 1px solid;
}
#workspace div {
margin: 45px 25px 25px;
padding: 10px;
text-align: center;
}
#workspace table {
width: 100%;
margin: 0;
padding: 0;
background: #eef;
}
#workspace tr {
margin: 0;
padding: 0;
}
#workspace tr.first {
background: #99f;
}
#workspace td {
margin: 0;
padding: 0;
border: 1px solid blue;
}
#workspace tr:hover {
background: #ccf;
}
#workspace td:hover {
background: #fff;
} |
