[résolu] Image en background et hauteur de colonne

Bonjour,

Je suis en train de m'arracher les cheveux sur un sujet hyper banal.

Une page avec deux colonnes. Celle de droite est flottante et contient le menu. A gauche le contenu (colonne non flottante). Puis le footer.

J'aimerai que la colonne droite (flottante) affiche une image qui parte du bas (c'est un végétal) et donc que cette colonne soit bassement alignée avec le footer.

Entre colonne factice, hr, background dans le html ou le css... à force de tout essayer (et probablement mal) je m'y retrouve plus.

Quelle est la meilleure méthode selon vous?

(j'avais trouvé une solution en spécifiant une hauteur à la colonne flottante et alignant en "bottom" l'image contenu dans le css. Mais le pb c'est que selon la quantité de contenu dans la colonne de gauche, ça risque de se décaler).

Merci d'avance.
Modifié par lodemars (01 Dec 2008 - 16:45)

Bonjour,

C'est censé ressembler à quoi?

http://www.badjao.fr/

et l'image, telle que j'aimerai la placer :

http://www.badjao.fr/badjao.gif

(loin d'être fini, le site ne doit pas manquer d'erreur)

Bonjour,

Personnellement je mettrai l'image en bas à droite de #conteneur, quelque chose comme ça :

#conteneur {background:#42440e url(image_de_fond) right bottom;}

Modifié par Shunkin (01 Dec 2008 - 15:28)

Shunkin a écrit :
Bonjour,

Personnellement je mettrai l'image en bas à droite de #conteneur, quelque chose comme ça :

#conteneur {background:#42440e url(image_de_fond) right bottom;}

Avec un overflow:auto sur ce conteneur, c'est effectivement la bonne méthode à adopter.

'gnifique! Merci.


Juste deux petites précisions :

-A quoi sert dans ce cas le overflow :auto? (je ne l'ai pas mis et ça marche très bien sous IE et FF)
-Mon image est bien right et bottom. J'aimerai cependant quelle soit un peu moins collée au bord droit. Comment lui assigner un espace à droite?

lodemars a écrit :

-A quoi sert dans ce cas le overflow :auto? (je ne l'ai pas mis et ça marche très bien sous IE et FF)

À créer un contexte de formatage en prévention d'une longueur plus importante pour la colonne de droite.

lodemars a écrit :

-Mon image est bien right et bottom. J'aimerai cependant quelle soit un peu moins collée au bord droit. Comment lui assigner un espace à droite?

En utilisant des valeurs numériques, par exemple:

#conteneur {background:#42440e url(image_de_fond) 80% 100%;}

Ou encore: background-position: 500px bottom;, par exemple (les 500px partent du bord gauche de l'élément... on ne peut pas demander une position du bord droit de l'image de fond par rapport au bord droit de l'élément).

Ok merci, tout est nickel.