Forum

Bonjour,

J'ai traduis une phrase en anglais :

Similaire à JavaScript et CSS, télécharger des images multiples allers-retours supplémentaires encourt. Un site qui contient beaucoup d'images peut les combiner dans des fichiers de sortie de moins de réduire la latence.

En faite c'est pour opitimiser un peu les images mais je ne comprend pas cette phrase et ce que je dois faire svp. Merci.

BOnjour,

Je pense que la version original serait pas mal pour vérifier la traduction voir, l'interpretation que l'on peut faire du sujet.

ElenWii

Regardes ici : http://www.alsacreations.com/tuto/lire/1068-sprites-css-background-position.html

à vi, ce que j ai fait pour les images du footer.

le principe est simple. tu regroupe tes images dans un même fichier, et après tu fixe la bonne taille et la bonne position dans ton code
ElenWii

Bonjour,



Qu'entend tu par :

sur une seule et meme image

imaginons une image, groupe.jpg, qui regroupe plusieures images de 100px de large et de 30px de haut et on les place les unes au-dessus des autres. pour 10 images on a donc une image de 300px.



pour chaque class qui va nécessiter une image parmi toutes, on n'appelle que l'image groupe.jpg, c'est la définition de l'attribut background-position qui va déterminer l'image affichée



ex

.maclass1 {

background:url(groupe.jpg) 0 0 no-repeat;

width:100px;

height:30px;

}

le 1er "0" = décalage horizontal depuis le bord gauche de la div - le 2eme "0" = décalage vertical depuis le bord haut de la div. ici l'image groupe.jpg est chargée sans décalage mais seulement 30px de l'image sont montrés. ce qui correspond à la image du haut.



.maclass2 {

background:url(groupe.jpg) 0 -30px no-repeat;

width:100px;

height:30px;

}



le 1er "0" = décalage horizontal depuis le bord gauche de la div - le 2eme "-30px" = décalage vertical depuis le bord haut de la div donc ici l'image groupe.jpg est chargée et décalée de 30px vers le haut laissant ainsi apparaitre la deuxième image



background:url(groupe.jpg) 0 -30px no-repeat; correspond à

background-image:url(groupe.jpg)no-repeat;

background-position: 0 -30px;

Édité par babsolune Le 29/03/2013 à 12h41

Je pense que tu comprendra avec cette image :


+ un code CSS adapté :

ElenWii

A ce sujet, j'ai trouvé ce tutoriel qui, à mon avis, explique clairement les choses.

Bonjour,

Merci pour vos aides. Avec l'explication de Babsolune je commence à comprendre le principe, mais c'est pas gagner encore ^^ mes images font 32x32 et j'en ai 9 donc je dois coller sur une même images de 288x288px, enfin je crois. Je vais lire aussi le tuto d'Amrom. Elenwii c'est dans le réglage des - et des + que je me perd

Édité par riptide Le 30/03/2013 à 17h58

Fait une image plus grand si tu veux, cela n'a pas d'importance.

Pour les positions regarde cette image de siteduzero :


En général, je créer le background à 0% 0% puis je cherche la bonne valeur avec firebug

ElenWii

Bonjour,



j'ai créer grâce au générateur mon sprites:





j'ai mis ça dans le css:

/* Sprites des images footer, chat, à propos, affilies, etc.. */





Par contre pour l'afficher dans mon menu footer déjà bien complexe je suis larguer..

Bonjour Riptide,

Avant toute chose, je t'invite à gagner en lisibilité CSS : associe la taille {width: 32px; height: 32px;} à une class générique pour éviter la répétition qui est lourde visuellement dans le fichier CSS et qui ne sert pas à grand chose.

Après il te suffit d'appeler un truc du style :
Tu remarqueras la double class. La première pour définir le code générique à toute tes icones, la seconde la spécifique à l'image.

ElenWii

Bonjour,







Merci mais comment je met ça dans le menu stp ? par exemple la dedans:



</div>

Bonjour Riptide,



A la place de ton image





ElenWii

Bonjour,







Je ne comprend pas ou est le soucis j'ai mis ton code, mais l'image n'apparaît pas bizarre, regarde la colonne a propos il n'y à pas l'image.







css:











l'image:











et le html:







<ul>



<li><a href="/articles/articles-2-2+o-v-h-hebergement.php"title="Hébergeur">Ralentie par OVH</a></li>



<li><a href="/pages/nous-lier-en-faisant-un-lien-sur-votre-site"title="Nous liez">Nous liez</a></li>



<li><a href="/pages/contribuer"title="Nous soutenir">Contribuer</a></li>



<li><a href="/pages/portfolio"title="Mes créations">Portfolio</a></li>



<li><a href="/guestbook/guestbook.php"title="Poster une dédicasse">Livre d'or</a></li>



</ul>



</div></div>

Édité par riptide Le 05/04/2013 à 19h55