Comment déterminer les dimensions du sprite ?

**foucha** · 24/10/2012, 11h06

Bonjour,

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

Je souhaite remplacer le style suivant (.post blockquote)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

par l'appel à un sprite :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**Muchos** · 24/10/2012, 14h07

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**foucha** · 24/10/2012, 14h55

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**Muchos** · 24/10/2012, 17h14

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 " »" */

**Bovino** · 24/10/2012, 21h20

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.

**foucha** · 24/10/2012, 23h55

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :-)

Comment déterminer les dimensions du sprite ?

Dimensionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager