21 March 2004
ASP/CSS/XHTML Calendar
Once again I found some time to play with the ASP/CSS/XHTML Calendar, and spend some time thinking about what is the best markup to use.
Remember, that I wrote off tables at the beginning of the project - despite the fact that they are best for calendars - because of the nature of the project I need this for. The calendar has to be able to be restyled in a list format. Tables are set to one layout, and can't be changed that much with CSS.
Calendar Test 1
So, my first calendar used plain old div's to markup each day, and they were styled accordingly. This technique was great from a Server Side standpoint. I need to bind the calendar to a recordset (or recordsets), and creating table tags on-the-fly is asking for punishment - and bad XHTML. Using more simple markup makes the Server Side script much easier, and limits the amount of nested 'ifs' needed.
However, this markup doesn't work very well when the styles were removed. All that remains it a pretty nasty block of data, with no semantic meaning. That would not do.
Calendar Test 2
After very little thought at all, I decided that an Ordered List would degrade much nicer. So I came up with this. Great! Or so I thought.
For some strange reason I could not get the the 'inset' list-item-posistion to work in IE, and therefore the days had no number when viewed with IE (as you can see with this example). Even though I am loosing some functionality in IE, that is gained in Firefox, this was just too much of a difference.
Then, I had an idea; Set the list-style to none, and put in a H3 for the day. So it will work in IE and Firefox.
Great! Again! It looked ok in IE, and in Firefox. But, when all style was removed. Then you had something really silly. The day number was repeated, Once for the list item number, and once for the h3 content. Not good. (This is not shown in the above example. Just take my word for it)
Calendar Test 3
That is when I decided to give an Unordered List a go. It sounds silly, because dates definitely have an order. But considering what happened with Ordered Lists, and that I would be putting the day number into a h3 for every list item, I didn't suppose it mattered.
It works nicely. It looks nice in IE, looks great in Firefox, and degrades well also.
As an added extra I put the Month and Year into the h3 within span tags for each day, and then hid then ( using display:none;) via the style sheet. So, you can not see this extra information when viewed normally, but when style is removed, then you get that bit of extra information that helps to understand what it is your reading.
So, what is your verdict?
What do you think of all this? Any better ideas? Suggestions? Remember that using tables is not an option, because the data needs to be shown as a list item with another style.
- Time: 17:20
- Wubb Development
Comments ( 3 )
Hasan
Phil Baines
i will have to see if there is some way of doing it with vbscript. becuase at the moment I am using a for loop in vbscript to create the days.
for i=1 to lastDayOfMoth
<li>
<h3>
<%=i%>
</h3>
</li>
next
that sorta thing. so 'i' is the day number. I will have to see if I can get in 1st, 2nd, 3rd format.
free poker games
free poker games
Sorry, commenting has been disabled for a while. I am getting a stupid amount of comment spam, and need to find a new way of doing things.
I will not publish your email address, but I may use it to get in contact with you.
HTML tags and entities display as source; they do not render. To create a live link, simply type the URL (including http://).