Menu verspringt - ich finde den Fehler nicht

[Drapondur]

Hallo,

meine Seite: www.zuunami.de

Das Menu verspringt, sobald man einen Menupunkt anklickt.

Es scheint so, als wäre neben dem jeweils aktiven Element ein Abstand falsch gesetzt, aber ich komme nicht dahinter.

Hier der CSS-Code:

  
#menu {  
  height: 25px;  
  font-family: 'PT Sans',sans-serif;  
  color: #d0c5a6;  
  padding: 315px 10px 0 95px;  
  width: 616px;  
}  
  
#menu ul {  
  background-color: #201f1f;  
  height: 25px;  
  padding-top: 5px;  
  padding-left: 5px;  
}  
  
#menu ul li {  
  float: left;  
  text-align: center;  
  list-style: none;  
  height: 25px;  
  font-size: 15px;  
}  
  
#menu ul li a {  
  text-decoration: none;  
  display: block;  
  height: 20px;  
  padding: 5px 20px 0 20px;  
  color: #d0c5a6;  
}  
  
#menu ul li a:hover {  
  background-color: #d2c7a8;  
  color: #211f1f;  
}  
  
#menu ul li a:hover span {  
  color: #211f1f;  
}  
  
#menu span {  
  color: #c3c3c0;  
  font-size: 10px;  
  display: block;  
  margin-top: 5px;  
}  
  
#menu .active {  
  height: 20px;  
  padding: 5px 20px 0 20px;  
  background-color: #d2c7a8;  
  color: #211f1f;  
}  
  
#menu .active span {  
  color: #211f1f;  
}  

Wer findet den Fehler?

[Alex]

Hallo Drapondur!

Es scheint so, als wäre neben dem jeweils aktiven Element ein Abstand falsch gesetzt, aber ich komme nicht dahinter.

Es ist bei den aktiven Element eher ein (Innen-)Abstand _nicht_ gesetzt, welcher bei den Links gesetzt ist.

Gruß
Alex

[Drapondur]

Hallo Drapondur!

Es scheint so, als wäre neben dem jeweils aktiven Element ein Abstand falsch gesetzt, aber ich komme nicht dahinter.

Es ist bei den aktiven Element eher ein (Innen-)Abstand _nicht_ gesetzt, welcher bei den Links gesetzt ist.

Gruß
Alex

Tja, die Frage ist, wo genau? Ich habe im css ja nur zwei Stellen, wo das Aktive Element betroffen ist:

  
  
#menu .active {  
  height: 20px;  
  padding: 5px 20px 0 20px;  
  background-color: #d2c7a8;  
  color: #211f1f;  
}  
  
#menu .active span {  
  color: #211f1f;  
}  

Hab da auch schon rumprobiert, aber es will nicht klappen

[Drapondur]

OK, das Verspringen ist behoben, ABER: das Hover-Design ist jetzt nicht mehr stimmig.
Zum Mäusemelken....

[Alex]

OK, das Verspringen ist behoben, ABER: das Hover-Design ist jetzt nicht mehr stimmig.
Zum Mäusemelken....

Also bei mir springt es immer noch. Kannst du mal genauer erklären, was du mit "nicht mehr stimmig" meinst?

[Drapondur]

OK, das Verspringen ist behoben, ABER: das Hover-Design ist jetzt nicht mehr stimmig.
Zum Mäusemelken....

Also bei mir springt es immer noch. Kannst du mal genauer erklären, was du mit "nicht mehr stimmig" meinst?

Ich bin grad noch am ausprobieren, aber Du hast recht, es springt wieder.

Ich hatte den Code jetzt verändert:

#menu .active {  
  height: 20px;  
  padding: 5px 37px 0 37px;  
  background-color: #d2c7a8;  
  color: #211f1f;  
}

Das bewirkte, dass die Schrift beim ersten Menupunkt nicht mehr versprang - die anderen hatte ich nicht beachtet. Habe es jetzt wieder zurückgesetzt in

