Discussion :

[boutmos]

Bonjour,

Pour superposer une image et du texte, habituellement je n'ai aucun soucis. Je crée une div avec un background-image et j'utilise la balise HTML appropriée pour y superposer mon texte.

Donc on a bien d'une part le contenu et de l'autre la mise en forme.

Hors ici je suis confronté a un soucis qui me force a utiliser la balise <img src /> d'une part et de l'autre une balise classique <p>

J'aimerais donc pouvoir afficher la balise <p> alignée sur le centre de la balise img. Comment puis je m'y prendre en utilisant le CSS svp ?

ci dessous mon code HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
<img src="squelettes/images/pourcent.gif" alt="" class="pourcent" style="background-position:" />
<p class="pertinence">70 %</p>

resultat actuel :

resultat desiré :

[devyan]

Salut,

Essaye comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
.pertinence {
     position:relative; /* élimine le "position:static" par défaut */
     top:-YYYY; /* pour remonter le texte, YYYY = height de ton image */
}

Cela devrait correspondre à ce que tu attends.

[c_s_s]

Bonjour,

Tu peux mettre les deux éléments en position absolue, l'un par dessus l'autre ; ou tu peux mettre une marge haute négative sur le contenant du texte.


Edit : la proposition de devyan est une bonne solution.

[boutmos]

j'ai mis ceci :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.pertinence{
   display : inline;   // Il me l'affiche a meme hauteur que la balise IMG
   margin: 0px 0px 0px -70px;  // decale vers la gauche le texte 
   ....
}

Problem : sous IE6, la balise de texte se retrouve cachée par l'image. Alors que dans le CSS, la classe .pertinence est traitée apres celle de la balise image.

J'ai essayé de jouer sur le Z-index ais aucun resultat.

Merci

[devyan]

Bonjour,

Tu peux mettre les deux éléments en position absolue, l'un par dessus l'autre ; ou tu peux mettre une marge haute négative sur le contenant du texte.


Edit : la proposition de devyan est une bonne solution.

c_s_s

[c_s_s]

Boutmos, utilise plutôt la technique de devyan en mettant une valeur appropriée pour le top négatif.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.pertinence {
     position:relative; 
     top:-??px; 
}

[boutmos]

j'ai donc testé la methode de devyan, hors sous IE6, les marges n'etabnt pas les mêmes, j'etais embeté.

J'ai melangé ma technique avec la sienne pour obtenir ceci :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.pertinence{
	position: relative;
	display:inline;
	left: -80px;
}

et la j'ai un resultat identique sous FF3.0.3 / IE6 et Safari 3.2

Juste un petit décalage sur le haut du a la hauteur de font encore qui me chagrine.

[boutmos]

Encore une petite mixture de tout çà pour obtenir ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
.pertinence{
	position: relative;
	display:inline;
	left: -80px;
	top: -2px;
       ... suite du traitement
}

Ca marche, merci les gars

[devyan]

j'ai donc testé la methode de devyan, hors sous IE6, les marges n'etabnt pas les mêmes, j'etais embeté.

Si les marges de P par défaut te gênent il est préférable des les modifier (voire même de les annuler) sur ".pertinence".

De plus elles peuvent changer d'un navigateur à un autre.

[boutmos]

erf ah oui j'y ai plus pensé, habituellement je les elimines pour avoir un resultat identique partout.

Sinon je viens de tester sous Ubuntu Firefox (Polices, les polices different legerement). C'est bon, bien centré en hauteur et en largeur.

Testé egalement sur Seamonkey , Opera sous systeme MacOS X, resultat identique aussi.

Résolu