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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1224717
Dolby
Posté le 17-10-2005 à 16:44:27  profilanswer
 

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
mood
Publicité
Posté le 17-10-2005 à 16:44:27  profilanswer
 

n°1224733
FlorentG
Unité de Masse
Posté le 17-10-2005 à 16:50:33  profilanswer
 

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é

n°1224736
FlorentG
Unité de Masse
Posté le 17-10-2005 à 16:51:36  profilanswer
 

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é :)

n°1224772
Dolby
Posté le 17-10-2005 à 17:06:18  profilanswer
 

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
n°1224775
FlorentG
Unité de Masse
Posté le 17-10-2005 à 17:06:38  profilanswer
 

html aussi ;)

n°1224779
Dolby
Posté le 17-10-2005 à 17:07:16  profilanswer
 

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
n°1224781
FlorentG
Unité de Masse
Posté le 17-10-2005 à 17:08:26  profilanswer
 

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

Message cité 1 fois
n°1224799
gatsusat
Posté le 17-10-2005 à 17:30:52  profilanswer
 

ya pleins de width 980px et un width 98%


---------------
Les CSS c'est bon mangez-en
n°1224810
Dolby
Posté le 17-10-2005 à 17:44:44  profilanswer
 

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
n°1224823
Dolby
Posté le 17-10-2005 à 18:04:13  profilanswer
 

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
mood
Publicité
Posté le 17-10-2005 à 18:04:13  profilanswer
 

n°1224898
FlorentG
Unité de Masse
Posté le 17-10-2005 à 19:43:33  profilanswer
 

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

n°1224947
Dolby
Posté le 17-10-2005 à 21:46:02  profilanswer
 

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

n°1224957
FlorentG
Unité de Masse
Posté le 17-10-2005 à 22:02:33  profilanswer
 

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

n°1225014
xtof_83
Freeride Spirit
Posté le 18-10-2005 à 00:37:10  profilanswer
 

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


Message édité par xtof_83 le 18-10-2005 à 00:37:32
n°1232924
Dolby
Posté le 27-10-2005 à 20:03:53  profilanswer
 

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
n°1233004
CNeo
Posté le 27-10-2005 à 22:06:57  profilanswer
 

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
n°1233065
CNeo
Posté le 27-10-2005 à 23:00:38  profilanswer
 

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


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

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

 

Sujets relatifs
Problèmes d'affichages sous Firefox et Netscape mais pas sur IEProbleme generation texte sur image
Objet OLE (image) dans AccessQuestion installation Mozilla Firefox svp
image de fond dans firefox, pas dans IEpourquoi ce positionnement en absolut ne fonctionne pas sous Firefox
Zoomer une image puis la dézoomer [résolu][resolu] Centrer une image vertical dans une <div> ??
Problème de CSS sous Firefox et IE 
Plus de sujets relatifs à : [Firefox] Hauteur background image qui ne s'allonge pas [edit]

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

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