Question

I’m trying to create a weekly timetable of classes for a yoga studio.
I have created a static version using a table which you can see at:

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

Note: ^^ This webpage now contains the finished HTML version that was created using the answers to this question.

I have problem with classes that start at 15 minutes past the hour or ones that last longer than an hour and it’s turning out quite difficult to create the PHP for this version.

I was just wondering if anyone had any ideas to create one that would have a similar look but be easier to code the PHP for.

Answer 1

I’d loose the table, and use only columns. Then I’d place the classes with CSS (position:absolute) and calculate the topvalue based on their start time and the ‘height’ based on their length. The horizontal lines could be achieved using a repeating background image. The labels on the left could be placed the same way you’d be placing the classes.

HTML could look something like this:

<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>