Se connecter / S'enregistrer
Votre question

[resolu] liste html/css

Tags :
  • Arrière plan
  • Programmation
Dernière réponse : dans Programmation
6 Juin 2008 15:34:21

bonjour
j'ai fait une liste qui me sert de menu pour mon site; c'est une liste en ligne avec déroulement des éléments au survol de la souris. mais j'ai 2 problèmes: mes éléments ne s'alignent pas avec le menu correspondant, les rendant ainsi impossible à cliquer.. et sous ie ils ne s'affichent pas.
Voici le code css:
  1. #navlist
  2. {
  3. border-bottom: 1px solid #ccc;
  4. margin: 0;
  5. padding-bottom: 19px;
  6. padding-left: 10px;
  7. }
  8.  
  9. #navlist li
  10. {
  11. display: inline;
  12. list-style-type: none;
  13. margin: 0;
  14. padding: 0;
  15. }
  16.  
  17. #navlist a:link, #navlist a:visited
  18. {
  19. background: #E8EBF0;
  20. border: 1px solid #ccc;
  21. color: #666;
  22. float: left;
  23. font-size: small;
  24. font-weight: normal;
  25. line-height: 14px;
  26. margin-right: 8px;
  27. padding: 2px 10px 2px 10px;
  28. text-decoration: none;
  29. }
  30.  
  31. #navlist a:link#current, #navlist a:visited#current
  32. {
  33. background: #fff;
  34. border-bottom: 1px solid #fff;
  35. color: #000;
  36. }
  37.  
  38. #navlist a:hover { color: #f00; }
  39.  
  40. #navlist li a
  41. {
  42. background: #fff;
  43. border-bottom: 1px solid #fff;
  44. color: #000;
  45. }
  46.  
  47. #navlist ul a
  48. {
  49. background: #fff;
  50. border: none;
  51. border-left: 1px solid #ccc;
  52. color: #999;
  53. font-size: smaller;
  54. font-weight: bold;
  55. line-height: 10px;
  56. margin-right: 4px;
  57. padding: 2px 10px 2px 10px;
  58. text-decoration: none;
  59. }
  60.  
  61. #navlist ul a:hover { color: #f00 !important; }
  62.  
  63.  
  64. #navcontainer {
  65. width: 800px;
  66. background: #ddd;
  67. }
  68.  
  69. body {
  70. background: #aaa;
  71. }
  72.  
  73. #navlist ul.sousMenu
  74. {
  75. position: absolute;
  76. top: 95px;
  77. }
  78.  
  79. #navlist .sousMenu
  80. {
  81. display: none;
  82. list-style-type: none;
  83. margin: 0;
  84. padding: 0;
  85. border: 0;
  86. }
  87.  
  88. #navlist .sousMenu li
  89. {
  90. border: 1px solid transparent;
  91. }
  92.  
  93. #navlist .sousMenu li a
  94. {
  95. background: #E8EBF0;
  96. border: 1px solid #ccc;
  97. color: #666;
  98. font-size: small;
  99. font-weight: normal;
  100. line-height: 14px;
  101. margin-right: 8px;
  102. padding: 2px 10px 2px 10px;
  103. text-decoration: none;
  104. width:100px;
  105. }
  106.  
  107. #navlist li:hover .sousMenu { display: block; }

et le html:
  1. <div id="navcontainer">
  2. <br>
  3. <br><br>
  4. <ul id="navlist">
  5. <li id="active"><a href="#" id="current">Item one</a></li>
  6. <li><a href="#">Item two</a>
  7. <ul class="sousMenu">
  8. <li><a href="#">test</a></li>
  9. <li><a href="#">test2</a></li>
  10. </ul>
  11. </li>
  12. <li><a href="#">Item three</a>
  13. <ul class="sousMenu">
  14. <li><a href="#">test3</a></li>
  15. <li><a href="#">test4</a></li>
  16. </ul>
  17. </li>
  18. <li><a href="#">Item four</a></li>
  19. <li><a href="#">Item five</a></li>
  20. <li><a href="#">Item 6</a></li>
  21. </ul>
  22. </div>


Voilà, merci pour votre aide.

Autres pages sur : resolu liste html css

a c 232 L Programmation
7 Juin 2008 19:15:55

IE ne reconnait pas :hover sur un élément de type <li>, il ne reconnait que sur les <a> si je ne m'abuse.
Il faut passer par du javascript si tu veux mettre un hover (en changeant de classe dans le onmouseover et le onmouseout), ou sinon mettre ton hover sur le lien
11 Juin 2008 15:44:47

merci OmaR_ShaRif
j'ai donc résolu mes 2 problèmes mais un 3eme est arrivé: lorsque mes menus se déroulent, tout le contenu par dessus lequel le menu doit se placer, se décale...
Vous comprendrez très vite ce que je veux dire en le voyant..

fichier css.css
#menuDeroulant
{
border-bottom: 1px solid #ccc;
margin: 0;
padding-bottom: 19px;
padding-left: 10px;
z-index: 100;
}

#menuDeroulant li
{
float: left;
list-style-type: none;
margin: 0;
padding: 0;
width: 100px;
}

