Comment déterminer les dimensions du sprite ?

Version imprimable

24/10/2012, 11h06
foucha

Comment déterminer les dimensions du sprite ?
Bonjour,

Je suis noob en intégration et quelque chose m'échappe sur les sprites.

Je souhaite remplacer le style suivant (.post blockquote)

Code:

background: #f5f5f5 url(images/quote.gif) no-repeat 4px 4px;

par l'appel à un sprite :
Code:

1 2 3 4 5 background-color: #f5f5f5; background-image: url(images/sprite.png); background-repeat: no-repeat; background-attachment: 4px; background-position: -0px -0px;
Mais je ne vois pas où lui spécifier la largeur et hauteur d'image à prendre. Je n'ai que la position. A l'affichage, je me retrouve effectivement avec les autres images du sprite à la suite.

Dans les tutos à ce sujet, il y a un espèce d'héritage mais je ne vois pas comment l'appliquer dans la mesure où mon bloc ne peut pas être limité aux dimensions de l'image -> il y a du texte après.

Le code généré par le sprite est le suivant :
Code:

1 2 3 4 5 .sprite-quote-gif { width: 60px; height: 60px; background-position: -0px -0px; }
Je sens que c'est tout bête mais un pointeur serait le bienvenu.

Foucha.

Imaginons: vous avez 2 images de guillemets de 60px × 60px dans votre image master (quotes.png).
Le conteneur pour vos sprites aura donc par défaut les dimensions de chaque image.

Pour placer en background le premier sprite, il suffit de définir un code de ce type:
Code:

1 2 3 4 5 6 7 8 9 div.quotes-left { background-image: url(quotes.png); background-position: 0 0; background-repeat: no-repeat; background-attachment: scroll; /* ou fixed ou inherit */ width: 60px; height: 60px; }
Pour le second, il suffit de changer :
Code:

1 2 3 4 5 6 div.quotes-right { ... background-position: -60px 0; ... }

Bonjour,

Mon souci est que quand je spécifie width et height, le div et son contenu texte se ratatine en conséquence sur un bloc de 60x60 alors que j'aimerais que seule l'image de fond soit cropé à 60x60.

Voici un exemple de code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <html> <head> <style type="text/css"> .post blockquote { font-family: Tahoma, "Lucida Grande", "Trebuchet MS", sans-serif; margin: 2em; padding: 3px 2em; /* ancienne version sans sprite background: #f5f5f5 url(images/quote.gif) no-repeat 4px 4px; */ background-color: #f5f5f5; background-image: url(images/sprite.png); background-repeat: no-repeat; background-attachment: 0px; background-position: -0px -0px; } </style> </head> <body> <div id="p129" class="post" xml:lang="fr" lang="fr"> <blockquote><p>Bonjour, j'ai du texte qui va au dela de l'image de fond et je ne veux pas qu'il revienne a la ligne</p></blockquote> </div> </body> </html>
En l'état, il ne peut effectivement pas fonctionner comme je ne spécifie nulle part de se limiter à 60x60. Je me retrouve avec le sprite entier.

Par contre, si je spécifie width et height
Code:

1 2 3 4 5 6 7 background-color: #f5f5f5; background-image: url(images/sprite.png); background-repeat: no-repeat; background-attachment: 0px; background-position: -0px -0px; width:60px; height:60px;
, le texte de mon blockquote revient à la ligne, c'est tout le paragraphe qui se contente d'un width de 60px.

Je ne sais pas comment faire pourtant le besoin me parait simple.

Foucha.

1. Les valeurs de background-attachment sont seulement scroll (défaut), fixed ou inherit.

2. C'est normal que le contenu se réduise à 60×60 s'il encadre tout. Selon moi, si tu veux utiliser un sprite d'images pour intégrer des guillemets avant et après ton blockquote :
Soit tu les intègres directement avec la balise img :
Code:

1 2 3 4 5 6 <blockquote> <img src="transparent.png" class="quotes quotes-left" /> <p>...</p> <img src="transparent.png" class="quotes quotes-right" /> </blockquote>
Soit tu les intègres en background d'un conteneur pour chaque guillemet (mais ça ne me paraît pas judicieux).
Code:

1 2 3 4 5 6 <blockquote> <div class="quotes-left"></div> <p>...</p> <div class="quotes-right"></div> </blockquote>
Mais le mieux serait sans doute de styler ton blockquote en full css \o/
Code:

1 2 3 4 blockquote > p {font-style: italic;} blockquote > p::before {content: "\00AB\00A0"; font-size: 2em;} /* rendra "« "*/ blockquote > p::after {content: "\00A0\00BB"; font-size: 2em;} /* rendra " »" */

24/10/2012, 21h20
Bovino

Sans revenir sur les interventions de Muchos, il semble que tu n'aies pas bien compris l'utilisation des sprite CSS...
A l'inverse de ce que tu peux faire avec une balise <img> (à savoir définir les dimensions de l'image affichée), tu ne peux pas définir les dimensions d'une image de fond d'un élément. C'est d'ailleurs là-dessus que se base le principe des sprites : ce sont les dimensions de l'élément sur lequel s'applique l'image de fond qui va déterminer la partie de l'image qui sera visible. Il ne reste ensuite qu'à positionner cette image de fond pour rendre telle ou telle partie de l'image globale visible.

Donc, pour répondre à ta question : "Comment déterminer les dimensions du sprite ?", la réponse est simple : "En ajustant les dimensions de l'élément HTML qui porte l'image de fond".

Voir : Optimisez le chargement des images de votre site avec les Sprites CSS.

Bonjour,

Effectivement, quand je vois les bidouilles que je dois faire, je me dis que je me suis trompé d'usage.

J'ai testé la solution 2, qui donne quelque chose d'assez ressemblant :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 .post blockquote .quote { /* ancienne version sans sprite background: #f5f5f5 url(images/quote.gif) no-repeat 4px 4px; */ display:inline-block; background-color: #f5f5f5; background-image: url(images/sprite.png); background-repeat: no-repeat; background-position: -0px -0px; width:60px; height:60px; } ... <blockquote> <p><span class="quote"></span>Bonjour, j'ai du texte qui va au dela de l'image de fond et je ne veux pas qu'il revienne a la ligne</p> </blockquote>
Puis la 3 pour éviter d'avoir à modifier le html, qui est généré sur le blog :

Code:

blockquote > p::before {content: "\201C"; font-size: 3em; color:#C0C0C0; }

Un gros merci à @muchos pour le pointeur, car il m'a fait réaliser qu'il existait une entité exactement identique à l'image.

Mieux qu'un sprite : pas d'image :-)

Avant de cloturer le sujet, je pouvais aussi utiliser un sprite en image de fond avec un before.

Code:

1
2
3
4
5
6
7
8
9
 
.post ul li:before {
content:"";
display: inline-block;
background: transparent url("images/sprite3.png") no-repeat -19px -41px;
padding-right: 2px;
width: 11px;
height: 6px;
}

mais je suis bien restée sur la version full css

Code:

1
2
3
4
5
6
7
 
/* pour ne plus faire appel à quote.gif > http://css-tricks.com/snippets/html/glyphs/ */
    blockquote > p:first-child:before {
    content: "\201C";
    font-size: 5em;
    color:#C0C0C0;
    }

Merci !