28172 sujets

CSS et mise en forme, CSS3

Multiples Background : soucis...

Bonjour,

J'ai appliqué 2 images en background à mon site, un sur l'élément body (l'image de la fille que j'ai positionné en bas à droite) et l'autre sur le div d'id "conteneur" (un motif positionné à gauche qui se répète verticalement).

Le problème est que sur le 2nd background (le motif qui se répète), le conteneur ne prend pas toute la hauteur de la page (logiquement : il englobe juste le contenu...). Comment faire pour que ce soit le cas, c'est à dire pour que l'effet soit même que sur l'élément body ?

J'ai essayé d'applique height : 100% à #conteneur, sans succès.

[...]

et un bout de code css concerné par mon problème :


html {
	margin	: 0;
	padding	: 0;
}

body {
	font-size	: 65%;
	font-family	: "Trebuchet MS", Tahoma, Verdana, Arial, sans-serif;
	background	: url(../images/cowgirl.jpg) bottom right no-repeat fixed;
	
	margin	: 0;
	padding	: 0;
}

#conteneur {
	background	: url(../images/bg-left.png) bottom left repeat-y;
	height		: 100%;
}


Une proposition de solution ?
Modifié par SolMJ (12 Nov 2008 - 21:50)
SolMJ a écrit :
Une proposition de solution ?

Euh oui, un 'padding-bottom:1px;' dans les propriétés de 'conteneur' devrait résoudre ton problème.
Fait attention aussi a faire en sorte que les petites résolution voyent ton site s'afficher correctement. Smiley cligne
Shunkin a écrit :

Euh oui, un 'padding-bottom:1px;' dans les propriétés de 'conteneur' devrait résoudre ton problème.


Merci mais je viens de le faire (voir le lien vers le css) et ça n'a pas l'air de fonctionner Smiley decu

FunK a écrit :
Fait attention aussi a faire en sorte que les petites résolution voyent ton site s'afficher correctement. Smiley cligne


Ce n'est pas le cas ?
Modifié par SolMJ (01 Oct 2008 - 21:10)
Excuses moi mais je ne suis pas bien sûr de comprendre, tu parles du test dans ton header qui te décale le background vers le bas ?
Modifié par chooky (01 Oct 2008 - 21:18)
SolMJ a écrit :

Ce n'est pas le cas ?


Humm, j'ai redimensionné ma fenetre pour les résolutions 800 et 1024, t''es boite sont l'une par dessus l'autre... Smiley ohwell
FunK a écrit :


Humm, j'ai redimensionné ma fenetre pour les résolutions 800 et 1024, t''es boite sont l'une par dessus l'autre... Smiley ohwell


Effectivement j'avais testé sur une réso sup à 1280px de large, merci pour l'info.

chooky a écrit :
Excuses moi mais je ne suis pas bien sûr de comprendre, tu parles du test dans ton header qui te décale le background vers le bas ?


Non pas du tout, je parle de mon background repeat qui ne s'applique pas sur l'ensemble de la page (grossièrement : le rouge à gauche ne va pas systématiquement tout en bas).

Edit : j'ai supprimé 2 articles de la page (il en reste un) pour qu'on voit mieux le phénomène sur petites résolutions.
Modifié par SolMJ (01 Oct 2008 - 21:35)
à vu de nez comme ça je me demande s'il ne te manquerait pas un clear:both pour arrêter tes blocs qui flottent à gauche.
Du coup ton conteneur s'ajuste uniquement à ton bloc id="page".

tu rajoutes un <div style="clear:both"></div> après ton bloc page et tu seras de suite fixé Smiley ohwell
Modifié par chooky (01 Oct 2008 - 21:42)
chooky a écrit :
à vu de nez comme ça je me demande s'il ne te manquerait pas un clear:both pour arrêter tes blocs qui flottent à gauche.
Du coup ton conteneur s'ajuste uniquement à ton bloc id="page".


Oui, en effet, mais je ne pense que ça résolve mon problème, car au mieux le fond irait jusqu'en dessous de mes blocs en float : left, mais toujours pas sur l'ensemble de l'écran.
En effet, ma première proposition n'était pas correcte.
Une autre que j'espère meilleure:
Mettre un élément <hr/> à la fin de l'élément 'conteneur' et lui appliquer les propriétés suivantes :
clear:both;
width:100%;
visibility:hidden;
Shunkin a écrit :
En effet, ma première proposition n'était pas correcte.
Une autre que j'espère meilleure:
Mettre un élément <hr/> à la fin de l'élément 'conteneur' et lui appliquer les propriétés suivantes :
clear:both;
width:100%;
visibility:hidden;


Toujours pas (merci quand même pour tes propositions). Cela donne le même résultat que la proposition de chooky. Le fond va bien jusqu'en dessous des blocs float : left mais pas jusqu'en bas.

(J'ai laissé mon <hr /> pour l'instant)
J'ai résolu partiellement mon problème en inversant le background entre mon body et le div#conteneur, maintenant le rouge se répète bien dans toute la page, mais du coup c'est mon image de droite qui coince (même problème qu'avant en fait j'ai l'impression... :s)
J'ai trouvé la solution dans ton article, merci Florent.

Il fallait attribuer une height : 100% à html et body evant de faire min-height : 100% sur le conteneur Smiley smile
Sa passe niquel, sauf pour le 800x600 ou on voit un léger default concernament le fond de gauche et celui de droite, mais rien de bien grave ( vu que le 800x600 est en voit de disparition Smiley smile )
Sujet clos
Aller à