28220 sujets

CSS et mise en forme, CSS3

[Résolu] Problème d'affichage avec image de fond

Bonjour,

J'essaie de réaliser une mise en page avec un fond ombré, en relief :
Test 01
Feuille de style :
test.css

Problème dans ces 2 cas :
- Quand je veux insérer une image que je fais flotter :
Test 02

- Ou si je fais flotter 3 blocs qui serviront de colonnes :
Test 03
Dans ces deux cas, l'image de fond répétée verticalement n'apparaît pas partout ...

Si je fais passer mon image de fond du bloc "page" au bloc "wraper", ça fonctionne correctement ... sauf que mon image de fond se reproduit plus bas, sous le footer.
Test 04

Qu'est-ce que je louppe ? Comment corriger ?
Merci pour votre aide

Ernesto
Modifié par Ernesto (28 Jun 2005 - 17:24)
Plop,

Le principe du clear: both est de positionner le footer avant la fermeture du div qui comporte l'image de fond qu'on veut faire descendre. DOnc je pense qu'il te suffit de remonter d'un niveau ton footer.
Merci tyx,

Remonter d'un niveau : tu veux dire le placer avant le </div> précédent ?

Je viens de tester, et j'ai le même résultat que dans mon lien test 04 ci-dessus :Test 04

J'ai l'image qui passe sous le footer et qui se répète verticalement plus bas.
C'est ton padding top et bottom sur ton footer qui crée cet espace.

Tu peux virer le bottom je pense, et si tu gardes le top, il faudra déduire sa valeur à la hauteur de ton footer. Donc ici 97 - 40 = 57 ^^
Merci tyx,

Je viens de corriger, c'est ok, si je ne place aucun padding vertical !
Un petit 10px en padding-top produit un supplément d'image de 10px en bas.
On est d'accord que tu peux corriger ce supplément en déduisant à la hauteur de ton #footer la valeur de ce padding-op ?

Je ne sais pas si j'ai été très clair dans mes dernières explications donc je préfère être sûr que je ne te laisse pas avec une fausse idée Smiley sweatdrop
Je viens de comprendre (enfin !) ce que tu voulais dire Smiley smile )).
Ca fonctionne comme attendu ... mais je dois encore intégrer le pourquoi de cette manip (pour sortir du "truc", de la recette à appliquer)...

PS : Je viens de commander le bouquin de Raphaël ... Smiley smile
Le pourquoi est très simple et se résume par une petite équation :

hauteur totale d'un bloc = padding-top + border-top + height + border-bottom + padding-bottom

et son équivalent pour la largeur

largeur totale d'un bloc = padding-left + border-left + width + border-left + padding-left

En complément Dimensions boites css

Bonne chance pour la suite Smiley smile
Sujet clos
Aller à