[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>
  58.     </ul>
  59.    </li>
  60.   </ul></center>
  61.   </div>
  62.   <div id="data"> </div>
  63.   <div id="message"></div>
  64.   <div id="foot">Anthony Hemon & Axilim - 2009</div>
  65. </div>
  66. </div>
  67. </body>
  68. </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";
  3. html, body {
  4. margin: 0;
  5. background-color:#E6E2AF;
  7. }
  9. #main {
  10. height:auto
  11. width:100%;
  12. padding:0px;
  13. }
  15. #front {
  16. width:auto;
  17. height:auto;
  18. background-color:#AEEE00;
  19. text-align:center;
  20. }
  23. #body{
  24. height:auto;
  25. width:100%;
  26. }
  29. #menu{
  30. height:auto;
  31. position: center;
  32. }
  34. #data{
  35. height:auto%;
  36. background-color:#B9121B;
  37. }
  39. #message{
  40. height:75px;
  41. background: #AEEE00;
  42. }
  44. #foot{
  45. margin: 0 0 0 0;
  46. bottom: 0;
  47. height:25px;
  48. background-color:#000000;
  49. }
  51. #menuDeroulant
  52. {
  53. list-style-type: none;
  54. margin: 0;
  55. padding: 0;
  56. border: 0;
  57. left : 0;
  58. text-align : center;
  59. }
  60. #menuDeroulant li
  61. {
  62. float: left;
  63. margin: 0;
  64. padding: 0;
  65. border: 0;
  66. }
  68. #menuDeroulant .sousmenu, .soussousmenu
  69. {
  70. display: none;
  71. list-style-type: none;
  72. margin: 0;
  73. padding: 0;
  74. border: 0;
  75. }
  76. #menuDeroulant .sousmenu li
  77. {
  78. float: none;
  79. margin: 0;
  80. padding: 0;
  81. border: 0;
  82. }
  83. #menuderoulant li,li ul li
  84. {
  85. float: left;
  86. width: 170px;
  87. margin: 0;
  88. padding: 0;
  89. border: 0;
  90. }
  91. #menuderoulant li a:link, #menuderoulant li a:visited
  92. {
  93. display: block;
  94. height: auto;
  95. color: #FFF;
  96. background: #3B4E77;
  97. margin: 0;
  98. padding: 4px 8px;
  99. border-right: 1px solid #fff;
  100. text-decoration: none;
  101. }
  102. #menuderoulant li a:hover { background-color: #F2462E; }
  103. #menuderoulant li a:active { background-color: #5F879D; }
  105. #menuderoulant .sousmenu li a:link,
  106. #menuderoulant .sousmenu li a:visited{
  107. display: block;
  108. color: #FFF;
  109. margin: 0;
  110. border: 0;
  111. text-decoration: none;
  112. }
  114. #menuDeroulant .sousmenu li a:hover{
  115. background-image: none;
  116. background-color: #F2462E;
  117. }
  119. #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