[css] inclusion automatique d'img avant mes titres
3 réponses
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
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire
Veuillez sélectionner un problème
Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
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>
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>
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>
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 :
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 :
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 :