CSS : pb image décorative sur un titre Résolu/Fermé

Question

Bonjour, J'ai mis une image décorative à mes titres en arrière-plan, avant le titre et à gauche (à l'aide d'un span sinon cela ne fonctionnait pas) : HTML

Contact

CSS .img-titre { background-image: url(../Images/lys-orange.png); background-repeat: no-repeat; background-position: left center; margin-left: -25px; padding-left: 25px; } Sous Firefox = OK. En revanche sous IE v6 et v7 = l'image est centrée dans mon titre, impossible de rectifier avec les padding, margin... Que faut-il faire ? Merci d'avance

irem · Answer

les background en png sont toujours une tannée sous ie, deux solutions :

1) La compliquée : ecrire dans le css un truc que peu de personnes ne comprennent, du style
 a.toto {url(../images/image.png);
_background:none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/image.png', sizingMethod='scale');}

2) Plus simple, ne pas mettre l'image en background mais dans une div en position absolute et ecrire par dessus avec un z-index plus élevé

Irem

0ReL · Answer

Salut, bon déjà je comprend pas le margin:-25px et le padding:25px, passe les deux a zero pour commencer ! Puis récupere la taille de ton image si tu veux que tte l'image s'affiche, sinon l'image s'affichera seulement sur la hauteur et largeur du texte. Ensuite tu peux enlever le background-position: left center; puisque tu lui indique de centrer ton image c'est normal qu'elle le soit sous IE... tu peux laisser left mais pas sur que ça serve. Enfin il existe effectivement des problemes avec le png sous IE6, mais ça marche tres bien sur IE7, pour cela on utilise un pngfix : http://www.geekomatik.com/les-png-fix-pour-internet-explorer-ie Sinon mon conseil serait de donner une taille a ton ou une

avec ton image en fond et le texte centré... ce qui doit donner un truc comme ça : HTML :

Texte

CSS : img_center{ position:relative; width:200px; height:50px; display:block; background: url(nom_image.png) no-repeat; text-align:center; } Cordialement, OREL

houba_houbi · Answer

Bonjour,
Tout d'abord, merci pour vos réponses.

Irem :
1/ Je ne comprends pas le pb des images png, j'ai testé sous IE 6,7 et 8 : je n'ai pas de pb
2/ L'intérêt était de mettre en background car l'image n'a pas d'intérêt au niveau accessibilité

Orel :
1/ pour les margin/padding : je m'aperçois que les commentaires css que j'ai sur ma feuille de styles ne sont pas visibles je ne sais pas pourquoi. 
Bon, déjà j'ai un * avec padding et margin à 0 donc OK. 
L'astuce (j'avoue très zarbi ;-) ) était que le titre commence après la largeur de mon image et le négatif pour que l'image et le titre soient décallés pour rattraper le centrage (j'ai pas l'impression d'être claire...)
2/ J'ai essayé tes astuces, mais rien n'y fait...

Le problème vient du fait que je veux centrer un bloc h2 avec une image avant. Je n'ai aucun souci avec différentes méthodes en laissant mon titre à gauche, mais dès que je le centre : rien ne va plus !

Bon je laisse tomber, j'ai mis mes titres à gauche, et en fait ce sera d'ailleurs plus joli !!!

CSS : pb image décorative sur un titre

3 réponses

Discussions similaires