Stundenansicht
Meowsalot
- css
- html
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)
@@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 🖖
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)
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
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)
@@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 🖖
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
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)
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
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)
@@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 🖖
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)
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
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)
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
@@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 🖖
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)
Hallo,
sorry, ich muss nochmals nachfragen. Hat jemand eine Idee wie ich dieses Problem am besten angehen könnte?
Bis bald!
Meowsalot (Bernd)
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.
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