Se connecter avec
S'enregistrer | Connectez-vous

[resolu] liste html/css

Dernière réponse : dans Programmation

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

Lassé par la pub ? Créez un compte
Expert Programmation

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

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>

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.
Lassé par la pub ? Créez un compte

Répondre Créer un nouveau sujet

Tom's guide dans le monde