[Firefox] Hauteur background image qui ne s'allonge pas [edit]

Hauteur background image qui ne s'allonge pas [edit] [Firefox] - HTML/CSS - Programmation

Marsh Posté le 17-10-2005 à 16:44:27    

Je suis repartis d'un code beaucoupl plus simple et lisible.
 
Bonjour,
depuis longtemps j'ai un souci d'affichage que je n'arrive pas a résoudre sous firefox.
 
Je m'explique:
sur un site j'ai un div à l'extreme gauche et un a l'extrême droite qui ont une image de fond pour affiche une bordure ombrée.
Le problème c'est que quand j'ai dépassé les 100% de  la hauteur de la page, l'image de la bordure ne se répete plus (sauf sous IE, un combleà).
 
Je suis donc bloqué :-(
 
Apercu:
http://dolby.bugiweb.com/web/bodycare/prob_border.jpg
 
Apercu web:
http://dolby.bugiweb.com/web/border/test.html   (à voir avec mozilla)
 
Voici le code HTML:

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>BODYCARE SHOPPING - Boutique en ligne</title>
  5. <MIGC_CSSCONTENT_HERE>
  6. <link id="external_style" rel="stylesheet" href="test.css" />
  7. </head>
  8. <body>
  9. <div id="page">
  10.   <div id="content">
  11.     <div class="bloc_pr">
  12.       <div class="bordure_gauche"></div>
  13.       <div class="bloc_gauche">
  14.       </div>
  15.       <div class="bloc_centre">
  16.       </div>
  17.       <div class="bloc_droit">
  18.       </div>
  19.       <div class="bordure_droite"></div>
  20.     </div>
  21.   </div>
  22. </div>
  23. </body>
  24. </html>


 
Voici la CSS :
 

Code :
  1. * {
  2. margin: 0;
  3. padding: 0;
  4. }
  6. div#content{
  7. height: auto;
  8. margin-left: auto;
  9. margin-right: auto;
  10. margin-top: auto;
  11. width: 500px;
  12. }
  14. div#page{
  15. height: auto;
  16. margin-bottom: auto;
  17. margin-left: auto;
  18. margin-right: auto;
  19. margin-top: auto;
  20. margin-top: auto;
  21. text-align: center;
  22. }
  24. .bloc_centre{
  25. float: left;
  26. height: auto;
  27. width: 192px;
  28. }
  30. .bloc_droit {
  31. float: left;
  32. height: 100%;
  33. width: 100px;
  34. }
  36. .bloc_gauche {
  37. float: left;
  38. height: 100%;
  39. width: 100px;
  40. }
  42. .bloc_pr {
  43. float: left;
  44. height: 100%;
  45. width: 500px;
  46. }
  48. .bordure_droite
  49. {
  50. background-image: url(images/bg02.gif);
  51. background-repeat: repeat-y;
  52. float: left;
  53. height: 100%;
  54. width: 4px;
  55. }
  57. .bordure_gauche
  58. {
  59. background-image: url(images/bg02.gif);
  60. background-repeat: repeat-y;
  61. float: left;
  62. height: 100%;
  63. width: 4px;
  64. }


Message édité par Dolby le 17-10-2005 à 18:01:43
Reply

Marsh Posté le 17-10-2005 à 16:44:27   

Reply

Marsh Posté le 17-10-2005 à 16:50:33    

T'as donné une hauteur de 100%... Mais 100% de quoi ? Sachant que par défaut, le body s'étire... Donc faut donner à l'élément html, mais aussi au body une hauteur de 100% pour avoir l'effet désiré

Reply

Marsh Posté le 17-10-2005 à 16:51:36    

Et évite les noms d'id du genre "machin_droite" ;) Si tu redesignes ta page et que tu décides que le truc de droite devient horizontal et se met à gauche, ça va faire bizarre un "machin_droite" placé à gauche ;)
 
La séparation contenu/présentation, c'est pas qu'à moitié :)

Reply

Marsh Posté le 17-10-2005 à 17:06:18    

