28220 sujets

CSS et mise en forme, CSS3

Background-image qui ne se répète pas dans Firefox...

Hello.
J'ai un div qui contient une image de fond paramétré comme suit :
#def_de_mon_div{
position: absolute;
visibility: visible;
z-index: 7;
height: 444px;
width: 915px;
left: 0px;
top: 126px;
background-image: url(decoupes/liens_r4_c1.jpg);
background-repeat: repeat;
}

Dans ce div, j'ai un long texte qui vient donc "étirer" le div vers le bas.
Sous IE 6, pas de problème, l'image de fond se répète dans mon div.
Sous Firefox par contre, y'a un blanc à la place de l'image qui devrait se répéter.

Comme normalement Firefox respecte mieux le CSS, je me dis que j'ai râté quelque chose, mais je ne vois pas quoi !

Merci pour votre aide !

Pierre
Bjorken a écrit :

Comme normalement Firefox respecte mieux le CSS, je me dis que j'ai râté quelque chose, mais je ne vois pas quoi !


En effet, Firefox l'a respecté, et la div ne fait que la hauteur de ton image de fond, qui ne se repete donc pas.

IE, lui, utilise height comme un min-height (encore une mauvaise compréhension de sa part), et donc agrandit la div en cas de texte long.

L'erreur vient donc au départ de toi (tu l'avais compris) et de IE ^^
Justement, ca arrange bien des choses, d'avoir un div qui s'agrandit automatiquement quand il y a trop de texte. Sous FF, impossible de le faire apparament, même avec un overflow.
@ALkyD : On vient de le dire, utilise min-height et tout marche comme il faut sur Firefox.

Celà dit, Firefox a effectivement des bugs CSS que n'a pas IE, mais ils sont plus rares que l'inverse. (de sombres histoires de background qui fonctionne mal avec un bloc flottant à côté).
Modifié par Lanza (23 Aug 2005 - 08:39)
même problème pour moi, mais je ne peux malheureusement pas utiliser min-height: xxx px; car il faut que mon site puisse être étirable dans le sens de la hauteur...

que puis-je utiliser pour qu'une image de 5 pixels se répéte tout le long du texte Smiley rolleyes ?

voici mon code actuel qui marche sur IE mais pas sur FireFox (comme vous l'aurez deviné Smiley ravi ) : 
 

                        background-image: url("../menu/img/main.png");
                        background-repeat: repeat-y;
                        padding: 0;
                        margin: 0;
                        margin: 0 auto;
                        width: 760px;
                        text-align: center;                  /*pr centrer sur IE*/
                        font-family: Comic Sans MS;


merci d'avance pour votre aide !
Modérateur
bonjour,
en passant, voici ce que j'utilise pour fixer une hauteur minimale pour IE et FF.

min-height:200px;
height:auto!important;/*cette ligne ne sera pas ecrasé par la suivante 
dans firefox et garde donc  le block etirable en hauteur */
height:200px;/*ie ecrase la ligne precedente, mais l'interprete comme un min-height */
du coup en surchargeant le css et en utilisant un simple "hack", nous avons la en principe pour la majorité des navigateur une hauteur minimale agrandisable...(ce code est valide w3c)
J'espere avoir aider.
a plus
Re Salut Gcyrillus !!!
Je bosse avec vgentizon Smiley cligne

J'ai essayé ton code mais ça ne change rien Quand on agrandit le texte, il sort de notre cadre... je te donne notre code pour voir si tu trouves pourquoi ce que tu proposes ne marche pas 
                html   {  margin:  0;
                        background-color:  #99CC99;
                        margin:     0;
                        padding:    0;
                        height:     100%;
                        text-align: center;                  /*pr centrer sur IE*/
                        font-family: Comic Sans MS;
                     }

                body {
                        background-image: url("../menu/img/main.gif");
                        margin:    0 auto;
                        width:      1000px;
                        text-align: center;
                        font-family: Comic Sans MS;
                        min-height:200px;
                        height:auto!important;/*cette ligne ne sera pas ecrasé par la suivante
                        dans firefox et garde donc le block etirable en hauteur */
                        height:200px;/*ie ecrase la ligne precedente, mais l'interprete comme un min-height */
                     }

                .tete{
                        background-image: url("../menu/img/tete.gif");
                        width:      1000px;
                        height:     120px;
                        margin:     0 auto;
                  }


         #espace_menu{  position: relative;
                        background-image: url("../menu/img/menu.gif");
                        width:      1000px;
                        height:     32px;
                        margin:     0 auto;
                        z-index: 1;
                  }

             .arrondi{  position: relative;
                        background-image: url("../menu/img/arrondi.gif");
                        background-repeat: no-repeat; /*pr IE*/
                        width:     1000px;
                        height:    309px;
                        margin:     0 auto;
                  }

                    p{
                        position: relative;
                        width: 360px;
                        height: 150px;
                        margin: 0 auto;
                        padding: 100px;
                        font-size: 13px;
                        text-align: justify;
                     }


