Linie zwischen aktivem Tab und und Symbolleiste entfernen (eckige Tabs)

  • Hallo,

    bei mir wären das ca. 20 einzelne css-Dateien und noch ein "Riesen-Moloch", meines Erachtens ohne Eingriffe in Tab- und Symbolleistenoptik. Soweit ich es jetzt verstehe, liegt es aber wohl am Theme und der Wechselwirkung mit Firefox. Ist zwar etwas umständlich für die Helfenden geraten, aber wir haben ja dennoch schnell und hilfreich eine Lösung gefunden. Nochmals Dank dafür.

    Guten Rutsch.

    supi.

  • Naja, bei mir tummeln sich 60 Dateien, nach Anwendung getrennt - Ziel, Form, Farbe.
    Und wie öfters erwähnt, vielleicht nicht hier, helfen die Browser-Werkzeuge massiv weiter bei Fehlern.
    Ich sag immer, wer sich mit CSS umgibt für Firefox, sollte, müsste, diese kennen und mindestens rudimentär bedienen können.

    Angenehmer ist das mit Stylus, weil sich das nur gezielt bei Webseiten zeigt, ob und was genutzt wird, derzeit 149 Styles insgsamt. Kuddelmuddel hilft da überhaupt nicht weiter.

    Wir sind keine Beschwerdestelle, hier gibt es nur Lösungen! Meine Glückszahl hier: 93.

  • Hallo,

    ab FF 126 ist die Linie in ähnlicher Form wieder da, läuft jetzt aber scheinbar unter allen Tabs durch und stört somit nochmehr.

    Würde mich freuen, wenn das behebbar wäre.

    Du könntest mal einen dieser beiden Codes probieren:

    CSS
    #nav-bar {
        border-top: 0px !important;
    }

    Oder:

    CSS
    #nav-bar {
        border-top-color: transparent !important;
    }
  • Versuche es hier mit:

    CSS
    	#nav-bar {
       		background-color: transparent !important;
        	border-bottom: 10.1px solid light-dark(rgba(0,0,0,.0), rgba(255,255,255,.0)) !important;
    	} 

    Mit den Farben darfst Du herumspielen, auch die "Breite" darf nach Belieben angepasst werden.

    Ich empfehle das erst einmal in der Stilbearbeitung auszuprobieren
    und wenn dann alles passt, alles in Deine CSS zu kopieren.

    Wenn zu den Werten Fragen bestehen, frag!

    Mh, oder

    CSS
    #nav-bar {
      border-bottom: none !important;
    } 

    Du wirst es ausprobieren müssen.

    Auf jeden Fall wäre es wirklich nicht schlecht, wenn Du Dich mit den Browserwerkzeugen mal auseinandersetzt.

    Mit <3lichem Gruß

    Mira

    Einmal editiert, zuletzt von Mira_Belle (15. Mai 2024 um 21:40)

  • Ich muss hier nachdrücklich um Entschuldigung bitten:

    Horstmanns Tipps aus #24 funktionieren beide.

    Ich hatte beim auskommentieren in der Trennlinie über dem neuen Code das abschließende "/" vergessen und zack! Murks.

    Vielen Dank an alle für die kompetente Hilfestellung.

    mfg

    supi.

  • Horstmanns Tipps aus #24 funktionieren beide.

    Ja, das ist prima!

    Nur eins, ich würde in diesem Fall, weil Du diesen Strich ja loswerden willst,
    diesen nicht auf 0px verkleinern oder durchsichtig (transparent) machen,
    sondern ganz ausblenden.

    CSS
    #nav-bar {
      border-top: none !important;
    }

    Nur, wenn Du den Abstand vergrößern möchtest, dann :

    CSS
    #nav-bar {
        border-top: 10px !important;
        border-top-color: transparent !important;
    }

    Nur so als Beispiel.

    Mit <3lichem Gruß

    Mira

  • Nur eins, ich würde in diesem Fall, weil Du diesen Strich ja loswerden willst,
    diesen nicht auf 0px verkleinern oder durchsichtig (transparent) machen,
    sondern ganz ausblenden.

    Das macht keinen Unterschied, wenn du dir das berechnete CSS ansiehst: border-top: 0px, border-top: 0 sowie border-top: none setzen intern alle border-top-style: none, führen also zum exakt gleichen Ergebnis.

    border-top-color: transparent macht aber im Vergleich dazu tatsächlich einen Unterschied, weil dann der Rahmen zwar nicht sichtbar, aber ja noch da ist und das Element daher um die Breite des transparenten Rahmens verschoben ist. Das hast du selbst ja auch erkannt, wie man an deinem Beispiel sieht. Ich wollte es nur der Vollständigkeit halber erwähnt haben, damit niemand denkt, das „macht keinen Unterschied“ würde sich auch noch darauf beziehen. ;)

  • Sören Hentzschel Vielen lieben Dank für Deine Erklärung, das wusste ich nicht.
    Mir ging es da ja auch eher um die Lesbarkeit des CSS.

    "none" kann ich sehr leicht finden, wenn ich jedoch transparent genommen habe,
    ist mir nicht sofort klar, ob ich etwas "loswerden" wollte oder ob es wirklich nur transparent sein sollte.
    Auch mit Größeneinstellung habe ich so mein Problem.
    Wenn ich das Element "loswerden" will, nehme ich "none" auch wenn "0px" bzw "0" das gleiche bewirkt.

    Aber das kann und darf ja jeder machen wie er will.

    Mit <3lichem Gruß

    Mira

  • border-top-color: transparent macht aber im Vergleich dazu tatsächlich einen Unterschied, weil dann der Rahmen zwar nicht sichtbar, aber ja noch da ist und das Element daher um die Breite des transparenten Rahmens verschoben ist. Das hast du selbst ja auch erkannt, wie man an deinem Beispiel sieht. Ich wollte es nur der Vollständigkeit halber erwähnt haben, damit niemand denkt, das „macht keinen Unterschied“ würde sich auch noch darauf beziehen. ;)

    Aus dem Grund würde ich erstmal border-top-color: transparent probieren, eben weil es ein quasi physischer "Baustein" ist, den Mozilla mit Absicht dort eingebaut hat.

    Wenn der Inhalt dann visuell nicht mittig sitzt o.ä, nimmt man die Border halt ganz raus.

    Der Wert von 0.01px ist mir zwar ein Rätsel, aber das hier ist alles was ich aktuell dazu finden konnte.

    3 Mal editiert, zuletzt von Horstmann (16. Mai 2024 um 13:36)

  • Der Wert von 0.01px ist mir zwar ein Rätsel

    Der Grund für diese merkwürdige Angabe ist, dass Rahmen immer mindestens einen Gerätepixel breit sind, selbst wenn du 0.01px angibst. Wenn du aber einen höherauflösenden Bildschirm verwendest, wird bei Angabe von 1px etwas mehr verwendet. Mit diesem Trick wird vermieden, dass Bruchteile eines zusätzlichen Gerätepixels verwendet werden.

  • Der Wert von 0.01px ist mir zwar ein Rätsel

    Der Grund für diese merkwürdige Angabe ist, dass Rahmen immer mindestens einen Gerätepixel breit sind, selbst wenn du 0.01px angibst. Wenn du aber einen höherauflösenden Bildschirm verwendest, wird bei Angabe von 1px etwas mehr verwendet. Mit diesem Trick wird vermieden, dass Bruchteile eines zusätzlichen Gerätepixels verwendet werden.

    Dankeschön! :):thumbup:
    Irgendwas in der Art hatte ich mir gedacht, war aber etwas ratlos was genau der Grund ist.