responsive Ansicht: Hervorhebung - CSS, HTML

  • hi,

    es gibt einen Menüpunkt mit der class=current, der hervorgehoben ist bzw. sein soll. In der responsive Ansicht werden jedoch auch dessen untergeordnete hervorgehoben. Woran liegt das?
    Das sehe ich nicht / verstehe ich nicht ...

    In der resp.-Ansicht sollte nur 1aa blau sein, nicht auch das folgende 1aaa.

    all

  • Hallo

    Das li mit der Klasse .current enthält selbst noch eine Liste. Bei breiten Fenstern wird diese innere Liste mit position: absolute; aus dem Dokumentfluß genommen, bei schmalen Fenstern nicht. Deshalb wird li.current bei schmalen Fenstern und Anzeige der inneren Liste höher.

    Das CSS ist leider recht unübersichtlich, da min- und max-width gleichzeitig verwendet werden. Das solltest du vermeiden. So ist eine konkrete Lösung nur schwierig zu finden, da sie dir bei Änderungen schnell um die Ohren fliegen wird.

    Du könntest die Klasse .current zum Beispiel direkt dem a-Element zuordnen.

    Gruss

    MrMurphy

  • mmh - dann ist die background-li-Zuweisung in dem Menü-Zusammenhang falsch?
    Danke für die Erklärung.
    Ein nav li:first-child .current { background-color: blue; } funktioniert leider auch nicht.
    .current dem a-Element zuordnen geht eher nicht, da es sich hier um ein CMS-output handelt. So kann der Fehler hier immer beim Einfügen einer neuen Seite poassieren. Schade.
    Die beiden width's bräuchte ich für das css-responsive-Menü-design - denke ich. Das hat mit dem Fehler aber nichts zu tun?
    all

  • Hallo

    Zitat

    Das hat mit dem Fehler aber nichts zu tun?

    Richtig.

    Das li-Element ist ein Container, der Inhalt enthält, in deinem Fall das a-Element und ein ul-Element. Wie bei allen anderen Containern, zum Beispiel div-Elementen vergrößert der Inhalt den Container und damit auch die Fläche der Hintergrundfarbe.

    Wie du dabei dem li-Element die Hintergrundfarbe zuweist spielt überhaupt keine Rolle. Wenn nur dem a-Element eine andere Hintergrundfarbe zuweisen willst darfst du auch nur genau das auswählen.

    Zitat

    .current dem a-Element zuordnen geht eher nicht, da es sich hier um ein CMS-output handelt.

    Es ist sinnvoll wenn du uns im voraus informierst welche Änderungen du überhaupt vornehmen kannst. Wenn wir uns Lösungen ausdenken und hinterher erfahren, dass der Fragesteller die überhaupt nicht umsetzen kann ist das nervig und frustrierend.

    Das a-Element kann auch mit CSS direkt ausgewählt werden ohne etwas am Quelltext zu ändern. Dazu muss nur

    Code
    nav .current {
            background-color: blue;
        }

    durch

    Code
    nav .current>a {
            background-color: blue;
        }

    ersetzt werden.

    Aus dem restlichen CSS halte ich mich raus. Ohne das CSS gründlich aufzuräumen und sinnvoll strukturieren bringen Änderungen überhaupt nichts. Nach einem ersten Überblick ist etwa ein drittel bis ein viertel des CSS veraltet oder überflüssig. Unnötige CSS-Angaben erzeugen immer wieder Probleme und sollten deshalb vermieden werden.

    Gruss

    MrMurphy

  • hi & vielen Dank!

    "veraltetes CSS": ich kenne mich nicht so aus und denke zumindest alte browser können damit umgehen und aufwärtskompatibel wirds auch sein - ohne eine Diskussion vom Zaun brechen zu wollen.

    Dies Zeichen ">" im CSS kenne o. kannte ich nicht richtig ... nutzte ich sozusagen blind. Das ist wohl eine Zuweisung. Jedenfalls passt die a-Element-Zuweisung (auch):

    nach stundenrundem Suchen & Probieren fand ich gestern noch das raus:

    HTML
    li.current > :first-child   { background-color: green; }

    das zumindest in meinem Menüzusammenhang gut passt.
    Frage wäre, welche Lösung mehr Geräte richtig bedienen würde.

    In den mobile-Vorschauen kann man ja meist das Menü nicht mit der Maus bedienen.

    all