28172 sujets

CSS et mise en forme, CSS3

Class & sprite

Bonsoir à tous,

Voici, j'ai un problème avec un sprite que je suis en train de mettre en place. Sur la dernière page (contact, dernier menu), il se trouve 3 icônes : facebook, twitter et skype.

Pour optimiser le site, j'ai utilisé un sprite confectionné avec Fireworks. Je l'exporte et récupère le fichier PNG ainsi que le fichier CSS pour mon site.

Le problème, c'est que les background-position ne sont pas pris en charge (pour les positions initiales). Je ne comprends pas pourquoi alors que les :hover et :active, eux, sont ok.

J'ai réglé le problème avec le logo de facebook mais je tiens à mettre un post ici car je ne comprends pas pourquoi mes appels de class ne fonctionne pas et pourquoi je suis obligé de faire comme ceci pour que le logo de facebook, lui, fonctionne :

div>ul>li:first-child {
	background-position: -1px -163px;
}


Merci de m'apporter vos lumières, car là, je sèche.

Bonne fin de soirée.
Modifié par MagicCarpet (15 Dec 2012 - 19:36)
Bonjour,

Et si tu appliquais tes sprites directement aux li comme cela:
.socialLinks .facebook { }
.socialLinks .cgp_twitter { }
.socialLinks .cgp_skype { }
rodolpheb a écrit :
Bonjour,

Et si tu appliquais tes sprites directement aux li comme cela:
.socialLinks .facebook { }
.socialLinks .cgp_twitter { }
.socialLinks .cgp_skype { }


Bon, il me semblait avoir fait le test... Là ça fonctionne, merci Smiley smile

Deux petites choses :
1/ Est-ce que tu comprends pourquoi le .cgp_skype ne fonctionne pas ?
2/ Maintenant j'aurais besoin de mettre des balises a pour les liens... Comment puis-je faire ?
Car je ne pense pas qu'entourer les balises li par des a soit une bonne chose et des a sans contenus ne fonctionnent pas.
Sinon tu peux faire ça car je crois que c'est plus fidèle à ce que tu cherches:
<ul id="barre">
  <li id="facebook"><a href="#"></a></li>
  <li id="twitter"><a href="#"></a></li>
  <li id="skipe"><a href="#"></a></li>
</ul>

#barre {
	background: url(barre_menu.png) no-repeat 0px 0px;
	height: 60px;
	width: 400px;
	padding: 0px;
	position: relative;
	margin-top: 100px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 100px;
}
#barre li {
	margin: 0px;
	padding: 0px;
	list-style: none;
	position: absolute;
	top: 0px;
}
#barre li, #barre a {
	display: block;
	height: 60px;
	width: 50px;
}
#facebook {
	left: 0;
}
#twitter {
	left: 50px;
}
#skipe {
	left: 100px;
}
#barre a:hover {
	background-image: url(barre_menu.png);
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: 0 0;
}
#facebook a:hover {
	background-position: 0 -60px;
}
#twitter a:hover {
	background-position: -50px -60px;
}
#skipe a:hover {
	background-position: -100px -60px;
rodolpheb a écrit :
Euh, les valeurs c'est pour du remplissage, je n'ai pas pris les tiennes. Smiley smile


Ok merci, je vais essayer tout ça. Par contre, autre question, sur les id... Un site comme celui-ci dis :
"Don't use IDs in selectors."

C'est pour cela que j'ai utilisé les class, quand est-il vraiment des id ? Je connais la différence entre les deux mais je ne comprends pas la raison donné par ce site.

Merci.
Sujet clos
Aller à