Создание еженедельного расписания с использованием CSS/HTML

Я пытаюсь создать недельное расписание занятий для студии йоги. Я создал статическую версию, используя таблицу, которую вы можете увидеть по адресу:

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

Примечание: ^^ Эта веб-страница теперь содержит готовую версию HTML, которая была создана с использованием ответов на этот вопрос.

У меня проблема с классами, которые начинаются через 15 минут после часа или длительностью более часа, и довольно сложно создать PHP для этой версии.

Мне просто интересно, есть ли у кого-нибудь идеи создать тот, который будет иметь похожий вид, но будет проще кодировать PHP для.

3 ответа

Я потерял бы таблицу и использовал бы только столбцы. Затем я поместил классы с CSS (position:absolute) и вычислил значение top в зависимости от их времени начала и "высоты" в зависимости от их длины. Горизонтальные линии могут быть достигнуты с использованием повторяющегося фонового изображения. Ярлыки слева могут быть размещены так же, как вы кладете классы.

HTML может выглядеть примерно так:

<ul>
 <!-- Monday: -->
 <li>
 <strong>Monday</strong>
 <ul>
 <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>
 <li style="top:180px">10:00</li>
 <!-- More labels here... -->
</ul>


Хорошая разметка. Но вы правы - делать это с тонкой детализацией приведет к монстру таблицы (и сопроводительному коду для ее создания). Это выполнимо, но есть более простой способ, хотя он не настолько опрятен:

Создайте таблицу, как обычно, но сделайте ее пустой. Однако установите фиксированную ширину/высоту для каждой строки и столбца. Затем используйте абсолютное позиционирование, чтобы поместить записи календаря поверх таблицы. Presto - это выглядит одинаково, но вы можете поместить записи с минимальными точками, если хотите.

Недостатком этого является то, что copy-paste не будет работать (очень хорошо) на этом зверю, и я не знаю, что он будет делать для SEO и доступности. Наверное, ничего хорошего. Поэтому, если эти два важны для вас, вам придется прибегать к обходным решениям (хотя я думаю, что есть способы использовать схему и иметь хороший SEO/доступность).

Добавлено: О, и я просто понял, что вам также придется смотреть на переполненные тексты. Ячейки таблицы будут автоматически расширяться, но абсолютно позиционированные DIVs не будут.

Добавлено 2: Эй, вот идея: используйте относительное позиционирование, чтобы немного сдвинуть записи. Вместо того, чтобы писать текст непосредственно в ячейках, пишите их в SPAN, а затем относительно позиционируйте его так, чтобы он сдвигался в течение 15 минут. Опять же, это требует фиксированной ширины и высоты ячеек, и переполнение будет проблемой, но SEO/доступность не пострадает, а копирование-вставка будет работать, как ожидалось.


Ниже представлен шаблон недельного расписания, который я создал.

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

И этот пример работает.

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

licensed under cc by-sa 3.0 with attribution.