Problème avec le texte à l'intérieur d'une image [Problème résolu]

Bonjour à tout le forum,

Voilà, jài un petit souci à mettre un texte à l'intérieur de mon images. J'ai bien chercher dans le net plusieurs solution évidemment qui ne fonctionne pas pour moi (je précise).
J'ai pensé qu'avec le dernier css serait bon, mais toujour pareil, fonctionne pas.

Je vous donne le code : Code css :

#roundimage {
background: url(images/monimage.gif) no-repeat;
width: 555px;
height: 300px;
}

Puis code html:

<div id="roundimage">Mon texte sur l'image</div>

merci pour votre aide si quelqu'un à une solution, je suis débutant, je commence dans le CSS.

Le mieux est de vous montrez l'image:

Modifié par Dorian48 (20 Aug 2008 - 13:28)

Hello,

Ta solution me semble correcte pourtant Dorian. Qu'est-ce qui ne marche pas selon toi ?

As-tu une page en ligne à montrer ?

Bonsoir Didodu258 et Tymlis.

je vais premièrement essayer ta formule Didodu258 et te donnerai le résultat, dans l'attente je te remercie beaucoup.

Tymlis, le texte se trouve dessous l'image et pas dans l'image. Si je savais c'est pour cela que j'ai besoin de votre aide.

Je vous envoie un screenshoot de la page, juste une petite partie car nous n'avon droit qu'a 200kb



Merci pour votre aide ainsi que tout le forum.

Salut Dorian48,

la première chose à faire est de voir si ton image est purement décorative auquel cas il faudra effectivement la mettre en background d'un élément qui contiendra le texte ou bien (et il me semble que c'est le cas) si elle porte une information auquel cas elle devrait se trouver dans le code html à l'aide d'un élément IMG. Le texte sera ensuite positionné (soit à l'aide de position:relative; soit de position:absolute) et il faudra lui affecter un z-index pour le placer au dessus de l'image.

Un petit exemple :

html

<div id="monproduit">
	<img src="monproduit.png" alt="mon super produit que j'ai" width="560" height="300" />
	<p>Mon texte sur l'image</p>
</div>

css

#monproduit {
	position: relative;
}

#monproduit p {
	position: absolute;
	top: 200px;
	left: 350px;
	color: yellow;
	z-index: 10;
}

A+

Edit: (re)lire également : Comment positionner les éléments en CSS.
Modifié par Heyoan (06 Aug 2008 - 04:08)

Bonsoir Heyoan,

tu es super, je m'empresse d'essayer ta formule qui je suis certain est la bonne. En te remerciant mille fois.
Oh à propos, je fais toujours des .css en externe. Que mon conseilles-tu vraiment est-ce bien, pas très professionnel ou cela n''appartient pas aux règles du WC3 ?.

De plus comment puis-je placer mes bouttons radios à l'intérieur de l'image avec un petit cadre blanc et faire comme tu m'as préconisé de faire comme un formulaire. Mais je les voudrai à l'intérieure de l'image.

Radio1 : 1 PC 1an ------ Prix € 00.00 image "Acheter"
Radio2 : 1PC 2ans Prix € 00.00 image "Acheter" etc.

Merci beaucoup pour ta précieuse aide. J'espère être dans quelques années aussi bon que toi, Encore merci

Dorian48 a écrit :
Oh à propos, je fais toujours des .css en externe. Que mon conseilles-tu vraiment est-ce bien, pas très professionnel ou cela n''appartient pas aux règles du WC3 ?.

C'est une très bonne idée puisque de cette façon il te suffit de modifier ta feuille de style et cela se répercutera sur toutes les pages qui l'utilisent alors que sinon tu serais obligé de faire cette modification dans chacune des pages.

Pour ce qui est du formulaire c'est exactement le même principe que pour le paragraphe de mon exemple : il faudra en plus lui donner les dimensions adéquates et lui affecter un background-color.

Sinon, je suis loin d'être un expert, contrairement à plusieurs personnes qui modèrent ou qui fréquentent le forum.

Merci beaucoup Heyoan, sujet donc Résolu.

Fonctionne à merveille sauf que le texte n'est pas l'un en dessous de l'autre. La première ligne du texte Ok seconde ligne décalée d'environ 10-20px et la troisieme revient en dessous de la première. Une idée ?
Merci.

Je t'envoie un screenshoot

J'ai voulu essayer avec "<div align="right"> mais le texte revenait endessous de l'image.
Modifié par Dorian48 (06 Aug 2008 - 04:55)

Dorian48 a écrit :
J'ai voulu essayer avec "<div align="right"> mais le texte revenait endessous de l'image.

C'est quand même dommage de faire des css et d'utiliser des attributs de mise en forme obsolètes !

A priori il suffit de rajouter :

#monproduit p {
	...
	text-align: right;
}

<hs : bon là je vais me coucher parce qu'en France il est 5h00 du mat' />

Merci et bonne nuit , je ne savais pas que c'était obsolète Ohlala, la honte.

Donc cette fois problème résolu. Merc pour tout Heyoan et les autres.

Serge