Inline dans les listes

**Bensor** · 29/12/2008, 13h04

Bien le bonjour.

Voilà, j'ai un petit problème sur lequel je bute depuis quelques heures et que je n'arrive pas à résoudre.

En fait, j'essaie de concevoir un menu CSS utilisant les listes, sur plusieurs "colonnes". Sous Safari Win cela s'affiche niquel-chrome :

En revanche, sur tout les autres navigateurs, c'est le drame :

J'ai beau mettre du inline, du nowrap et autres solutions plus ou moins tolérées par le W3C cela ne change rien de rien, il y a toujours un retour à la ligne indésirable, retour qui disparait dès qu'on fixe une largeur à la liste principale (or je ne veux pas ça, vu que le contenu sera dynamique)

Voici le code HTML (épuré) :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//FR" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  <head>
    <title>Test</title>
    <script type="text/javascript" src="js/top_menu_list.js"></script>
    <link rel="stylesheet" type="text/css" href="css/top_menu.css" media="screen" />
  </head>
 
  <body>
 
    <div id="menu_top">
      <div onmouseover="showTopMenu(2);" onmouseout="hideTopMenu(2);" id="menu_top_cat_2" class="child">
        Cat 2
        <ul style="display: none;margin: 0px;white-space: nowrap;" id="menu_top_2">
          <li class="main_option" style="float: left;">
            TATA
            <ul style="position: relative;">
              <li>lsdkdlkf</li>
              <li>lsdkdfflkf</li>
              <li>lsdsdfsdfsdkdlkf</li>
              <li>lsdkdlkf</li>
            </ul>
            TOTO
            <ul style="position: relative;">
              <li>kdsdfqsml</li>
              <li>kdqsml</li>
              <li>kdqsmsdffsdl</li>
              <li>kdqsml</li>
            </ul>
          </li>
          <li class="main_option" style="float: left;">
            TATU
            <ul style="position: relative;">
              <li>lsdkdlkf</li>
              <li>lsdkdsdfsdfsdlkf</li>
              <li>lsdkdslkf</li>
              <li>lsdkdfsdflkf</li>
            </ul>
            TOTU
            <ul style="position: relative;">
              <li>kdqsmfl</li>
              <li>kdqsmlsdfs</li>
              <li>kdqsml</li>
              <li>kdqsmsdfl</li>
            </ul>
          </li>
          <li class="main_option" style="float: left;">
            TZTU
            <ul style="position: relative;">
              <li>lsdkdlkf</li>
              <li>lsdkdlkf</li>
              <li>lsdkdlkf</li>
              <li>lsdkdlkf</li>
            </ul>
            TDTU
            <ul style="position: relative;">
              <li>kdqsmlsdfsdfsdfsdfsdfsdfsd</li>
              <li>kdqsml</li>
              <li>kdqsml</li>
              <li>kdqsml</li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </body>
</html>

Le fichier CSS :

Code css :

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
#menu_top {
  background-color: #888888;
  height: 26px;
}
 
#menu_top div.child {
  display: inline;
  position: relative;
}
#menu_top ul {
  position: absolute;
  background-color: #000000;
  color: #FFFFFF;
  padding: 5px;
  font-family: Arial, Verdana;
  font-size: 11px;
  list-style-type: none;
}
#menu_top ul.sub {
  position: relative;
}
 
#menu_top li.main_option {
  float: left;
  font-weight: bold;
  text-decoration: underline;
  padding: 5px;
}
 
#menu_top ul.sublist {
  position: relative;
}
 
#menu_top ul.sublist li {
  text-decoration: none;
  font-weight: normal;
}

Et le fichier js :

Code javascript :

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
var common_top_menu_id = 'menu_top_';
 
var common_top_menu_activator_id = 'menu_top_cat_';
 
var top_top_menu = 14;
 
var incremented_top_menu = false;
 
var left_top_menu = 0;
 
function showTopMenu( id ) {
 
  if ( document.getElementById( common_top_menu_id + id ) ) {
 
    if ( (navigator.userAgent.indexOf('MSIE') != -1 || navigator.userAgent.indexOf('Opera') != -1) && incremented_top_menu == false ) {
 
      incremented_top_menu = true;
      top_top_menu += document.getElementById( common_top_menu_activator_id + id) . offsetTop - 4;
 
    }
 
    document.getElementById( common_top_menu_id + id ) . style . left = left_top_menu + 'px';
    document.getElementById( common_top_menu_id + id ) . style . top = top_top_menu + 'px';
 
    document.getElementById( common_top_menu_id + id ).style.display = 'block';
 
  }
 
}
 
function hideTopMenu( id ) {
 
  if ( document.getElementById( common_top_menu_id + id ) ) {
 
    document.getElementById( common_top_menu_id + id ).style.display = 'none';
 
  }
 
}

Bon c'est un peu brouillon dans les propriétés CSS, mais quoi que je retire ou ajoute cela ne change pas. Quelqu'un peut-il m'aider ?

Merci d'avance

**c_s_s** · 29/12/2008, 13h50

Bonjour,

Difficile de te donner une solution très précise puisqu'il le code n'est pas complet. Il y a des class dans ton CSS qui ne se trouvent pas dans ton HTML épuré.

Cela dit, voilà un essai qui fonctionne (sans utiliser le javascript) :