Merci beaucoup !
Modifié par p_tite_jo (29 Aug 2005 - 13:10)
Modérateur
salut,
je viens juste de passer, mon code etait proposer avec des hauteurs au hazard, mais as tu essayer en pourcentage (comme tu indique bien la hauteur de html et en pourcentage... ), en principe sur la balise body, ça marche...
a defaut, si ça ne marche pas je reste curieux et peut tu laisser aussi ton html de base..
a plus

edit: autre piste(ou question que je me pose Smiley smile ), ton position:relative pour p, est-il necessaire ?

re edit:, quel etourdis je fait ! je n'ais pas reconnue ta page Smiley smile , en fait pour que cela marche, tu devrais appliquer ce truc aussi a arrondis:

 .arrondi{ position: relative;
background-image: url("../menu/img/arrondi.gif");
background-repeat: no-repeat; /*pr IE*/
width: 1000px;
			min-height:309px;
			height:auto!important;
                        height:    309px;
margin: 0 auto;
}

je pense que cela est suffisant

a plus
Modifié par gcyrillus (29 Aug 2005 - 16:05)
meuh meuh ça marche po Smiley decu
voila mon code html 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
 <title>Ecole de musique de Rolle et Environs</title>
  <link rel="stylesheet" type="text/css" href="../css/config.css" />
 <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1" />


</head>




<body>
                  <div class="tete">
                  </div>

                  <div id="espace_menu">          <?php include "menu.php"; ?>
                  </div>

                  <div class="arrondi">

                       <p>
                       Lorem ipsum (..)

                       </p>

                  </div>


</body>

</html>

et ma CSS modifiée comme tu me l'as proposé....
              html   {  margin:  0;
                        background-color:  #99CC99;
                        margin:     0;
                        padding:    0;
                        height:     100%;
                        text-align: center;                  /*pr centrer sur IE*/
                        font-family: Comic Sans MS;
                     }

                body {
                        background-image: url("../menu/img/main.gif");
                        margin:    0 auto;
                        width:      1000px;
                        text-align: center;
                        font-family: Comic Sans MS;
                        min-height:100%;
                        height:auto!important;/*cette ligne ne sera pas ecrasé par la suivante
                        dans firefox et garde donc le block etirable en hauteur */
                        height:100%;/*ie ecrase la ligne precedente, mais l'interprete comme un min-height */
                     }

                .tete{
                        background-image: url("../menu/img/tete.gif");
                        width:      1000px;
                        height:     120px;
                        margin:     0 auto;
                  }


         #espace_menu{  position: relative;
                        background-image: url("../menu/img/menu.gif");
                        width:      1000px;
                        height:     32px;
                        margin:     0 auto;
                        z-index: 1;
                  }

             .arrondi{ position: relative;
                           background-image: url("../menu/img/arrondi.gif");
                           background-repeat: no-repeat; /*pr IE*/
                           width: 1000px;
                           min-height:309px;
                           height:auto!important;
                           height: 309px;
                           margin: 0 auto;
                  }

                    p{
                        position: relative;
                        width: 360px;
                        height: 150px;
                        margin: 0 auto;
                        padding: 100px;
                        font-size: 13px;
                        text-align: justify;
                     }


J'ai remarqué un autre problème, qui je pense est lié à celui la.. J'ai refait une autre page, autre que index.php et cette nouvelle page n'a pas besoin d etre scrollée, par conséquent firefox n'affiche pas d'ascenseur... mais quand je passe d'index.php a cette nouvelle page, mon site se décale de la largeur de l'ascenseur... ce problème se réglera quand on aura réglé celui qui nous intéresse ici tu penses ?
Modifié par p_tite_jo (29 Aug 2005 - 19:51)
Modérateur
salut,
en fait, tu indique aussi un height pour <p>, donc le probleme se trouve repoussée, tu n'en as plus besoin d'ailleurs pour tes test , maintenant que tu as inserer cette extrait de vieux latin Smiley cligne (HS, quelqu'un sait ou trouvé la traduction de cette "piece" Antique ?).

pour le scroll, en fait quand il apparait il diminue d'autant ta largeur de page (une quinzaine de pixel environ ?)et ce qui est centrée .. se recentre. d'ou le decallage (de 7px environ ?) en passant d'une page avec scroll ou pas.
edit: pour obliger le scroll a apparaitre dans une page a petit contenu, tu peut eventuellement ajouter a body : 
padding-bottom:1px;
ce pixel supplementaire aux 100% de hauteur suffira a faire apparaitre dans ton cas la barre de scroll., autre solution : fixé la marge de droite en %, mais cela ne centrera pas vraiment ta page.

a plus
Modifié par gcyrillus (29 Aug 2005 - 20:47)
Sujet clos
Aller à