Erstellen Sie einen Wochenplan mit CSS/HTML

Question

Ich versuche, einen wöchentlichen Stundenplan für Klassen für ein Yoga-Studio zu erstellen. Ich habe eine statische Version unter Verwendung einer Tabelle erstellt, die Sie sehen können:

http://www.studioleisure.com/classes.php

Hinweis: ^^ Diese Webseite nun die fertige HTML-Version enthält, die auf diese Frage mit den Antworten erstellt wurde.

Ich habe Probleme mit Klassen, die um 15 Minuten nach der Stunde beginnen oder solche, die länger als eine Stunde dauern, und es ist ziemlich schwierig, das PHP für diese Version zu erstellen.

Ich habe mich nur gefragt, ob jemand irgendwelche Ideen hatte, um eine zu erstellen, die ein ähnliches Aussehen hat, aber einfacher zu PHP zu programmieren ist.

Answer 1

Ich würde den Tisch verlieren und nur Spalten verwenden. Dann würde ich die Klassen mit CSS (position:absolute) platzieren und den Wert top basierend auf ihrer Startzeit und der "Höhe" basierend auf ihrer Länge berechnen. Die horizontalen Linien könnten unter Verwendung eines sich wiederholenden Hintergrundbildes erzielt werden. Die Beschriftungen auf der linken Seite könnten genauso platziert werden wie die Klassen.

HTML könnte wie folgt aussehen:

<ul> 
<!-- Monday: --> 
<li> 
    <strong>Monday</strong> 
    <ul class="classes"> 
    <li style="top:200px; height:100px;"> 
    <span>10:30 - 11:45</span> 
    Class title 
    </li> 
    <li> 
    <!-- More classes here... --> 
    </li> 
    </ul> 
</li> 
<li> 
    <!-- Other days here... --> 
</li> 
</ul> 
<ul class="labels"> 
<li style="top:180px">10:00</li> 
<!-- More labels here... --> 
</ul> 

Answer 2

Schöne Markup. Aber du hast Recht - wenn du das mit einer feinen Granularität machst, erhältst du ein Monster eines Tisches (und den dazugehörigen Code, um es zu generieren). Es ist machbar, aber es gibt einen einfacheren Weg, obwohl es nicht so sauber ist:

Erstellen Sie die Tabelle, wie Sie es normalerweise tun würden, aber machen Sie es leer. Stellen Sie jedoch feste Breiten/Höhen für jede Zeile und Spalte ein. Verwenden Sie dann absolute Positionierung, um die Kalendereinträge oben auf dem Tisch zu platzieren. Presto - es sieht genauso aus, aber Sie können die Einträge mit kleinen Genauigkeiten platzieren, wenn Sie möchten.

Der Nachteil davon ist, dass Copy-Paste (sehr gut) auf diesem Biest nicht funktioniert, und ich habe keine Ahnung, was es für SEO und Zugänglichkeit tun wird. Wahrscheinlich nichts gutes. Also, wenn diese beiden für Sie wichtig sind, müssen Sie auf Workarounds zurückgreifen (obwohl ich denke, es gibt Möglichkeiten, das Schema zu verwenden UND haben gute SEO/Zugänglichkeit).

Hinzugefügt: Oh, und mir ist gerade aufgefallen, dass Sie auch nach überfließenden Texten Ausschau halten müssen. Tabellenzellen würden automatisch expandieren, aber absolut positionierte DIVs nicht.

Hinzugefügt 2: Hey, hier ist eine Idee: Verwenden Sie die relative Positionierung, um die Einträge ein wenig zu verschieben. Anstatt den Text direkt in die Zellen zu schreiben, schreibe sie in einen SPAN und positioniere ihn relativ, so dass er für die notwendigen 15 Minuten heruntergeschaltet wird. Dies erfordert wiederum feste Breiten und Höhen von Zellen, und ein Überlauf wird ein Problem sein, aber SEO/Zugänglichkeit wird nicht verletzt, und Kopieren-Einfügen funktioniert wie erwartet.

Answer 3

Es folgt eine Wochenzeitplanvorlage ich geschaffen habe.

https://github.com/NisalSP9/Weekly-time-schedule-template-jquery 

Und das ist Beispiel dafür ausgeführt.

https://codepen.io/nisalsp9/pen/QqqvwZ?editors=1111