Navigation par roulement CSS

Question

Je n'ai jamais vraiment fait de survol de navigation en arrière-plan, je change simplement la couleur du texte une fois qu'il a été déplacé. Cependant j'essaye de faire ceci maintenant mais ne peux pas sembler l'obtenir juste. J'essaie de tout faire avec CSS car je crois qu'il y a un moyen mais je vois beaucoup d'autres personnes utilisant des sprites et des rollovers d'image. De quelle façon est le meilleur? Je pourrais finir par avoir beaucoup d'images sur mon site Web, donc j'essaie de rester loin d'eux, donc moi, je pense strictement CSS. Il y a un moyen non?

This is my website

CSS

#main-navigation { width: 100%; height: 100px; background: url(../img/NAV-BG.jpg) top center no-repeat; text-transform: uppercase; font-size: 1em; letter-spacing: 1px; line-height: 90px; /*border: 1px solid #000;*/ } 
#main-navigation ul { width: 860px; list-style: none; margin: 0 auto; text-align: center;} 
#main-navigation li { float: left ;margin-left: 30px; } 
#main-navigation li a { display: block; text-decoration: none; color: #000; } 
#main-navigation li a:hover { color: #c7bd89; background-color: #900; width: 120%; height: 30px; -moz-border-radius: 5px; border-radius: 5px; margin: 0 auto; margin-top: 20px;} 

HTML

<nav id="main-navigation"> 
      <ul id="main-nav-left"> 
       <li class="current"><a href="#">Home</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Current Season</a></li> 
       <li><a href="#">Past Seasons</a></li> 
       <li><a href="#">Contact</a></li> 
       <li><a href="#">Partners/Sponsors</a></li> 
      </ul> 
    </nav> 

Mais je veux que ça ressemble à ce

Qu'est-ce que je manque?

Answer 1

Utilisez cette

#main-navigation li a:hover { 
    color: #c7bd89; 
    background-color: #900; 
    width: 120%; 
    line-height: 30px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    margin-top: 30px; 
} 

Tout le problème est que vous définissez une hauteur ... Vous devez définir une hauteur de ligne au lieu et cela fonctionnera parfaitement ... Mais je ne peux toujours trouver un espace pour une amélioration en termes de rembourrage et de marge.

Answer 2

Essayez de changer #main-navigation li a à ceci:

#main-navigation li a { 
    /*display: block;*/ 
    text-decoration: none; 
    color: black; 
    padding: 5px; 
} 

Utiliser le bloc d'affichage poussait le texte en dehors de la boîte. L'ajout du rembourrage vous donnera un peu d'espace autour du texte.

Les sprites sont certainement mieux que d'utiliser plusieurs images, mais à la fin, ils seront essentiellement la même chose. Si vous pouvez créer vos images assez petites (pour les performances de la bande passante) cela n'affectera pas beaucoup votre site. Les sprites sont agréables pour grouper des images. L'utilisation de couleurs d'arrière-plan et de bordures autour du texte est également très efficace.

Answer 3

Jetez un oeil à ce que je faisais ici: http://torontobanfffilmfest.com/splash

Chacun des huit blocs a une seule image en deux versions, une lumière et sombre, réunis côte à côte. Dans le coin supérieur gauche, par exemple, une image, splash_buy_tickets_m.png, fait 582 pixels de large. Mais l'espace dans lequel il est affiché est de 291 pixels de large. Nous ne voyons que la moitié de l'image complète, et dont la moitié dépend de: hover.

Le CSS qui rend le changement d'image lors du survol est assez simple:

#b1:hover, #b2:hover, #b3:hover, #b4:hover, #b5:hover, etc. { 
background-position: -291px 0; 
} 

Si chacun des boutons dans la barre de bouton se compose d'un « actif » et une version « inactif », alors vous pouvez juste changer la position de l'image dans la DIV dans laquelle il est affiché, en décalant horizontalement ou verticalement.

Answer 4

voir le violon pour le code et démonstration

violon: http://jsfiddle.net/quR4E/3/

Démo: http://jsfiddle.net/quR4E/3/embedded/result/

capture d'écran: