Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1916 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1138960
fafane84
Posté le 04-07-2005 à 00:47:15  profilanswer
 

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
mood
Publicité
Posté le 04-07-2005 à 00:47:15  profilanswer
 

n°1138993
gatsusat
Posté le 04-07-2005 à 07:05:06  profilanswer
 

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

n°1139013
fafane84
Posté le 04-07-2005 à 08:18:17  profilanswer
 

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
n°1139016
gatsusat
Posté le 04-07-2005 à 08:37:47  profilanswer
 

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

n°1139017
fafane84
Posté le 04-07-2005 à 08:47:00  profilanswer
 

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
n°1139028
Flyman30
Posté le 04-07-2005 à 09:37:08  profilanswer
 
n°1139040
fafane84
Posté le 04-07-2005 à 09:56:39  profilanswer
 

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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
Recursivité >> Problème important...Problème d'installation JBuilder X
[VB6] probleme de labels [resolut](RESOLU) [PHP / Mysql] Requete SELECT très complexe
probléme de variableProblème variable dynamique et tableau
Probleme de gestion d'erreur O.O Excel Croisement de données entre 2 feuilles [resolu]
[Résolu] [C#] Déclaration de tableaux d'objets à taille inconnueprobleme d affichage avec un tableau html
Plus de sujets relatifs à : [résolu] Problème d'affiche d'un cadre 3D

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.086 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR