28172 sujets

CSS et mise en forme, CSS3

Bonjour je suis en train d'intégrer un design (je l'ai mis sur un server gratuit pour la résolution du problème) Par ici
Si vous regardez les icônes des réseaux sociaux impossible de cliquer dessus....je sais que c'est à cause de ma position relative et du z-index mais je n'ai pas d'autre solution pour les mettre derrière le menu....Merci de votre aide Smiley smile

Ah oui une dernière chose mais connaissance en jquery sont très très limité. qqn a une idée pour que lorsque l'on passe sur les icônes l'opacité passe à 1 et elles se lèvent

Merci
Bonjour,

je vais peut être dire une connerie, mais pourquoi tu ne joues pas simplement sur les coordonnées de l'image en css? En plaçant "normalement" tes liens, avec ton image en background, les coordonnées en css calées pour que seules la partie haute apparaisse, ensuite, sur un hover, tu change les coordonnées pour que l'image "monte" (éventuellement avec une animation css3 en plus).
Bonjour,

NeepNeep a écrit :
Si vous regardez les icônes des réseaux sociaux impossible de cliquer dessus...

Si tu inspectes tes liens avec Firebug ou Web Inspector tu verras que l'espace occupé par tes liens (et donc cliquable) n'englobe pas toute l'image. Tu peux corriger ça avec un display:inline-block sur tes liens par exemple.

NeepNeep a écrit :
mes connaissance en jquery sont très très limité. qqn a une idée pour que lorsque l'on passe sur les icônes l'opacité passe à 1 et elles se lèvent

1. Pour commencer, essayer d'obtenir cet effet (opacité à 1 et position plus haute) avec :hover en CSS, sans effet de transition.
2. Après, tu peux soit utiliser des transitions CSS3 (dans les navigateurs récents) pour obtenir cet effet avec une transition, ou utiliser jQuery.animate pour un effet plus largement compatible (voir la documentation de jQuery, bien entendu).
Merci pour cette réponse, pour les animation c'est réglé mais pas pour les liens. J'ai ajouté le
display: inline-block et sa donne Ceci....Une idée de pourquoi j'ai ce rendu?
NeepNeep a écrit :
J'ai ajouté le display: inline-block

Tu as ajouté du display:inline-block, qui marche, plus un tas d'autres styles qui n'ont rien à faire là et qui mettent le bazar, effectivement. Smiley smile
Si je garde juste le display:inline-block, tout va bien.
Modifié par fvsch (26 Nov 2011 - 20:26)
NeepNeep a écrit :
j'ai pas compris comment tu as fait

J'ai regardé ton code?

En passant, si tu n'utilises pas un outil tel que Firebug ou Web Inspector couramment pour résoudre tes problèmes, il faut s'y mettre. Smiley smile