Anfänger: Ausrichtung einer Aufzählung

Hallo, wie kann ich eine Liste (ul) auf der Seite zentrieren, allerdings so, dass die Listenelemente alle an gleicher Position beginnen, also so:

. item1 . item 32224 . item 211123342 . ite

und nicht so:

. item1 . item 32224 . item 211123342 . ite
  1. hallo

    Hallo, wie kann ich eine Liste (ul) auf der Seite zentrieren, allerdings so, dass die Listenelemente alle an gleicher Position beginnen, also so:

    . item1 . item 32224 . item 211123342 . ite

    und nicht so:

    . item1 . item 32224 . item 211123342 . ite
    ul{ width: 0; /*ältere Browser*/ width: -moz-fit-content; margin: 0 auto; } -- https://beat-stoecklin.ch/pub/index.html
  2. @@Anfänger

    wie kann ich eine Liste (ul) auf der Seite zentrieren, allerdings so, dass die Listenelemente alle an gleicher Position beginnen

    Indem du die Liste maximal so breit werden lässt wie es der breiteste Listenpunkt erfordert:
    max-width: max-content (in unterstützenden Browsern, mit Präfix)

    und wie üblich mit margin-left: auto; margin-right: auto zentrierst.

    Beispiel

    LLAP 🖖

    -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    1. Hello,

      kann man die Liste auch noch vertikal centern?
      Das habe ich leider schon wieder vergessen, wie das gehen könnte (ohne Tabelle hihi).

      Liebe Grüße
      Tom S.

      -- Es gibt nichts Gutes, außer man tut es!
      Das Leben selbst ist der Sinn.
      1. Hallo

        kann man die Liste auch noch vertikal centern?
        Das habe ich leider schon wieder vergessen, wie das gehen könnte (ohne Tabelle hihi).

        Falls die Höhe des umgebenden Elements bekannt ist, geht auch das mit margin: auto;.

        Tschö, Auge

        -- Eine Kerze stand [auf dem Abort] bereit, und der Almanach des vergangenen Jahres hing an einer Schnur. Die Herausgeber kannten ihre Leser und druckten den Almanach auf weiches, dünnes Papier.
        Kleine freie Männer von Terry Pratchett
        1. Hello,

          ich habe die Liste direkt in den Body gepackt.
          Dessen Höhe hatte ich mit "Height: 100%;" festgelegt, genauso wie die vom HTML. So hatt eich das mal in Erinnerung. Leider funktioniert es nicht so.

          Liebe Grüße
          Tom S.

          -- Es gibt nichts Gutes, außer man tut es!
          Das Leben selbst ist der Sinn.
          1. Hej TS,

            ich habe die Liste direkt in den Body gepackt.
            Dessen Höhe hatte ich mit "Height: 100%;" festgelegt, genauso wie die vom HTML. So hatt eich das mal in Erinnerung. Leider funktioniert es nicht so.

            flexbox kann auch vertikal zentrieren 😉

            Zum Auffrischen eine Runde flexbox froggy?

            Marc

          2. Hallo TS,

            ich habe die Liste direkt in den Body gepackt.
            Dessen Höhe hatte ich mit "Height: 100%;" festgelegt, genauso wie die vom HTML. So hatt eich das mal in Erinnerung. Leider funktioniert es nicht so.

            Das hat leider noch nie so optimal funktioniert, besser ist es die bereits genannten Möglichkeiten von Flex/Grid zu nutzen. Allerdings, wenn du auch sonst mit % Höhenangaben experimentieren willst, dann nimm lieber die neueren Maßangaben vh, klappt nach meiner Erfahrung verlässlicher.

            Gruss
            Henry

            -- Meine Meinung zu DSGVO & Co:
            „Principiis obsta. Sero medicina parata, cum mala per longas convaluere moras.“
        2. @@Auge

          kann man die Liste auch noch vertikal centern?

          Falls die Höhe des umgebenden Elements bekannt ist, geht auch das mit margin: auto;.

          Falls die display-Eigenschaft des umgebenden Elements den Wert flex oder grid hat.

          Guckst du.

          LLAP 🖖

          -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
          1. Hello Gunnar,

            Falls die display-Eigenschaft des umgebenden Elements den Wert flex oder grid hat.

            Ich habe "flex" gesetzt und es klappt. Danke! So einfach kann es in neueren Browsern also sein.

            Seit wann (welcher Version) etwa funktioniert das?
            laut CanIUse.com funktioniert das erst seit dem letzten Firefox (Ver 61.x)?

            Liebe Grüße
            Tom S.

            -- Es gibt nichts Gutes, außer man tut es!
            Das Leben selbst ist der Sinn.
            1. Hallo

              Seit wann (welcher Version) etwa funktioniert das?
              laut CanIUse.com funktioniert das erst seit dem letzten Firefox (Ver 61.x)?

              Ich weiß ja nicht, was du auf caniuse.com zu sehen bekommst, aber die Spalte für den Firefox ist beim Suchbegriff Flexbox für mich ab Version 31 knallegrün. Also nein, das funktioniert im Firefox nicht erst ab Version 61.x.

              [edit]

              CanIUse-Seite zur Browserunterstützung für Flexbox

              Tschö, Auge

              -- Eine Kerze stand [auf dem Abort] bereit, und der Almanach des vergangenen Jahres hing an einer Schnur. Die Herausgeber kannten ihre Leser und druckten den Almanach auf weiches, dünnes Papier.
              Kleine freie Männer von Terry Pratchett

              Folgende Nachrichten verweisen auf diesen Beitrag:

              1. Hello,

                ich habe nach "display: flex" gesucht und das soll (für alle Elemente, die es betreffen könnte) erst ab der letzten Version (Ver 61.x) funktionieren.

                Wenn es doch schon für ältere Browser geht, umso besser!

                Liebe Grüße
                Tom S.

                -- Es gibt nichts Gutes, außer man tut es!
                Das Leben selbst ist der Sinn.
                1. Hallo

                  ich habe nach "display: flex" gesucht und das soll (für alle Elemente, die es betreffen könnte) erst ab der letzten Version (Ver 61.x) funktionieren.

                  Hmm, auch bei diesem Suchbegriff ist die Liste für mich identisch mit der für den Suchbegriff „Flexbox“. So, wie ich es auch erwarten würde. Aber …

                  Wenn es doch schon für ältere Browser geht, umso besser!

                  … wie du schon sagst, wichtig ist, dass es funktioniert.

                  Tschö, Auge

                  -- Eine Kerze stand [auf dem Abort] bereit, und der Almanach des vergangenen Jahres hing an einer Schnur. Die Herausgeber kannten ihre Leser und druckten den Almanach auf weiches, dünnes Papier.
                  Kleine freie Männer von Terry Pratchett
                  1. Hallo Auge,

                    Hmm, auch bei diesem Suchbegriff ist die Liste für mich identisch mit der für den Suchbegriff „Flexbox“. So, wie ich es auch erwarten würde. Aber …

                    In der Standardansicht sind ältere Versionen nur dann aufgeführt, wenn sie mindestens 0.5% Nutzung erreichen. Deshalb stehen da zum Beispiel bei Chrome

                    49
                    63
                    66
                    67
                    68 (aktuell)

                    Beim FF sind in dieser Ansicht keine älteren Browserversionen genannt.

                    Bis demnächst
                    Matthias

                    -- Rosen sind rot.
                    1. Hallo

                      Hmm, auch bei diesem Suchbegriff ist die Liste für mich identisch mit der für den Suchbegriff „Flexbox“. So, wie ich es auch erwarten würde. Aber …

                      In der Standardansicht sind ältere Versionen nur dann aufgeführt, wenn sie mindestens 0.5% Nutzung erreichen.

                      Ist in diesem Fall ja Wurscht. Mit allen Lücken wird die älteste Version, die für Firefox mit grün markiert ist, die Version 31 ist (wie in meinem Screenshot zu sehen ist).

                      Beim FF sind in dieser Ansicht keine älteren Browserversionen genannt.

                      Die 31 sollte ja wohl reichen.

                      Tschö, Auge

                      -- Eine Kerze stand [auf dem Abort] bereit, und der Almanach des vergangenen Jahres hing an einer Schnur. Die Herausgeber kannten ihre Leser und druckten den Almanach auf weiches, dünnes Papier.
                      Kleine freie Männer von Terry Pratchett
                    2. Hello,

                      aaahhh

                      muss man ja wissen, wenn man CanIUse nicht jeden Tag benutzt :-O

                      Danke für die Aufklärung 😀

                      Da komme ich aber gleich zur nächtsen offenen Frage von meinem Riesenzettel:
                      Wie machen die das, dass in der Anzeigebox/Tabelle die Kopfzeile stehen bleibt?

                      Liebe Grüße
                      Tom S.

                      -- Es gibt nichts Gutes, außer man tut es!
                      Das Leben selbst ist der Sinn.
                      1. Hej TS,

                        Da komme ich aber gleich zur nächtsen offenen Frage von meinem Riesenzettel:
                        Wie machen die das, dass in der Anzeigebox/Tabelle die Kopfzeile stehen bleibt?

                        Die pfuschen. Anscheinend nehmen die JS und geben dann bei Bedarf der h4 ein position: fixed und pappen die so an den oberen Bildschirmrand.

                        Das machen die sicher, weil position: sicky bei Nachfahren nicht funktioniert.

                        Marc

                        1. Hej marctrix,

                          Das machen die sicher, weil position: sticky bei Nachfahren nicht funktioniert.

                          Vielleicht nur, wenn ein Vorfahre position: relative hat - kann ich aus dem Kopf gerade nicht sagen…

                          Marc

                      2. @@TS

                        Wie machen die das, dass in der Anzeigebox/Tabelle die Kopfzeile stehen bleibt?

                        Falsch.

                        Es ruckelt. Und es kommt zur Fehldarstellung der Boxen.

                        Screenshot mit Firefox

                        Vermutlich machen die’s mit JavaScript. Dabei kann das so einfach sein.

                        CSS: position: sticky
                        JavaScript: gar keins.

                        LLAP 🖖

                        -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
                        1. Hello Gunnar,

                          wenn das auch schon in älteren Smartphones und Tablets funktioniert: Einfach genial!

                          [edit] Schade. der Tablet-Browser vom Samsung Tab4 unterstütt das so nicht.

                          Ich plädiere nun trotzdem noch mal für einen Merker (Response-Möglichkeit), mit dem angemeldete Teilnehmer (ab X Punkten) besonders interessante Lösungen für die Aufnahme ins Wiki & Co. markieren können. Da würde sich dann nach und nach eine ToDo-Liste aus dem laufenden Forum ergeben.

                          Liebe Grüße
                          Tom S.

                          -- Es gibt nichts Gutes, außer man tut es!
                          Das Leben selbst ist der Sinn.
                          1. Hallo TS,

                            Ich plädiere nun trotzdem noch mal für einen Merker (Response-Möglichkeit), mit dem angemeldete Teilnehmer (ab X Punkten) besonders interessante Lösungen für die Aufnahme ins Wiki & Co. markieren können. Da würde sich dann nach und nach eine ToDo-Liste aus dem laufenden Forum ergeben.

                            Der Merker könnte so aussehen: @Matthias Apsel, @Matthias Scharwies Dies ist meiner Meinung nach für das Wiki interessant.

                            Bis demnächst
                            Matthias

                            -- Rosen sind rot.
                            1. Servus!

                              Ich plädiere nun trotzdem noch mal für einen Merker (Response-Möglichkeit), mit dem angemeldete Teilnehmer (ab X Punkten) besonders interessante Lösungen für die Aufnahme ins Wiki & Co. markieren können. Da würde sich dann nach und nach eine ToDo-Liste aus dem laufenden Forum ergeben.

                              Warum machen wir es nicht wie bei der Wikipedia? Dort können auch unangemeldete Benutzer Beiträge ändern und verbessern. Diese werden dann gesichtet und ggfalls verschoben oder weiter ausgebaut.

                              Die ToDo-Liste haben wir ja schon im Wiki: Kategorie:ToDo

                              Also einfach {{ToDo|Link zum Forumsbeistrag /kurzer Text --~~~~}} ins Wiki einfügen und wir haben ein ToDo.

                              In diesem Fall habe ich es nicht unter position: sticky eingefügt, sondern unter CSS/Tutorials/Tabelle mit festem Kopf.

                              Der Merker könnte so aussehen: @Matthias Apsel, @Matthias Scharwies Dies ist meiner Meinung nach für das Wiki interessant.

                              Wir sollten imho darauf achten, dass das Wiki von der Community und nicht nur von einzelnen weiterentwicklet wird.

                              Herzliche Grüße

                              Matthias Scharwies

                              -- "Survive or die trying!"
                              1. Hallo,

                                Wir sollten imho darauf achten, dass das Wiki von der Community und nicht nur von einzelnen weiterentwicklet wird.

                                Alternativ könnte man es auch in „Scharwiki“ umbenennen…

                                Gruß
                                Kalk

                                1. Hej Tabellenkalk,

                                  Wir sollten imho darauf achten, dass das Wiki von der Community und nicht nur von einzelnen weiterentwicklet wird.

                                  Alternativ könnte man es auch in „Scharwiki“ umbenennen…

                                  😂

                                  Dafür!

                                  Marc

                        2. Hej Gunnar,

                          @@Gunnar Bittersmann

                          Vermutlich machen die’s mit JavaScript. Dabei kann das so einfach sein.

                          CSS: position: sticky
                          JavaScript: gar keins.

                          Bei mir (Edge 15 und FF 52 ESR, beide Win10) geht das nicht.

                          Marc

                          1. Hallo

                            Vermutlich machen die’s mit JavaScript. Dabei kann das so einfach sein.

                            CSS: position: sticky
                            JavaScript: gar keins.

                            Bei mir (Edge 15 und FF 52 ESR, beide Win10) geht das nicht.

                            Yoah, kein Wunder, oder nicht?

                            Tschö, Auge

                            -- Eine Kerze stand [auf dem Abort] bereit, und der Almanach des vergangenen Jahres hing an einer Schnur. Die Herausgeber kannten ihre Leser und druckten den Almanach auf weiches, dünnes Papier.
                            Kleine freie Männer von Terry Pratchett
                            1. Hej Auge,

                              Vermutlich machen die’s mit JavaScript. Dabei kann das so einfach sein.

                              CSS: position: sticky
                              JavaScript: gar keins.

                              Bei mir (Edge 15 und FF 52 ESR, beide Win10) geht das nicht.

                              Yoah, kein Wunder, oder nicht?

                              ach deshalb… danke.

                              Marc

                2. Hallo TS,

                  ich habe nach "display: flex" gesucht und das soll (für alle Elemente, die es betreffen könnte) erst ab der letzten Version (Ver 61.x) funktionieren.

                  Klick mal auf "Show all" 😉

                  Bis demnächst
                  Matthias

                  -- Rosen sind rot.
          2. @@Gunnar Bittersmann

            Link ergänzt: Guckst du.

            LLAP 🖖

            -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann