Menueleiste Ansicht

  • Allerdings greift background-color: red nicht bei hover.

    Selbst wenn ich aus background-color nur background mache. klappt es nicht.

    Dachte über diesen Trick schaffe ich es.

    Eine Farbänderung bei :hover mußt du mit background-color machen, wenn du ein Icon für diesen Menüpunkt hast.

    Ansonsten überschreibt dir background: red dein Icon... ;)

  • milupo


    Danke für den Hinweis. Nun klappt es.

    Allerdings verschiebt er mir nun hier das Icon bei hover:


    CSS
    #menu_zoomReset:hover{
        -moz-appearance:none !important;
        margin-right: -1px !important;
        background: red url("file:///F:/ICONS/Firefox/Menue-Icons/Ansicht-Zoom-Tatsächliche Größe.png") no-repeat !important;    
        border-width: thin !important;
        border-style: solid !important;
        min-height: 15px !important;
        padding-left: 35px !important;
        background-position: 10px 10!important;
        }

    in die obere linke Ecke.


    Und mit background-color bleibt es bei hover zwar bestehen aber färbt sich nicht ein.


    Ich gebe aber nicht auf.

    Freundliche Grüße
    Barbara


    ____________

  • Allerdings verschiebt er mir nun hier das Icon bei hover:

    Hm, du hast jetzt in Zeile 1 das Komma mit weit hinten, zwischen den zwei Kommentaren. Verschiebe es mal nach vorn, direkt hinter #toggle_zoom. Entferne auch beim zweiten #toogle_zoom (also in Zeile 2) das Leerzeichen dahinter.


    Kannst du mir eigentlich mal hier deine beiden Icons zur Verfügung stellen, damit ich mit ihnen testen kann?

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress und Facebook

    Einmal editiert, zuletzt von milupo () aus folgendem Grund: Ein Beitrag von milupo mit diesem Beitrag zusammengefügt.

  • Sehr gerne:

    Hier: Tatsächliche Größe


    Hier: Nur-Text.zoomen


    Ich habe nur die Namen hier etwas verkürzt und hoffe, es ist richtig

    Freundliche Grüße
    Barbara


    ____________

  • Und mit background-color bleibt es bei hover zwar bestehen aber färbt sich nicht ein.

    Du beziehst dich jetzt auf #menu_zoomReset:hover? Das färbt sich bei mir rot ein. So sieht mein Code aus:


    Die Festlegungen zu den Symbolen wirken bei mir noch nicht, da mir die Symbole fehlen.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress und Facebook

  • Nun hakt hover bei:

    Tatsächliche Größe

    Sieht bei mir so aus:


    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress und Facebook

  • Ich verstehe die Logik nicht mehr?

    Welche Logik?


    Aber aufgeben ist keine Option.

    :thumbup:



    Ich habe mal ein Weilchen experimentiert. Mit der Zusammenfassung zweier Selektoren in den Zeilen 1 und 2 habe ich das Problem, dass mir für „Nur Text zoomen“ das Symbol doppelt angezeigt wird. Ist das bei dir auch so?

    in die obere linke Ecke.

    Schaue dir mal in Beitrag #23 die Zeile 9 des Codes für „Tatsächliche Größe“ zu background-position an. Dort fehlt bei der zweiten 10 die Einheit px.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress und Facebook

  • milupo

    Ja, das mit den doppelöten Symbolen habe ich auch. Lupe und Häkchen. Habe es aber so definieren können, das die Lupe den Haken fast überdeckt. Also nicht so tragisch und für mich okay.


    Nun habe ich den code mal etwas geändert:

    Habe nun oben background-color gesetzt. Nun macht er das, was er machen soll.

    Eigentlich - Allerdings zeigt es mir nun das Icon nicht bei "aktiv" an, dafür bei hover.


    Ist schon irgendwie eigenartig aber ich probiere weiter.

    Mit background-color zusätzlich bei hover ändert sich nichts.


    Vielleicht haben Endor oder 2002Andreas ja noch eine Idee.

    Wobei, ich versuche mal die Farbe, Anregung von Dharkness aus Beitrag #22, mit #f44336 zu setzen. Mal sehen.


    Jepp das ist die Lösung!


    So sieht es aus und klappt tadellos.

    Nun würde mich interessieren, warum es sorum klappt und andersrum nicht?

    Freundliche Grüße
    Barbara


    ____________

    Einmal editiert, zuletzt von BarbaraZ- () aus folgendem Grund: Text 2x korrigiert

  • Allerdings zeigt es mir nun das Icon nicht bei "aktiv" an, dafür bei hover.

    Das ist logisch - du hast im nomalen Code background-color genommen und sowohl Farbe als auch Symbol sowie non-repeat zugewiesen. Das geht nicht, denn background-color ist eine Einzeleigenschaft, nur für Farben. background dagegen ist eine Sammeleigenschaft, der du mehrere Einzeleigenschaften zuweisen kannst. Also, auch im ersten Code background verwenden.


    Alternativ kannst du background in drei Einzeleigenschaften aufsplitten: background-color, background-image und background-repeat.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress und Facebook

  • Hier klappt es leider nicht.


    Statt des Icons und background red bei hover wird als Symbol ein Häkchen gesetzt und der Hintergrund bleibt schwarz. :/


    Es sollte eigentlich dieses Icon statt des Häkchens erscheinen.


    Selbst die Konstellation mit background-image und background-color (siehe unten), bringt nicht den gewünschten Effekt.

    CSS
     #menu_tabsSidebar:hover{
        -moz-appearance:none !important;
        margin-right: -1px !important;
        background-image url("file:///F:/ICONS/Firefox/Menue-Icons/Ansicht-Sidebar-Lesezeichen.png") no-repeat !important;    
        background-color: #f44336 
        border-width: thin !important;
        min-height: 24px !important;
        padding-left: 35px !important;
        background-position: 10px 10px !important;
        }

    Freundliche Grüße
    Barbara


    ____________

    2 Mal editiert, zuletzt von BarbaraZ- () aus folgendem Grund: Tippfehler berichtigt.

  • #menu_tabsSidebar ist aber nicht der Selektor für Ansicht --> Sidebar --> Lesezeichen, der richtige Selektor ist #menu_bookmarksSidebar.

    Übersetzer für Obersorbisch und Niedersorbisch auf pontoon.mozilla.org u.a. für Firefox, Firefox für Android, Firefox für iOS, Firefox Klar/Focus für iOS und Android, Thunderbird, Pootle, Django, LibreOffice, LibreOffice Onlinehilfe, WordPress und Facebook


  • Du musst nur dein Icon wieder einfügen noch.

  • Versuch mal folgendes:

    Der Ausdruck -moz-appearance ist veraltet - neu ist: appearance.

    Außerdem sollte es auch ganz ohne diesen Ausdruck klappen. ;)

    Wen das Häkchen trotzdem noch erscheint, kannst du testweise noch list-style-image: none !important; hinzufügen.

  • grisu2099,

    Danke damit klappt es. Danke Euch für die Hilfe.

    Habe hier für mich viel gelernt. Nun heißt es, sich mit den Entwicklerwerkzeugen zu beschäftigen, damit ich solche Sachen auch zuordnen kann.


    Verständnisfrage. Kann ich -appearance dann generell weglassen, wenn ich oben mit @-moz-document den Aufruf erzeuge?

    Freundliche Grüße
    Barbara


    ____________

    Einmal editiert, zuletzt von BarbaraZ- ()

  • Vieles wäre vermeidbar gewesen...


    Es sind zwar nur Kleinigkeiten wie die angesprochenen Klammern, vergessene Einheiten und sowas:

    background-color: red url("file:///F:/ICONS/Firefox/Menue-Icons/Ansicht-Zoom-Tatsächliche-Größe.png") no-repeat !important;

    Ist das eine behoben, schleicht sich woanders einer wieder ein.


    Was das letzte CSS angeht, hatte ich das hier schon mal angesprochen:


    Bei hover reicht es, nur die Änderungen einzutragen. Daher auch die Separierung von solchen Zeilen:

    background: #f44336 url("file:///F:/ICONS/Firefox/Menue-Icons/Ansicht-Sidebar-Lesezeichen.png") no-repeat !important;

    zu:

    CSS
            background: url("file:///F:/ICONS/Firefox/Menue-Icons/Ansicht-Sidebar-Lesezeichen.png") !important;
            background-repeat: no-repeat !important;
            background-color: #f44336 !important;

    Mit einer Zeile wird zB background-position verworfen. Und dann kann auch kein Mischmasch wie oben entstehen. Und da ich vermute, dass Firefox die user...css genau einmalig einliest beim Start, dürfte die Menge der Zeilen auch vollkommen unerheblich sein. Es wird so einfach übersichtlicher. Lernen bedeutet nicht nur, sich was vormachen zu lassen, sondern auch konkret Fehlern nachgehen und beim nächsten Mal zu vermeiden. Falls der Inspector alle Zeilen anzeigen sollte, dann ist bei den fehlerhaften auf jeden Fall zu sehen, dass nicht aktiv, sei es durch ein gelbes Warndreieck oder ausgegraut.

    [ ] Danke [ ] Gehts noch?! [ ] Ich glaub, es hackt!
    Warum ist die "Eigenart" mancher Menschen größer als dieses Universum?

  • .DeJaVu

    Danke für die Aufschlüsselung. Ich werde, da es, wie ich finde, übersichtlicher ist, das Ganze nochmal anpassen.

    Und ja, da ich mich erst langsam einarbeite, wird es noch ein wenig dauern, ehe ich da einigermaßen Durchblick habe.

    Aber solche Hinweise finde ich sehr wertvoll.

    Freundliche Grüße
    Barbara


    ____________

  • Auch, wenn es nicht sonderlich beliebt ist, es hilft: Stylus

    ;)


    Oder meinst du, ich prüfe mein CSS nicht, weil ich das so "toll" kann? Weit weg davon. :whistling:

    [ ] Danke [ ] Gehts noch?! [ ] Ich glaub, es hackt!
    Warum ist die "Eigenart" mancher Menschen größer als dieses Universum?