petite aide CSS

[maxhome]

Bonsoir,
Bon je sais je démarre, et ma question va sûrement vous sembler simpliste...
En vue de personnaliser mon thème et d'avoir des boutons différents suivant les blocs, j'ai ajouté ceci:

exemple dans le identity.tpl:
par défaut la class appelée pour le bouton est button
je l'ai remplacée par: bt1acc

la fin de la page identity.tpl

<input type="submit" class="bt1acc" name="submitIdentity" value="{l s='Save'}" /></p></form>

Dans mon global.css, j'ai donc ajouté:

.bt1acc {
   background-image: url('../img/button-account1.gif');
   background-position: top left;
   border: none;
   color: white!important;
   font-weight: bold;
   font-size: 10px!important;
   text-align: center;
   text-decoration: none!important;    
   cursor: pointer;
   display: block;
   line-height: 18px;
   height: 18px;
   width: 120px;
}

.bt1acc:hover {
   background-image: url('../img/button-account1o.gif');
}

J'ai bien sûr créé 2 boutons button-account1.gif et button-account1o.gif

Tout fonctionne bien si ce n'est un tout petit problème
Quand je passe sur le bouton avec la souris, changement de background, normal

Mais quand je clique sur le bouton, j'ai un effet enfonçé sur le bouton, voir image en bas de ma capture que je voudrais annuler de telle facon qu'entre l'effet hover et l'effet clic, il n'y ait aucune différence...

Pourriez-vous m'aider s'il vous plait?
Merci

[Atch]

Salut, pourquoi ne t'inspires tu pas de ce qu'il se fait sur Presta :

3 boutons = 1 image

et jouer avec le positionnement du background. C'est bcp moins lourd et ton navigateur charge l'image ( vu qu'il l'a déjà ) avant même que tu n'es survolé l'image.
Dans ton cas, tu dois avoir un laps de temps avant d'afficher l'image survolée, non?



V++

Atch

[maxhome]

Bonjour atch
Le problème c'est que je ne sais pas comment faire tout simplement, j'ai pas compris cette histoire de 3 boutons
j'abuse si par rapport à mon exemple tu me files quelques infos?
Merci beaucoup

[Peha]

Bonjour,

le plus simple, je crois que c'est ce que Atch veut dire, c'est de ne pas toucher aux noms de classes, mais de modifier directement le fichier image du thème par défaut.

ensuite, la technique conseillée pour gérer le survol est celle du sprite = 1 fichier contenant tous les états du bouton, et une modification du placement de l'image de fond lors du survol.

normal :
background-position: 0 left;
}

:hover {
background-position: 20px left;
(pour un fond de 20px de haut)

si tu ne veux pas d'effet lors du click, remet la même hauteur pour le :active

[maxhome]

bonjour Peha,

Oula vais passer pour un nul
Les boutons dans identity.tpl par exemple sont ceux par défaut du thème de Presta
Comment les changer dans le css, sans changer de classe ou sans en créer une nouvelle?
Je comprends ton code mais comment et où l'inserer dans le global.css, là suis paumé
Je crois que ce qui me pose le plus de problème c'est la compréhension des div et classes (j'démarre!)
Suis un peu terre à terre, j'aurais aimé trouver dans le global.css le button spécifique rattaché à mon identity.tpl
J'ai l'impression de pas être clair là?!

EDIT:
afin de comprendre voilà ce que j'ai fait

.bt1acc {
   background-image: url('../img/button-account.gif');
   background-position: 0 left;
   border: none;
   color: white!important;
   font-weight: bold;
   font-size: 10px!important;
   text-align: center;
   text-decoration: none!important;    
   cursor: pointer;
   display: block;
   line-height: 18px;
   height: 18px;
   width: 120px;
}

.bt1acc:hover {
   background-image: url('../img/button-account.gif');
   background-position: left -18px;

}

.bt1acc:active {
   background-image: url('../img/button-account.gif');
   background-position: left -36px;
}

Ca marche au niveau décalage du gifs 3 bouton mais j'ai toujours cet aspect "enfonçé" quand je clique
Comment le retirer et comment font-ils dans presta pour pas l'avoir cet aspect???
merci

[Peha]

Alors,

1_ installe firbug
2_fais ce tuto (très important) http://www.alsacreations.com/tuto/lire/555-design-css.html
n'hésite pas à farfouiller dans la partie tuto de ce site.

Tu veux donc changer que les boutons de la page ou on s'intensifie.
pas besoin de créer une class spécifique car le bloc qui contient ton bouton as sûrement déjà une id

tu peux donc modifier un bouton contenu dans un bloc spécifique sans toucher au fichier template

dans global.css :

#bloc .bouton {

// ici le propriétés qui ne concerneront que les class="bouton" contenus dans le bloc id="bloc"

}

tu peux bien sur pousser les choses plus loin, en séparant les sélecteurs d'un espace tu va plus profondément dans la structure de ta page :

par exemple :
.class #id p strong {

}

.class1 .class2 li {

}

etc.

Comment le retirer et comment font-ils dans presta pour pas l’avoir cet aspect???

il faut que le background de l'état :active soit a la même hauteur quel l'état normal

[maxhome]

Merci Peha, je vais faire le tuto que tu m'as indiqué, c'est vrai que c'est perturbant....
allez une dernière pour la route
comment connaitre l'id d'un bouton?
si je reprends mon exemple identity.tpl, l'id bouton c'est quoi?
Mais je vais bosser car là je galère mais c'est passionnant
Merci de ton aide
Bonne soirée

[Peha]

Firebug sert justement à ça !!

[Wandry]

super le post: exactement ce que je cherchais

[doud18]

bonjour, le sujet m'interesse. Je voudrais enlever cette fonction sprite car lorsque je remplace mes 3images en 1 par une image que j'ai crée, ca ne va pas. l'image bouge tout le temps quand je vais dessus.

Merci d'avance