28173 sujets

CSS et mise en forme, CSS3

[résolu] HEIGHT: 100% problème firefox et scroll

Pages :
Bonjour, en suivant les conseils du site, je veux créer un div global centré avec un fond qui se répète verticalement (un tube quoi).
ensuite dans le div global, je fais ma sauce. Mais j'ai un souci sous firefox ! En fait il applique le fond du div uniquement sur la hauteur stricte du navigateur ! et si le contenu du div amène un scroll et bien le fond n'apparaît plus au delà des "premier" 100%...
Sous IE 6 PC ça marche, je vois bien toujours mon fond même si je scroll la page.

Que dois je compléter au niveau du code ?

c'est vraiment bizarre car si je fais F11 (plein écran) sous firefox, il met à jour le fond et c'est bon mais si je scroll alors là plus de fond à la limite des 100%.

Merci.



HTML {
	HEIGHT: 100%
}
body {
	background-image: url(images/bg_tile_h_v.jpg);
	margin: 0px;
	padding: 0px;
	HEIGHT: 100%;
	text-align: center; /* pour corriger le bug de centrage IE */
	font-family: "Trebuchet MS", Verdana, "Lucida Grande", Tahoma, Helvetica, Sans-Serif;
	font-size: 90%;
}
div#global {
	margin-left: auto;
	margin-right: auto;
	width: 680px;
	HEIGHT: 100%;
	text-align: left; /* on rétablit l'alignement normal du texte */
	background-image: url(images/bg_page_tile_h_v.jpg);
	background-repeat: repeat-y;
}

Modifié par Fissunix (29 Jul 2006 - 14:15)
Bonjour,

Fissunix a écrit :
En fait il applique le fond du div uniquement sur la hauteur stricte du navigateur ! et si le contenu du div amène un scroll et bien le fond n'apparaît plus au delà des "premier" 100%...


Oui : FF fait précisément ce que tu lui demande de faire avec les height:100% Smiley cligne
Bonjour Fissunix,

Il faudrait utiliser la propriété min-height (concernant div#global) pour obtenir ce que tu souhaites avec Firefox et les autres navigateurs hors Internet Explorer.

Avec ce height:100%, si le contenu a besoin d'une hauteur plus grande que celle spécifiée, il déborde, excepté avec Internet Explorer (win 5 & 6) qui interprète ce height comme un min-height (sauf en donnant à overflow une autre valeur que visible).
Bonjour,
merci pour vos réponses.
Je n'ai jamais utilisé min-height pour l'instant.
je rajoute min-height : 100%; pour le div global ?

est-ce une mauvaise idée de faire comme ça pour le but rechercher ?
y'a t il une meilleure alternative ?
Je viens d'essayer, en fait il faut fixer un très grand min-height en pixel
pour avoir l'effet voulu sous firefox. l'inconvénient est qu'on a désormais un gros scroll pour rien.

Connaissez vous une meilleure méthode pour faire ce div central avec fond raccord à 100% ? ou dois je plutôt prévoir un "chapeau" et un pied de page ?

Encore merci.
Salut

Ca m'a l'air d'être un bon plan Smiley cligne

Seulement, IE ne comprend pas min-height, il faut conserver "height: 100%" uniquement pour lui.

Il y deux moyens de faire ça : un propre, avec les commentaires conditionnels, et un moins propre en utilisant un "hack" CSS ...

Pour les commentaires conditionnels, aller voir du côté de Blog & Blues

Pour les hacks, t'as qu'à chercher, de toutes façons t'as pas besoin de les utiliser, na Smiley lol
Pour réaliser ce type de site, j'ai l'habitude de fixer la largeur de body ... ton conteneur global ne me semble pas indispensable.

Avec 
html {
   height: 100%;
   background: ... ;
}
body {
   min-height: 100%;
   width: 770px;
   margin: 0 auto;
   background: url(...) repeat-y;
}


ça marche très bien.

C'est quoi cette correction de bug de centrage dans IE ???
Hello,
merci pour la réponse.
Dans l'absolu, si je laisse comme ça avec le height : 100 % pour IE et le min-height: 2000px; pour firefox, ça marche. On a juste cet espace vide en bas de page sous firefox.

Sinon je pourrais peut être mettre le tube directement dans le fond de la page (body) ? mais il faudrait qu'il soit centré horizontalement et ensuite que le div global par dessus lui soit toujours bien placé au même endroit tout navigateur confondu ?

Auriez-vous quelques conseils pour faire ça au mieux ?
Tu as du lire dans mon esprit.
je cherchais une solution comme ça.
Mais le problème c'est que si mon tube fait 680px, je voudrais aussi un fond en dehors de ce tube. comment faire ?


pour l'histoire du bug IE, je l'ai récupéré ici même dans les tuts.
Modifié par Fissunix (29 Jul 2006 - 13:39)
ahhhh, on peut coller une image de fond en utilisant le tag html {} ?
Yes ? troooop fort.
je vais essayer. merci.
Modifié par Fissunix (29 Jul 2006 - 13:41)
Pour mettre le fond en dehors de body, il te rester à style <html> ...

Pour ce qui est du centrage, la méthode à base de 
margin: 0 auto;
fonctionne à ma connaissance parfaitement sous tous les navigateurs, IE compris pourvu qu'il soit en mode de rendu standards (c'est-à-dire sans prologue xml inutile et avec un doctype correct).

