----- Original Message ----- From: "Erik Harris" <[EMAIL PROTECTED]> To: <[email protected]> Sent: Tuesday, October 17, 2006 5:16 PM Subject: [css-d] CSS-based calendars?
> I've volunteered to put together a community calendar web page for my > housing community. I could easily put something decent-looking together > with tables, but I'd much rather use a more informational layout, where I > could use CSS to display the calendar as a list or as a traditional > table-esque monthly calendar. Is anyone aware of any examples on the web > of something of this nature already being put into use? I can think of > how > I'd need to organize the data (I'd probably need named styles for each > week > of the month and each day of the week, so that regardless of month, the > dates would display on the correct days, in the correct places on a > generically defined calendar), but I know that creating a > basically-tabular > layout with CSS is often a big challenge. > > Erik Harris http://www.eHarrisHome.com > - AIM: KngFuJoe - Yahoo IM: kungfujoe7 - ICQ: 2610172 - > Chinese-Indonesian Martial Arts Club http://www.kungfu-silat.com > Here's another possibility for you to consider, my calendar (link below) is currently table-based, but it could very easily be done without them. Where I now have a table row with pairs of table cells, one for Event (left), the other for Venue (right), it could be pairs of divs within a div. (Of course you would have all of your event content divs in a #container or #content div). The date pseudo-headers are just the CSS-styled FIRST row of the table for each day styled with: (I know there are inconsistencies in my content, it's from getting in a hurry, cutting and pasting...) table#calendar-data tr { background-image: url(images/navshadow.gif); background-repeat: no-repeat; } /* This centers the Dates */ table#calendar-data td { text-align: center; } /* Rules for Events (left) and Venues (right) cells */ table#calendar-data tr tr { background-image: none; } table#calendar-data td td { text-align: left; background-color: #fff; vertical-align: top; border-top: none; border-bottom: 1px solid Black; width: 50%; } The single event posted on the home page is done using three (3) divs and inline styling so you can see it doesn't involve much to implement my style of calendar with CSS and divs (no tables). You surely would want to design it with ALL of your CSS in an external style sheet, with only your CSS #ids and .classes associated with your x/HTML and content in your web pages. Michael S. Rose Bluegrass Plus Events Calendar http://mmrose.home.comcast.net/ ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
