Horizontale Navigation vererbt klassen [GELÖST]

[Sebeljaner]

Hallo,

für mich ist Contao das erste CMS, da ich bisher immer das selbst programmiert habe. Ich habe mir auch so ein schickes Buch dazu gekauft. Leider komme ich jetzt nicht mehr weiter. Ich habe eine horizontale Navigation erstellt. Nun habe ich eine zweite Ebene dort eingeführt. Leider übernimmt die Level 2 Ebene die Angaben aus der Level 1 Ebene.
Ich möchte gerne das Level 1 so bleibt wie es ist mit Farben und Formen. Level 2 soll allerdings eine andere Hintergrundfarbe haben bei Mouse Over und bei Active. Allerdings soll die Trail-Makierung in der Level 1 Ebene erhalten bleiben.
Ich habe jetzt schon diverses ausprobiert. Habe die verschiedenen Ebenen die Level-Klassen hinzugefügt. Habe versucht die CSS-Angaben zu "überschreiben", aber alles ohne den gewünschten Effekt.

Ich habe mal den aktuellen CSS-Code angehängt.

#header .mod_navigation {
    width:100%;
    height:auto;
    float:left;
    background:-moz-linear-gradient(top,#ff4040,#ff4040,#df0000,#df0000);
    background:-webkit-linear-gradient(top,#ff4040,#ff4040,#df0000,#df0000);
    background:-o-linear-gradient(top,#ff4040,#ff4040,#df0000,#df0000);
    background:-ms-linear-gradient(top,#ff4040,#ff4040,#df0000,#df0000);
    background:linear-gradient(to bottom,#ff4040,#ff4040,#df0000,#df0000);
    -pie-background:linear-gradient(top,#ff4040,#ff4040,#df0000,#df0000);
    -webkit-box-shadow:1px 1px 1px 1px #808080;
    box-shadow:1px 1px 1px 1px #808080;
    font-size:14px;
    color:#fff;
    text-indent:22px;
    behavior:url('assets/css3pie/1..0/PIE.htc');
}

#header .mod_navigation ul {
    width:auto;
    float:left;
    margin:0;
    padding:0;
    list-style-type:none;
}

#header .mod_navigation li {
    width:auto;
    float:left;
    margin:0;
}

#header .mod_navigation a,
#header .mod_navigation span {
    display:block;
    padding-right:50px;
    padding-left:20px;
    line-height:38px;
    color:#fff;
    text-decoration:none;
}

#header .mod_navigation .active,
#header .mod_navigation .trail {
    background:-moz-linear-gradient(top,#787878,#787878,#000000,#000000);
    background:-webkit-linear-gradient(top,#787878,#787878,#000000,#000000);
    background:-o-linear-gradient(top,#787878,#787878,#000000,#000000);
    background:-ms-linear-gradient(top,#787878,#787878,#000000,#000000);
    background:linear-gradient(to bottom,#787878,#787878,#000000,#000000);
    -pie-background:linear-gradient(top,#787878,#787878,#000000,#000000);
    color:#fff;
    behavior:url('assets/css3pie/1..0/PIE.htc');
}

#header .mod_navigation a:hover,
#header .mod_navigation a:focus {
    display:block;
    padding-right:50px;
    padding-left:20px;
    background:-moz-linear-gradient(top,#f0f0f0,#f0f0f0,#ffffff,#ffffff);
    background:-webkit-linear-gradient(top,#f0f0f0,#f0f0f0,#ffffff,#ffffff);
    background:-o-linear-gradient(top,#f0f0f0,#f0f0f0,#ffffff,#ffffff);
    background:-ms-linear-gradient(top,#f0f0f0,#f0f0f0,#ffffff,#ffffff);
    background:linear-gradient(to bottom,#f0f0f0,#f0f0f0,#ffffff,#ffffff);
    -pie-background:linear-gradient(top,#f0f0f0,#f0f0f0,#ffffff,#ffffff);
    color:#df0000;
    behavior:url('assets/css3pie/1..0/PIE.htc');
}

#header .mod_navigation .level_2 {
    width:0;
    height:0;
    left:-32768px;
    top:-32768px;
    position:absolute;
    overflow:hidden;
    display:inline;
    -webkit-box-shadow:2px 2px 2px 1px #808080;
    box-shadow:2px 2px 2px 1px #808080;
    behavior:url('assets/css3pie/1..0/PIE.htc');
}

#header .mod_navigation a:hover .level_2 {
    background-color:#e4e4e4;
}

#header .mod_navigation .level_2 li {
    clear:both;
}

#header .mod_navigation li:hover .level_2 {
    width:auto;
    height:auto;
    min-width:50px;
    left:auto;
    top:auto;
    overflow:auto;
    display:block;
    background-color:#000;
    z-index:1000;
}

#header .mod_navigation .level_2 a,
#header .mod_navigation .level_2 span {
    font-size:13px;
    line-height:32px;
}

#header .mod_navigation .level_2 span.active {
    font-weight:bold;
    color:#df0000;
}

Anscheinend habe ich schon so oft auf den Code geschaut, das ich blind bin für den Fehler. Ich hoffe ein paar "unverbrauchte" Augen können mir da weiterhelfen.

[uwe]

Hallo Sebeljaner

Ändere doch mal

#header .mod_navigation a:hover .level_2 { background-color:#e4e4e4; }

in

#header .mod_navigation .level_2 a:hover { background-color:#e4e4e4;}

[lucina]

Zum Weiterlesen: http://little-boxes.de/lb1/11.6-die-...heritance.html

[Sebeljaner]

Hallo,

vielen Dank für die Antworten.

Hallo Sebeljaner

#header .mod_navigation .level_2 a:hover { background-color:#e4e4e4;}

Leider hatte die Änderung keinen Effekt.

Zum Weiterlesen: http://little-boxes.de/lb1/11.6-die-...heritance.html

Danke fü den Link, aber das die "Tags" vererbt werden ist mir gerade sehr offensichtlich. Mir fehlt der richtige Code bzw. Class damit die Vererbung nicht zum Einsatz kommt. ^^

MfG
Sebeljaner

[mlweb]

Wie sieht es mit einem Link aus. Da wird das untersuchen der Problematik deutlich einfacher.

[tab]

So wirklich kann ich dein Problen nicht nachvollziehen. Was meinst du mit "vererbt Klassen"? Welche Angaben aus Level_1 werden denn deiner Meinung nach für Level_2 und folgende übernommen? Bzw welche sollen denn NICHT übernommen werden (und können auch nicht für die folgenden Level überschrieben werden)?
Niemand hindert dich übrigens auch daran, für die nur für Level_1 gedachten Eigenschaften z.B statt "#header .mod_navigation ul" einfach "#header .mod_navigation ul.level_1" zu verwenden. Oder für die li's des Level_1 z.B. "#header .mod_navigation ul.level_1 > li". So gesetzte Styles werden sicher nicht in andere Levels übernommen. Edit: Außer durch Vererbung, das betrifft aber viele Styles gar nicht, z.B. auch background, Größe und Position nicht.

Ohne Link ist es allerdings echt mühsam nachzuvollziehen, wie die Navigation aussehen soll und wie sie ggf aussieht und warum.

[Sebeljaner]

Hallo,

also der Link lautet .....

In der Navi unter dem Bereich Serivces geht bei Mouse Over das Untermenü auf. Alles soweit ok. Nur dieses Untermenü soll einen anderen MouseOver-Effekt bzw. Active-Effekt haben. Bisher übernimmt das Untermenü die Befehle aus dem Hauptmenü. Da liegt das Problem. Ich habe auch schon probiert das mit der Class level_1 und level_2 zu trennen, doch leider führte das immer zu ungewollten Effekten.

Wenn ich das mache:

 z.B statt "#header .mod_navigation ul" einfach "#header .mod_navigation ul.level_1" zu verwenden. Oder für die li's des Level_1 z.B. "#header .mod_navigation ul.level_1 > li"

wird meine horizontale Navi zu einer vertikalen Navi.

Ich hoffe das beschreibt mein Problem genauer.

[mlweb]

Hab mir mal die Mühe gemacht und Dein css in meine Testseite eingebaut.
Als allererstes ist mir dabei aufgefallen, dass die Links mit dem Code gar nicht bedienbar waren, weil diese durch irgendetwas verdeckt sind (Firefox 31 unter Windows 7). Habe dort nicht länger gesucht wodurch das zustande kommt, hat ja mit Deinem eigentlichen Problem nichts zu tun. Habe also erst einmal den für meinen Geschmack überflüssigen float in .mod_navigation entfernt, damit ich die Links überhaupt bedienen kann.

Allerdings bin ich aus Deinem Code bzw. Deiner Beschreibung noch nicht schlau geworden was nun in welchem Zustand genau welche Farbe haben soll.

Level 1 Standard: roter HG-Verlauf, weiße Schrift
Level 1 Aktiv: schwarzer HG-Verlauf, weiße Schrift
Level 1 Hover/Focus: weißer HG-Verlauf, rote Schrift
Level 1 Trail: schwarzer HG-Verlauf, weiße Schrift

Level 2 Standard: schwarzer Hintergrund, welche Schriftfarbe?
Level 2 Aktiv: welcher Hintergrund?, roter Schrift
Level 2 Hover: grauer HG, welche Schriftfarbe?

Level 1 Trail und Level 2 Standard: welcher Hintergrund?, welche Schriftfarbe?
Level 1 Trail und Level 2 Aktiv: welcher Hintergrund?, welche Schriftfarbe?
Level 1 Trail und Level 2 Hover: welcher Hintergrund?, welche Schriftfarbe?

In Deinem Code fehlt glaub ich noch einiges um alles so darzustellen wie Du es möchtest. So hat #header .mod_navigation a:focus bzw. #header .mod_navigation a:hover eine höhere Spezifität als #header .mod_navigation .trail und damit kommt Deine Eigenschaft für Trail gar nicht zum Tragen. So etwas kann man wunderbar mit den Enwicklertools der Browser untersuchen.

Wenn Du Lust hast kannst Du Dir mal die Seite www.gesundheitstraining-hamburg.de anschauen. Dort ist so etwas ähnliches als vertikale Navigation realisiert. Vielleicht hilft das ja schon weiter.

[tab]

Ich vermute mal, das Farbproblem hat mit dem Verlauf zu tun, der da als background-image eingebunden ist. Deaktiviere ich den, dann kommt der Hintergrund des Untermenü-Punkts bei hover schwarz, wie bei Element untersuchen ja auch angezeigt. Dieser Farbverlauf bei hover wird für alle a innerhalb der Navigation gesetzt. Damit ist die background-color belanglos.

#header .mod_navigation a:hover, #header .mod_navigation a:focus {
    display: block;
    color: #DF0000;
    padding-right: 50px;
    padding-left: 20px;
    background: linear-gradient(to bottom, #F0F0F0, #F0F0F0, #FFF, #FFF) repeat scroll 0% 0% #888;
        background-color: #888;
        background-image: linear-gradient(to bottom, #F0F0F0, #F0F0F0, #FFF, #FFF);
        background-repeat: repeat;
        background-attachment: scroll;
        background-position: 0% 0%;
        background-clip: border-box;
        background-origin: padding-box;
        background-size: auto auto;
}

[tab]

Ergänze ich einfach dein CSS für level_2 wie folgt, dann hat bekomme ich auch den Hintergrund und die Schriftfarbe zu sehen wie gesetzt.

#header .mod_navigation .level_2 a:hover {
    background-color: #666;
    color: #0f0;
    background-image: none;
}

[Sebeljaner]

Ergänze ich einfach dein CSS für level_2 wie folgt, dann hat bekomme ich auch den Hintergrund und die Schriftfarbe zu sehen wie gesetzt.

#header .mod_navigation .level_2 a:hover {
    background-color: #666;
    color: #0f0;
    background-image: none;
}

Vielen Dank für deine Hilfe. Das war es. Im Prinzip ziemlich einfach, ich wäre jetzt aber so nicht darauf gekommen. Fühl dich gedrückt.