OVH Cloud OVH Cloud

[css] inclusion automatique d'img avant mes titres

3 réponses
Avatar
Stéven
Bonjour
Je souhaiterais inclure avant chacun des sous-titres présents sur mon
site une petite image (genre flèche, puce, etc)
J'ai vu sur le site [http://mammouthland.free.fr/cours/css/cours5.php]
que cela était possible en CSS grâce à une classe du style
[.monsoustitre:before {content:url(img/fleche.png)}].
Seul hic, comme d'habitude IE ne prend pas la chose en compte :(
Ne voulant pas me la jouer élitiste, comment faire pour adapter cette
technique à IE ? Y a-t-il seulement une possiblité en CSS ou dois-je
insérer une balise <IMG> dans mon code HTML ?
Merci !
Stéven

3 réponses

Avatar
mauriz
Stéven a écrit :

Ne voulant pas me la jouer élitiste, comment faire pour adapter cette
technique à IE ? Y a-t-il seulement une possiblité en CSS ou dois-je
insérer une balise <IMG> dans mon code HTML ?


Comme tu le suggères, le plus simple voudrait que tu insère un balise
<img /> avant chaque sous-titre.
Une autre possibilité serait de mettre l'image en fond (sans répétition
et à gauche) et d'appliquer un padding équivalent à la largeur de ton
image sur ton sous-titre.

<style>
/*Pour une image de 15px de large par exemple*/
h2{
background-image: url(puce.png);
background-position: left;
background-repeat: no-repeat;
/* pour aller plus vite, ça peut être remplacé par:*/
/* background: url(puce.png) left no-repeat*/
padding-left: 15px
}
</style>

<h2>Mon sous-titre</h2>
Avatar
Serge Hartmann
Stéven wrote:

Je souhaiterais inclure avant chacun des sous-titres présents sur mon
site une petite image (genre flèche, puce, etc)
J'ai vu sur le site [http://mammouthland.free.fr/cours/css/cours5.php]
que cela était possible en CSS grâce à une classe du style
[.monsoustitre:before {content:url(img/fleche.png)}].



si tu cherches à faire comme sur ce site :
http://www.antipolis.fr/fr/
des titres décorés d'images (à gauche, en haut, etc.), il te suffit de
faire comme ceci :

h1 {
padding-top:10px;
margin-top:20px;
background-image: url(/images/deco-titre.png);
background-position: top left;
background-repeat: no-repeat;
text-indent:32px;
font-size:larger;
letter-spacing:1.8px;
word-spacing:5.5px;
text-shadow: 3px 3px 5px black;
}

si c'est pour une simple puce devant le titre (à la place de background-*)
:

display: list-item;
list-style-image: url("images/puce.png");
list-style-position: inside;


--
Serge Hartmann
jabber-id :
Avatar
Stéven
Eh eh eh, je n'avais pas pensé à ces deux solutions, plutôt ingénieux !
Merci pour les infos,
Stéven