CSS - problemes de listes imbriquées

CSS - problemes de listes imbriquées - HTML/CSS - Programmation

Marsh Posté le 07-01-2006 à 14:36:27    

Bonjour,
 
j'essaie de construire un site en CSS mais je bute sur un probleme de chevauchement des éléments de menu.
je m'explique :
dans le menu une balise <dt> ouvre au click une autre balise <dd> et son contenu.

Code :
  1. <dt onclick="javascript:montre('smenu4');"><a href="#">&nbsp;&nbsp;Circuits Touristiques</a></dt>
  2. <dd id="smenu4">
  3.   <ul>
  4.       <li style="padding-bottom:40px;">&nbsp;<span style="color:#E3BBB1;">Programme Individuel :</span>
  5.         <ul>
  6.           <li><a href="<?php echo $level; ?>fr/agence-de-tourisme/circuit-8j.php">&nbsp;Circuit de 8 jours</a></li>
  7.           <li><a href="<?php echo $level; ?>fr/agence-de-tourisme/circuit-15j.php">&nbsp;Circuit de 15 jours</a></li>
  8.         </ul>
  9.       </li>
  10.       <li><a href="<?php echo $level; ?>fr/agence-de-tourisme/programme-groupe.php">&nbsp;Programme de Groupe</a></li>
  11.   </ul>
  12. </dd>


 
Le probleme est que la balise <ul> et son contenu (les deux <li>) dans programme individuel chevauche le contenu de la <li> juste en dessous (programme de groupe).
ceci, sous FF et Opera , par contre sous IE ça marche nickel (pour une fois)
 
je ne vois pas de solution j'essaie les padding et margin bottom mais en arrangeant le pbm. sous FF et OP, ça décale tout sous IE.
que faire? merci de votre coup de main  :)  
 
pour info, voici ce que j'aimerias que ça fasse : http://chorreradelindio.chez-alice.fr/tofs/01.gif, et ce que ça fait sous FF et OP : http://chorreradelindio.chez-alice.fr/tofs/02.gif
 
Milt

Reply

Marsh Posté le 07-01-2006 à 14:36:27   

Reply

Marsh Posté le 08-01-2006 à 14:46:26    

salut,
le sujet n'intéresse personne? ;)

Reply

Marsh Posté le 08-01-2006 à 15:04:36    

si au moins tu connais ton css, on saurais essayer de t'aider

Reply

Marsh Posté le 08-01-2006 à 15:19:05    

oui le voici, étourderie  :sweat:  

Code :
  1. dl, dt, dd, ul, li {
  2. margin: 0;
  3. padding: 0;
  4. background-color:#A8432B;
  5. list-style-type: none;
  6. }
  7. #menu {
  8. position: absolute;
  9. top: 108px;
  10. left: 98px;
  11. background-color: #A8432B;
  12. }
  13. dl#menu {
  14. width: 15em;
  15. width: 210px;
  16. padding-top: 10px;
  17. padding-bottom: 16px;
  18. }
  19. dl#menu dt {
  20. cursor: pointer;
  21. font-family: Verdana, Arial, Helvetica, sans-serif;
  22. font-size: 11px;
  23. color: #FFFFFF;
  24. text-align: left;
  25. width: 210px;
  26. margin: 2px 0;
  27. height: 20px;
  28. background: #A8432B;
  29. }
  31. /*dl#menu dd {
  32. border: 1px solid gray;
  33. }*/
  34. dl#menu li {
  35. background: #AD533E;
  36. font-size: 11px;
  37. height: 20px;
  38. /*line-height: 16px;*/
  39. padding-left: 15px;
  40. }
  41. dl#menu li a, dl#menu dt a {
  42. font-family: Verdana, Arial, Helvetica, sans-serif;
  43. color: #FFFFFF;
  44. text-decoration: none;
  45. display: block;
  46. border: 0 none;
  47. height: 100%;
  48. }
  49. dl#menu li a:hover, dl#menu dt a:hover {
  50. background: #CC7360;
  51. }

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed