Aller au contenu

Texte calé en bas sur image de fond


nomasis

Sujets conseillés

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.

Lien vers le commentaire
Partager sur d’autres sites

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 ?

Lien vers le commentaire
Partager sur d’autres sites

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 ? :whistling:

Lien vers le commentaire
Partager sur d’autres sites

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

Lien vers le commentaire
Partager sur d’autres sites

ben si : mon image fait bien 169px

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

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é par nomasis
Lien vers le commentaire
Partager sur d’autres sites

Je crois qu'on ne se comprend pas :P

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 :blink: )

Lien vers le commentaire
Partager sur d’autres sites

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 ?

Lien vers le commentaire
Partager sur d’autres sites

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 ;)

Lien vers le commentaire
Partager sur d’autres sites

Ok ! je capte :P

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é)

Lien vers le commentaire
Partager sur d’autres sites

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é par Azon
Lien vers le commentaire
Partager sur d’autres sites

#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é par codesign
Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...