Code css :

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
ul, li {
	margin:0;
	padding:0;
}
#menu_top {
  background-color: #888888; 
  overflow:hidden;
}
#menu_top ul {
  background-color: #000000;
  color: #FFFFFF;
  padding: 5px;
  font-family: Arial, Verdana;
  font-size: 11px;
  list-style-type: none;
  overflow:hidden;
}
#menu_top li {
	white-space: nowrap;
}
#menu_top li.main_option {
  float: left;
  font-weight: bold;
  text-decoration: underline;
  padding: 5px;
}

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
<div id="menu_top">
  <div id="menu_top_cat_2" class="child">
    Cat 2
    <ul id="menu_top_2">
      <li class="main_option">
        TATA
        <ul>
          <li>lsdkdlkf</li>
          <li>lsdkdfflkf</li>
          <li>lsdsdfsdfsdkdlkf</li>
          <li>lsdkdlkf</li>
        </ul>
        TOTO
         <ul>
          <li>kdsdfqsml</li>
          <li>kdqsml</li>
          <li>kdqsmsdffsdl</li>
          <li>kdqsml</li>
        </ul>
      </li>
      <li class="main_option">
        TATU
        <ul>
          <li>lsdkdlkf</li>
          <li>lsdkdsdfsdfsdlkf</li>
          <li>lsdkdslkf</li>
          <li>lsdkdfsdflkf</li>
        </ul>
        TOTU
        <ul>
          <li>kdqsmfl</li>
          <li>kdqsmlsdfs</li>
          <li>kdqsml</li>
          <li>kdqsmsdfl</li>
        </ul>
      </li>
     <li class="main_option">
        TZTU
        <ul>
          <li>lsdkdlkf</li>
          <li>lsdkdlkf</li>
          <li>lsdkdlkf</li>
          <li>lsdkdlkf</li>
        </ul>
        TDTU
        <ul>
          <li>kdqsmlsdfsdfsdfsdfsdfsdfsd</li>
          <li>kdqsml</li>
          <li>kdqsml</li>
          <li>kdqsml</li>
        </ul>
      </li>
    </ul>
  </div>
</div>

**Bensor** · 29/12/2008, 14h24

Hmm étrange, là ça prend toute la largeur de la fenêtre (

). Donc forcement, pas de retour à la ligne.

Un code plus complet du HTML :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//FR" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  <head>
    <title>Test</title>
    <script type="text/javascript" src="js/top_menu_list.js"></script>
    <link rel="stylesheet" type="text/css" href="css/top_menu.css" media="screen" />
  </head>
 
  <body>
 
    <div id="menu_top">
      <div onmouseover="showTopMenu(1);" onmouseout="hideTopMenu(1);" id="menu_top_cat_1" class="child">
        Test 1
        <ul style="display: none;margin: 0px;" id="menu_top_1">
          <li class="main_option">A .</li>
          <li class="main_option">B .</li>
          <li class="main_option">C .</li>
        </ul>
      </div>
      <div onmouseover="showTopMenu(2);" onmouseout="hideTopMenu(2);" id="menu_top_cat_2" class="child">
        Cat 2
        <ul style="display: none;margin: 0px;white-space: nowrap;" id="menu_top_2">
          <li class="main_option" style="float: left;">
            TATA
            <ul style="position: relative;">
              <li>lsdkdlkf</li>
              <li>lsdkdfflkf</li>
              <li>lsdsdfsdfsdkdlkf</li>
              <li>lsdkdlkf</li>
            </ul>
            TOTO
            <ul style="position: relative;">
              <li>kdsdfqsml</li>
              <li>kdqsml</li>
              <li>kdqsmsdffsdl</li>
              <li>kdqsml</li>
            </ul>
          </li>
          <li class="main_option" style="float: left;">
            TATU
            <ul style="position: relative;">
              <li>lsdkdlkf</li>
              <li>lsdkdsdfsdfsdlkf</li>
              <li>lsdkdslkf</li>
              <li>lsdkdfsdflkf</li>
            </ul>
            TOTU
            <ul style="position: relative;">
              <li>kdqsmfl</li>
              <li>kdqsmlsdfs</li>
              <li>kdqsml</li>
              <li>kdqsmsdfl</li>
            </ul>
          </li>
          <li class="main_option" style="float: left;">
            TZTU
            <ul style="position: relative;">
              <li>lsdkdlkf</li>
              <li>lsdkdlkf</li>
              <li>lsdkdlkf</li>
              <li>lsdkdlkf</li>
            </ul>
            TDTU
            <ul style="position: relative;">
              <li>kdqsmlsdfsdfsdfsdfsdfsdfsd</li>
              <li>kdqsml</li>
              <li>kdqsml</li>
              <li>kdqsml</li>
            </ul>
          </li>
        </ul>
      </div>
      <div onmouseover="showTopMenu(3);" onmouseout="hideTopMenu(3);" id="menu_top_cat_3" class="child">
        Test 3
        <ul style="display: none;margin: 0px;" id="menu_top_3">
          <li class="main_option">A .</li>
          <li class="main_option">B .</li>
          <li class="main_option">C .</li>
        </ul>
      </div>
    </div>
  </body>
</html>

Inline dans les listes

CSS

Vue hybride

Discussions similaires

Partager

Partager