salzberg: Liste ohne Punkte wirklich zentrieren

Hallo zusammen,

ich hab' nach einigen Jahren Pause nun mal wieder mit HTML / CSS angefangen... arbeite zu Neubeginn mal mit den Videos zu responsive Seiten von Adobe... nur so nebenbei...

...hab' nun festgestellt, dass im Navigationsbereich die Wörter in der (ul-) Liste, zwar ungefähr, aber nicht genau in der horizontalen Mitte des Browser-Fensters erscheinen. Mir kommt es so vor, als ob die Sichtbarkeit der Listenpunkte zwar abgestellt wäre (list-style-type: none;), der Abstand zum Punkt + Platzbedarf für den Punkt, aber zu der Wortlänge mit dazugerechnet werden... und sich deswegen "nur" der jeweilige Text nicht in der Mitte befindet.

Kann das sein? ...oder muss es an etwas anderem liegen?

  1. Hallo,

    ...hab' nun festgestellt, dass im Navigationsbereich die Wörter in der (ul-) Liste, zwar ungefähr, aber nicht genau in der horizontalen Mitte des Browser-Fensters erscheinen.

    Mir kommt es so vor, als ob die Sichtbarkeit der Listenpunkte zwar abgestellt wäre (list-style-type: none;), der Abstand zum Punkt + Platzbedarf für den Punkt, aber zu der Wortlänge mit dazugerechnet werden... und sich deswegen "nur" der jeweilige Text nicht in der Mitte befindet.

    Kann das sein?

    das kann von hier aus ohne Einblick in deinen Quellcode niemand sagen. Vermutlich hast du die Bullets mit list-style-type: none; entfernt - gut möglich, dass dabei ein margin-left oder padding-left übrigbleibt. Das findest du aber mit den Entwicklertools deines Browsers ganz schnell heraus.

    ...oder muss es an etwas anderem liegen?

    Vielleicht am Fettgehalt im Käse? ;-)

    So long,
     Martin

    --
    Frage an die Kollegin am Montagmorgen: "Na, wie war dein Wochenende?"
    Depressive Kollegin: "Hell, dunkel, hell, dunkel, Montag."
    1. @@Der Martin

      Mir kommt es so vor, als ob die Sichtbarkeit der Listenpunkte zwar abgestellt wäre (list-style-type: none;)

      das kann von hier aus ohne Einblick in deinen Quellcode niemand sagen. Vermutlich hast du die Bullets mit list-style-type: none; entfernt

      Stand deine Vermutung nicht so im OP und ist damit genug Einblick?

      gut möglich, dass dabei ein margin-left oder padding-left übrigbleibt.

      Irgendwie hab ich in Erinnerung, dass verschiedene Browser das früher mal tatsächlich unterschiedlich umgesetzt hatten. Heute ist es wohl in allen Browsern padding-left.

      (BTW, war zeichnest du Code nicht als solchen, sondern kursiv aus?)

      LLAP 🖖

      --
      „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
      „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

      —Marc-Uwe Kling
      1. Hallo,

        das kann von hier aus ohne Einblick in deinen Quellcode niemand sagen. Vermutlich hast du die Bullets mit list-style-type: none; entfernt

        Stand deine Vermutung nicht so im OP und ist damit genug Einblick?

        stimmt, jetzt sehe ich es auch. Habe ich vorhin überlesen.

        gut möglich, dass dabei ein margin-left oder padding-left übrigbleibt.

        Irgendwie hab ich in Erinnerung, dass verschiedene Browser das früher mal tatsächlich unterschiedlich umgesetzt hatten.

        In der Tat. Ich habe vor über 10 Jahren mal Opera, Firefox und Internet Explorer verglichen. Ich weiß nicht mehr die genaue Zuordnung, aber ich weiß noch, dass

        • einer der drei die Einrückung durch padding-left für ol/ul
        • einer durch padding-left für li
        • und einer durch margin-left für li

        realisiert hatte.

        Heute ist es wohl in allen Browsern padding-left.

        Schön, wenn es einheitlich ist. Andernfalls müsste man darauf achten, dass man bei Eingriffen in die li-Einrückung immer alle beteiligten Eigenschaften explizit berücksichtigt.

        (BTW, war zeichnest du Code nicht als solchen, sondern kursiv aus?)

        Weil ich's kann? ;-)
        Ernsthaft: Das Kästchen und die großen Abstände bei der Inline-Code-Auszeichnung gefallen mir nicht. Deswegen meide ich das.

        Ciao,
         Martin

        --
        Frage an die Kollegin am Montagmorgen: "Na, wie war dein Wochenende?"
        Depressive Kollegin: "Hell, dunkel, hell, dunkel, Montag."
        1. @@Der Martin

          (BTW, war zeichnest du Code nicht als solchen, sondern kursiv aus?)

          Weil ich's kann? ;-)
          Ernsthaft: Das Kästchen und die großen Abstände bei der Inline-Code-Auszeichnung gefallen mir nicht. Deswegen meide ich das.

          Visuelle anstatt logische Auszeichnung?

          Aber ja, ich finde die Kästchen auch störend. Und da isser wieder, der Knoten im Taschentuch, der mich dran erinnert, das (u.v.a.m.) zu ändern.

          LLAP 🖖

          --
          „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
          „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

          —Marc-Uwe Kling
          1. Hallo Gunnar,

            den Knoten kann jeder je nach Geschmäckle in sein eigenes Taschentuch zwirbeln (User-CSS in den Einstellungen):

            code:not(.block) {
               border: none;
               background-color: transparent;
            }
            

            oder wie auch immer.

            Rolf

            --
            sumpsi - posui - clusi
            1. @@Rolf B

              den Knoten kann jeder je nach Geschmäckle in sein eigenes Taschentuch zwirbeln (User-CSS in den Einstellungen):

              Klar kann das jeder tun. Es geht aber darum, einen guten Default zu erstellen, sodass das nicht jeder tun muss.

              LLAP 🖖

              --
              „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
              „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

              —Marc-Uwe Kling
              1. Hey, vielen Dank schon mal für die rege Beteiligung.

                Ich bin g'rad woanders, als die Datei mit dem Code...

                Bis ich ihn posten könnte mal vorab: ... hab' leider keine Ahnung, was padding-left bewirkt... vor allem in Bezug auf mein Problem

                1. @@salzberg

                  ... hab' leider keine Ahnung, was padding-left bewirkt...

                  Guckst du padding-left; s.a. Box-Modell.

                  vor allem in Bezug auf mein Problem

                  Eine Liste hat durchs browserinterne Stylesheet padding-left; das willst du auf 0 setzen.

                  LLAP 🖖

                  --
                  „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
                  „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

                  —Marc-Uwe Kling
                2. war offenbar zu langsam, um den Beitrag nochmals zu editieren...

                  Inzwischen kamen mir noch Gedanken zu padding-left. Bedeutet das nun, dass das eingestellte Padding im Fall einer Liste, links vom Wort hinzugerechnet wird, oder ist mit dem padding der Abstand des (wenn auch nicht sichtbaren) Listenpunktes gemeint?

                  Was kann ich denn schreiben, wenn ich ober- und unterhalb padding haben möchte, aber links keines?

                  Da kam ja schon wieder ein Beitrag dazwischen 😀 ...ich probiere mal heute Abend...

                  1. Hallo salzberg,

                    Bedeutet das nun, dass das eingestellte Padding im Fall einer Liste, links vom Wort hinzugerechnet wird, oder ist mit dem padding der Abstand des (wenn auch nicht sichtbaren) Listenpunktes gemeint?

                    Schau dir das Box-Modell an.

                    Was kann ich denn schreiben, wenn ich ober- und unterhalb padding haben möchte, aber links keines?

                    https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Abstand/padding

                    Bis demnächst
                    Matthias

                    --
                    Du kannst das Projekt SELFHTML unterstützen,
                    indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
                    1. So…

                      mit padding-left: 0; an der richtigen Stelle klappt es nun tatsächlich. Die Eigenschaft musste in die Anweisungen für die ul rein... ob wohl alle Elemente, um die es ging, auch li sowie a sind.

                      Hier noch der entsprechende css-Code:

                      .style-nav ul {
                      	list-style-type: none;
                      	padding-left: 0;
                      			 }
                      			
                      .style-nav ul li a {
                      	text-decoration: none;
                      	color: #999999;
                      	text-align: center;
                      	font-weight: 500;
                      	display: block;
                      	padding: 8px;
                      	}	
                      

                      Vielen, vielen Dank für eure Hilfe!

                      1. @@salzberg

                        .style-nav ul li a {
                        

                        Dazu noch der Hinweis: Mache Selektoren so spezifisch wie nötig, aber nicht mehr. Heißt in diesem Fall:

                        .style-nav a {
                        

                        LLAP 🖖

                        --
                        „Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
                        „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“

                        —Marc-Uwe Kling
                        1. Danke für den Hinweis...

                          ...aber in diesem Fall wollte ich nur die 'a' formatieren, die auch Listenenträge sind... ob man dann 'ul' weglassen könnte hab' ich nicht mehr ausprobiert.

                    2. Auch wenn das Problem, zum Glück, ja generell gelöst ist ––- hier trotzdem noch ein kleiner Nachtrag zum Verständnis: (bekomme keinen Gedankenstrich eingefügt...)

                      Hallo salzberg,

                      Bedeutet das nun, dass das eingestellte Padding im Fall einer Liste, links vom Wort hinzugerechnet wird, oder ist mit dem padding der Abstand des (wenn auch nicht sichtbaren) Listenpunktes gemeint?

                      Schau dir das Box-Modell an.

                      An welcher Stelle des Padding bei einer Liste stheht, konnte ich hier nicht erkennen... ich gehe aber eher davon aus, dass der "Einrück"-Abstand zwischen "Normaltext" links und Listeneintragstext gemeint ist... ... und man diesen Abstand ja für die ganze Liste einstellt und nicht für einen einezelnen Listenpunkt... daher funktioniert, es wohl auch nur, wenn es bei den Anweisungen für die Liste (ul) steht.