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>.
Si je remets "float: left;" voici ce que j'obtiens :
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;" :
avec "float: left;" :
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 :
Et voici le code CSS minimal mettant le problème en évidence :
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 <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>
C'est ballot, mais je peux supprimer l'ensemble du CSS excepté ces 3 lignes, et j'ai exclusivement le bug..
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4 #menu li { float: left; }
Le CSS complet :
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 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; }
Partager