28172 sujets

CSS et mise en forme, CSS3

Déplacer uniquement verticalement un background sans jQuery

Bonsoir à tous,

J'aimerais utiliser un sprite global pour générer toute une série de boutons d'action.

Le sprite aurait donc 3 lignes :
> les boutons actifs
> les boutons hover
> les boutons inactifs

Pour chaque action, je vais donc déplacer le background à -70px et -140px pour passer à l'état hover et inactifs, mais j'aimerais ne pas avoir à définir en css chacune des actions dans les trois états.


<div class="action_button">
<a href="là" class="action_1">&nbsp;</a>
</div>
<div class="action_button">
<a href="là" class="action_2">&nbsp;</a>
</div>


j'ai donc


div.action_button {
	position: relative;
	float: left;
	width: 60px;
	height: 60px;
} 

div.action_button a {
	display: block;
	line-height: 60px;
	background: url(images/actions.png) 0 0 no-repeat;
}

div.action_button a.action_1 { background-position: 0 0; }
div.action_button a.action_2 { background-position: 70px 0; }


Et j'aimerais quelque chose dans ce genre là :

div.action_button a:hover {
	background-position-y: -70px;
}



C'est pour illustrer; le background-position-y n'étant pas standard. Y a-t-il un moyen pour ne pas devoir déclarer pour chaque action le background du hover, mais le faire à la volée pour toutes les actions, préservant le positionnement X du background lors du hover ?

Mon autre solution serait d'avoir un sprite différent pour chaque bouton, et donc le même positionnement X à 0 pour tous mais du coup, c'est paumer l'avantage du sprite Smiley decu

Merci Smiley smile
Modifié par iguypouf (12 Dec 2013 - 22:49)
Bonjour.

Je pense comme bzh, tu ne vas pas pouvoir y couper. background-position-y ne fonctionne que sur IE (les vieux en plus je crois)
Bonjour, merci pour vos réponses.

Pour background-position-y, c'était pour illustrer je n'oserais avoir l'idée de venir ici et d'utiliser d'aussi mauvaises pratiques en même temps XD

Il n'existe pas un moyen de claquer un !important uniquement sur la position x de l'élément, afin que je puisse réécrire en position 0 -70px, mais que le zéro ne soit pas lu ?
Olivier C a écrit :
Des sprites pour des boutons... en 2013 ça existe encore ?

Tout dépend des boutons et ce n'est pas une technique obsolète, loin de là.
Il faut quand même que ces boutons soient diablement complexes dans leurs rendu dans ce cas. Sinon je ne vois pas ce qui peut justifier aujourd'hui une telle technique.
Olivier C, pourquoi toujours charger des framework complets pour n'en utiliser que 10% des fonctionnalités ?

Dans mon cas, voici une petite explication du pourquoi du comment :

Ces boutons sont des boutons de menus (fonctionnalités) paramétrables, activables et customisables par l'utilisateur.

Ce sont des images de 60 / 60, l'utilisateur peut choisir lui-même quelle image charger.
Lorsqu'il modifie une image, le sprite complet est recréé par un script :
> le bouton normal
> le bouton hover
> le bouton désactivé - fonctionnalité interdite / non disponible
> le bouton désactivé hover

Ceci me permet :
> de ne pas écraser les images par défaut d'origine;
> de garder chaque choix de l'utilisateur;
> de ne modifier qu'un endroit pour éviter les problèmes de cache (sérier le sprite)

J'ai envie de ne devoir modifier que le moins possible la CSS, voire pas du tout; un simple positionnement en HTML du background me permettrait de ne pas devoir toucher du tout à la CSS.

Merci pour vos réponses,

iguy
iguypouf a écrit :
Olivier C, pourquoi toujours charger des framework complets pour n'en utiliser que 10% des fonctionnalités ?

En effet ce serait dommage... Bien sûr, un intégrateur ne copiera que les 3 lignes de codes qui lui sont nécessaires, et pas tout le framework dont il s'inspire.

Chacun voie midi à sa porte : des sprites... OK. Bien à vous.
Sujet clos
Aller à