probleme avec menu (css + xhtml)

probleme avec menu (css + xhtml) - HTML/CSS - Programmation

Marsh Posté le 27-08-2004 à 18:43:10    

J'ai un probleme avec les bordures de mon menu, lorsque je survole un lien le "marging" du bas disparrait avec IE (pas sous mozilla).
 
-> TEST
 
http://romain.2dlb.com/divers/01.png http://romain.2dlb.com/divers/02.png
 
 :pt1cable:

Reply

Marsh Posté le 27-08-2004 à 18:43:10   

Reply

Marsh Posté le 28-08-2004 à 15:20:56    

Code :
  1. #left {
  2. text-align: left;
  3. float: left;
  4. width: 150px;
  5. }
  7. #menu {
  8. font-family: Verdana, Arial;
  9. font-size: 10px;
  10. font-weight: bold;
  11. color: #a7a7a7;
  12. text-decoration: none;
  13. text-align: left;
  14. padding: 10px;
  15. border-width: 1px;
  16. border-style: dashed;
  17. border-color: #a7a7a7;
  18. margin: 10px;
  19. background-color: #ffffff;
  20. background-image: url(content/table_back.png);
  21. }
  23. #menubg {
  24. background-color: #999999;
  25. border-width: 1px;
  26. border-style: dashed;
  27. border-color: #a7a7a7;
  28. float: left;
  29. width: 130px;
  30. }
  32. #menu a {
  33. font-family: Verdana, Arial;
  34. font-size: 10px;
  35. font-weight: bold;
  36. color: #a7a7a7;
  37. text-decoration: none;
  38. }
  40. #menu a:hover {
  41. font-size: 10px;
  42. color: #999999;
  43. font-family: Verdana;
  44. background-color: #cccccc;
  45. text-decoration: none;
  46. }


 
je vois pas en quoi le fait de passer sur un lien du menu peut interférer dans le marging bottom de mon div menu.  :fou: (saleté d'IE)
 
quelqu'un a une idée?


Message édité par fitterashes le 29-08-2004 à 01:05:57
Reply

Marsh Posté le 28-08-2004 à 15:56:58    

dans le "a:hover" pourquoi tu respécifies des attributs qui sont déjà dans les "a" ?

Reply

Marsh Posté le 28-08-2004 à 18:20:16    

exact, mais bon ca change rien.

Reply

Marsh Posté le 30-08-2004 à 12:07:26    

http://yelims.free.fr/Coucou/Coucou20.gif

Reply

Marsh Posté le 30-08-2004 à 16:52:16    

Je t'ai fait ça. J'espère que tu pourras en tirer partie.
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. <title>Youpi</title>
  6. <style type="text/css">
  7. body {
  8. background: #FFF;
  9. color: #EEE;
  10. font-size: 10px;
  11. font-family: verdana;
  12. }
  13. div#left {
  14. text-align: center;
  15. float: left;
  16. width: 150px;
  17. }
  19. div#menubg {
  20. background: #999999;
  21. border: 1px dashed #a7a7a7;
  22. width: 130px;
  23. }
  25. ul#menu {
  26. list-style-type: none;
  27. font-weight: bold;
  28. color: #a7a7a7a7;
  29. text-align: left;
  30. padding: 10px;
  31. border: 1px dashed #a7a7a7;
  32. background: #FFF url(content/table_back.png);
  33. margin: 10px;
  34. }
  36. ul#menu a {
  37. font-weight: bold;
  38. color: #a7a7a7;
  39. text-decoration: none;
  40. }
  42. ul#menu a:hover {
  43. color: #999999;
  44. background: #cccccc;
  45. }
  46. ul#menu li.plusloin {
  47. margin-top: 10px;
  48. }
  49. form#searchbox {
  50. border: 1px dashed #a7a7a7;
  51. background: #FFF;
  52. }
  53. form#searchbox label {
  54. color: #000;
  55. }
  56. form#searchbox input {
  57. width: 110px;
  58. height: 14px;
  59. background: #a7a7a7;
  60. }
  61. </style>
  62. </head>
  64. <body>
  65. <div id="left">
  66. <div id="menubg">
  67.   <ul id="menu">
  68.    <li><a href="#">/home</a></li>
  69. <li><a href="#">/news</a></li>
  70. <li><a href="#">/concerts</a></li>
  71. <li><a href="#">/photos</a></li>
  72. <li><a href="#">/multimedia</a></li>
  73. <li><a href="#">/discography</a></li>
  74. <li><a href="#">/biography</a></li>
  75. <li><a href="#">/lyrics</a></li>
  76. <li><a href="#">/forum</a></li>
  77. <li><a href="#">/links</a></li>
  78.    <li class="plusloin"><a href="#">/archives</a></li>
  79.   </ul>
  80.   <form id="searchbox" action="" method="">
  81.    <label for="search">Recherche</label>
  82.    <input type="text" id="search" name="search" />
  83.   </form>
  84. </div>
  85. </div>
  86. </body>
  87. </html>

Reply

Marsh Posté le 31-08-2004 à 20:06:16    

[:arn0] merci beaucoup.


Message édité par fitterashes le 31-08-2004 à 20:07:00
Reply

Sujets relatifs:

Leave a Replay

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