[résolu] Problème d'affiche d'un cadre 3D

Problème d'affiche d'un cadre 3D [résolu] - HTML/CSS - Programmation

Marsh Posté le 04-07-2005 à 00:47:15    

Salut à tous !!!
 
J'ai réussi à faire un cadre totalement étirable avec bords 3D, mais un soucis persiste avec le haut et le bas du cadre.
 
Il s'affiche parfaitement sous IE 5.5 et IE 6 (incroyable, non ? ), mais pas sous Firefox    :ouch: .
 
>> Voici le lien <<
 
A noter que j'ai fait une barre de menu et que le problème est identique.
 
J'ai encore dût loupé quelquechose
 
le code XHTML

Code :
  1. <html>
  2. <head>
  3. <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  4. <meta name="generator" content="PSPad editor, www.pspad.com">
  5. <title></title>
  6. <link rel="stylesheet" type="text/css" media="screen" href="style.css">
  7. </head>
  8. <body>
  10. <div id="haut">
  11. <div id="bordGhaut"></div><div id="bordhaut"></div><div id="bordDhaut"></div>
  12. </div>
  13. <div id="bordG"> 
  14.    <div id="bordD"> 
  15.      <div id="contenu">
  16.      essai de cadre
  17.      <br />avec bordure
  18.      <br />3D ombrée
  19.      <br />étirable
  20.      <br />verticalement et horizontalement  <br /><br /><br /><br /><br /><br />
  21.      </div>
  22.    </div>
  23. </div>
  24. <div id="bas">
  25. <div id="bordGbas"></div><div id="bordbas"></div><div id="bordDbas"></div>
  26. </div>
  28. <br /><br /><br /><br /><br /><br />
  29.    <div id="header">
  30.    <span id="hautG"></span>
  31.    <span id="hautM"></span>
  32.    <div id="liensHeader">
  33.      <a href="#">lien1</a> -
  34.      <a href="#">lien2</a> -
  35.      <a href="#">lien3</a>
  36.    </div>
  37. </div>
  38. </body>
  39. </html>


 
le code CSS

Code :
  1. body {background-color:#E4EBF3; margin:10px;}
  3. img
  4. {
  5.  border: 0px;
  6. }
  7. /*#bordG
  8. {
  9.  float:left;
  10.    background-image:  url(MarTiuSWeb/fichiers/00.jpg);
  11.  background-repeat: repeat-y;
  12. }
  13. #bordD
  14. {
  15.   float:right;
  16.  background-image:  url(MarTiuSWeb/fichiers/00.jpg);
  17.  background-repeat: repeat-y;
  18. }*/
  20. #bordG
  21. {
  22. /*width: 99.9%;*/
  23. width: 100%; /* par exemple */
  24. margin: 0px auto;
  25. padding: 0;
  26. background-image: url(images/gauche.jpg);
  27. background-repeat: repeat-y;
  28. background-position: left;
  29. }
  30. #bordD
  31. {
  32. width: 100%;
  33. margin: 0;
  34. padding: 0;
  35. background-image: url(images/droite.jpg);
  36. background-repeat: repeat-y;
  37. background-position: right;
  38. }
  40. #contenu
  41. {
  42.    width: auto;
  43.  margin-left: 50px;
  44.  margin-right: 50px;
  45.  padding-left:200px;
  46.  background-image: url(images/centre.jpg);
  47.  background-repeat: repeat;
  48. }
  49. #bordGhaut, #bordGbas {width: 5%; height:50px; margin: 0; padding: 0; display: inline; background-position: left;}
  50. #bordDhaut, #bordDbas {width: 5%; height:50px; margin: 0; padding: 0; display: inline; background-position: right;}
  51. #bordhaut, #bordbas {width: 90%; height:50px; margin: 0; padding: 0; display: inline; background-repeat: repeat-x; background-position: left;}
  52. #bordGbas { background-image: url(images/angleGB.jpg); }
  53. #bordDbas { background-image: url(images/angleDB.jpg); }
  54. #bordbas {background-image: url(images/bas.jpg);}
  55. #bordGhaut { background-image: url(images/angleGH.jpg); }
  56. #bordDhaut { background-image: url(images/angleDH.jpg); }
  57. #bordhaut {background-image: url(images/haut.jpg);}
  58. #haut, #bas {margin:0; padding:0; width:100%; height:50px; display: inline; }
  62. #header
  63. {
  64. width:auto;
  65. height:25px;
  66. margin-left:10px;
  67. margin-right:10px;
  68. background-image: url(images/hautD.jpg);
  69. background-repeat: repeat-x;
  70. border-left: 1px solid rgb(177,177,177);
  71. border-right: 1px solid rgb(177,177,177);
  72. border-bottom: 1px solid rgb(177,177,177);
  73. }
  74. #liensHeader {
  75. position:relative;
  76. top:4px;
  77. left:60px;
  78. display: inline;
  79. text-align:center;
  80. width:auto;
  81. margin-top:10px;
  82. margin-left:10px;
  83. margin-right:10px;
  84. }
  85. #liensHeader a {text-decoration:none;}
  86. #liensHeader a:hover {text-decoration:underline;}
  87. #hautG
  88. {
  89. width:70%;
  90. background-image:  url(images/hautG.jpg);
  91. background-repeat: repeat-x;
  92. }
  93. #hautM
  94. {
  95. width:38px;
  96. background-image:  url(images/hautM.jpg);
  97. }
  98. #hautD
  99. {
  100. width:auto;
  101. margin-left:0px;
  102. margin-right:0px;
  103. background-image:  url(images/hautD.jpg);
  104. background-repeat: repeat-x;
  105. }


