Texte Html dans une image

Sujet résolu

4 mai 2006 à 13:10:04

Coucou !

Voilà, j'aurais voulu savoir comment on inserer du texte dans une image ! Mais que le texte soit centrer et aligner !

Car j'arrive à mettre du texte sur une image, mais il n'est jamais centrer verticalement.

Pourtant il existe une seul balise dans le css pour l'alignement centrer.

text-align: center;

Alors j'ai regarder les cours de M@teo, et je suis tomber sur les balises block et inline.

display: inline;
display: block;

Je me suis dit, cool ça doit avoir un rapport avec ça si mon image été reconnu comme un bloc. Mais rien ne change. o_O

strucky

4 mai 2006 à 13:39:15

Slt,

line-height: ..px; /* height de ton bloc */

Feeriz

4 mai 2006 à 13:43:39

Ok donc je dois définir une " height " à mon blog. Et ensuite mettre ton code.

Je vais essayer, je te remercie.

Edition : Hum, et bien ton code fait monter le texte ! N'y a t'il pas l'inverse, c'est à dire de le faire descendre ! :lol:

Merci !

strucky

4 mai 2006 à 13:58:43

Montres le bloc html où il y a ton image ainsi que son css.

Feeriz

4 mai 2006 à 14:11:45

<tr>
<td background="images/hcontenufond.gif" background-repeat="repeat"><div id="hcontenu"><div id="texthcontenu">
Ceci est un texte</div></div></td>
</tr>

/*image du haut contenu */
#hcontenu
{
width: 785px;
height: 37px;
background-image: url("images/hcontenufond.gif");
color: #B3B3B3;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
vertical-align: bottom;
}
#textcontenu
{
color: #B3B3B3;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
vertical-align: bottom;
}

Hum .. j'ai mis deux fois les codes de couleurs parce que je ne sais pas lequel est prix en compte !

strucky

4 mai 2006 à 14:35:00

A quoi servent réellement les 2 div ?

Perso ton code, je l'aurais simplifier à ça :

<tr>
<td id="hcontenu">Ceci est un texte</td>
</tr>

#hcontenu
{
width: 785px;
height: 37px;
background-image: url("images/hcontenufond.gif");
color: #B3B3B3;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
vertical-align: middle;
}

Feeriz

4 mai 2006 à 14:56:14

Pour moi le premier div signifiait que si l'image ne s'affichait pas avec le html, je l'afficherait avec le css. Et pour le second div, c'était pour le texte que je voulais écrire dessus.

Mais comme ça marchait, j'ai fais de la soupe de zér0s !

Je viens d'essayer et .. ça marche !

C'est génial !

Je vais me servir de cet exemple pour m'entrainer un peu à comprendre ta solution !

Merci beaucoup !!