Navigation: diverse CSS-Bugs (Thema: .trail / .forward)

[fips]

Ich habe bei folgendem Projekt noch ein paar Bugs in meinem CSS für die Hauptnavigation, die ich nicht gelöst bekomme:
http://www.kieler-schaubude.de

Erstes Problem:
Ist man auf der Seite "Konzerte" dann erscheint das Dropdown-Menü ein ganzes Stück nach oben verschoben, sobald man nochmals über "Konzerte" hovert. Das muss damit zu tun haben, dass der Menüpunkt "Konzerte" eine interne Weiterleitung ist (class .forward ???), denn bei anderen Hauptmenüpunkten passiert das nicht (siehe z.B. Partys). Ich habe schon alles mögliche versucht, bekomme den Übeltäter via CSS aber nicht zu packen.

Zweites Problem:
Im Dropdown-Menü unter "Partys" ist der Untermenüpunkt "Groove" mit in die Zeile des vorherigen Menüpunktes "From Here ..." gerutscht. Auch hier habe ich keine Lösung gefunden das zu beheben.

Wer weiß Rat? Ich wäre sehr dankbar!

[valentin_]

Hallo,

mit der Klasse forward hat das nichts zu tun. Das liegt daran, dass span ein inline-Element ist. Einfach display:block (wie du es beim a-Tag auch gemacht hast) zuweisen, dann passt es.

Wenn du dem li in der 2. Ebene display:block gibst ist auch dein 2. Problem behoben.

Ich würde dem Slider auch noch eine fixe höhe zuweisen. Nervt etwas wenn die Navigation immer runterspringt, wenn das Bild geladen wurde.

[fips]

Hi Valentin,

danke für deine Antwort. Das mit dem Slider war ein guter Tipp, das habe ich bereits umgesetzt.

Leider bekomme ich das mit dem display:block nicht auf die Reihe. Habe lange probiert und immer war es schlimmer als vorher. Hast du noch einen Denkanstoß für mich?

Vielen Dank!

[Andreas]

Die LIs sind so formatiert

#navi li {
  display: inline-block;
}

Im Aufklappmenü willst du sie aber untereinander darstellen, deshalb wie valentin sagte, ab der 2. Ebene auf block setzen

#navi li li {
  display: block;
}

Deine As sind so formatiert

#navi a {
  display: block;
  padding: 12px 15px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

Es ist immer eine gute Idee, die SPANs, welche ja die aktiven Punkte sind, immer direkt mit zu formatieren. Dann hast du sie auch auf block, wie valentin sagte.

#navi a,
#navi span {
  display: block;
  padding: 12px 15px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

[fips]

Hi Andreas,

danke auch für deine Hilfe. Die #navi span Geschichte hat mit einigen kleinen Änderungen am restlichen CSS gut geklappt - vielen Dank!

Leider habe ich nach wie vor Ärger mit der anderen Sache. Ich habe deinen Code #navi li li ... eingebaut, doch dann werden die li in der Unternavi zentriert untereinander dargestellt. Ich hätte sie gerne linksbündig. Auch text-align:left; brachte keine Hilfe. Siehe Screenshot:

Bildschirmfoto-li-li.jpg

Vielleicht habe ich mich auch unklar ausgedrückt. Ich wollte nur den Fehler beheben, dass der Navipunkt "Groove" mit in die darüberliegende Zeile gerutscht ist :-)
Siehe Screenshot:

Bildschirmfoto-Fehler.jpg

Hast du (oder hat jemand) noch einen heissen Tipp? :-)

[valentin_]

Am Besten mit Developer-Tools etwas die Elemente durchsuchen. Wenn du z.B. das a-Tag (#navi a) betrachtest wird dir vielleicht klar, warum es zentriert ist

... und da a innerhalb des li steht, bringt text-align:left beim li nichts.

[fips]

Manoman, wo kam das denn her? :-)

Super, nun ist alles bestens. Ich danke euch vielmals!

[Andreas]

Ja, schau dir das ganze mit Firebug an und spiele ein wenig damit rum. Man merkt, dass du noch ein CSS-Anfänger bist.

Du warst auf dem richtigen Weg. Hiermit hast du ja alle As und SPANs in #navi zentriert, nicht nur die im 1. Level.

#navi a,
#navi span {
  ...
  text-align: center;
  ...
}

Das hattest du vorher auch schon, es war nur nicht aufgefallen, da die LIs auf inline-block waren.

Hiermit kannst du alle As und Spans ab dem 2. Level wieder linksbündig ausrichten.

#navi  li li a,
#navi li li span {
  ...
  text-align: left;
  ...
}

Das macht man eigentlich immer so, dass man mit #navi a, #navi span erstmal alle Grundeinstellungen der Menüpunkte incl. der 1. Ebene vergibt, und dann überschreibt man das, was man in den weiteren Leveln ändern möchte.