Schedule in HTML CSS

Demonstration that keeps a class schedule in HTML and CSS

by Alvan

HTML

<div id="horizontalLegend">
    <div id="time" class="day">Time</div>
    <div class="day">Monday</div>
    <div class="day">Tuesday</div>
    <div class="day">Wednesday</div>
    <div class="day">Thursday</div>
    <div class="day">Friday</div>
    <div class="day">Saturday</div>
    <div class="day">Sunday</div>
</div>
<div id="schedule">
    <div id="legend">
        <div class="even">8:00</div>
        <div class="odd">9:00</div>
        <div class="even">10:00</div>
        <div class="odd">11:00</div>
        <div class="even">12:00</div>
        <div class="odd">13:00</div>
        <div class="even">14:00</div>
        <div class="odd">15:00</div>
        <div class="even">16:00</div>
        <div class="odd">17:00</div>
        <div class="even">18:00</div>
        <div class="odd">19:00</div>
    </div>
    <div id="legendOffset" class="day"></div>
    <div id="Monday"    class="day"></div> 
    <div id="Tuesday"   class="day">
        <!-- class is at 10:00 and is 1 hour in duration     -->
        <!-- top = (10 - 8) / 12 * 100 ; height = 1/12 * 100 -->
        <div class="unit" style="top:16.67%; height:8.33%;">IPM Lecture</div>
        
        <!-- class is at 14:00 and is 2 hours in duration    -->
        <!-- top = (12 - 8) / 12 * 100; height = 2/12 * 100  -->
        <div class="unit" style="top:33.33%; height:16.67%;">IPM Tutorial 1</div> 
    </div> 
    <div id="Wednesday" class="day">
        <!-- class is at 14:00 and is 2 hours in duration    -->
        <!-- top = (14 - 8) / 12 * 100; height = 2/12 * 100  -->
        <div class="unit" style="top:50%; height:16.67%;">IPM Tutorial 2</div> 
        
        <!-- class is at 18:00 and is 2 hours in duration    -->
        <!-- top = (18 - 8) / 12 * 100; height = 2/12 * 100  -->
        <div class="unit" style="top:83.33%; height:16.67%;">IPM Tutorial 3</div> 
    </div>
    <div id="Thursday"  class="day">
        <!-- class is at 09:00 and is 2 hours in duration    -->
        <!-- top = (9...

CSS

#schedule {
    position: absolute;
    top:5%;
    width: 100%;
    height:95%;
}

#legend {
    width: 100%;
    height: 100%;
}

.unit {
    position: absolute;
    background-color: darkblue;
    width: 12.5%;
    color: white;
    border-width: 1px;
    border-style: solid;
    border-color: palegoldenrod;
    text-align: center;
}


.even {
    height: 8.33%;
    background-color: lightgray;
    color: black;
}

.odd {
    height: 8.33%;
    background-color: slategray;
    color: white;
}

.day {
    width: 12.5%;
    height : 100%;
    float: left;
    text-align: center;
}

#time {
    text-align: left;
}