Positionnement texte/image
Résolu
Bonjour,
Je suis entrain de développer un site wordpress pour mon entreprise et j'aimerais dans l'une des pages positionner du texte sur une image.
Pour cela j'ai inséré le code HTML suivant :
Puis le css suivant :
Je n'ai rien ajouté dans le css volontairement je voulais déjà avoir vos avis.
Pour commencer, le html est-il correct ? Je voudrais que le titre h4 apparaisse dans un endroit précis de l'image. L'utilisation de position absolute est-elle justifier dans mon cas ou y a-t-il d'autres solutions pour y parvenir ? J'ai peur qu'en utilisant absolute le titre apparaisse n'importe où en fonction des résolutions.
Merci de votre aide !
Je suis entrain de développer un site wordpress pour mon entreprise et j'aimerais dans l'une des pages positionner du texte sur une image.
Pour cela j'ai inséré le code HTML suivant :
<div class="test">
<img src="http://localhost/.../wp-content/uploads/2014/05/ribbon.png"class="truc">
</div>
<span class="machin"><h4>fnhffn hd klsio js sh</h4></span>
Puis le css suivant :
.truc
{
position: relative;
}
.machin
{
position: absolute;
}
Je n'ai rien ajouté dans le css volontairement je voulais déjà avoir vos avis.
Pour commencer, le html est-il correct ? Je voudrais que le titre h4 apparaisse dans un endroit précis de l'image. L'utilisation de position absolute est-elle justifier dans mon cas ou y a-t-il d'autres solutions pour y parvenir ? J'ai peur qu'en utilisant absolute le titre apparaisse n'importe où en fonction des résolutions.
Merci de votre aide !
5 réponses
-
non en fait avec ton code tu vas afficher l'image et en dessous ton texte
pour que ton texte apparaisse par dessus l'image, tu dois dans les css la mettre en background de la div puis dans le code mettre le h4 dans la div
dans le code
<div id="truc"><h4>ici ton texte<h4></div>
dans les css
#truc {
height: 100px;
width:100px;
background-image:url(images/image.jpg);
}
#truc h4{
color:ff0000;
}
si tu ne veux mettre du texte que dans une seul div, inutile de mettre un span, tu mets simplement un style à la balise h4 de la div truc, si tu as plusieurs div avec des noms différents alors tu devras remettre un span -
Ok !
Mais comment positionner correctement ma balise h4 sur mon image.
Concrètement, je souhaiterais intégrer du texte dans des "rubans" comme ceux là : https://fr.freepik.com/vecteurs-libre/conception-bannieres-libres-vecteur_712804.htm
Je travaille beaucoup avec les vecteurs. On vire le texte et tout et tout et on a plus qu'à exporter en image.
Merci de m'indiquer une astuce ! -
tu le positionne avec du css tout simplement, dans truc h4 tu rajoutes
height:100px; /* a modifier suivant la hauteur de l'image */
line-height:100px;/* a modifier suivant la hauteur de l'image */
text-align:center;/* pour aligner horizontalement automatiquement*/ -
Ok merci je ferai plusieurs tests je donnerai des nouvelles demain !
-
Ok ça fonctionne super ! Merci
