Intégrer un picto (sprite) devant un titre (ie7 inclus)

Bonjour,

Ma question est en plusieurs partie, mais le résultat devrais ressembler à ça :
http://img11.hostingpics.net/pics/693249demo.jpg

Actuellement je procède de la sorte

<article class="demo">
<div class="car1"></div><h2>Lorem ipsum dolor</h2>
<p>Blabla</p>
<div class="car2"></div><h2>Vestibulum imperdiet</h2>
<p>Blabla</p>
</article>

.demo > div{
display: inline-block;
height: 20px;
width: 40px;
margin-right: 10px;
background: url("sprite.png") no-repeat;
}
.car1{
background-position: 0 -20px;
}
.car1{
background-position: 0 -40px;
}

Je sais pas si c'est vraiment propre de mettre un div vide, non ?

Je pourrais utiliser un :before, (qui ne fonctionne pas sous IE7, je sais) pour des partie ou je peut me permettre une dégradation gracieuse.
En CSS3, cela s'écris il me semble avec 2 ":" du coup je procède comment ?

h2:before{/*code...*/}
h2::before{/*code...*/}

En répétant 2 fois le même code ?

Quel est votre méthode pour un tel cas ? (avec le support de IE7)

Bonjour,

Vous pouvez appliquez une classe aux balises h2.

<h2 class="car1">orem ipsum dolor</h2>
<h2 class="car2">orem ipsum dolor</h2>

Concernant before l'un est une syntaxe css2 l'autre css3 (pris en compte à partir de Ie10) : explication

Il vaut donc mieux utiliser (si vous n'êtes pas un html5) :before

rodolpheb a écrit :
Bonjour,

Vous pouvez appliquez une classe aux balises h2.

<h2 class="car1">orem ipsum dolor</h2>
<h2 class="car2">orem ipsum dolor</h2>

Je ne comprend pas le coup des class sur les H2, enfin son utilisation
Car avec l'utilisation d'un sprite, je ne verrais pas qu'une partie de l'image ou alors il faut que je mette chaque pictogramme sur une ligne vide ou de la large du titre si il est fixe.
Ça va agrandir considérablement le sprite, ca me semble pas être une bonne idée. A moins que je fasse totalement fausse route. Pouvez vous me fournir un exemple du code CSS que vous imaginez ?

rodolpheb a écrit :

Concernant before l'un est une syntaxe css2 l'autre css3 (pris en compte à partir de Ie10) : explication
Il vaut donc mieux utiliser (si vous n'êtes pas un html5) :before

Oui je sais cela, mais même si j'utilise un structure en HTML5 et que je souhaite une retro-comptabilité (IE8 par exemple) il faut donc mieux que j'utilise un sélecteur CSS2 ?


EDIT :
J'ai pensez aussi à une autre façon de faire :
Au lieu de mettre un div vide mettre une img avec un alt descriptif et une image d'un gif de 1*1px transparent. Auquel je rajouterai via une class le bon, picto du sprite.
Sémantiquement ça ma l'aire correcte, non ?
Modifié par Cancre (29 Jan 2013 - 13:36)

La balise h2:
--lui donner une hauteur (hauteur du sprite)
--une largeur
--un display: block
--un padding-rignt (pour positionner le sprite)
--un backgrond: url("sprite.png")

Désolé d'insister, mais je ne comprend pas le coup du padding-right

http://codepen.io/pierre_tl/pen/dbmif

Oups pardon padding-left.

Ha oui... mais du coup ça oblige de faire un sprite avec les pictogrammes les un en dessous des autre sur des ligne vide et non un truc du genre

http://p-w.fr/up/r11fe.png

C'est pas bon, l'astuce de l'img avec un gif transparent ?

Cancre a écrit :
Ha oui... mais du coup ça oblige de faire un sprite avec les pictogrammes les un en dessous des autre sur des ligne vide et non un truc du genre

Avec un générateur de sprite aucun problème comme sprite cow.

http://codepen.io/anon/pen/FEaHr

Cancre a écrit :
C'est pas bon, l'astuce de l'img avec un gif transparent ?

que voulez-vous dire?
Modifié par rodolpheb (29 Jan 2013 - 16:10)

rodolpheb a écrit :

Avec un générateur de sprite aucun problème comme sprite cow.
http://codepen.io/anon/pen/FEaHr

Je crois que l'on se comprend pas.
Je connais sprite cow, même si je ne l'utilise pas, car pour moi ça ne sert qu"a récupèré les coordonnée d'un élément sur une image. Ou alors y'a un option que je connais pas.
Vous pouvez me montrer avec l'image du sprite de google plutot ?

rodolpheb a écrit :
que voulez-vous dire?

cancre a écrit :
EDIT :
J'ai pensez aussi à une autre façon de faire :
Au lieu de mettre un div vide mettre une img avec un alt descriptif et une image d'un gif de 1*1px transparent. Auquel je rajouterai via une class le bon, picto du sprite.
Sémantiquement ça ma l'aire correcte, non ?

Cancre a écrit :
Je crois que l'on se comprend pas.
Je connais sprite cow, même si je ne l'utilise pas, car pour moi ça ne sert qu"a récupèré les coordonnée d'un élément sur une image. Ou alors y'a un option que je connais pas.

Ça ne justifie pas de ne pas utiliser les sprites.

Cancre a écrit :
Au lieu de mettre un div vide mettre une img avec un alt descriptif et une image d'un gif de 1*1px transparent. Auquel je rajouterai via une class le bon, picto du sprite.

Comment intégrerez-vous alors ces sprites vu que vous ne voulez pas les utiliser.

Sinon autant éviter les div vides, car sans être une erreur ça n'est pas très sémantique. Il y a toujours un moyen de l'éviter.

Désolé je dois mal m'exprimé, parce que vous comprenais tout de travers

Quand je disait que je n'utiliser pas "sprite cow" je parlais de l'outils ! Pas de la technique du sprite en lui même. Bien sur que j'utilise un sprite, sinon je ne l’aurais pas spécifier dans le titre du topic.
Mais je n'est pas besoin de sprite cow car il ne m'apporte rien de ce que je sais déjà faire.
A moins que je me trompe sur son usage

Dans votre exemple code pen http://codepen.io/anon/pen/FEaHr
Vous utilisez bien 2 images différente ? On dirais en tout cas, mon problème que je pose ici c'est davaoir le meme rendu mais avec une spritesheet à la google comme sur mon exemple : http://codepen.io/pierre_tl/pen/dbmif

Pour évitez d'avoir ce souci de div vide, j'avais pensez donc à faire des img d'un gif tranparent (voir plus haut). A moins qu'il y 'est une autre solution
Modifié par Cancre (29 Jan 2013 - 17:05)

Encadrer le h2 d'un span.

Sinon j'en reviens à la méthode que je vous ai donnée dans le cas spécifique où vous avez des img de tailles identiques (ou relativement) que vous empilez verticalement dans votre spite sheet
Modifié par rodolpheb (29 Jan 2013 - 17:38)

Je vois pas ce que ça va changer ? On serra toujours avec la même problématique

Dans un cas comme celui-ci vous n'avez pas à vous préoccuper de la largeur de l'élément auquel sera appliqué le background.
Pour votre sprite il suffit de gérer les espacements correctement pour éviter les effets de bords.

Oui c'est une des solutions que je disait aussi tout en haut le seul problème c'est niveau optimisation le spritesheet va devenir énorme !

Bon après quelque recherche, je pense que la méthode des img et gif vide (voir en haut dans mon Edit) est peut être la mieux.

Merci quand même