[XHTML, CSS] Menu avec des balises li et ul

Menu avec des balises li et ul [XHTML, CSS] - HTML/CSS - Programmation

Marsh Posté le 24-10-2005 à 19:26:39    

Salut à tous,
 
J'ai quelques problèmes pour finaliser mon menu en css, mon objectif étant d'arriver à ça
 
Je suis novice avec l'utilisation des ul et des li en css, et je commence à en avoir mal à la tête. Ce serait très sympa de votre part si vous pouviez m'aider. Merci d'avance :)
 
Ma page de test, du code tout bete:
 

Code :
  1. <html>
  2. <head>
  3. <link href="style2.css" type="text/css" rel="stylesheet" />
  4. </head>
  6. <body>
  8. <ul class="nav">
  10. <ul>Accueil</ul>
  12. <ul>Menu1</ul>
  14. <ul>
  16.  <li>sousmenu1</li>
  17.  <li>sousmenu2</li>
  18.  <li>sousmenu3</li>
  19.  <li>sousmenu4</li>
  20. </ul>
  22. <ul>Menu2</ul>
  25. <ul>
  26.  <li>sousmenu1 </li>
  27.  <li>sousmenu2</li>
  28.  <li>sousmenu3</li>
  29.  <li>sousmenu4</li>
  30. </ul>
  32. <ul>Menu3</ul>
  34. <ul>
  35.  <li>sousmenu1 </li>
  36.  <li>sousmenu2</li>
  37.  <li>sousmenu3</li>
  38.  <li>sousmenu4</li>
  39. </ul>
  41. <ul>Menu4</ul>
  42. <ul>Menu5</ul>
  45. </ul>
  47. </body>
  48. </html>


 
Mon code css:

Code :
  1. body
  2. {
  3. font-weight: bold;
  4. font-family: arial;
  5. font-size: 12px;
  6. color: #FFFFFF;
  7. }
  9. ul.nav, .nav ul
  10. {
  11. padding: 0;
  12. margin: 0;
  14. list-style-image: url(images/icone-main.bmp);
  15. background: url(./images/fond-main.bmp) no-repeat;
  16. cursor: default;
  18. display: block;
  20. width: 161px;
  21. }
  23. ul li.nav, .nav ul li
  24. {
  25. padding: 0;
  26. margin: 0;
  28. list-style-image: url(images/icone-sub.bmp);
  29. background: url(./images/fond-menu.bmp) repeat;
  30. cursor: default;
  32. display: block;
  33. }

Reply

Marsh Posté le 24-10-2005 à 19:26:39   

Reply

Marsh Posté le 24-10-2005 à 19:43:03    

:pfff:  
<ul>blah blah</ul>
c'est  :heink:  
 
tu devrait peut etre regarde du cote des listes de definitions <dd> <dt> <dl>


---------------
D3
Reply

Marsh Posté le 24-10-2005 à 21:24:07    

wouhou merci du conseil, je ne connaissais pas ces balises mais je suis arrivé à ce que je voulez en 15 fois plus simple... merci encore !

Reply

Marsh Posté le 24-10-2005 à 21:41:58    

Il faut que tu agrandisses les marges internes de tes li et que tu places des images en arrière plan de tes li en les décalant là où tu veux.
 
Edit : #FFFFFF peut être remplacé par #FFF

Message cité 1 fois
Message édité par CNeo le 24-10-2005 à 21:51:39
Reply

Marsh Posté le 25-10-2005 à 11:59:31    

FAUT QUE TU fasses marcher ton ceaveau
et on met que des LI dans un UL, rien d'autre.
 
donc ca ferai :  

Code :
  1. <ul>
  2.   <li>
  3.     <ul>
  4.       <li></li>
  5.       <li></li>
  6.       <li></li>
  7.       <li></li>
  8.     </ul>
  9.   </li>
  10.   <li></li>
  11.   <li>
  12.     <ul>
  13.       <li></li>
  14.       <li></li>
  15.       <li></li>
  16.       <li></li>
  17.     </ul>
  18.   </li>
  19. </ul>


base toi sur listamatic http://css.maxdesign.com.au/listamatic/index.htm


---------------
Les CSS c'est bon mangez-en
Reply

Marsh Posté le 25-10-2005 à 12:16:22    

CNeo a écrit :

Il faut que tu agrandisses les marges internes de tes li et que tu places des images en arrière plan de tes li en les décalant là où tu veux.
 
Edit : #FFFFFF peut être remplacé par #FFF


 
 :hello:  :hello: On pourrait peut-être me remercier!!! Mon truc marche.

Message cité 1 fois
Message édité par CNeo le 25-10-2005 à 12:17:58
Reply

Marsh Posté le 25-10-2005 à 18:36:39    

CNeo a écrit :

:hello:  :hello: On pourrait peut-être me remercier!!! Mon truc marche.


faudrait d'abord qu'il corrige sa sémantique.
 
et puis le mieux c'est de virer toutes les marges dès le début :  
 
#identifiant,#identifiant *  {
  margin:0; padding:0
}


---------------
Les CSS c'est bon mangez-en
Reply

Sujets relatifs:

Leave a Replay

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