Bonjour,
Voici le code html suivant représentant une navigation classique:
Et le code CSS lié:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6 <div class="article-menu-navigation"> <a class="prev disabled">Précédent</a> <a href="#" class="back">Retour</a> <a href="#" class="next">Suivant</a> </div>
Normalement, au passage de la souris, la position du background du lien devrait changer.... Cela fonctionne sous IE8 mais pas sous Firefox 3.6.8.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31 .article-menu-navigation { text-align: center; padding-top: 15px; border-top: 1px dotted #9b9898; } .article-menu-navigation a { display: inline-block; height: 18px; color: white; font-weight: bold; line-height: 18px; } .article-menu-navigation a.prev { padding: 0 12px 0 18px; background: url(images/art-nav-prev.png) no-repeat top left; } .article-menu-navigation a.next { padding: 0 18px 0 12px; background: url(images/art-nav-next.png) no-repeat top right; } .article-menu-navigation a.back { margin: 0 5px; padding: 0 12px; background: url(images/art-nav.png) repeat-x; } .article-menu-navigation a:hover { background-position-y: bottom; }
Ais-je fait une boulette?
Partager