Meowsalot: Stundenansicht

Hallo alle,

wie baue ich am besten so eine Liste auf?

Das ganze soll von 00 - 23 Uhr gehen. Dazwischen sollte immer noch Platz sein um etwas ausgeben zu lassen. Außerdem sollte ich die Möglichkeiten haben dass ein Eintrag auch über mehrere Stunden gehen kann, dieser Zusammenhang sollte dann auch einheitlich eingefärbt werden.

Nehme ich da mehrere DIVs untereinander? Oder doch lieber eine DL oder UL Liste oder gar eine Tabelle?

Bis bald!
Meowsalot (Bernd)

  1. @@Meowsalot

    Nehme ich da mehrere DIVs untereinander?

    Nein. keine nichtssagenden Elemente wie div, sondern Elemente, die die Struktur deiner Daten ausdrücken.

    Oder doch lieber eine DL oder UL Liste oder gar eine Tabelle?

    Tabelle.

    In diesem Beispiel kannst du dir ansehen, wie das mit Zellen über mehrere Zeilen geht.

    LLAP 🖖

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

      ich habe hier mal ein Beispiel online gestellt:
      https://codepen.io/anon/pen/mxxmOp

      Was ich noch nicht ganz verstehe ist folgendes:
      Ich habe einen Termin sagen wir von 10:00 - 14:00 Uhr. Jetzt möchte ich gerne die zweite Spalte über diesen Zeitraum verbinden und in der ersten Spalte einen Order auf der rechten Seite anzeigen.

      Wenn ich nach diesem Beispiel gehe:

      rowspan="3"
      

      verschiebt sich die Tabelle nach rechts, was ich nicht möchte.

      Nachtrag:
      Was ich auch nicht so ganz verstehe warum ist 00:00 Uhr fett geschrieben? Dieses habe ich nirgends gesagt.

      Bis bald!
      Meowsalot (Bernd)

      1. Hi,

        Was ich auch nicht so ganz verstehe warum ist 00:00 Uhr fett geschrieben? Dieses habe ich nirgends gesagt.

        Doch, hast Du. In der ersten Zeile hast Du th verwendet statt td.

        cu,
        Andreas a/k/a MudGuard

        1. Hallo MudGuard,

          Doch, hast Du. In der ersten Zeile hast Du th verwendet statt td.

          danke dir! Hab es verbessert.
          https://codepen.io/anon/pen/mxxmOp

          Bis bald! Meowsalot (Bernd)

          1. @@Meowsalot

            Doch, hast Du. In der ersten Zeile hast Du th verwendet statt td.

            danke dir! Hab es verbessert.

            Eher verschlimmberssert. Die Zeilenköpfe sollten – ebenso wie die Spaltenköpfe – mit th ausgezeichnet werden, nicht mit td. Die Verbesserung wäre gewesen, es in allen anderen Zeilen ebenso zu machen wie du es vorher in der ersten Zeile hattest.

            Wenn du das Browserstyle (in dem geschrieben steht, dass th fett dargestellt werden) überschreiben willst, dann tu das in deinem Stylesheet: th { font-weight: normal } (bzw. inherit).

            In meinem Beispiel sind die Liedtitel die Zeilenköpfe th. Die Angabe der Schriftdicke ist Teil der Regel ab Zeile 9 im CSS-Code.

            LLAP 🖖

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

        beachte, das rowspan und colspan keine Tabellenfelder verbinden, sondern die Felder auf mehrere Zeilen und Spalten ausdehnen. Zum Ausgleich müssen dann Tabellenfelder entfernt werden. Das kann gerade bei rowspan recht knifflig werden, da du in den Folgezeilen die richtigen tds entfernen musst.

        Gruß
        Jürgen

        1. Hallo JürgenB,

          du meinst dieses:
          https://codepen.io/anon/pen/aYYWMw

          Das ist genau dieses, was ich vorhin meinte. Wenn ich ein paar Zeilen verbinde, werden die anderen einfach nach rechts weg geschoben. Aus dem Beispiel von Gunnar werde ich nicht so recht schlau: https://codepen.io/gunnarbittersmann/pen/aEYNMj?editors=1000

          Bis bald! Meowsalot (Bernd)

          1. Hallo,

            du musst in den Folgezeilen die überflüssigen tds entfernen. Mach das mal Zeile für Zeile und beobachte das Ergebnis

            Gruß
            Jürgen

            1. Hallo JürgenB,

              du musst in den Folgezeilen die überflüssigen tds entfernen. Mach das mal Zeile für Zeile und beobachte das Ergebnis

              danke für die Info, hat geklappt:
              https://codepen.io/anon/pen/aYYWMw

              Aber ist dieses jetzt noch zulässiges HTML?

              Bis bald!
              Meowsalot (Bernd)

              1. @@Meowsalot

                Aber ist dieses jetzt noch zulässiges HTML?

                Ja. Warum auch nicht?

                Die Frage ist: ist dieses sinnvolles HTML?

                th vs. td sprach ich schon an. „24 Uhr“? Das ist wohl 0 Uhr des nächsten Tags.

                Und mit deinen Zebrastreifen wirst du wohl bei verbundenen Zellen auch in Probleme rennen.

                LLAP 🖖

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

                  th vs. td sprach ich schon an. „24 Uhr“? Das ist wohl 0 Uhr des nächsten Tags.

                  Ok, die Zeile 24:00 Uhr habe ich entfernt.

                  Und mit deinen Zebrastreifen wirst du wohl bei verbundenen Zellen auch in Probleme rennen.

                  Warum? Siehe hier:
                  https://codepen.io/anon/pen/aYYWMw

                  Bis bald!
                  Meowsalot (Bernd)

                  1. Hallo,

                    Und mit deinen Zebrastreifen wirst du wohl bei verbundenen Zellen auch in Probleme rennen.

                    Warum? Siehe hier:
                    https://codepen.io/anon/pen/aYYWMw

                    dann setz mal rowspan auf eine gerade Zahl

                    Gruß
                    Jürgen

                    1. Hallo JürgenB,

                      dann setz mal rowspan auf eine gerade Zahl

                      habe ich:
                      https://codepen.io/anon/pen/aYYWMw

                      sieht nicht schlecht aus?

                      Bis bald!
                      Meowsalot (Bernd)

                2. Hallo Gunnar Bittersmann,

                  Und mit deinen Zebrastreifen wirst du wohl bei verbundenen Zellen auch in Probleme rennen.

                  Die verbundenen Zellen sollten keinen Einfluss auf die tr-Elemente haben. Die verbundene Zelle ist dann natürlich nicht gestreift.

                  Bis demnächst
                  Matthias

                  --
                  Rosen sind rot.
            2. @@JürgenB

              Das ist genau dieses, was ich vorhin meinte. Wenn ich ein paar Zeilen verbinde, werden die anderen einfach nach rechts weg geschoben. Aus dem Beispiel von Gunnar werde ich nicht so recht schlau: https://codepen.io/gunnarbittersmann/pen/aEYNMj?editors=1000 du musst in den Folgezeilen die überflüssigen tds entfernen. Mach das mal Zeile für Zeile und beobachte das Ergebnis

              Genau. Deshalb enthalten viele Tabellenzeilen in meinem Beispiel nur das th-Element für den Liedtitel. Ein td-Element (oder mehrere) ist nur dann vorhanden, wenn mit diesem Lied eine neue LP-Seite, MC-Seite bzw. CD beginnt. Ansonsten sind diese Spalten durch Zellen mit rowspan aus vorigen Tabellenzeilen belegt.

              LLAP 🖖

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

    die zweite Frage die sich jetzt stellt, wie kann ich mit PHP die Zeilen dynamisch zusammenfügen? Ausgang ist dieses Beispiel: https://codepen.io/anon/pen/aYYWMw

    Jetzt habe ich diese beiden Variablen:

    $start = "12:00";
    $ende  = "16:00";
    

    Damit möchte ich jetzt das rowspan="6" setzten und die darauffolgende <td></td> entfernen. Wie gehe ich da am besten vor?

    Nachtrag:
    Die Stunden zwischen den Uhrzeiten kann ich so berechnen, oder gibt es noch einen anderen Weg?

    $start = strtotime("12:00");
    $ende  = strtotime("16:00");
    $dauer = ($ende - $start)/60/60;
    
    echo $dauer;
    

    Bis bald!
    Meowsalot (Bernd)

    1. Hallo,

      sorry, ich muss nochmals nachfragen. Hat jemand eine Idee wie ich dieses Problem am besten angehen könnte?

      Bis bald!
      Meowsalot (Bernd)

    2. Tach!

      die zweite Frage die sich jetzt stellt, wie kann ich mit PHP die Zeilen dynamisch zusammenfügen?

      Dynamik ist nicht das richtige Wort. Logik braucht es eher. Ob die Ausgabe auf Anfrage (dynamisch) oder (für den Cache) vorab berechnet wird, ist ja nicht weiter von Belang.

      Damit möchte ich jetzt das rowspan="6" setzten und die darauffolgende <td></td> entfernen. Wie gehe ich da am besten vor?

      Da die darauffolgenden Zellen noch nicht da sind, musst du eher dafür sorgen, dass sie gar nicht erst geschrieben werden. Beispielsweise so: Gibt es einen Termin, in den diese Stunde fällt? Dann weglassen, ansonsten die Zelle ausgeben.

      Du kannst dir aber auch merken, wann der Termin zu Ende ist. Und wenn die Stunde der aktuellen Zeile kleiner als der Endzeitpunkt ist, dann weglassen.

      Die Stunden zwischen den Uhrzeiten kann ich so berechnen, oder gibt es noch einen anderen Weg?

      $start = strtotime("12:00");
      $ende  = strtotime("16:00");
      $dauer = ($ende - $start)/60/60;
      
      echo $dauer;
      

      Wenn dich Sommerzeitumschaltungen nicht weiter interessieren, dann kann man das so machen. Ansonsten gibt es rund um die DateTime-Klasse noch weitere, die sich mit dem Ermitteln von solchen Differenzen beschäftigen.

      dedlfix.

  3. Hallo Meowsalot,

    Bin heute zufällig über was gestolpert. Da dachte ich die vielen Beispiele/Demos(besonders Time-Picker) dort zu diesem Script sind als Inspiration für dich, was du da im Moment bastelst, vielleicht nicht schlecht.

    Gruss
    Henry