Sprite CSS avec image inline

[Toma]

Bonjour,

Je me décide enfin à me mettre aux sprite CSS. Malheureusement, il s'avère que les images pouvant bénéficier de cette astuce doivent être de type block. Or j'utilise principalement des images inline, par exemple :

Code: Tout sélectionner

J'ai du texte et une image <img src="test.jpg> comme ça au milieu de mon texte.

J'ai bien trouvé des astuces pour soit-disant faire du sprite inline mais c'est à base de wrarper, de clip et de float: left qui ne semble fonctionner que pour des images au début d'un texte. (apparemment la fonction clip ne fonctionne que pour une image positionnée en absolute, et c'est ça qui pose problème)

Quelqu'un a-t-il une solution pour remplacer mon image ici par une image sprite avec le même comportement (c'est à dire qu'elle reste au milieu du texte) ?

[Leonick]

si tu ne mets aucun id à ton image, comment veux-tu la personnaliser en css ?

[marchandeo]

Personnellement je ne vois pas trop l'intérêt des sprites dans le cas des images inline (tu as certainement peu d'images de ce type par page).

[milkiway]

Que veux tu faire exactement ? Ce n'est pas compliqué d'obtenir un block avec un inline img{display:block}

[Toma]

@Leonick : Oui, je sais c'est juste un exemple pour montrer que l'image est bien au milieu d'un texte.

@marchandeo : C'est vrai que l’intérêt est limité mais j'ai 6 petites icônes, ça ferait donc 5 requêtes de gagnées et aussi quelques octets sur la taille des images.

@milkiway : En fait pour résumer le problème, j'ai trouvé deux techniques pour faire des sprite :
- la classique avec les background-image mais pour faire ça il faut que l'élément soit de type block (par défaut ou avec display:block). Ça ne me convient pas car je veux que mes images se comportent comme des éléments inline.
- une méthode de sioux avec la fonction clip qui permet de faire ça avec l'élément image, mais il doit alors être en absolute il faut donc le mettre dans un div "wrapper" qui lui est alors positionné avec des float:left ou right pour faire illusion. Mais finalement l'image n'a pas un comportement inline. (d'ailleurs je vois pas l'intérêt de cette solution prétendument inline puisque ça revient à positionner un div...)

Voilà, je pense qu'il n'y a pas de solution mais je demande au cas ou quelqu'un aurait trouvé dans son coin !

[Leonick]

http://www.alsacreations.com/tuto/lire/1068-sprites-css-background-position.html mais il faut utiliser des id pour les images, comme j'ai indiqué au dessus

[Toma]

http://www.alsacreations.com/tuto/lire/1068-sprites-css-background-position.html mais il faut utiliser des id pour les images, comme j'ai indiqué au dessus

Oui oui, je connais cette technique avec les background (j'avais dis background-image, désolé) mais le problème c'est qu'il y a toujours un display:block qui fait que l'élément n'a pas un comportement inline. Donc si on fait ça sur une image au milieu d'un texte, elle va à la ligne au lieu de rester dans le flux du texte.

[Leonick]

Oui oui, je connais cette technique avec les background (j'avais dis background-image, désolé) mais le problème c'est qu'il y a toujours un display:block qui fait que l'élément n'a pas un comportement inline

non, si ton image est déjà affichée, il te suffit de modifier les marges de l'image avec background-position: x y ; comme ça, tu n'as besoin que d'une image

[Toma]

Je crois qu'on ne se comprend pas . Je sais tout ce que tu dis, moi ce que je veux faire c'est la même chose mais sans utiliser "display:block" (en gros).

[milkiway]

Et bien je ne vois pas (du tout) le problème ?

[Leonick]

Je crois qu'on ne se comprend pas . Je sais tout ce que tu dis, moi ce que je veux faire c'est la même chose mais sans utiliser "display:block" (en gros).

et alors ? quel est le problème ? as-tu essayé avant de dire que ce n'était pas bon. D'abords sans mettre le display ou, si besoin, un display:inline ?

[Toma]

Bon, tant pis, c'est pas grave, j'arrive pas à vous expliquer. De toute façon j'ai contourné le problème en mettant mes textes dans des div et en faisant des float:left.

PS : le sprite css ne fonctionne pas avec des éléments inline car la propriété height n'est pas prise en compte pour ces éléments (si je ne me trompe pas) d'où mon problème.

[coolbens]

je crois avoir compris. Et quelles que soient les raisons pour lesquelles tu as besoin de ça, y a peut-être une solution.

imaginons une page traitant de... sauce bolognaise...

tu crées une image transparente (img_transp.png) la plus légère possible, qui te permettra d'utiliser la balise de "block inline" <img> comme suit :

Code: Tout sélectionner

<img src="img_transp.png" class="bolognaise" id="tomates" alt="Tomates pelées"/> (...) <img src="img_transp.png" class="bolognaise" id="viande" alt="Viande hâchée"/> (...) <img src="img_transp.png" class="bolognaise" id="oignons" alt="Oignons émincés"/>

t'inséreras cette image partout où tu voudras utiliser l'image sprite qui contient toutes les images dont tu as besoin dans ta page (ici trois images : des tomates, de la viande hâchée et des oignons). Cette image sprite (bolognaise.jpg) sera utilisée comme suit dans les styles :

Code: Tout sélectionner

.bolognaise{background:url(bolognaise.jpg)}
#tomates{width:200px;height:100px;background-position:0}
#viande{width:100px;height:50px;background-position:0 200px}
#oignons{width:150px;height:100px;background-position:0 300px}

concrètement l'image sprite contient trois images collées les unes aux autres en un bandeau horizontal

je n'ai pas testé avec tous les navigateurs