[CSS] list à largeur variable

Version imprimable

Bonjour,

j'ai une liste qui me sert de menu,
j'essaie de faire des largeurs variables mais rien y fait :(

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
 
<div id="menu">
 <ul>
   <li >
    <a href="#" id="menu_0">menu 1</a>
   </li>
 
   <li>
    <a href="#" id="menu_1">menu 2</a> 
   </li>
 
   <li>
    <a href="#" id="menu_2">menu 3</a>
   </li>
 
   <li>
    <a href="#" id="menu_3">menu 4</a>
 
   </li> 
 
   <li>
    <a href="#" id="menu_4">menu 5</a>
   </li>
 
   <li>
    <a href="#" id="menu_5">menu 6</a>
   </li>
 
   <li>
    <a href="#" id="menu_6">menu 7</a>
   </li>
 
  </ul>
</div>

le css

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
/* premier niveau */
div#menu {clear:both; margin-bottom: 2px;}
div#menu ul {width: 956px;height:30px;float:left;margin:0px;padding:0px;list-style:none;background-image:url(../img/background_menu.gif);background-repeat:repeat-x;}
div#menu ul li {display:inline;}
div#menu ul li a {text-decoration:none;font-size:13px;font-weight:bold;color: #FFFFFF;text-align:center;line-height:30px;}
/* parents */
#menu_0{width:99px; border-right:1px solid black;}
#menu_1{width:178px; border-left:1px solid #b7bbd8;border-right:1px solid black;}
#menu_2{width:186px; border-left:1px solid #b7bbd8;border-right:1px solid black;}
#menu_3{width:167px; border-left:1px solid #b7bbd8;border-right:1px solid black;}
#menu_4{width:76px; border-left:1px solid #b7bbd8;border-right:1px solid black;}
#menu_5{width:151px; border-left:1px solid #b7bbd8;border-right:1px solid black;}
#menu_6{width:86px; border-left:1px solid #b7bbd8;}

03/05/2006, 15h01
franculo_caoulene

Salut,

Largeur variable??? Qu'est-ce que c'est censé donné?
03/05/2006, 15h03
laurent_h

un menu horizontal tout simplement
03/05/2006, 15h06
crazy-spans
Citation:

Envoyé par laurent_h

Bonjour,
#menu_0{width:99px; border-right:1px solid black;}

je dirais:
Code:

1 2 3 4 ... #menu_0 {display:block; width:99px; border-right:1px solid black;} ...
peu académique mais bon... ;)

@+
03/05/2006, 15h17
franculo_caoulene

Pas sûr que ça fonctionne et que ce soit possible. Je pense que c'est <ul> qui définit la largeur.

Merci de votre aide, voici la solution,
c'est de mettre float left pour les a

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
/* premier niveau */
div#menu {margin-bottom: 2px;}
div#menu ul {width: 956px;height:30px;margin:0px;padding:0px;list-style:none;background-image:url(../img/background_menu.gif);background-repeat:repeat-x;}
div#menu ul li {display:inline;margin:0;padding:0;}
div#menu ul li a {float:left;text-decoration:none;font-size:13px;font-weight:bold;color: #FFFFFF;text-align:center;line-height:30px;}
/* parents */
#menu_0{width:99px; border-right:1px solid black;}
#menu_1{width:178px; border-left:1px solid #b7bbd8;border-right:1px solid black;}
#menu_2{width:186px; border-left:1px solid #b7bbd8;border-right:1px solid black;}
#menu_3{width:167px; border-left:1px solid #b7bbd8;border-right:1px solid black;}
#menu_4{width:76px; border-left:1px solid #b7bbd8;border-right:1px solid black;}
#menu_5{width:151px; border-left:1px solid #b7bbd8;border-right:1px solid black;}
#menu_6{width:86px; border-left:1px solid #b7bbd8;}

Merci encore:)