Trying to align <li>
Posted: Thu Jan 17, 2013 2:44 pm
I have a CSS based calendar that is marked up as follows:
Here each li.day is set to float: left so that the days line up horizontally. I'm trying to make it so that each of the ul>li with class "one" represent 15minute blocks of time, those with class "two" represent 30 minute blocks and take up exactly twice as much space as those with class one, etc. up to the hour. I tried setting the height of class "one" to 1em, "two" to 2em, etc, and if I do this, then the adjacent events almost line up so that those with the same start time begin at the same vertical position, but there are clear discrepancies. Using the above markup as an example, I would like the two events that go from 9:45-10am to both begin at the same vertical position on the screen, however there are slight but clear differences the way I've set things up.
Code: Select all
<ol class="week">
<li class="day">
<ul>
<li class="one">Event 1, 9-9:15am</li>
<li class="one">Event 2, 9:15-9:30am</li>
<li class="one">Event 3, 9:30-9:45am</li>
<li class="one">Event 4, 9:45-10:00am</li>
</ul>
</li>
<li class="day">
<ul>
<li class="three">Event 1, 9-9:45am</li>
<li class="one">Event 2, 9:45-10am</li>
</ul>
</li>
... etc for a total of five li.day 's
</ol>