web-dev-qa-db-fra.com

Comment puis-je faire en sorte que l'index z fonctionne avec une pile de navigation au-dessus de l'image?

Je suis donc en train de redessiner un site clients joomla. Le concepteur d'origine avait codé le site. Il a l'index z de navigation défini sur relatif et l'index z à 100. L'arrière-plan de l'image que j'ai créé pour le système de navigation est en position relative et a un indice z de 1. Mais lorsque je positionne le nav sur l'image il se cache derrière. Je ne pense pas que l'index du système de navigation soit reconnu du tout. Comment pourrais-je résoudre ce problème? La navigation est dans le coin en haut à droite, btw. Voici le site: www.sheasconsignanddesign.com

css
1
Starlight1992

Je suppose que c'est plus ou moins ce que vous essayez d'atteindre:

Main menu layout

Votre approche présente quelques problèmes:

  1. Le menu principal actuel est situé dans un conteneur complètement différent (.artisteerheader) que votre logo et l’image d’arrière-plan du menu (.artisteerdeco). Événement bien qu'il soit possible de déplacer le menu principal en dehors de son conteneur (et au-dessus de l'autre), ne le faites pas. Vérifiez que votre modèle a une autre position de module, identique à celle utilisée par l’image d’arrière-plan du logo/menu. Vous pouvez trouver les positions de module disponibles pour les modèles Artisteer ici: http://www.artisteer.com/?p=help_joomla#joomla4 .

  2. L'utilisation d'une image avec des arrière-plans de menu fixes n'est pas une bonne idée. Dans certains navigateurs, cela sera presque certainement faux (il suffit de regarder l’image ci-dessus, le texte n’est pas parfaitement aligné pour chaque bouton). Si vous avez besoin de la même disposition des boutons que votre image, utilisez une image .png derrière chaque élément li.

Une autre (meilleure) option consiste à utiliser CSS pour créer les boutons. Essayez d’utiliser le code suivant (et utilisez un simple arrière-plan noir pour la barre de menus principale):

 ul.menu li {
  background-color: #CAC6AF;
  width: 124px;
  padding: 3px 3px;
  margin: auto 20px;
  text-align: center;
  border-radius: 23px;
  border: 7px solid white;
}

Vous obtiendrez quelque chose comme ça:

Déplacez le module de menu principal vers une position différente et jouez avec CSS (marges et marges) pour l'aligner correctement.

Main menu CSS

J'espère que ça aide un peu :)

1
johanpw