Pouvez-vous m'aider, çà fait 2 jours que je suis dessus, je bloque sûrement sur un détail, mais je deviens fou  :fou: .
 
Merci d'avance.
 
@+ fafane84.


Message édité par fafane84 le 04-07-2005 à 09:58:50

---------------
Mon Topic de Vente Hardware
Reply

Marsh Posté le 04-07-2005 à 00:47:15   

Reply

Marsh Posté le 04-07-2005 à 07:05:06    

déjà faut pas mettre tes divs en display inline, pour la simple et bonne raison que un élément inline ne peut pas etre redimensionné sur la largeur. (cf W3C rules)
 
mate ta page sous firefox tu l'auras dans le cul

Reply

Marsh Posté le 04-07-2005 à 08:18:17    

gatsusat a écrit :

déjà faut pas mettre tes divs en display inline, pour la simple et bonne raison que un élément inline ne peut pas etre redimensionné sur la largeur. (cf W3C rules)
 
mate ta page sous firefox tu l'auras dans le cul


Salut, ben justement le problème, c'est l'affichage dans Firefox.
 
Mais si je ne mets pas display: inline, comment mettre mes div en ligne ?
 
Car là je viens de les enlever et les blocs ce positionne les uns sous les autres -> >> ici <<


---------------
Mon Topic de Vente Hardware
Reply

Marsh Posté le 04-07-2005 à 08:37:47    

ben oué la meilleure solution consiste tout simplement a les mettre en flottant, mais faire un cadre en 3D pour tous les bords c'est très chaud en CSS

Reply

Marsh Posté le 04-07-2005 à 08:47:00    

Et moi qui croyait que le plus dur c'était les bords gauche et droit du bloc central  :(  
 
Je vais essayer les float.


---------------
Mon Topic de Vente Hardware
Reply

Marsh Posté le 04-07-2005 à 09:37:08    

Reply

Marsh Posté le 04-07-2005 à 09:56:39    

Ah les float !!!
 
Il n'y a que çà de vrai  :lol:  
 
Voilà, çà y est j'ai réussi -> résultat
 
Merci de votre aide.
 
 [:fafane84]


---------------
Mon Topic de Vente Hardware
Reply

Sujets relatifs:

Leave a Replay

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