it-swarm.com.de

Wie kann ich den Z-Index so einstellen, dass der Navigationsstapel über dem Bild angezeigt wird?

Also gestalte ich eine Kunden-Joomla-Site neu. Der ursprüngliche Designer hatte die Site codiert. Er hat den Z-Index der Navigation auf relativ und den Z-Index auf 100 gesetzt. Der Bildhintergrund, den ich für das Navigationssystem erstellt habe, befindet sich in relativer Position und hat einen Z-Index von 1. Aber wenn ich die Navigation über dem Bild positioniere es versteckt sich dahinter. Ich glaube nicht, dass der Index für das Navigationssystem überhaupt erkannt wird. Wie könnte ich das möglicherweise beheben? Die Navigation befindet sich übrigens in der rechten oberen Ecke. Hier ist die Seite: www.sheasconsignanddesign.com

1
Starlight1992

Ich nehme an, das ist mehr oder weniger das, was Sie erreichen wollen:

Main menu layout

Es gibt ein paar Probleme mit Ihrem Ansatz:

  1. Das aktuelle Hauptmenü befindet sich in einem völlig anderen Container (.artisteerheader) als Ihr Logo und Menü Hintergrundbild (.artisteerdeco). Obwohl es möglich ist, das Hauptmenü außerhalb des Containers (und über den anderen) zu verschieben, tun Sie es nicht. Überprüfen Sie, ob Ihre Vorlage eine andere Modulposition hat, als das Logo/Menü-Hintergrundbild. Verfügbare Modulpositionen für Artisteer-Vorlagen finden Sie hier: http://www.artisteer.com/?p=help_joomla#joomla4 .

  2. Die Verwendung eines Bildes mit festen Menühintergründen ist keine gute Idee. In bestimmten Browsern sieht es mit ziemlicher Sicherheit falsch aus (sehen Sie sich nur das Bild oben an, der Text ist nicht für jede Schaltfläche perfekt ausgerichtet). Wenn Sie genau dasselbe Layout der Schaltflächen wie Ihr Bild benötigen, verwenden Sie ein PNG-Bild hinter jedem li -Element.

Eine andere (bessere) Option ist die Verwendung von CSS zum Erstellen der Schaltflächen. Versuchen Sie es mit dem folgenden Code (und verwenden Sie einen einfachen schwarzen Hintergrund für Ihre Hauptmenüleiste):

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

Sie werden so etwas bekommen:

Verschieben Sie das Hauptmenü-Modul an eine andere Position und spielen Sie mit CSS (Rändern und Abständen), um es korrekt auszurichten.

Main menu CSS

Hoffe das hilft ein wenig :)

1
johanpw