Bonsoir à tous,

J'ai disposé sur mon site plusieurs cadres. Chaque cadre à un titre centré par rapport au cadre. Je souhaite maintenant insérer une image sur la même ligne que ce titre et faire en sorte que cette image soit collée sur la gauche du cadre. Et là, je bloque... voici mon code actuellement:

Citation

h3
{
background-color:rgb(21,90,157);
margin-top: 0px;
margin-bottom:10px;
border-bottom: 1px solid black;
text-align: center;
height:20px;
}
h3:before
{
text-align:left;
margin-bottom:0px;
content: url("icone.png");
}

Deux problèmes:
1. l'image reste collée au texte et non sur la gauche du cadre
2. mon texte est aligné verticalement sur le bas de l'image alors que je voudrais qu'il soit centré.

Merci d'avance pour voter aide.

Le problème de ton code, c'est qu'il ne fonctionne pas sous IE

Autre solution : définis une image de fond à ton h3 que tu aligneras à gauche, en ajoutant un padding-left pour que le texte ne soit pas sur l'image.

Merci beaucoup, j'ai réussi à faire exactement ce que je voulais. Voici le nouveau code:

Citation

h3
{
background-color:rgb(21,90,157);
margin-top: 0px;
margin-bottom:10px;
border-bottom: 1px solid black;
text-align: center;
height:20px;
background-image: url("icone.png");
background-repeat: no-repeat;
}

Au fait, pourquoi cela ne fonctionnerait pas sous IE, à cause du ':before'? (qui n'a plus de raison d'être d'ailleurs)

En effet, c'est à cause du pseudo-format :before
http://siteduzero.com/tuto-3-38-1-les-pseudo-formats.html#ss_part_3

Mais je viens de voir la news sur le SDZ de la sortie de IE 7 beta : MDR

J'ai pas le SP2, alors je peux pas l'essayer