#menu .active {  
  height: 20px;  
  padding: 5px 20px 0 20px;  
  background-color: #d2c7a8;  
  color: #211f1f;  
}  

Also alles, wie es war. Vorschläge, was man ändern müsste?

[Drapondur]

So,

wenn man den Code von

#menu .active {  
  height: 20px;  
  padding: 5px 20px 0 20px;  
  background-color: #d2c7a8;  
  color: #211f1f;  
}

in

#menu .active {  
  height: 20px;  
  padding: 5px 20px 0 37px;  
  background-color: #d2c7a8;  
  color: #211f1f;  
}

ändert (padding links vergrößert), dann springt die Schrift im Menu nicht mehr.
Aber der Hover-Hintergrund ist nun nicht mehr mittig.

Wenn das noch hinhauen würde, wäre ich am Ziel. Aber wie?

Nochmal das ganze Menu-CSS:

#menu {  
  height: 25px;  
  font-family: 'PT Sans',sans-serif;  
  color: #d0c5a6;  
  padding: 315px 0 0 95px;  
  width: 650px;  
}  
  
#menu ul {  
  background-color: #201f1f;  
  height: 25px;  
  padding-top: 5px;  
  padding-left: 5px;  
}  
  
#menu ul li {  
  float: left;  
  text-align: center;  
  list-style: none;  
  height: 25px;  
  font-size: 15px;  
}  
  
#menu ul li a {  
  text-decoration: none;  
  display: block;  
  height: 20px;  
  padding: 5px 20px 0 20px;  
  color: #d0c5a6;  
}  
  
#menu ul li a:hover {  
  background-color: #d2c7a8;  
  color: #211f1f;  
}  
  
#menu ul li a:hover span {  
  color: #211f1f;  
}  
  
#menu span {  
  color: #c3c3c0;  
  font-size: 10px;  
  display: block;  
  margin-top: 5px;  
}  
  
#menu .active {  
  height: 20px;  
  padding: 5px 20px 0 37px;  
  background-color: #d2c7a8;  
  color: #211f1f;  
}  
  
#menu .active span {  
  color: #211f1f;  
}

[Drapondur]

@Günther

Die leeren Span-Elemente hab ich auch nicht verstanden....

Das Ganze ist eine Typo3-Seite und ich hab grad genug Ahnung, die CSS-Datei zu finden und halbswegs die Stellen zu identifizieren, wo ich was ändern kann.

Ans Template selber trau ich mich nicht ran....

Aber die rein logischen Änderungen im CSS an dieser Stelle bringen mich leider nicht weiter, auch mit ausprobieren kam ich nicht ans Ziel. Ich fürchte fast, der fehler liegt gar nicht im CSS.

[Gunther]

Hi!

Also alles, wie es war. Vorschläge, was man ändern müsste?

Ich kann im aktuellen FF kein "Springen" beobachten, aber ...!
Die Seite ist zwar valide, aber die leeren SPAN Elemente in den LIs machen trotzdem keinen Sinn.
Auch die Zeiten, wo man die Hover-Pseudoklasse nur auf A Elemente anwenden konnte (wegen dem IE) sind längst vorbei. Üblicherweise wendet man heutzutage die Hover-Pseudoklasse auf die LI Elemente an.

Und CSS sollte man immer nach dem Motto:"So viel wie nötig - so wenig wie möglich!" verwenden.
Wenn du also bspw. deinen LIs ein Margin gibst und den A und SPAN Elementen eine Schriftgröße samt Padding (bei display: block), dann kannst du dir u.a. sämtliche Angaben zu Height sparen.
Wenn die LIs gefloatet sind, dem UL Element noch ein 'overflow: hidden', damit die LIs auch eingeschlossen werden (Stichwort: Block formatting context).

Dann wird nicht nur eine evt. Fehlersuche einfacher ...! ;-)

Gruß Gunther