#menuDeroulant li a:link, #menuDeroulant li a:visited
{
display: block;
background: #E8EBF0;
border: 1px solid #ccc;
color: #666;
font-size: small;
font-weight: normal;
line-height: 14px;
margin-right: 8px;
padding: 2px 10px 2px 10px;
text-decoration: none;
}

#menuDeroulant a:link#current, #menuDeroulant a:visited#current
{
background: #fff;
border-bottom: 1px solid #fff;
color: #000;
}

#menuDeroulant li a:hover
{
color: #f00;
background: #E0E0F0;
}

#menuDeroulant li a
{
background: #fff;
border-bottom: 1px solid #fff;
color: #000;
}

#menuDeroulant .sousMenu
{
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
}

#menuDeroulant .sousMenu li
{
list-style-type: none;
margin: 0;
padding: 0;
}

#menuDeroulant .sousMenu li a
{
background: #E8EBF0;
border: 1px solid #ccc;
color: #666;
font-size: small;
font-weight: normal;
line-height: 14px;
margin-right: 8px;
padding: 2px 10px 2px 10px;
text-decoration: none;
}

#menuDeroulant .sousMenu li a:hover
{
color: #f00;
background: #E0E0F0;
}

body
{
background: url(latte.gif) repeat-x top #EEEEEE fixed;
}

#navcontainer
{
width: 800px;
background: #E0E0E0;
}

#titre
{
background: url('pendule.jpg') no-repeat top;
height: 150px;
width: 800px;
}

#contenu
{
margin-left: 20px;
margin-right: 20px;
text-align: left;
width: 760px;
position: absolute;
top: 220px;
z-index: 0;
}

#content
{
z-index: 1;
}

span
{
padding-left:20px;
}

hr
{
color: #ccc;
background-color: #ccc;
border: 1px;
}

page.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!-- @import url(css.css);-->
</style>
</head>
<body>
<center>
<div id="navcontainer">
<br>
<div id="titre">
</div>
<ul id="menuDeroulant">
<li id="active"><a href="../index.html" id="current">Introduction</a></li>
<li style="width:9em;"><a href="fiche.html">Fiche synoptique</a></li>
<li style="width:8em;" onmouseover="document.getElementById('ssm1').style.display='block';" onmouseout="document.getElementById('ssm1').style.display='none';"><a href="javascript:void('0')">Etude théorique</a>
<ul class="sousMenu" style="display:none;" id="ssm1">
<li style="width:8em;"><a href="miseequation.html">Mise en équation</a></li>
<li style="width:8em;"><a href="maple.html">Etude sous Maple</a></li>
</ul>
</li>
<li style="width:12em;" onmouseover="document.getElementById('ssm2').style.display='block';" onmouseout="document.getElementById('ssm2').style.display='none';"><a href="javascript:void('0')">Construction du pendule</a>
<ul class="sousMenu" style="display:none;" id="ssm2">
<li style="width:12em;"><a href="difficultes.html">Difficultés</a></li>
<li style="width:12em;"><a href="construction.html">Construction</a></li>
<li style="width:12em;"><a href="resultats.html">Résultats</a></li>
</ul>
</li>
<li><a href="conclusion.html">Conclusion</a></li>
<li><a href="about.html">À propos</a></li>
</ul>
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipisci elit. Corrupte religionis, cohaerescant non ab et sentit ad non quod sit, ad leniat, displicet tritani, cum dicam accurate ratio, texit si contemnit, quidem legendum ipsum, homero reddidisti sed vitam ut.. In a, sciscat vituperandae amicitia adipiscendarum eius eamque sapienti accommodare volumus quod, discere igitur propositum mors, quorum sit ut excelsus ferentur autem facerem cum transferre illum ista a ita ut quam deorsus vero natura, quae ratione qua latina non non ne animos minus non a erit, efficiendi recte alii, de labitur.. Opes inermis continent et, impetum aut.
</div>
<br><br><br>

</div>
</center>
</body>
</html>
Contenus similaires
a c 232 L Programmation
12 Juin 2008 10:24:57

Hello,

Une solution peut être d'ajouter :
  1. #menuDeroulant li {
  2. ...
  3. position:relative;
  4. }
  5. #menuDeroulant .sousMenu {
  6. ...
  7. position:absolute;
  8. }
12 Juin 2008 14:43:48

Yop! ça marche! enfin, le fait de rajouter
#menuDeroulant .sousMenu {
...
position:absolute;
}
dans ie ça décale les menus déroulant vers la droite.. j'ai mis un
*html #menuDeroulant .sousMenu {
position:static;
}
et ça s'affiche au bon endroit.. mais quand un menu déroule, tout le contenu de la page pars vers la bas..!
enfin, j'ai ie6, je sais pas ce que ça donne avec le 7.
a c 232 L Programmation
12 Juin 2008 16:19:42

Edit : c'est parce que pour qu'il puisse passer au dessus, il faut qu'il soit en position absolute, ou sinon en float.
je sais pas quoi faire là pour IE6
12 Juin 2008 19:42:22

merci pour tout OmaR_ShaRif.
j'ai essayé des float et position, ça marche pas; tant pis pour les gens qui veulent pas utiliser FF!
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS