Positionnement texte/image

Résolu/Fermé
Charlypop Messages postés 51 Date d'inscription samedi 26 février 2011 Statut Membre Dernière intervention 24 septembre 2018 - 30 mai 2014 à 13:57
Charlypop Messages postés 51 Date d'inscription samedi 26 février 2011 Statut Membre Dernière intervention 24 septembre 2018 - 2 juin 2014 à 13:45
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 :


<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:

5 réponses

elgazar Messages postés 5841 Date d'inscription mercredi 30 octobre 2013 Statut Membre Dernière intervention 17 mars 2021 1 322
30 mai 2014 à 17:07
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
0
Charlypop Messages postés 51 Date d'inscription samedi 26 février 2011 Statut Membre Dernière intervention 24 septembre 2018 3
30 mai 2014 à 17:40
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 !
0
elgazar Messages postés 5841 Date d'inscription mercredi 30 octobre 2013 Statut Membre Dernière intervention 17 mars 2021 1 322
30 mai 2014 à 18:27
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*/
0
Charlypop Messages postés 51 Date d'inscription samedi 26 février 2011 Statut Membre Dernière intervention 24 septembre 2018 3
30 mai 2014 à 18:30
Ok merci je ferai plusieurs tests je donnerai des nouvelles demain !
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Charlypop Messages postés 51 Date d'inscription samedi 26 février 2011 Statut Membre Dernière intervention 24 septembre 2018 3
2 juin 2014 à 13:45
Ok ça fonctionne super ! Merci
0