Pit: css Grid hr wird nicht so wie gewünscht angezeigt

SELF-Forum

css Grid hr wird nicht so wie gewünscht angezeigt

Pit
– Informationen zu den Bewertungsregeln

Hallo,

ich bin neu in css-Grids: kann mir jemand erklären, warum meine Linie (hr) mir nur als Punkt und nicht als Linie dargestellt wird?

Pit

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. css Grid hr wird nicht so wie gewünscht angezeigt

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@Pit

    ich bin neu in css-Grids: kann mir jemand erklären, warum meine Linie (hr) mir nur als Punkt und nicht als Linie dargestellt wird?

    Die Erdstrahlung vernichtet alle Punkte. Nur einer liegt im Schatten, da kommt sie nicht hin.

    LLAP 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. css Grid hr wird nicht so wie gewünscht angezeigt

      Pit
      – Informationen zu den Bewertungsregeln

      Die Erdstrahlung vernichtet alle Punkte. Nur einer liegt im Schatten, da kommt sie nicht hin.

      Hi Gunnar,

      lach

      Sorry, ich habe vergessen, den fiddle zu verlinken 😉

      Pit

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. css Grid hr wird nicht so wie gewünscht angezeigt

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@Pit

        Warum das so so ist, kann ich dir auf die Schnelle auch nicht sagen. Offensichtlich weiß das hr-Element mangels Inhalt in einem Grid nicht mehr, wie breit es sein soll. Mit width: 100% kann man ihm auf die Sprünge helfen.

        LLAP 🖖

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. css Grid hr wird nicht so wie gewünscht angezeigt

          Pit
          – Informationen zu den Bewertungsregeln

          Hi Gunnar,

          Warum das so so ist, kann ich dir auf die Schnelle auch nicht sagen. Offensichtlich weiß das hr-Element mangels Inhalt in einem Grid nicht mehr, wie breit es sein soll. Mit width: 100% kann man ihm auf die Sprünge helfen.

          Dank Dir. Kann man die Linie auch dünner machen?

          Pit

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. css Grid hr wird nicht so wie gewünscht angezeigt

            Matthias Apsel Homepage des Autors
            – Informationen zu den Bewertungsregeln

            Hallo Pit,

            Kann man die Linie auch dünner machen?

            Die hr werden mit border: 1px inset; festgelegt. Du kannst sie dünner machen, indem du

            border: none;
border-bottom: 1px solid;

            setzt.

            Bis demnächst
            Matthias

            --
            Rosen sind rot.
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. css Grid hr wird nicht so wie gewünscht angezeigt

              Pit
              – Informationen zu den Bewertungsregeln

              Hi Matthias,

              Die hr werden mit border: 1px inset; festgelegt. Du kannst sie dünner machen, indem du

              border: none;
border-bottom: 1px solid;

              setzt.

              Wow, ja das geht. Aber wie kommt man darauf? Hätte ich alleine nie gefunden 😟 Dank Dir,

              Pit

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. css Grid hr wird nicht so wie gewünscht angezeigt

                Gunnar Bittersmann Homepage des Autors
                – Informationen zu den Bewertungsregeln

                @@Pit

                Die hr werden mit border: 1px inset; festgelegt. […]

                Aber wie kommt man darauf?

                Durch Nachsehen.

                In den Einstellungen des Entwicklerwerkzeugs (hier Firefox) das Häkchen bei

                „Inspektor > Browser-eigene Stile anzeigen“

                gesetzt und schon erscheint:

                Screenshot der angezeigten browser-eigenen Stile für

                LLAP 🖖

                --
                “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

            2. css Grid hr wird nicht so wie gewünscht angezeigt

              Gunnar Bittersmann Homepage des Autors
              – Informationen zu den Bewertungsregeln

              @@Matthias Apsel

              border-bottom: 1px solid

              Ja, aber statt den Umweg über color: red; border-bottom: 1px solid currentColor würde ich dann doch die Rahmenfarbe direkt setzen: border-bottom: 1px solid red.

              Und da px eigentlich nirgends im Stylesheet was zu suchen hat: border-bottom: thin solid red.

              LLAP 🖖

              --
              “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
              Beitrag melden
              –
              Informationen zu den Bewertungsregeln