Alors pour le premier ça me le fait aussi sur Firefox.
Du coup, une des solutions est pour le padding de #pa .liens_rapides a:before, remplacer les valeurs actuelles par 8px 0 5px.
donc avoir:
- Code:
padding: 8px 0 5px;
Pour le deux, pourquoi tu as des size dans ton CSS O___O Je pense que c'est une erreur ici dans ce message, mais si c'est dans ton CSS il faut absolument les supprimer xD
Mais sinon, c'est tout à fait ça, tu as bien compris. ^^
Pour la 3, alors... Effectivement, une animation va de 0 à 100%. Attention, tu remarqueras qu'il y a toujours deux keyframes et deux mises en places de l'animation: une fois webkit, pour safari et une fois normal pour les autres. Si tu mets 16 au lieu de 32, l'animation sera plus rapide car elle ne prendra que 16 secondes pour aller à tous les slides. Là, pour savoir combien de secondes il faut mettre, il n'y a qu'une solution: tester.
Au niveau de l'ajout des slides dans le HTML, un Slide correspond à ceci:
- Code:
<div class="un_slide">
<img src="http://img03.deviantart.net/2e84/i/2012/207/a/c/vidocq_by_rozyk007-d58ridh.jpg" />
<div class="caption">
Caption
</div>
</div>
Après le dernier slide, il y a toujours encore deux div fermantes. Donc à chaque fois que tu colles une nouvelle slide, vérifie qu'il y a 4 div fermantes: comme ça tu es certain d'avoir mit au bon endroit.
au niveau du CSS, c'est donc ici:
- Code:
/* Animation de la PA. Chaque slide a 20% de temps et l intervalle est de 5%. À réduire ou augmenter selon le nombre de slides. Ici il y a 4 slides. */
@-webkit-keyframes slider {
0%, 20%, 100% {
left: 0;
}
25%, 45% {
left: -100%;
}
50%, 70% {
left: -200%;
}
75%, 95% {
left: -300%;
}
}
@keyframes slider {
0%, 20%, 100% {
left: 0;
}
25%, 45% {
left: -100%;
}
50%, 70% {
left: -200%;
}
75%, 95% {
left: -300%;
}
}
Bien évidemment, si on veut ajouter des slides, le temps en % se réduit. Bien sûr le seul truc à faire pour trouver le % est de tester, mais ce que tu peux faire déjà, c'est diviser 100 par ton nombre de slides, et ensuite de bidouiller pour voir combien de temps tu veux donne rpour que le temps de slide et le temps de pause soit égal partout, tout en ayant 100 qui soit TOUJOURS à 0
Exemple avec 5: 0 - 15, 20 - 35, 40 - 55, 60 - 75, 80 - 95, 100 est donc à 0 (Donc: temps de 15% et attente de 5%)
Donc dans le CSS tu aurais ceci:
- Code:
/* Animation de la PA. Chaque slide a 20% de temps et l intervalle est de 5%. À réduire ou augmenter selon le nombre de slides. Ici il y a 4 slides. */
@-webkit-keyframes slider {
0%, 15%, 100% {
left: 0;
}
20%, 35% {
left: -100%;
}
40%, 55% {
left: -200%;
}
60%, 75% {
left: -300%;
}
80%, 95% {
left: -400%;
}
}
@keyframes slider {
0%, 15%, 100% {
left: 0;
}
20%, 35% {
left: -100%;
}
40%, 55% {
left: -200%;
}
60%, 75% {
left: -300%;
}
80%, 95% {
left: -400%;
}
}
Ce que tu peux faire, mais je ne garantis pas que ça marche pour tout nombre de slides, c'est que tu divises 100 par ton nombre, donc ici 100/5= 20, tu retirer les temps d'attente, donc 5%, et tu as ton temps d'animation pour chaque slide.
Après tu peux calculer combien font 15% de 16 secondes si tu veux faire 4a de façon stricte ou, bah, juste tester ce que ça te donner et augmenter le nombre de secondes ou le réduire selon ce que tu veux ^^
Pour le 4, il suffit d'ajouter dans ton CSS ceci:
- Code:
#pa #slideshow .slider .un_slide .caption a {
/* Ici la mise en forme normale du lien */
}
#pa #slideshow .slider .un_slide .caption a:hover {
/* Ici effet sur le lien au passage de la souris */
}
Pour l'edit, ça ne le fait pas chez moi donc je ne peux pas vraiment t'aider, sachant qu'il y a un letter-spacing qui, normalement, fait que les lettres sont justement totalement éloignées! ><
J'espère que 4a a répondu à tes questions, sinon n'hésite pas à demander encore ^^