Besoin d'un coup de pouce en css (menu horizontal)

Besoin d'un coup de pouce en css (menu horizontal) - HTML/CSS - Programmation

Marsh Posté le 06-06-2009 à 21:58:34    

Bonjour,

 

j'ai appris le css cette semaine, et j'essaie de faire un petit site pour m'entrainer.
C'est surement tout bête mais je suis dessus depuis une partie de l'après midi et ça m'agace.

 

Voila où j'en suis:

 
Code :
  1. <div id="ban">
  2. </div>
  3. <div id="menuh">
  4.  <ul class="nav">
  5.   <li><a href="#" title="Accueil">Accueil</a></li>
  6.   <li><a href="#" title="Tagada">Tagada</a></li>
  7.   <li><a href="#" title="Tsouin-tsouin">Tsouin-tsouin</a></li>
  8.  </ul>
  9. </div>
 
Code :
  1. body
  2. {
  3. width:1024px;
  4. margin:auto;
  5. margin-top:10px;
  6. margin-bottom:10px;
  7. background-color: #de7c17;
  8. }
  9. #ban
  10. {
  11. width: 1024px;
  12. height: 100px;
  13. background-image: url("img/ban.jpg" );
  14. background-repeat: no-repeat;
  15. border: 2px solid #000000;
  16. margin-bottom: 5px;
  17. }
  18. #menuh
  19. {
  20. float:right;
  21. margin-right: 0px ; /*on dirait que ça sert à rien */
  22. }
  23. .nav
  24. {
  25. list-style: none ;
  26. margin: 0px ;
  27. margin-left: 2px; /* on dirait que ça sert à rien non plus*/
  28. padding: 0px ;
  29. overflow: hidden ;
  30. }
  31. .nav li
  32. {
  33. float: right ;
  34. width: 200px ;
  35. border: 2px solid #600000 ;
  36. color: #fff000 ;
  37. background: #c00000 ;
  38. }
  39. .nav li a
  40. {
  41. display: block ;
  42. background: #c00 ;
  43. color: #fff000 ;
  44. font: 1em serif ;
  45. line-height: 1em ;
  46. padding: 4px;
  47. text-align: center ;
  48. text-decoration: none ;
  49. }
  50. .nav li a:hover, .nav li a:focus, .nav li a:active
  51. {
  52. background: #900000 ;
  53. text-decoration: none ;
  54. }
 

voila mon petit problème:
la bannière fait 1024*100
Et le menu et un tout petit peu décalé à gauche par rapport à l'extrémité de la bordure de la bannière.
comment faire pour que ça soit bien aligné?
De même je voudrais 1px entre chaque partie du menu, je n'y arrive pas, les bordures sont collées.
Et pour finir, je voudrais mettre un bandeau rouge sur tout la longueur du menu, et qui continue jusqu'à la gauche, au niveau de la bannière.
J'ai essayé plusieurs choses mais ça ne marche pas, auriez vous une idée ?

 

De même si vous trouvez des choses inutiles ou qui sont en conflits entre elles, je suis preneur, où même une mauvaise habitude, je suis preneur.

 

Une petite question aussi: pourquoi le menu apparait à l'envers? Bon ça ça se répare facilement, il suffit de changer l'ordre de la liste, mais c'est curieux comme comportement.

 

Merci beaucoup.

 


edit: une petite image:
http://img13.imageshack.us/img13/4960/85883553.jpg


Message édité par Tangrim le 06-06-2009 à 22:08:09

---------------
Des Bisous et des nounours ! | Internet 2025 | Dungeon-Generator
Reply

Marsh Posté le 06-06-2009 à 21:58:34   

Reply

Marsh Posté le 07-06-2009 à 10:39:49    

Déjà, pour le rouge, et pour le décalage, essaye çà :

Code :
  1. menuh
  2. {
  3.    float: right;
  4.    margin: 0; /* Essaye margin 0, à tout hasard */
  5.    width: 1024px; /* on prend toute la place dispo
  6.    J'ai pas mis 100%, je sais pas si "menuh" est dans un conteneur. */
  7. }


 
Je pense que ton menu apparait à l'envers à cause du float: right du .nav li, vire le.

Reply

Marsh Posté le 07-06-2009 à 21:07:23    


Merci pour ta réponse, mais si je l'enlève je n'ai plus je n'ai plus de menu horizontal.
Tes changements n'ont rien changé dans ma page malheureusement.


---------------
Des Bisous et des nounours ! | Internet 2025 | Dungeon-Generator
Reply

Marsh Posté le 08-06-2009 à 15:40:12    

Tu dois mette des éléments de liste en display:inline
et pour ton écart, c'est normal, tu dois resetter les valeurs des éléments
http://www.alsacreations.com/astuc [...] t-css.html

Reply

Marsh Posté le 08-06-2009 à 17:27:55    

+1

Reply

Sujets relatifs:

Leave a Replay

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