CSS : pb image décorative sur un titre
Résolu
houba_houbi
Messages postés
119
Date d'inscription
Statut
Membre
Dernière intervention
-
houba_houbi -
houba_houbi -
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
<h2 class="center"><span class="img-titre">Contact</span></h2>
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
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
<h2 class="center"><span class="img-titre">Contact</span></h2>
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
A voir également:
- CSS : pb image décorative sur un titre
- Css download - Télécharger - HTML
- Enlever le soulignement d'un lien css ✓ - Forum Réseaux sociaux
- Css ligne horizontale ✓ - Forum CSS
- Enlever le soulignage des lien. - Forum CSS
- Enlever soulignement lien css ✓ - Forum CSS
3 réponses
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
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
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
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 <span> ou une <div> avec ton image en fond et le texte centré... ce qui doit donner un truc comme ça :
HTML :
<div class="img_center"><h2>Texte<h2></div>
CSS :
img_center{
position:relative;
width:200px;
height:50px;
display:block;
background: url(nom_image.png) no-repeat;
text-align:center;
}
Cordialement,
OREL
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 <span> ou une <div> avec ton image en fond et le texte centré... ce qui doit donner un truc comme ça :
HTML :
<div class="img_center"><h2>Texte<h2></div>
CSS :
img_center{
position:relative;
width:200px;
height:50px;
display:block;
background: url(nom_image.png) no-repeat;
text-align:center;
}
Cordialement,
OREL
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 !!!
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 !!!
