Texte calé en bas sur image de fond

[nomasis]

Hello...

voila ; je suis en train de m'épuiser à trouver une solution pour caler le texte d'une div en bas d'une image de fond.

Vous allez voir ICI le problème (c'est l'image et le texte de : La citation de l'instant.

Le code que j'ai mis est celui-ci :

#citcit{
	font-size: 1em;
	background-image: url(img//man_quote.png);
	background-repeat: no-repeat;
	font-weight: normal;
	text-align: right;
	margin-right: 0;
	margin-left: 0;
	padding-top: 169px;}

Comme vous le constaterez, le texte se retrouve dessous l'image.

Bref, ce n'est pas l'effet recherché.

Quelqu'un peut-il me venir en aide ? Merci d'avance.

[Perrine]

Bonjour Philippe

Je ne vois rien de bizarre dans ta page. L'image de fond est calé en dessous de ton titre "La citation de l'instant". Il (le titre) ne passe pas derrière l'image.

Ou alors, je n'ai pas compris le problème ?

[nomasis]

Hello Perrine

c'est moi qui m'explique mal.

Le titre est à sa place : ce n'est pas lui qui pose problème.

C'est plutôt le texte de la citation que je voudrais voir apparâitre sur l'image de fond, en étant calé en bas, fer à droite.

Est-ce que je suis plus clair ?

[Perrine]

Es-tu sur que ce n'est pas le padding-top de #citcit qui serait trop grand ? (169px ça me parait être la hauteur de ton image). Du coup, le premier élément de ton div vient se positionner à 169px du haut

[nomasis]

ben si : mon image fait bien 169px

EDIT : ben qu'est ce que j'ai écris moi !

C'est le projet de TCE qui me rend c...

J'ai mis un padding de 169 croyant que cela aurait pour effet de caler le texte en bas sur l'image, mais non : ça fait passer le texte en-dessous.

C'est énervant.

Modifié 14 Avril 2005 par nomasis

[Perrine]

Je crois qu'on ne se comprend pas

Si tu mets un padding-top de 169px, le premier bloc de #citcit sera positionné à 169px du haut. Jusque là, je crois qu'on est bon.

Donc, si tu veux que le texte s'affiche sur l'image, il suffit de diminuer le padding-top, non ?

(Je ne vois pas comment le texte peut passer sous l'image qui est en background )

[nomasis]

J'ai dis "sous l'image" ?

non, c'est sur l'image, pas sous, en surimpression donc

[Perrine]

Si ton image fait 169px de hauteur, et que ton padding-top fait aussi 169px, c'est normal que le texte vienne se caler juste après l'image.

En diminuant le padding-top de #citcit, le texte contenu dans #citcit remontera et s'affichera donc en surimpression sur ton image de fond. C'est ce que tu souhaites ?

[nomasis]

oui mais le texte n'a pas toujours la même longueur.

Comment puis-je faire coller le bas du texte sur le bas de l'image ? zat is ze couechtionne

[Perrine]

Ok ! je capte

Avec

vertical-align:bottom;

dans #citcit, ça donne quoi ?

J'suis pas sure remarque ...

Et un

blockquote{
position:absolute;
bottom:0;
}

Ca donne quoi ? (à condition que ton #citcit soit positionné)

[Perrine]

Et d'ailleurs, si tu veux que l'image soit positionné en bas de #citcit, il te faudrait mettre la règle suivante :

background-image: url(img//man_quote.png);
background-repeat: no-repeat;
background-position: left bottom; /*ce qui positionne ton image de fond en bas à gauche */

Modifié 14 Avril 2005 par Azon

[nomasis]

aïe ! on m'appelle pour diner.

Je regarderais demain oké ?

Bonne Soirée Azon euh... Perrine

[codesign]

#citation { position:relative;width:104px;height:181px;background:transparent url(man.jpg) no-repeat left top;font:normal normal 9px Arial, sans-serif; }

#citation p { position:absolute;text-align:right;left:0;bottom:0; }

<div id="citation">

<p>Dès que quelqu'un comprend qu'il est contraire à sa dignité d'homme d'obéir à des lois injustes, aucune tyrannie ne peut l'asservir.</p>

</div>

Position relative dans le premier pour indiquer que tout ce qui est en dessous prends pour base de coordonnées celui indiqué, puis position absolue pour le bloc afin de la positionner au bas de son parent.

Pas de quoi

Modifié 14 Avril 2005 par codesign

[nomasis]

Pas de quoi

<{POST_SNAPBACK}>

bon eh bien alors je vais remercier Azon

Merci Perrine !

[codesign]

Salut,

j'ai rien contre Azon, mais si tu reprends mon code, remercie moi aussi ;-)

++