Rechercher : dans
Par :

[CSS] superposer texte par apport a une image

Dernière réponse le 18 oct 2009 à 16:25:36 Maxg59, le 12 sep 2005 à 14:36:13 
 Signaler ce message aux modérateurs

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

Meilleures réponses pour « [CSS] superposer texte par apport a une image » dans :
Les CSS pour présenter vos images VoirPour présenter agréablement vos images, vous pouvez intégrer quelques codes supplémentaires dans votre CSS et vous en servir à bon escient. Elles sont bien sur modulables en fonction de la charte graphique de votre site. Utilisation Mettez les codes...
Positionner des éléments grâce aux CSS VoirIl est possible grâce aux feuilles de style de positionner au pixel près du texte ou des images grâce aux balises et . Cela est possible avec les versions 4 de Netscape et d'Internet Explorer, cependant cette technique reste hasardeuse...
CSS - Les couleurs VoirLes couleurs Le standard CSS propose différentes façons de définir des couleurs : par un nom avec la notation hexadécimale avec la notation décimale Appel d'une couleur par son nom Le langage HTML définit des noms pour un nombre limité de...
PHP - Génération d'images VoirPrérequis PHP permet de créer des images au format GIF à l'aide d'une librairie de fonctions prévue à cet effet. La librairie permettant de créer et manipuler des fichiers graphiques se nomme GD, ainsi, pour pouvoir utiliser ces fonctions il faut...

1

StreM, le 12 sep 2005 à 16:34:46

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 !

Moins le blanc est intelligent, plus le noir lui parait bête

Répondre à StreM

2

Maxg59, le 12 sep 2005 à 19:13:05

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 ! Max 

Répondre à Maxg59

3

barbarian, le 12 sep 2005 à 23:05:55
  • +1

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.

Répondre à barbarian

11

isa, le 29 mai 2008 à 17:33:21

Merci cent fois je galerais depuis ce matin .....

Répondre à isa

4

Maxg59, le 13 sep 2005 à 18:04: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 Max

Répondre à Maxg59

5

barbarian, le 13 sep 2005 à 20:53:51

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.

Répondre à barbarian

6

StreM, le 14 sep 2005 à 09:57:22

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>

Moins le blanc est intelligent, plus le noir lui parait bête

Répondre à StreM

7

Maxg59, le 14 sep 2005 à 19:54:01

Merci a vous !!!
vous m'avez beaucoup aider !!!!!!!!!
Merci !--
Max

Répondre à Maxg59

8

alex, le 22 déc 2007 à 18:26:12

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

Répondre à alex

9

alex, le 22 déc 2007 à 18:27:05

J'ai oublié de cocher la case pour recevoir les réponses par email... là c'est fait !

:-)

Répondre à alex

10

shyshy, le 28 jan 2008 à 00:20:13

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.

Répondre à shyshy

12

jogan, le 9 jun 2008 à 18:52:56

Span au lieu de div

Répondre à jogan

13

 labellette, le 18 oct 2009 à 16:25:36

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

Répondre à labellette