Positionnement texte/image
Résolu
Charlypop
Messages postés
51
Date d'inscription
Statut
Membre
Dernière intervention
-
Charlypop Messages postés 51 Date d'inscription Statut Membre Dernière intervention -
Charlypop Messages postés 51 Date d'inscription Statut Membre Dernière intervention -
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 !
A voir également:
- Positionnement texte/image
- Extraire texte d'une image - Guide
- Image iso - Guide
- Transcription audio en texte word gratuit - Guide
- Excel cellule couleur si condition texte - Guide
- Insérer une image dans word sans bouger le texte - Guide
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
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 !
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*/
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question