Probleme mit "springenden" Menüeinträgen

[Honigdachs]

Typolight Version: 2.7.2
Navigation: .mod_navigation (als horizontales Hauptmenü), standard, kein Suckerfish

Hallo zusammen,

ja ja, es wird eine CSS-Geschichte sein, aber wo bloß??

Ich habe immer das Problem, dass die von mir gegebenen Abstände zwischen den horizontalen Menüeinträgen (z.B. a {padding: 10px;} beim Klick auf den jeweils dann aktiven Menüpunkt li.active 'verschwinden'; will heißen, dass mir beim aktiven Link immer der linke und rechte Abstand 'fehlt'.

Woran kann das liegen??

[Nils Riel]

Hast du irgendwo einen Eintrag der so ähnlich wie dieser aussieht:

a:focus

a:active

und dazu vielleicht:

padding:0

oder

margin:0

Dir wäre leichter zu helfen mit einem Link oder dem Code

[Andreas]

...(z.B. a {padding: 10px;}...will heißen, dass mir beim aktiven Link immer der linke und rechte Abstand 'fehlt'.

Hallo Honigdachs,

der "aktive Link" dürfte default eigentlich kein Link, also ein a-Element, sein, sondern ein span-Element. Kontrolliere doch bitte alles mal mit Firebug.

Andreas

[Honigdachs]

Hallo Andreas,

erstmal vielen Dank für den span Tipp.Ich denke, das war es tatsächlich mit dem 'springen'. Dies tritt nun nicht mehr auf. Jedoch jetzt als nächstes ein für mich rätselhafter Abstand zwischen den Links. Ich habe leider nichts online, aber hier als Bild mit Code eingefügt.

Es geht um die rot markierten Abstände.

CSS

#header .mod_navigation ul.level_1{
padding:10px;
}
#header .mod_navigation ul.level_1 li{
display: inline;
list-style-type: none;
text-decoration: none;
color: #FFF;
}
#header .mod_navigation ul.level_1 li a{
padding-left:5px;
padding-right:5px;
padding-top:10px;
padding-bottom:10px;
border-right:1px solid #9b9b9b;
border-left:1px solid #9b9b9b;
text-decoration: none;
color:#FFF
}
#header .mod_navigation ul.level_1 li a:hover{
background-color: #9b9b9b;
}
#header .mod_navigation ul.level_1 span.active{
padding-left:5px;
padding-right:5px;
padding-top:10px;
padding-bottom:10px;
border-right:1px solid #9b9b9b;
border-left:1px solid #9b9b9b;
text-decoration: none;
color:#FFF;
}

[Andreas]

@world

Wer es noch nicht mitbekommen hat. Das Zauberwerkzeug heißt Firebug, das ist ein Addon für den Firefox. Leute glaubt es mir, ihr werdet nicht darum herum kommen. Ich denke, dass sich 90% der Fragen hier im Forum, welche CSS betreffen damit erübrigen.

Und es ist so leicht. Rechter Mausklick auf dein verunstaltetes Element, "Element untersuchen". Dann siehst du links-unten den HTML-Code und rechts-unten das CSS - für jedes Element einzeln. Oben in der original Seitenansicht im Browser werden die Elemente farblich überlagert, Margin und Padding werden farblich nochmal extra kenntlich gemacht. Unten rechts in der CSS-Ansicht kannst du testweise das aktuelle CSS überschreiben oder einzelne Werte deaktivieren.

Natürlich helfen hier im Forum alle gerne (ich auch) und es ist auch immer schön jemandem geholfen zu haben und dann den Dank zu lesen. Das werden wir dann alle leider nicht mehr haben, wenn ihr Firefox mit Firebug benutzt.

Also liebe Firefoxmitfirebugnichtkenner, tut euch selbst einen Gefallen und "give it a try". Ich würd mal sagen mit Firebug geht der CSS-Spaß erst richtig los.

Grüße von Andreas

[Honigdachs]

Hallo Andreas,

