CSS probléme d'affichage entre Navigateurs

CSS probléme d'affichage entre Navigateurs - HTML/CSS - Programmation

Marsh Posté le 26-08-2005 à 08:59:52    

Coucou,
 
Bon je continue doucement ma lancé dans le monde sans tableau..etc...
 
Mais j'en ai franchement marre, tu fais une modification sur un navigateur et op plus rien, ou pas bon dans l'autre... :pt1cable:  :fou:  
 
Voila mon code:
Vous aller vite comprendre que sous IE, c'est pas top...
 
Donc si vous pouviez me dire la combine..et il y aurait pas un site qui dis quoi faire dans ces cas... :whistle:  
 
Et de même j'ai essayé que ce sois toute une cellule qui soit sensible à la souris, car la ce n'est que le mot...
Donc si vous pouvez m'aider aussi pour cela... :jap:  
 
Voici mon code:

Code :
  1. <style type="text/css">
  2. .menuderHaut {
  3. background-image: url(/images/menu-haut.jpg);
  4. background-position: left;
  5. background-repeat: no-repeat;
  6. color: #FFFFFF;
  7. font-weight: bold;
  8. height:30;
  9. width: 120;
  10. text-indent: 20px;
  11. z-index:1;
  12. }
  14. .menuderHaut:hover {
  15. background-position: left;
  16. background-repeat: no-repeat;
  17. color: #FFFFFF;
  18. font-weight: bold;
  19. height:30;
  20. width: 120;
  21. text-indent: 20px;
  22. }
  24. .menuderHaut:active {
  25. background-position: left;
  26. background-repeat: repeat-x;
  27. color: #FFFFFF;
  28. font-weight: bold;
  29. height:30;
  30. width: 100;
  31. text-indent: 20px;
  32. }
  34. .menu {
  35. font: italic bold 12px/20px Arial, Helvetica, sans-serif;
  36. color: #FFFFFF;
  37. text-decoration: none;
  38. text-transform: uppercase;
  39. width: 100px;
  40. list-style-position: inside;
  41. list-style-type: none;
  42. }
  44. .menu:active {
  45. font: italic bold 12px/20px Arial, Helvetica, sans-serif;
  46. color: #AAAAAA;
  47. text-decoration: none;
  48. text-transform: uppercase;
  49. width: 100px;
  50. list-style-position: inside;
  51. list-style-type: none;
  52. }
  54. .menu:hover {
  55. font: italic bold 12px/20px Arial, Helvetica, sans-serif;
  56. color: #AAAAAA;
  57. text-decoration: none;
  58. text-transform: uppercase;
  59. width: 120px;
  60. list-style-position: inside;
  61. list-style-type: none;
  62. }
  64. #ssphoto {
  65. visibility: hidden;
  66. position:absolute;
  67. left: 130px;
  68. top: 68px;
  69. }
  71. </style>
  72. <script language="JavaScript" type="text/JavaScript">
  73. <!--
  74. function MM_findObj(n, d) { //v4.01
  75.   var p,i,x;  if(!d) d=document; if((p=n.indexOf("?" ))>0&&parent.frames.length) {
  76.     d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  77.   if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  78.   for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  79.   if(!x && d.getElementById) x=d.getElementById(n); return x;
  80. }
  82. function MM_showHideLayers() { //v6.0
  83.   var i,p,v,obj,args=MM_showHideLayers.arguments;
  84.   for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
  85.     if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
  86.     obj.visibility=v; }
  87. }
  88. //-->
  89. </script>
  90. <div>
  91. <div class="menuderHaut">
  92.  <a class="menu" href="/index.php" onMouseOver="MM_showHideLayers('ssphoto','','hide')">Accueil</a>
  93. </div>
  94. <div class="menuderHaut">
  95.  <a class="menu" href="/modules/annuaire.php" onMouseOver="MM_showHideLayers('ssphoto','','hide')">Annuaire</a>
  96. </div>
  97. <div class="menuderHaut">
  98.  <a class="menu" href="/modules/photos.php" onMouseOver="MM_showHideLayers('ssphoto','','show')">Photo</a>
  99.  <div id='ssphoto'>
  100.   <div class="menuderHaut"><a class="menu" href="/galerie/freeride/freeride.php">Freeride</a></div>
  101.   <div class="menuderHaut"><a class="menu" href="/galerie/descente/descente.php">Descente</a></div>
  102.   <div class="menuderHaut"><a class="menu" href="/galerie/dirt/dirt.php">Dirt</a></div>
  103.   <div class="menuderHaut"><a class="menu" href="/galerie/street/street.php">Street</a></div>
  104.  </div>
  105. </div>
  106. <div class="menuderHaut">
  107.  <a class="menu" href="/index.php" onMouseOver="MM_showHideLayers('ssphoto','','hide')">Vid&eacute;os</a>
  108. </div>
  109. <div class="menuderHaut">
  110.  <a class="menu" href="/modules/contact.php" onMouseOver="MM_showHideLayers('ssphoto','','hide')">Contacts</a>
  111. </div>
  112. <div class="menuderHaut">
  113.  <a class="menu" href="/index.php" onMouseOver="MM_showHideLayers('ssphoto','','hide')">Forum</a>
  114. </div>
  115. </div>


 
