[CSS] Menu verticale, sous menu horizontale

Menu verticale, sous menu horizontale [CSS] - HTML/CSS - Programmation

Marsh Posté le 13-01-2009 à 16:40:41    

Bonjours,
Voici le code html :

Code :
  1. <html>
  2. <head>
  3. <title>Haras de l'abaye</title>
  4. <style type="text/css" media="all">
  5. @import url("css/stylesheet.css" );
  6. </style>
  7. </head>
  8. <body>
  9. <div id="main">
  10. <div id="front">
  11.  <img src="http://site.voila.fr/elevagedelabbaye/images/banniere.jpg">
  12. </div>
  13. <div id="body">
  14.   <div id="menu">
  15.   <center>
  16.   <ul id="menuderoulant">
  17.    <li> <a href="#">Consultation/Modification</a>
  18.     <ul class="sousmenu">
  19.      <li> <a href="#">Chevaux</a></li>
  20.      <li> <a href="#">Propriétaire</a></li>
  21.      <li> <a href="#">Ecurie</a></li>
  22.     </ul>
  23.    </li>
  24.    <li> <a href="#">Nouveau</a>
  25.     <ul class="sousmenu">
  26.      <li> <a href="#">Contrat</a></li>
  27.      <li> <a href="#">Cheval</a></li>
  28.      <li> <a href="#">Propriétaire</a></li>
  29.      <li> <a href="#">Traitement</a></li>
  30.      <li> <a href="#">Ecurie</a></li>
  31.      <li> <a href="#">Veterinaire</a></li>
  32.     </ul>
  33.    </li>
  34.    <li> <a href="#">Statistique</a>
  35.     <ul class="sousmenu">
  36.      <li> <a href="#">Cheval</a></li>
  37.      <li> <a href="#">Propriétaire</a></li>
  38.     </ul>
  39.    </li>
  40.    <li> <a href="#">Facture</a>
  41.     <ul class="sousmenu">
  42.      <li> <a href="#">Cheval</a></li>
  43.      <li> <a href="#">Propriétaire</a></li>
  44.     </ul>
  45.    </li>
  46.    <li> <a href="#">Paramétre</a>
  47.     <ul class="sousmenu">
  48.      <li> <a href="#">Ajouter/Modifier/Supprimer</a>
  49.       <ul class="sousmenu">
  50.         <li> <a href="#">Un type de soin</a></li>
  51.         <li> <a href="#">Un type de service</a></li>
  52.         <li> <a href="#">Un type de contrat</a></li>
  53.         <li> <a href="#">Une race</a></li>
  54.         <li> <a href="#">Un type de tarification</a></li>
  55.       </ul>
  56.      </li>
  57.     </ul>
  58.    </li>
  59.   </ul></center>
  60.   </div>
  61.   <div id="data"> </div>
  62.   <div id="message"></div>
  63.   <div id="foot">Anthony Hemon & Axilim - 2009</div>
  64. </div>
  65. </div>
  66. </body>
  67. </html>


Message édité par Bilbo248 le 13-01-2009 à 16:41:05

---------------
Photographie d'amateur |--| Stats BDPV - Photovoltaique
Reply

Marsh Posté le 13-01-2009 à 16:40:41   

Reply

Marsh Posté le 13-01-2009 à 16:41:19    

Voici le css :

