Discussion :

[davcha]

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 :

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>

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
 
#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 :

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;
}

[davcha]

J'ai trouvé : j'ai ajouté "clear: both;" dans le style attaché à workspace.

Ca m'apprendra à faire des longs posts... :p

[Ricou13]

Si tu veux que tes menus soient l'un à coté de l'autre, ce n'est pas float: left; qu'il faut mettre sur les <li> mais display: inline;

[davcha]

En fait je voulais que ça soit exactement comme ça l'est maintenant (puisque le dernier problème du menu, jusqu'à nouvel ordre, est résolu), donc :p

display: inline;, ça aurait pour effet de faire un menu sur une seule ligne, même s'il sort de la fenêtre, non ?

[Ricou13]

Non, cela donne un affichage comme les éléments de type inline (<a>,<em>,<img>...)
Donc, en fin de ligne, ça passe à la ligne suivante...