Merci


Message édité par xtof_83 le 26-08-2005 à 09:00:13
Reply

Marsh Posté le 26-08-2005 à 08:59:52   

Reply

Marsh Posté le 26-08-2005 à 12:50:54    

up...

Reply

Marsh Posté le 26-08-2005 à 14:35:50    

ta po plus moche à proposer ?

Reply

Marsh Posté le 26-08-2005 à 15:07:33    

ouinn....
 
 
Ben j'ai la version avec des tableaux... :lol:
 
Non franchement...faut me dire ce qui est pas beau, comme ça j'enregistre...
 
Merci gatsu...

Reply

Marsh Posté le 26-08-2005 à 15:21:16    

J'avou j'ai archi la flemme de lire tout ça mais déja a la place de :
 
background-image: url(/images/menu-haut.jpg);
background-position: left;
background-repeat: no-repeat;
 
mets :
 
background: url('/images/menu-haut.jpg') top left no-repeat;

Reply

Marsh Posté le 26-08-2005 à 15:23:32    

ah on peux concatener tout ce qui a le meme type...
c'est sur que sa racourci pas mal...
 
 
Merci...

Reply

Marsh Posté le 26-08-2005 à 16:36:27    

:( nobody for me... :)

Reply

Marsh Posté le 26-08-2005 à 16:52:56    

bah déja -> source -> http://validator.w3.org/
 

Code :
  1. Erreurs
  2. URI : file://localhost/TextArea
  4.     * Ligne: 7 Contexte : .menuderHaut
  6.       Propriété érronée : height only 0 can be a length. You must put an unit after your number : 30
  7.     * Ligne: 8 Contexte : .menuderHaut
  9.       Propriété érronée : width only 0 can be a length. You must put an unit after your number : 120
  10.     * Ligne: 18 Contexte : .menuderHaut:hover
  12.       Propriété érronée : height only 0 can be a length. You must put an unit after your number : 30
  13.     * Ligne: 19 Contexte : .menuderHaut:hover
  15.       Propriété érronée : width only 0 can be a length. You must put an unit after your number : 120
  16.     * Ligne: 28 Contexte : .menuderHaut:active
  18.       Propriété érronée : height only 0 can be a length. You must put an unit after your number : 30
  19.     * Ligne: 29 Contexte : .menuderHaut:active
  21.       Propriété érronée : width only 0 can be a length. You must put an unit after your number : 100
  23. Votre feuille de style CSS validée :
  25.     * .menuderHaut {
  26.           o background-image : url(/images/menu-haut.jpg);
  27.           o background-position : left;
  28.           o background-repeat : no-repeat;
  29.           o color : #ffffff;
  30.           o font-weight : bold;
  31.           o text-indent : 20px;
  32.           o z-index : 1;
  33.       }
  34.     * .menuderHaut:hover {
  35.           o background-position : left;
  36.           o background-repeat : no-repeat;
  37.           o color : #ffffff;
  38.           o font-weight : bold;
  39.           o text-indent : 20px;
  40.       }
  41.     * .menuderHaut:active {
  42.           o background-position : left;
  43.           o background-repeat : repeat-x;
  44.           o color : #ffffff;
  45.           o font-weight : bold;
  46.           o text-indent : 20px;
  47.       }
  48.     * .menu {
  49.           o font : italic bold 12px/20px Arial, Helvetica, sans-serif;
  50.           o color : #ffffff;
  51.           o text-decoration : none;
  52.           o text-transform : uppercase;
  53.           o width : 100px;
  54.           o list-style-position : inside;
  55.           o list-style-type : none;
  56.       }
  57.     * .menu:active {
  58.           o font : italic bold 12px/20px Arial, Helvetica, sans-serif;
  59.           o color : #aaaaaa;
  60.           o text-decoration : none;
  61.           o text-transform : uppercase;
  62.           o width : 100px;
  63.           o list-style-position : inside;
  64.           o list-style-type : none;
  65.       }
  66.     * .menu:hover {
  67.           o font : italic bold 12px/20px Arial, Helvetica, sans-serif;
  68.           o color : #aaaaaa;
  69.           o text-decoration : none;
  70.           o text-transform : uppercase;
  71.           o width : 120px;
  72.           o list-style-position : inside;
  73.           o list-style-type : none;
  74.       }
  75.     * #ssphoto {
  76.           o visibility : hidden;
  77.           o position : absolute;
  78.           o left : 130px;
  79.           o top : 68px;
  80.       }

Reply

Marsh Posté le 26-08-2005 à 17:19:47    

Enfin sa c'est juste parce que j'ai oublié les px..
 
Mais sa ne change en rien, la disposition des objets...
 
Mais je me suis tout de même empresser de corriger cela...


Message édité par xtof_83 le 26-08-2005 à 17:20:06
Reply

Sujets relatifs:

Leave a Replay

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