Code :
  1. body{
  2. background-image: url(../usr/img/bg01.gif);
  3. height: 100%;


 
aucun changement :-(
 
J'ai également tenté auto mais là carrement rien ne s'affiche  :sweat:


Message édité par Dolby le 17-10-2005 à 17:06:48
Reply

Marsh Posté le 17-10-2005 à 17:06:38    

html aussi ;)

Reply

Marsh Posté le 17-10-2005 à 17:07:16    

Code :
  1. *{
  2. margin-bottom: auto;
  3. margin-left: auto;
  4. margin-right: auto;
  5. margin-top: auto;
  6.              height: 100%;
  7. margin-top: auto;
  8. }


 
pareil :-(


Message édité par Dolby le 17-10-2005 à 17:08:10
Reply

Marsh Posté le 17-10-2005 à 17:08:26    

Y'a quelque part un 100% qui devrait pas y être, genre sur contenu peut-être..

Message cité 1 fois
Reply

Marsh Posté le 17-10-2005 à 17:30:52    

ya pleins de width 980px et un width 98%


---------------
Les CSS c'est bon mangez-en
Reply

Marsh Posté le 17-10-2005 à 17:44:44    

voilà l'adresse plus simple...
 
on parle de height pas de width
 
http://dolby.bugiweb.com/web/border/test.html


Message édité par Dolby le 17-10-2005 à 17:45:18
Reply

Marsh Posté le 17-10-2005 à 18:04:13    

FlorentG a écrit :

Y'a quelque part un 100% qui devrait pas y être, genre sur contenu peut-être..


 
 
peux-tu relire le code? J'ai fait super simple cette fois  :sweat:
 
http://dolby.bugiweb.com/web/border/test.html


Message édité par Dolby le 17-10-2005 à 18:05:09
Reply

Marsh Posté le 17-10-2005 à 18:04:13   

Reply

Marsh Posté le 17-10-2005 à 19:43:33    

Faut surtout faire autrement... Parce que avec les div vides et tout, autant utiliser des tableaux [:spamafote]... Faut mettre les images en fond de quelque chose d'autre, le body par exemple

Reply

Marsh Posté le 17-10-2005 à 21:46:02    

j'essaie avec un tableau autour des div...

Reply

Marsh Posté le 17-10-2005 à 22:02:33    

*ouch* Euh, fallait pas prendre ça au mot, hein :D

Reply

Marsh Posté le 18-10-2005 à 00:37:10    

Oulà FlorentG ne perverti pas ce bon éléve ;)


Message édité par xtof_83 le 18-10-2005 à 00:37:32
Reply

Marsh Posté le 27-10-2005 à 20:03:53    

suis-je pardonnable? Je n'ai utilisé QU'UN tableau utile pour cette bordure :)


Message édité par Dolby le 27-10-2005 à 20:04:39
Reply

Marsh Posté le 27-10-2005 à 22:06:57    

Je n'ais aucune solution pour tes height, il faudra que tu donnes une valeur "absolue" aux trois height du code CSS suivant :
 

<html>
<head>
<title>BODYCARE SHOPPING - Boutique en ligne</title>
<style type="text/css">
<!--
body {margin: 1px; padding: 0;}
#d1 {float: left; width: 100px; background : repeat-y right url(bg02.gif); padding: 0 4px 0 0;}
#d2 {float: left;}
#d3 {float: right; width: 100px; background : repeat-y left url(bg02.gif); padding: 0 0 0 4px;}
-->
</style>
</head>
<body>
<div id="d1">
 
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
 
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
 
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
 
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
 
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
 
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
 
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
 
        <p>test</p>
        <p>test</p>
</div>
<div id="d2">
        <p>2 </p>
        <p>kl</p>
        <p>k</p>
 
</div>
<div id="d3">
        <p>3 </p>
        <p>kk</p>
        <p>&nbsp;</p>
</div>
</body>
</html>


 
Dans le code que tu nous avais donné au départ il y avait des div en trop dont je n'ai pas trouvé l'utilité, ATTETION AUX ABUS D'UTILISATION DES DIV... body englobe très bien la page tout seul...


Message édité par CNeo le 27-10-2005 à 22:09:28
Reply

Marsh Posté le 27-10-2005 à 23:00:38    

J'ai essayer d'expliquer chez Mozilla mais je n'ai pas un anglais parfait... :lol:

Reply

Sujets relatifs:

Leave a Replay

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