[CSS] superposer texte par apport a une image [Résolu/Fermé]

Signaler
Messages postés
275
Date d'inscription
vendredi 13 mai 2005
Statut
Membre
Dernière intervention
7 octobre 2006
-
 ibracadabra -
Salut a tous !
Je voudrais savoir si il etait possible, en CSS, de positionner du texte par apport a une image, mon but est d'eviter que le texte ne se deplace sur la page selon la resolution du visiteur(comme l'image a laquel je veu associer le texte est centrée).
( ex : je veu placer "BONJOUR ! " a x = 32px et y = 68px sur l'image)car si je ne le fait pas par apport a l'image, selon la resolution du visiteur le texte sera decalé de la ou je l'ai mi ( enfin je crois, a se niveau je n'ai pas beaucoup d'experience ...)
D'avance Merci !!
Max

11 réponses

Messages postés
515
Date d'inscription
lundi 18 octobre 2004
Statut
Membre
Dernière intervention
28 février 2007
123
Ah zut ! J'avais pas vu que c'était du texte !
Dans ces cas la, c'est tout simple !!!
<div style="width: 640px; height: 307px; border: 1px solid #000; margin: 0; padding: 0;">
   <img src="upload/logo.png" style="position: relative; left:0;top:0; width:200px; height:30px">
  <p style="width: 250px; height: 150px; top: 68px; left: 32px; margin: 0; position: absolute">
    salut blablablablab
  </p>
</div>
15
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65492 internautes nous ont dit merci ce mois-ci

Messages postés
515
Date d'inscription
lundi 18 octobre 2004
Statut
Membre
Dernière intervention
28 février 2007
123
T'as de la chance, je me suis pris la tete pour ca !!!
Je pensais que ca serait assez simple, mais pas vraiment...
Il existe en CSS, l'attribut position: relative.
Problème : si tu mets ton image du dessous en position relative, et ton image du dessus aussi, l'image du dessus se positionnera par rapport au bas de ton image du dessous (dont le code est au dessus... tu me suis :-p ).
Il y a 2 astuces :
- Soit tu crées un DIV avec un style="background-image:url(tonimage.jpg); width: 562px; height:347px;"
et tu places ton image du dessus en position relative par rapport au div, puisque ton image du dessous est dans les propriétés de la balise DIV :
<img src="tonimage2.gif" style="position:relative; top: 68px; left: 32px;">
- Soit tu crées un DIV général, dans laquelle tu mets un DIV qui contiendra l'image en position relative à left:0 et top:0 QUE TU NE FERMERAS PAS !
Tu ajouteras un autre DIV qui contiendra l'image du dessus en position relative à top: 68px et left: 32px. En effet, tu n'as pas fermé ton deuxième DIV, donc la position relative fonctionne par rapport à ton DIV general, et non pas à ton DIV de ton image du dessous (enfin c'est comme ca que je pense que ca fonctionne...).
Et là, tu fermes tous les DIV.

C'est un peu tiré par les cheveux, et si quelqu'un a une solution plus simple (ca doit bien exister...), elle est la bienvenue. J'ai pas trouvé en tout cas, moi...

Bon courage !
Messages postés
275
Date d'inscription
vendredi 13 mai 2005
Statut
Membre
Dernière intervention
7 octobre 2006
27
déja merci pour avoir pri le temps de me répondre !!!!!!!!!!!!
Pourrais-tume donner un exemple ??? ( en CSS je galére !!!! )
oui mieu : voici se que j'ai, pourrais tu me dire se qui va pas STP :
<Div>
<DIV style="position:relative; left:0; top:0;">
<img src="monimage.jpg" width="640" height="307" border="0">
<DIV style="position:relative; left:50; top:50;">
salut blablablablab
</div>
</div>
</div>

Moi , en fait c'estjuste du texte que je veu mettre au dessu d'une image ;-)
d'avance merci !
Merci pour ces explications StreM !!!!

Je recherchais sur le net comment résoudre mon problème, et ton explication des DIV imbriqués m'a énormément aidée : maintenant ça marche, je peux même inclure des images dans mes infobulles, et celles-ci apparaissent où je veux, sur ma carte créee en <MAP> avec des zones actives sur une image.

ça marche super bien, c'est génial !
C'est dynamique en plus, généré en PHP...

Bref, 1000 millions de mercis pour cette astuce qui m'a débloquée alors que je ne trouvais pas de solution !

Alexandra
s'il vous plaît arrêter d'utiliser les feuilles de styles internes, c'est déconseiller, soyer claire dans vos idées , et on pourra vous aider.
J'ai oublié de cocher la case pour recevoir les réponses par email... là c'est fait !

:-)
Bonjour, j'ai utilisé la méthode donnée par StreM, mais j'ai un problème: un espace important entre la fin de mon document et le bas de ma fenêtre windows est présent.
Je pense que c'est lié au nombreux DIV que j'utilise qui créer des écarts. Y a t il une solution pour éviter que chaque DIV créer un "espace"?

Merci pour votre aide.
span au lieu de div
> jogan
Le sujet est resolu,mais pour ma part j'ai aps reussi.(jai mal fait el truc peut etre).
Je trouve que cette soulution est plus simple.

Cet effet s'obtient avec <img src="golf.gif" align="left" vspace="5" hspace="10"> pour l'image et <div align="justify"> mettre votre texte </div> pour le texte qui entoure l'image.

La balise <hspace=""> fixe l'espace Horizontal vide entre l'image et le texte, tandis que <vspace=""> détermine l'espace Vertical.

La balise align="" détermine ici l'alignement de l'image qui peut être align="right", align="left".

La position du texte est commandée par <div align="">, avec possiblité comme pour l'image d'avoir align="left", align="justify" ou encore align="right".


Solution truver sur :
http://creation-du-web.com/honolulu/cours-html-javascript-page5.html
Messages postés
275
Date d'inscription
vendredi 13 mai 2005
Statut
Membre
Dernière intervention
7 octobre 2006
27
Ok merci !!!!
mais pourrais-tu me dire commentfaire pour "reduire une image " en CSS ( et pas la couper ...) le probléme c'est que c'est un fond d'ecran .... je me demande si c'est possible de rééchantilloner l'image et pas la rogner .......
D'avance Merci
Messages postés
275
Date d'inscription
vendredi 13 mai 2005
Statut
Membre
Dernière intervention
7 octobre 2006
27
Merci a vous !!!
vous m'avez beaucoup aider !!!!!!!!!
Merci !--
Max
Salut,

Pour ce que tu veux obtenir, il serait mieux de mettre ton image en position relative, et ton texte en position absolute, exemple :
<div style="width: 640px; height: 307px; border: 1px solid #000; margin: 0; padding: 0; background-image: url(monimage.jpg); position: relative">
  <p style="width: 250px; height: 150px; top: 68px; left: 32px; margin: 0;         position: absolute">
    salut blablablablab
  </p>
</div>

Cela devrait correspondre à ce que tu veux, dis ce n'est pas le cas.
Merci cent fois je galerais depuis ce matin .....
mais pourrais-tu me dire commentfaire pour "reduire une image " en CSS

Pour réduire une image avec du css, c'est tout bonnement impossible, dû moins à ma connaissance.

je me demande si c'est possible de rééchantilloner l'image et pas la rogner .......
J'avoues ne pas t'avoir bien compris.

Si tu tiens vraiment qu'une image soit le background de ta page, il va falloir que tu la redimensionne d'une largeur d'environ 760/770 px, c'est à dire pour une résolution de 800*600, et que tu adapte ta page à cette dimension, en l'ayant centrée dans le body.

Je vois pas d'autre solution.