28173 sujets

CSS et mise en forme, CSS3

Bonjour

J'ai les titres de mes pages qui sont dans des images et j'utilise ce code dans ma feuille de style pour le remplacement de texte :

.creditimmo{background : #FFFFFF url(imgs/titres/creditimmo.gif) no-repeat top left;}
.renego{background : #FFFFFF url(imgs/titres/renego.gif) no-repeat top left;}
.investiloca{background : #FFFFFF url(imgs/titres/investilocatif.gif) no-repeat top left;}
.assupret{background : #FFFFFF url(imgs/titres/assupret.gif) no-repeat top left;}
.parrainage{background : #FFFFFF url(imgs/titres/parrainage.gif) no-repeat top left;}
.partenaires{background : #FFFFFF url(imgs/titres/partenaires.gif) no-repeat top left;}
.renseignements{background : #FFFFFF url(imgs/titres/renseignements.gif) no-repeat top left;}
.simulation{background : #FFFFFF url(imgs/titres/simulation.gif) no-repeat top left;}
.evotaux{background : #FFFFFF url(imgs/titres/evotaux.gif) no-repeat top left;}
.guidefinancier{background : #FFFFFF url(imgs/titres/guidefinancier.gif) no-repeat top left;}
.guide_invest {background : #FFFFFF url(imgs/titres/guide_invest.gif) no-repeat top left;}
.contact {background : #FFFFFF url(imgs/titres/contact.gif) no-repeat top left;}
.plan {background : #FFFFFF url(imgs/titres/plan.gif) no-repeat top left;}
.confirm {background : #FFFFFF url(imgs/titres/confirmation.gif) no-repeat top left;}
.actualite {background : #FFFFFF url(imgs/titres/actualite.gif) no-repeat top left;}
.qui {background : #FFFFFF url(imgs/titres/qui.gif) no-repeat top left;}
.sitesutiles {background : #FFFFFF url(imgs/titres/sitesutiles.gif) no-repeat top left;}
.espaceclient {background : #FFFFFF url(imgs/titres/espaceclient.gif) no-repeat top left;}
.vosdroits {background : #FFFFFF url(imgs/titres/vosdroits.gif) no-repeat top left;}
.recrutement {background : #FFFFFF url(imgs/titres/recrutement.gif) no-repeat top left;}
.mentions {background : #FFFFFF url(imgs/titres/mentions.gif) no-repeat top left;}
.credithypo {background : #FFFFFF url(imgs/titres/credithypo.gif) no-repeat top left;}
.lexique {background : #FFFFFF url(imgs/titres/lexique.gif) no-repeat top left;}
.questrep {background : #FFFFFF url(imgs/titres/questrep.gif) no-repeat top left;}
.secuconfi {background : #FFFFFF url(imgs/titres/secuconfi.gif) no-repeat top left;}
.regroupcred {background : #FFFFFF url(imgs/titres/regroupcred.gif) no-repeat top left;}
.lequipe {background : #FFFFFF url(imgs/titres/lequipe.gif) no-repeat top left;}
.presentation {background : #FFFFFF url(imgs/titres/presentation.gif) no-repeat top left;}
.nosagences {background : #FFFFFF url(imgs/titres/nosagences.gif) no-repeat top left;}


J'aimerai savoir si le fait d'avoir mis ca, charge toutes ces images dès l'arrivée du visiteur sur la page d'accueil car j'ai fait un test sur websiteoptimization.com et il m'indique un chargement tres lent a cause de ces images ..

Voila je crois que le sujet n'a pas encore été traité sur le forum et ce serai plutot interessant de savoir si toutes les images de la feuille de style sont chargées des la premiere ouverture de la feuille de style ?!

Si c'est le cas alors je mettrai chacune de ces lignes de code dans leur fichier repsectif

Sinon à quand une extension firefox pour simuler le 56k ?!! Ce qui serait tres pratique par exemple pour montrer à un client l'efficacité des CSS!

Merci

Fab
Modifié par Dynexd (25 Jan 2007 - 10:11)
Bonsoir Dynexd,

Pour prendre un exemple courant : quand une image de fond est appliquée à a:hover, l'image ne sera pas chargée tant qu'il n'y aura pas eu de survol d'un lien. (C'est une des raisons pour laquelle on utilise dans ce cas l'astuce de l'image unique ou un moyen de précharger).
mokaaaaaayyyyy merci bien Smiley smile

dans ce cas le simulateur de websiteoptimization est plutot mal foutu puisque qu'il examine la vitesse de charegment de la page d'accueil d'un site mais prends en compte toutes les images du fichier css !