28172 sujets

CSS et mise en forme, CSS3

Background div coupé par le scroll...

Bonsoir à tous !

J'ai un problème avec un div.
C'est le div qui englobe tout le site.
Ce div s'appel : "global".
Il contient une image de fond.
"body" contient aussi une image de fond.

Lorsque la fenêtre est rétrécie (le site n'est donc pas visible en entier sur la largeur) il y forcement le scroll horizontal qui apparait.
Sauf que si je scroll vers la droite le div "global" na plus sont background ...

J'ai trouvé une solution: mettre un overflow:hidden mais bon pas cool si le visiteur veut rétrécir son navigateur...

D'où cela peut il venir ? Une idée??

D'avance merci !


ps: est ce que les !important dans le css pour "contrer" les problèmes de marges d'IE sont à éviter?
Bonjour,

Une page en ligne ou ton code source pourrait nous aider à cibler davantage ton problème.
a écrit :
ps: est ce que les !important dans le css pour "contrer" les problèmes de marges d'IE sont à éviter?
Oui, les commentaires conditionnels sont à préférer.
Voila j'ai retiré l'inutile:


body{
	background:url(images/cube.jpg);
	margin:0;
	padding:0;
	height: 100%;
	font-family:arial;
	color:white
}

#global{
	background:url('images/bg_header.jpg') repeat-x;
	margin-left:auto;
	margin-right:auto;
	height: 350px;
	padding-top: 20px;
}




<body> 
    <div id="global">
        <div style="margin-left:auto;margin-right:auto;width:1015px;height:100px;"></div>  
        <div id="content">contenu</div>
    </div>
</body>


ps: je sais pour le style: pas dans le code mais c'est pour les tests

Rien que ça je comprend pas le comportement de l'arrière plan. Le bg_header.jpg' est coupé...
Modifié par nims (15 Sep 2009 - 20:33)
Apparemment c'est la disposition qui est impossible.
j'ai refait un code de test propre. Faut trouver une autre méthode pour avoir le même effet...

Voir ici le même problème: http://www.izkal.fr/
Modifié par nims (15 Sep 2009 - 21:11)
Coucou,

Je me retrouve avec le meme probleme, j'ai un div qui contient des elements et qui a une image de fond.
Quand je retreci la fenetre du navigateur et que du coup je scroll vers le bas pour voir le bas du site, mon background est coupe...

As tu trouve une solution ?
Merci
bonjour,

la solution la plus pertinente est d'appliqué a body ou a #global , un min-width au moins equivalent au conteneur le plus large de la page.

GC
.
J'ai un peu approfondi le probleme, et j'ai remarque une chose:

Lorsque le background est applique au div qui contient les elements (par exemple du text), alors le scroll devoile le background sans probleme.
Par contre quand on a un div (on va l'appeler "main") avec un fond qui contient un autre div (on va l'appeler "content" qui a le contenu, dans ce cas, je me retrouve avec le probleme du fond coupe.
C'est comme si le div "main" se limitait a la taille du navigateur (je l'ai mis a height:100%). Il prend donc la hauteure de la fenetre du navigateur. Donc quand le contenu est plus grand que le navigateur, div "main" prend la hauteure de la fenetre et non celle de div "content". Je l'ai verifie en mettant un border a mon div "main", sa bordure basse coupe le div "content", donc il est moins haut que ce div qui se trouve a l'interieur de lui...

Voila mon css au cas ou:


div.main{
	width: 1009px;
	height: 100%;
	margin-left: auto;
  	margin-right: auto;
	background-image:url(../Site_images/Main/main.jpg);
	background-position:center top;
	background-repeat:no-repeat;
	border: solid 1px red;
}

div.content{
	width: 1009px;
	height: 690px;
	position:relative;
}
Je me suis trompe dans le css que j'ai poste...

Par contre j'ai trouve la solution.

j'avais :


div.main{
	width: 100%;
	height: 100%;
	background-image:url(../Site_images/Main/Main_fond.jpg);
	background-position:center top;
	background-repeat:no-repeat;
	border: solid 1px green;
}

div.content{
	width: 1009px;
	margin-left: auto;
  	margin-right: auto;
	background-image:url(../Site_images/Main/main.jpg);
	background-position:center top;
	background-repeat:no-repeat;
	border: solid 1px red;
}



En fait, il faut pas mettre le div "main" a height: 100%. Cela dit au div de faire la taille de la fenetre du navigateur. Du coup s'il y a un scroll, le div est coupe a partir du moment ou l'on scroll.

Il faut donc lui mettre min-height: 100%. Comme ca, si le div "content" n'est pas plus grand que la fenetre du navigateur (pas de scroll), alors le div "main" va faire la taille de la fenetre (et pas s'arreter a la taille de son contenu). Par contre si on a l'inverse (avec du scroll donc), le div"main" va prendre la taille de son contenu...
salut, j'ai résolu mon problème en appliquant une image fusionnée des deux au body...
C'est peut être pas propre...

Je regarderai ta solution !!
Sujet clos
Aller à