Discussion :

[jibouze]

Bonjour,
je suis en train de créer des blocs contenant des listes (dans le cas présent la liste des villes), afin de simuler des select.
Je fais cela d'une aprt pour contourner le problème des select sous IE qui restent toujours au premier plan, et d'autre part pour pouvoir faire une vraie mise en forme.
Mon problème vient du fait que je veux fixer une hauteur à mon bloc, et afficher un scrolling si le nombre d'items est trop grand pour être affiché à l'écran (exactement comme un select quoi).
Sous IE, aucun problème. Sous Firefox, les items se superposent, rendant le contenu illisible.
Je ne vois pas du tout pourquoi et comment résoudre ce problème.
Si quelqu'un a une idée, n'importe laquelle, je suis preneur.

Voici le code :

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
 
 <div id='bloc_ville' style='width:180px;overflow:auto;height:100px;position:absolute;display:block;background-color:#999999;border:solid #777799 1px;'>
<a class='select' href=# onclick='choix_ville(3,"25000 Besançon")'>25000 Besançon</a>
<a class='select' href=# onclick='choix_ville(2,"33000 Bordeaux")'>33000 Bordeaux</a>
<a class='select' href=# onclick='choix_ville(4,"13000 Marseille I")'>13000 Marseille I</a>
<a class='select' href=# onclick='choix_ville(1,"75001 Paris I")'>75001 Paris I</a>
<a class='select' href=# onclick='choix_ville(1,"75001 Paris I")'>75001 Paris I</a>
<a class='select' href=# onclick='choix_ville(1,"75001 Paris I")'>75001 Paris I</a>
<a class='select' href=# onclick='choix_ville(1,"75001 Paris I")'>75001 Paris I</a>
<a class='select' href=# onclick='choix_ville(1,"75001 Paris I")'>75001 Paris I</a>
<a class='select' href=# onclick='choix_ville(1,"75001 Paris I")'>75001 Paris I</a>
<a class='select' href=# onclick='choix_ville(1,"75001 Paris I")'>75001 Paris I</a>
<a class='select' href=# onclick='choix_ville(1,"75001 Paris I")'>75001 Paris I</a>
<a class='select' href=# onclick='choix_ville(1,"75001 Paris I")'>75001 Paris I</a>
<a class='select' href=# onclick='choix_ville(1,"75001 Paris I")'>75001 Paris I</a>
<a class='select' href=# onclick='choix_ville(1,"75001 Paris I")'>75001 Paris I</a>
<a class='select' href=# onclick='choix_ville(1,"75001 Paris I")'>75001 Paris I</a>
<a class='select' href=# onclick='choix_ville(1,"75001 Paris I")'>75001 Paris I</a>
<a class='select' href=# onclick='choix_ville(1,"75001 Paris I")'>75001 Paris I</a>
<a class='select' href=# onclick='choix_ville(1,"75001 Paris I")'>75001 Paris I</a>
<a class='select' href=# onclick='choix_ville(1,"75001 Paris I")'>75001 Paris I</a>
</div>

Ce code fonctionne correctement si je ne place que 3,4 villes.

Merci d'avance

PS : Je quitte le boulot, je ne verrai vos réponses éventuelles que demain.

[francis m]

chez moi, sous firefox ou ie, la présentation est strictement pareille

ce que je reproche, c'est que tu n'aies pas de balise <br> entre chaque lien, et donc tu n'as pas une vraie liste déroulante car tes liens se suivent, mais cela te regarde

[jérôme]

Testé sous Mozilla 7.12 et IE5.01, fonctionne très bien.
Par contre, puisqu'il s'agit d'une liste de liens, pourquoi ne pas utiliser une .. liste

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
 <ul id='bloc_ville'  style='width:180px;overflow:auto;height:100px;position:absolute;display:block;background-color:#999999;border:solid #777799 1px;'>
<li><a class='select' href=# onclick='choix_ville(3,"25000 Besançon")'>25000 Besançon</a></li>
<li><a class='select' href=# onclick='choix_ville(2,"33000 Bordeaux")'>33000 Bordeaux</a></li>
<li><a class='select' href=# onclick='choix_ville(4,"13000 Marseille I")'>13000 Marseille I</a></li>
<li><a class='select' href=# onclick='choix_ville(1,"75001 Paris I")'>75001 Paris I</a></li>
<li><a class='select' href=# onclick='choix_ville(1,"75001 Paris I")'>75001 Paris I</a></li>
<li><a class='select' href=# onclick='choix_ville(1,"75001 Paris I")'>75001 Paris I</a></li>
<li><a class='select' href=# onclick='choix_ville(1,"75001 Paris I")'>75001 Paris I</a></li>
<li><a class='select' href=# onclick='choix_ville(1,"75001 Paris I")'>75001 Paris I</a></li>
<li><a class='select' href=# onclick='choix_ville(1,"75001 Paris I")'>75001 Paris I</a></li>
<li><a class='select' href=# onclick='choix_ville(1,"75001 Paris I")'>75001 Paris I</a></li>
<li><a class='select' href=# onclick='choix_ville(1,"75001 Paris I")'>75001 Paris I</a></li>
<li><a class='select' href=# onclick='choix_ville(1,"75001 Paris I")'>75001 Paris I</a></li>
<li><a class='select' href=# onclick='choix_ville(1,"75001 Paris I")'>75001 Paris I</a></li>
<li><a class='select' href=# onclick='choix_ville(1,"75001 Paris I")'>75001 Paris I</a></li>
<li><a class='select' href=# onclick='choix_ville(1,"75001 Paris I")'>75001 Paris I</a></li>
<li><a class='select' href=# onclick='choix_ville(1,"75001 Paris I")'>75001 Paris I</a></li>
<li><a class='select' href=# onclick='choix_ville(1,"75001 Paris I")'>75001 Paris I</a></li>
<li><a class='select' href=# onclick='choix_ville(1,"75001 Paris I")'>75001 Paris I</a></li>
<li><a class='select' href=# onclick='choix_ville(1,"75001 Paris I")'>75001 Paris I</a></li>
</ul>

[denisC]

Testé sous Mozilla 7.12 et IE5.01, fonctionne très bien.
Par contre, puisqu'il s'agit d'une liste de liens, pourquoi ne pas utiliser une .. liste

+1

[jibouze]

Oups. J'ai oublié de vous montrer le css de la balise a :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
a.select {
 	color:#000000;
 	display:block;
 	height:1%;
}
 
a.select:hover {
 	color:#ffffff;
 	background-color:#555555;
 	display:block;
 	height:1%;
}

Le problème venait du height:1%;
Je crois avoir mis ça à l'origine pour que la couleur de fond change sur toute la ligne, mais c'est inutile.

Par contre, les listes ne me permettent pas d'afficher comme je veux (il y a des comme des sauts de lignes entre chaque item).
Merci pour vos réponses, et pour vos tests, cela m'a permis de voir que j'avais codé mes classes comme un pied.

[francis m]

euh cela veut dire quoi

il y a comme des sauts de ligne entre chaque item

tu peux changer cela en gérant les propriétés padding et margin de tes li et ul

[jibouze]

Et bien, cela veut dire qu'avec des listes, j'ai des espaces assez importants entre 2 items (comme si j'avais effectué un saut de ligne).
Effectivement, je pourrais jouer sur les padding mais c'est finalement plus simple d'utiliser des <a>, avec un display:block;.