Code :
  1. @charset "utf-8";
  2. html, body {
  3. margin: 0;
  4. background-color:#E6E2AF;
  5. }
  6. #main {
  7. height:auto
  8. width:100%;
  9. padding:0px;
  10. }
  11. #front {
  12. width:auto;
  13. height:auto;
  14. background-color:#AEEE00;
  15. text-align:center;
  16. }
  17. #body{
  18. height:auto;
  19. width:100%;
  20. }
  21. #menu{
  22. height:auto;
  23. position: center;
  24. }
  25. #data{
  26. height:auto%;
  27. background-color:#B9121B;
  28. }
  29. #message{
  30. height:75px;
  31. background: #AEEE00;
  32. }
  33. #foot{
  34. margin: 0 0 0 0;
  35. bottom: 0;
  36. height:25px;
  37. background-color:#000000;
  38. }
  39. #menuDeroulant
  40. {
  41. list-style-type: none;
  42. margin: 0;
  43. padding: 0;
  44. border: 0;
  45. left : 0;
  46. text-align : center;
  47. }
  48. #menuDeroulant li
  49. {
  50. float: left;
  51. margin: 0;
  52. padding: 0;
  53. border: 0;
  54. }
  55. #menuDeroulant .sousmenu, .soussousmenu
  56. {
  57. display: none;
  58. list-style-type: none;
  59. margin: 0;
  60. padding: 0;
  61. border: 0;
  62. }
  63. #menuDeroulant .sousmenu li
  64. {
  65. float: none;
  66. margin: 0;
  67. padding: 0;
  68. border: 0;
  69. }
  70. #menuderoulant li,li ul li
  71. {
  72. float: left;
  73. width: 170px;
  74. margin: 0;
  75. padding: 0;
  76. border: 0;
  77. }
  78. #menuderoulant li a:link, #menuderoulant li a:visited
  79. {
  80. display: block;
  81. height: auto;
  82. color: #FFF;
  83. background: #3B4E77;
  84. margin: 0;
  85. padding: 4px 8px;
  86. border-right: 1px solid #fff;
  87. text-decoration: none;
  88. }
  89. #menuderoulant li a:hover { background-color: #F2462E; }
  90. #menuderoulant li a:active { background-color: #5F879D; }
  91. #menuderoulant .sousmenu li a:link,
  92. #menuderoulant .sousmenu li a:visited{
  93. display: block;
  94. color: #FFF;
  95. margin: 0;
  96. border: 0;
  97. text-decoration: none;
  98. }
  99. #menuDeroulant .sousmenu li a:hover{
  100. background-image: none;
  101. background-color: #F2462E;
  102. }
  103. #menuderoulant li:hover > .sousmenu { display: block; }


 
Le problème, mon sous menu verticale s'affiche bien, mais le sous sous menu s'affiche de manière verticale, je voudrais qu'il s'affiche de maniére horizontale.. ( <li> paramétre ), j'ai trouvé un tuto pour le faire, http://www.siteduzero.com/tutoriel [...] n-css.html
Mais je n'ai pas réussi à avoir le résultat escompter, je ne maitrise pas du tout css.. il y a des choses que je comprend et d'autre pas..  
ps : ce css là, et le fruit d'un autre tutoriel.
 
Merci à toi si tu t'arrête par ici :p


Message édité par Bilbo248 le 13-01-2009 à 16:44:55

---------------
Photographie d'amateur |--| Stats BDPV - Photovoltaique
Reply

Marsh Posté le 13-01-2009 à 17:11:47    

Si mes souvenir sont correctes, tu dois définir le display en mode "in-line" pour ta classe li.

Reply

Marsh Posté le 13-01-2009 à 17:29:28    

J'ai reussi à afficher çà plutot proprement en rusant..
J'ai rajouté la classe style "sous" à mon sous sous menu paramétre,

Code :
  1. #menuderoulant .sous {
  2. position :absolute;
  3. margin-left:200px;
  4. margin-top: -35px;}


Sinon le display:in-line tu le mettrai à qu'elle ligne ?
Merci de ton aide  
Maintenant je voudrais centré mon menu :/


Message édité par Bilbo248 le 13-01-2009 à 17:29:59

---------------
Photographie d'amateur |--| Stats BDPV - Photovoltaique
Reply

Marsh Posté le 13-01-2009 à 17:50:37    

Tu ajoutes l'attribut "align" dans la class qui contient ton menu.
 
exemple:
.maclassmenu
{
     align: center;
}

Reply

Sujets relatifs:

Leave a Replay

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