Edit : didjû, il pose des questions, puis il lit les réponses après et je me fais griller par ma propre réponse de 2 posts avant Smiley biggol Smiley lol
Modifié par Sopo (29 Jul 2006 - 13:43)
Ah ben non, ça ne marche pas...

héhé rebellote pour le chassé croisé. Désolé Smiley cligne

ben j'ai essayé de coller un background à html {} mais no way.
page blacnhe sous IE et firefox sauf mon tube au milieu tout mignon.
Modifié par Fissunix (29 Jul 2006 - 13:46)
Fissunix a écrit :
Je viens d'essayer, en fait il faut fixer un très grand min-height en pixel.

As-tu simplement remplacer le height:100% par min-height:100%. (le height: 100% ne sera que pour IE 5/6)
Je viens d'essayer ton code avec ce min-height et ça fonctionne très bien.
Fissunix a écrit :
Ah ben non, ça ne marche pas...

héhé rebellote pour le chassé croisé. Désolé Smiley cligne

ben j'ai essayé de coller un background à html {} mais no way.
page blacnhe sous IE et firefox sauf mon tube au milieu tout mignon.


Donne-nous ton code CSS sur html. Je crois bien que tu as dû faire une erreur à ce niveau Smiley smile
Pour Alan :
en fait j'avais laissé les deux mais du coup ça ne bougeait pas sous firefox.
j'ai donc remplacé height:100% par min-height:100% et là c'est bon sous firefox effectivement mais plus sous IE vu que je perd le height: 100%. Comment je récupère ça sous IE ?

Pour Sopo :
si ça marche mais je voudrais coller une image de fond et pas juste une couleur. et là ce ne marche pas. Je n'ai pas encore d'exemple en ligne là.
Donc une image de fond général derrière le tube.
Sopo :

ben j'essaie ça tout simplement :

HTML {
	HEIGHT: 100%
background-image: url(images/bg_tile_h_v.jpg);	
}
body {
... ensuite l'idée de ton code en body fixe....avec fond tube à 680px
}

Modifié par Fissunix (29 Jul 2006 - 13:57)
Enlève-moi déjà ces vilaines majuscules, et vérifie que le chemin et le nom de fichier de ton image sont corrects.

En ajoutant 
background-color: #000;
à html, ton fond devient bien noir ?
Fissunix a écrit :
j'ai donc remplacé height:100% par min-height:100% et là c'est bon sous firefox effectivement mais plus sous IE vu que je perd le height: 100%. Comment je récupère ça sous IE ?.

Pour ne destiner le height:100% qu'à Internet Explorer, tu peux utiliser soit un hack dans la feuille de style, soit ajouter un commentaire conditionnel dans ta page (méthode parfaitement sûre) : 
  <!--[if lte IE 6]>
  <style type="text/css">div#global {height: 100%}</style>
  <![endif ]-->

En sachant qu'à l'intérieur de ce commentaire tu peux très bien appeler un fichier CSS qui ne sera lu que par IE (ici 5 et 6).
Modifié par Alan (29 Jul 2006 - 14:14)
Pages :
Sujet clos
Aller à