Menu en DIV (id ou class ?)

Menu en DIV (id ou class ?) - HTML/CSS - Programmation

Marsh Posté le 22-03-2009 à 15:56:37    

Bonjour à tous,
Je remet un peu à jour certains de mes sites (qui étaient avec des <table> ) pour les mettres à jour en DIV... Seulement voilà, je suis un peu paumé ...
Je voudrais faire un menu tout simple (Accueil, Nos Collections) avec un systeme de RollOver sur ces boutons ...
 
J'avais commencé mes css comme ci-dessous :
 

Code :
  1. #navbar{
  2. width:auto;
  3. display:block;
  4. height:19px;
  5. padding-left:125px;
  6. border-top-width: 1px;
  7. border-bottom-width: 1px;
  8. border-top-style: solid;
  9. border-bottom-style: solid;
  10. border-top-color: #A7AFB1;
  11. border-bottom-color: #A7AFB1;
  12. }
  13. #nav01 a:link {
  14. font-family:Verdana, Geneva, sans-serif;
  15. font-size:11px;
  16. text-align:center;
  17. text-decoration:none;
  18. color:#CCC;
  19. display:block;
  20. position:relative;
  21. top:2px;
  22. left:2px;
  23. width:100px;
  24. height:15px;
  25. }
  26. #nav01 a:hover {
  27. font-family:Verdana, Geneva, sans-serif;
  28. font-size:11px;
  29. text-decoration:none;
  30. color:#CCC;
  31. display:block;
  32. width:100px;
  33. height:15px;
  34. border: 1px solid #A7AFB1;
  35. position:relative;
  36. top:1px;
  37. left:1px;
  38. text-align:center;
  39. background-color:#333;
  40. }
  41. #nav02 a:link {
  42. font-family:Verdana, Geneva, sans-serif;
  43. font-size:11px;
  44. text-align:center;
  45. text-decoration:none;
  46. color:#CCC;
  47. display:block;
  48. position:relative;
  49. top:1px;
  50. left:107px;
  51. width:150px;
  52. height:15px;
  53. }
  54. #nav02 a:hover {
  55. font-family:Verdana, Geneva, sans-serif;
  56. font-size:11px;
  57. text-decoration:none;
  58. color:#CCC;
  59. display:block;
  60. width:150px;
  61. height:15px;
  62. border: 1px solid #A7AFB1;
  63. position:relative;
  64. top:1px;
  65. left:106px;
  66. text-align:center;
  67. background-color:#333;
  68. }


 
Mon probleme est qu'un décalage s'opère entre Accueil et le reste (dans l'ex ci-dessous seul deux rubriques sont dispo ... mais j'ai encore 4 autres rubriques a mettre dans le menu ...
 
http://camelot-web.com/siteweb.gif
 
En clair donc j'aimerais faire un menu avec chaque rubriques qui aurait une largeur distincte, mais bordure et couleur de fond en survol identique ...  
 
Merci pour votre aide !
 
Bonne Journée

Reply

Marsh Posté le 22-03-2009 à 15:56:37   

Reply

Marsh Posté le 23-03-2009 à 09:02:37    

Bonjour,

Citation :

CSS : CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique...


Cela veut dire que si tu mets une couleur verte à <p> alors toutes tes balises <p> auront une couleur de texte verte par défaut.

 

Cela permet aussi d'écrire beaucoup moins de code pour la même chose. Par exemple :

Code :
  1. leNomDeTaBalise [id^="nav0"] {
  2. font-family:Verdana, Geneva, sans-serif;
  3. font-size:11px;
  4. text-align:center;
  5. text-decoration:none;
  6. color:#CCC;
  7. display:block;
  8. }


Ce code te permettra d'avoir les mêmes balise dont l'id commence par "nav0"

 

Ensuite pour ton souci, si ta #navbar est une <ul> et tes "nav0" des <li> ajoute un "float : left" à #navbar et supprime ces "position : relative" aux "nav0"

 

Un lien vers le site ou le code html de la section sera pas mal si tu veux plus d'aide.


Message édité par kurt11 le 23-03-2009 à 09:23:42
Reply

Sujets relatifs:

Leave a Replay

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