TMENU Schaltflächen falsch gefärbt

[tina44]

Hallo zusammen,

ich habe auf meiner Seite ein horizontales und ein vertikales Menü, wobei die Ebene 1 im horizontalen Menü und Ebene 2 und 3 im vertikalen, linksbündigen Listenmenü angezeigt werden.

Die Seite wurde mit Hilfe von Templavoila erstellt und gemappt.

Inzwischen bin ich soweit, dass alle Navigationspunkte an der richtigen Stelle angezeigt werden und funktionieren, allerdings nicht so aussehen, wie ich es gerne hätte.

Obwohl ich in der CSS-Datei konkrete Farben, Größe und Abstand für die Navigationspunkte definiert habe, bleiben alle Links blau, bzw. lila, wenn sie bereits betätigt wurden.

Ich bin mit meinem Latein völlig am Ende und habe auch schon diverse Foren durchforstet, habe aber bisher nichts gefunden, was mir helfen könnte.

Hier mein TypoScript:
lib.mainMenu = HMENU
lib.mainMenu {
entryLevel = 0
1 = TMENU
1.NO = 1
1.NO.allWrap =  |  |  |*| |  |  |*| |
1.NO.ATagParams = class="navigation"
}

lib.subMenu = HMENU
lib.subMenu {
entryLevel = 1
1 = TMENU
1 {
noBlur = 1
wrap = <ul class = "navi">|</ul>
NO = 1
NO {
ATagTitle.field = abstract // description // title
wrapItemAndSub = <li>|</li>
ATagParams = class="ebene2"
}
ACT.ATagParams = class="ebene3"
CUR < .NO
CUR.doNotLinkIt = 1
}
2 < .1
}mein HTML:

<div id="navigation" class="navigation" style="text-decoration:none;" >
<p>Home | Unternehmen | Entwicklung | Branchen | Kompetenzen | Referenzen | Karriere | News | Download</p>
</div>

[...]

<div id="subnavigation" class="navi" style="text-decoration:none;" >

<ul>
<li class="ebene2"><a>ENTWICKLUNG<a></li>
<li class="ebene3"><a>Engineering</a></li>
<li class="ebene3"><a>Resourcing</a></li>
<li class="ebene3"><a>Consulting</a></li>
<li class="ebene3"><a>Produkte</a></li>
</ul>
</div>

und meine CSS-Datei:

.navigation{
    word-spacing: 0.55em;
    text-align:center;
    color:#808080;
    font-size: 0.88em;
    text-decoration:none;
}

.navi{
    text-decoration:none;
    list-style: none;
    text-transform: uppercase;
    font-size: 1.4em;

}

.ebene2{
    margin: 0;
    line-height:2em;
}

.ebene3{
    margin: 0;
    font-size:0.9em;
    text-indent: 2em;
    line-height:1.5em;
    text-transform: lowercase;
}

.navi a {
        display: block;
        color: #000000;
        text-decoration: none;
        padding: 0.25em 2em;
}

Es wäre toll, wenn ihr mir weiterhelfen würdet,

Gruß, Tina

[kleppie]

Füge einfach den "a" im CSS hinzu:

.ebene2, .ebene2 a {
    margin: 0;
    line-height:2em;
}

.ebene3, .ebene3 a {
    margin: 0;
    font-size:0.9em;
    text-indent: 2em;
    line-height:1.5em;
    text-transform: lowercase;
}

dann wird das auch Übernommen

[tina44]

Hi kleppie,

leider hat das auch nichts gebracht. Die Links sind immer noch blau und lila, wie zuvor.

Was mich auch so wundert ist, dass ich sogar bei übergeordneten Elementen, wie body angegenen habe:

text-decoration:none;

und der das trotzdem macht...

[kleppie]

Hi tina44,

und wenn Du dann ganz explizit wirst

li.ebene2 a { ... }

Hast Du vieleicht nen FireFox mit FireBug, da kann man so schön das Element inspizieren. Zum Design-Entwickeln das Wahre

Greetings

[tina44]

ja, den FireBug hab ich und konnte damit das genaue Element der Schaltflächen identifizieren.

wenn ich in der CSS-Datei dann aber ".ebene2 li a {}" angebe bringt das frustrierenderweis trotzdem nichts.

Kann es sein, dass sich die CSS-Befehle bei zu häufiger Angabe wieder aufheben? Eigentlich ja nicht, oder?

Oder vielleicht wird mein CSS einfach vom TypoScript überschrieben oder nicht beachtet oder so.

Hab wirklich keine Ahnung, was ich noch machen soll. Das Script stimmt aber, oder?

Gruß, Tina

[kleppie]

Hi Tina

Du weist aber schon das es "li.ebene2 a { ... }" ist und nicht ".ebene2 li a {}". Weil sonst sucht der innerhalb eines (belibigen)TAGs mit Class="ebene2" ein <li> in dem ein <a> ist. andersrum ist es jedes <li> mit class="ebene2" in dem ein a ist.

Ändert sich denn was an deiner Seite wenn zu z.B. der .ebene2 {} mal ne andere farbe gibst und wrapItemAndSub = <li>text |</li> bzw. siehst du im Firebug Dein CSS ... dann hat er wenigstens schon mal diene Datei mitgenommen.

Greetings
Kleppie