Archive for VTW 
 


       VTW Forum Index -> CSS
computergeek67

Make a CSS Based Calandar

With some simple CSS applied to an unordered list, we can quickly and easily make a nicely formatted calender that's easily lightweight and updated.

To begin, we need to determine the width of our calender, so pick a size you'd like to use for the boxes that the dates will go in. In this example, I'll be using 30 pixel by 30 pixel boxes. Next, I want to put a 5px solid border around each box that will be the same color as my page background. This will space the boxes 10px apart while avoiding messy work-arounds and problems with box model behaviors between IE and other browsers. Thus our overall size of each "day" box, including that border is 40 by 40 pixels. So, to get the overall width of our calender, we multiply 40 by 7 (the number of days in the week) and get a total width of 280 pixels.

With that out of the way, we can start coding our calender. Let's do the HTML first and get that taken care of. We'll start by creating a container to hold our calender, then we'll put the month inside a H2 tag and we'll finish things off with an unordered list containing the calender itself.
Code:
<div id="cal">
          <h2>July, 2007</h2>
          <ul>
              <li class="day">Sun</li>
              <li class="day">Mon</li>
              <li class="day">Tue</li>
              <li class="day">Wed</li>
              <li class="day">Thu</li>
              <li class="day">Fri</li>
              <li class="day">Sat</li>
             
              <li class="num">01</li>
              <li class="num"><a href="#" class="event">02</a></li>
              <li class="num">03</li>
              <li class="num">04</li>
              <li class="num">05</li>
              <li class="num">06</li>
              <li class="num">07</li>
         
              <li class="num">08</li>
              <li class="num">09</li>
              <li class="num">10</li>
              <li class="num">11</li>
              <li class="num">12</li>
              <li class="num">13</li>
              <li class="num">14</li>
           
              <li class="num">15</li>
              <li class="num">16</li>
              <li class="num">17</li>
              <li class="num">18</li>
              <li class="num">19</li>
              <li class="num">20</li>
              <li class="num">21</li>
             
              <li class="num">22</li>
              <li class="num">23</li>
              <li class="num">24</li>
              <li class="num">25</li>
              <li class="num">26</li>
              <li class="num">27</li>
              <li class="num">28</li>
             
              <li class="num">29</li>
              <li class="num">30</li>
              <li class="num">31</li>
              <li class="num">&nbsp;</li>
              <li class="num">&nbsp;</li>
              <li class="num">&nbsp;</li>
              <li class="num">&nbsp;</li>
          </ul>
      </div>


Note that we have two classes inside our list-- "day" which is a textual representation of the day of the week, and "num" which is the actual date.

Now let's write some code (I'm also going to set the text size, font and colors here as well).
Code:
#cal {
          width:280px;
          font-family:arial, helvetica, sans-serif;
          font-size:9pt; /* this will fit in our 30x30px box nicely */
          color:#000;
          text-align:center;
          line-height:30px;
      }


Notice above that we also gave the "cal" div and all elements inside of it a line-height of 30 pixels-- the same as the height of our box (minus the border). This will ensure that all of the text is vertically centered.

Alright, now let's move on to our header. We'll make the header 10px less than our overall calender width, and put a 5px margin on the left, right, top and bottom, so that it will be spaced properly and will appear lined up with the numbers bewlow it.
Code:
#cal h2 {
          width:270px;
          margin:0 5px 5px 5px;
          font-size:12pt;
          background:#004a80;
          color:#fff;
      }


Now we can set the styles for the list itself. This is pretty straightforward. We simply define the width and set the margin and padding both to zero.
Code:
#cal ul {
          width:280px;
          margin:0;
          padding:0;
      }


Next, all of our LI tags within the calender, regardless of whether or not they're used as a label for the day of the week or as a number, will share some of the same properties, such as the removal of their bullets, their height, width, border size and color, and vloat value. So, let's define those now.
Code:
#cal ul li {
          width:30px;
          height:30px;
          display:block;
          float:left;
          list-style:none;
          border:5px solid #fff;
          margin:0;
      }


Now all that's left is to format the appearance of the day labels, and then the actual dates.
Code:
#cal ul li.day {
          background:#666;
          color:#fff;
          font-weight:bold;
      }
      #cal ul li.num { background:#ccc; }


Our calender is now finished!

-csshowto.com

       VTW Forum Index -> CSS
Page 1 of 1
Create your own free forum | Buy a domain to use with your forum