ja, Firebug und auch der von mir gerne benutzte Web Developer (ebenfalls ein Firefox Addon) sind Klasse - aber helfen auch nicht immer. In meinem Fallhabe ich bestimmt irgendwo ein Denkfehler uns somit css bug eingebaut. Auch firebug "erklärt" mir diese blöden Abstände nicht.

[Juke]

Das mit dem Abstand zwischen den li kommt von whitespaces.
http://infotekten.de/testdrive/list_inline/
Um Menüpunkte nebeneinander zu stellen, kannst du aber auch die li floaten.

Beste Grüße
Jutta

[Honigdachs]

Hallo Juke,

vielen Dank, das ist schon mal ein guter Hinweis. bei mir sieht es genau so aus. Allerdings bleibt die Frage, ob es wirklich der Whitespace ist. Hat dieses Problem denn niemand anders mit dem nav_default.tpl für die Hauptnavigation. Liegt das am Template?? Ich denke immer noch, dass der Fehler bei mir liegt...

[planepix]

Hallo Honigdachs,
gibt es ein Live-Link (ggf. per PN) - dann ist es viele einfacher dahinter zu kommen. Ok gibts nicht - möglich das mal online zu stellen?

[Honigdachs]

Hallo planepix,

derzeit leider noch nicht. Ich werde jetzt erstmal eine TL Systemwartung durchführen und Überschüssiges löschen. Extra templates habe ich nicht angelegt.

[planepix]

Versuch doch mal diesen CSS-Code:

#header .mod_navigation ul
{
    margin:0;
    padding:10px;
}

#header .mod_navigation li
{
    float:left;
    list-style-type: none;
    text-decoration: none;
    color: #FFF;
}

#header .mod_navigation a
{
    margin:0;
    padding:10px 5px;
    border-right:1px solid #9b9b9b;
    border-left:1px solid #9b9b9b;
    text-decoration: none;
    color:#FFF
}

#header .mod_navigation a:hover
{
    background-color: #9b9b9b;
}

#header .mod_navigation span.active
{
    margin:0;
    padding:10 5px;
    border-right:1px solid #9b9b9b;
    border-left:1px solid #9b9b9b;
    text-decoration: none;
    color:#FFF;
}

[Honigdachs]

Vielen Dank!!! Planepix

[Andreas]

In meinem Fall habe ich bestimmt irgendwo einen Denkfehler und somit css bug eingebaut. Auch firebug "erklärt" mir diese blöden Abstände nicht.

Hallo Honigdachs,

ja, manchmal könnte man sich die Haare raufen wenn man welche hätte. Ich hab das nur geschrieben, weil man selbst so gerne nachsehen würde mit firebug und dann nicht kann, weil es keinen Link zu der Seite gibt, was ja hier oft der Fall ist, weil wir ja meistens in der Produktion stecken.

Gestern hatte ich auch so einen Fall, ich hatte dem horizontalen Menü eine Höhe zugegwiesen, und dadurch machte der IE7 horizontale Absstände zwischen den li-elementen!??? Hab einfach die Höhe wieder raus genommen, geht auch ohne.

Ich glaub ich sollte diesen Text an @world aber trotzdem demnächst mal irgendwo als eigenen Hilfethread posten.

Aber zum Glück gibt's ja planepix, der macht das alles blind Und wo juke diesen Link aufgetrieben hat, unglaublich Woran lags denn jetzt? An display:inline anstatt float:left, stimmts? Da ich mit dem YAML-Framework arbeite sind mir die Standard-Codes leider immer etwas fremd.

Ja, Web Developer benutze ich auch.

Gruß an alle von Andreas

[planepix]

Hallo Andreas,

ja diesmal, da kein Online-Link verfügbar, nahezu blind

Ich vermute am fehlenden margin:0.

[Honigdachs]

Hallo Andreas und Planepix,

@planepix - ja, es war tatsächlich margin:0; aber ich hatte auch eine andere falsche Zuweisung geschrieben, die es mit verursacht hatte. Das schöne ist, es kommen einen dadurch auch Ideen, wie man derlei Probleme vielleicht generell besser und damit benutzerfreundlicher gestalten kann. Ich poste es hier umgehend.

Vielen Dank nochmal...