Discussion :

[PuppeT mAsTer]

Bonjour à tous, j'ai réalisé un menu déroulant, en utilisant une feuille de style CSS cependant mon menu ne me convient pas car la largeur des sous liste ou sous menu est la même que celle des menus principaux. Jespère que je me suis bien fait comprendre , enfin j'aimerai que la largeur des sous menus soit supérieur à celle des menus principaux car le texte des sous menus et plus long que celui des menus principaux. Comment puis je faire ça, est ce faisable avec une feuille de style ou dois je obligatoirement utiliser des calques ?
Si je ne peux qu'utiliser les calques pouvez vous m'indiquer un bon tutorial sur leur utilisation et si possible dans le cas de la création d'un menu

Merci d'avance


PM

[<romain/>]

bonjour,

C'est quoi pour toi la difference entre l'utilisation des feuilles de style et des calques?

Parceque en fait ce que l'on appelle calques souvent (par abus de langage) c'est les div styler par une feuille css.

DOnc oui il te faudra utiliser les css pour faire ce que tu veux.

Tu peux nous montrer ton codes(x)html et ton code css?

<romain/>

[PuppeT mAsTer]

Je n'ai justement pas utilisé de div car je ne sais pas vraiment ce que c'est encore et je pense que pour faire ce que je veux j'en ai besoin.

Voici le code 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
 
	<ul id="menuderoulant">
	  <li><a href="#">RADIO</a>
	   <ul class="sousmenu">
		<li><b>EMISSIONS</b></font></li>
		<li><a href="#">Debout Lyon</a></li>
		<li><a href="#">Le Denis Show</a></li>
		<li><a href="#">Le Club</a></li>
 
		<li><b>ANTENNE</b></li>
		<li><a href="#">La grille des programmes</a></li>
		<li><a href="#">Animateurs</a></li>
		<li><a href="#">La Rédac'</a></li>
		<li><a href="#">La Direction</a></li>
		<li><a href="#">Contactez-nous</a></li>
	   </ul>
	  </li>
	  <li><a href="#">BREVES</a></li>
	  <li><a href="#">MUSIC</a>
	   <ul class="sousmenu">
		<li><a href="#">Ecoutez en live</a></li>
		<li><a href="#">La playlist</a></li>
		<li><a href="#">Les 5 Hits du moment</a></li>
	   </ul>
	  </li>
	  <li><a href="#">SPORT</a>
	   <ul class="sousmenu">
		<li><b>RESULTATS</b></li>
		<li><a href="#">Olympique Lyonnais</a></li>
		<li><a href="#">Adecco ASVEL</a></li>
		<li><a href="#">LOU</a></li>
		<li><a href="#"><b>CALENDRIERS</b></a></li>
		<li><b>LE DIRECT</b></li>
		<li><a href="#">Olympique Lyonnais</a></li>
		<li><a href="#">Adecco ASVEL</a></li>
		<li><a href="#">LOU</a></li>
 
	   </ul>
	  </li>
	  <li><a href="#">BLOGS</a>
	    <ul class="sousmenu">
		<li><a href="#">Bloghs</a></li>
		<li><a href="#">Les Forums</a></li>
		<li><a href="#">Le Tchat</a></li>
	    </ul>
	  </li>
	  <li><a href="#">AGENDA</a></li>
	  <li><a href="#">PHOTOS</a></li>
	  <li><a href="#">INTERVIEWS</a></li>
	  <li><a href="#">OFFRE EMPLOI</a></li>
	</ul>

et celui de la feuille de style

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
#menuderoulant {
               width: 1020px;
               list-style-type: none;
               margin: 0;
               padding: 0;
               border: 0;
}
#menuderoulant li
{
 float: left;
 width: 113px;
 height: auto;
 text-align: center;
 text-decoration: none;
 margin: 0;
 padding: 0;
 border: 0;
 
}
 
#menuderoulant li:hover > .sousmenu { display: block; }
 
#menuderoulant li a:link,
#menuderoulant li a:visited,
#menuderoulant li a:hover
{
  display: block;
  height: auto;
  color: #ffa900;
  margin: 0;
  padding: 6px 6px;
  font-weight: bold;
}
#menuderoulant .sousmenu {
 display: none;
 list-style-type: none;
 margin: 0;
 padding: 0;
 border: 0;
 background: url("fondmenu.png") repeat;
}
#menuderoulant .sousmenu li {
 float: none;
 margin: 0;
 padding: 2px 0px;
 border: 0;
 width: 112px
 border-top:1px solid transparent
 border-right:1px solid transparent
}
#menuderoulant .sousmenu li a:link,
#menuderoulant .sousmenu li a:visited,
#menuderoulant .sousmenu li a:hover
{
  display: block;
  text-align: left;
  font-weight: normal;
  margin: 0;
  border: 0;
  text-decoration: none;
}

[PuppeT mAsTer]

Un nouveau pb est survenu en plus car ce menu est destiné à être inséré dans un tableau et donc la taille de la cellule de mon tableau varie en fonction de la hauteur des menus ce qui est donc très laid. Jimagine que c'est du à la méthode que j'ai utilisé. Merci de m'orienté sur une autre piste.


++

PM