2011-06-28 3 views
0

Je travaille sur une navigation comme l'image ci-dessous. enter image description hereCSS Navigation horizontale, IMG ou DIV?

La totalité du nav est la largeur de la fenêtre du navigateur, mais les éléments sont centrés sur la conception.

Je n'ai pas travaillé avec un code depuis un certain temps et j'ai du mal à le faire. Dois-je utiliser une image corporelle pour répéter horizontalement et ensuite positionner ma liste là où elle doit être? Ou Dois-je utiliser un div pour couvrir toute la largeur de la fenêtre du navigateur et positionner les éléments de la liste là où ils doivent l'être?

Merci

Répondre

2

je partirais avec l'aide d'un récipient avec une simple couleur d'arrière-plan et le positionnement du menu à l'intérieur de cela.

Je vais vous donner un exemple rapide.

MISE À JOUR

Voici un exemple rapide, je viens de mettre ensemble: http://jsfiddle.net/aQTRF/

Sinon, si vous avez besoin la barre de menu noir pour étendre au-delà du conteneur de la navigation, il peut être plus facile d'ajouter la barre dans le cadre d'un fond de corps répétitif (comme vous l'avez dit), puis positionnez votre nav sur le dessus. Cela vous permettrait également d'avoir une nuance de barre de menu légèrement différente dans la zone de contenu principale par rapport à l'extérieur de celle-ci.

+0

merci mon pote. J'avais l'habitude d'être si efficace avec le balisage, mais tout est parti haha. : \ –

0

Je conseille d'utiliser HTML et CSS sur les images lorsque cela est possible. Cela rendra la page plus rapide à charger.

Que diriez-vous de quelque chose de gentil et simple comme this?

0

Utilisez une liste non ordonnée

<ul id="nav"> 
    <li>Nav Item</li> 
    <li>Nav Item</li> 
    <li>Nav Item</li> 
</ul> 

Ajouter vos styles #nav pour l'arrière-plan