[CSS] superposer texte par apport a une image
Résolu
Maxg59
Messages postés
275
Date d'inscription
Statut
Membre
Dernière intervention
-
ibracadabra -
ibracadabra -
A voir également:
- Superposer un texte sur une image html css
- Extraire texte d'une image - Guide
- Insérer une image dans word sans bouger le texte - Guide
- Editeur html - Télécharger - HTML
- Image iso - Guide
- Légender une image - Guide
11 réponses
Ah zut ! J'avais pas vu que c'était du texte !
Dans ces cas la, c'est tout simple !!!
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>
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 !
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 !
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 :
Moi , en fait c'estjuste du texte que je veu mettre au dessu d'une image ;-)
d'avance merci !
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
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
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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.
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.
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.
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
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
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
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
Salut,
Pour ce que tu veux obtenir, il serait mieux de mettre ton image en position relative, et ton texte en position absolute, exemple :
Cela devrait correspondre à ce que tu veux, dis ce n'est pas le cas.
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.
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.
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.