The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

CSS - Test Your CSS Skills Number 15 :

These days fly by so fast that I can't keep track. What I really need is a little html calendar so I can tell what day it is. Sounds like a good idea for a little quiz.

If you've been following the previous few quizzes then then this next quiz builds on what you have learned so beginners to intermediate could have a go at this by looking at the answers to the last couple of quizzes.

Have a look at the attachment and you will see 12 little screenshots of a calendar I have constructed showing the months from January to December. (This exercise took me about 2 hours from start to finish so you will need a long coffee break to attempt this - Note the deliberate mistake where November seems to have more days than it should ;))

Your mission (should you once again accept) is to produce the calendar using the html that I will give you.

The calendar should have a default setting for January showing but when you hover over any other of the other months then January switches off and the other month is highlighted in any colour you want (orange in my example).

Look at the attachment which shows the 12 states of the calendar as I hovered over each month in turn. Also notice that each month has the correct number of days and starts on the correct day for each month.

Only the months need to be hovered and the days will revert to default as soon as the mouse is moved away from the month section (i.e. You don't need to keep the days in view if you leave the month section and then tried to move the mouse to one of the days (although that could be another quiz idea )).

I am going to set a few other rules to make it awkward for you as usual.

1) You must use the html I have given and you can only add CSS within the style element that is in the head. (No classes can be added to the html)

2) The css must be valid css2.1 (no CSS3) apart from one property that I will let you use and that is the last-child psudo class.

Code:

:last-child

3) No absolute positioning

4) Each day should be alternately coloured as per my example and in a nice little box.

5) Make the calendar as aesthetically pleasing as possible as styling this is a little awkward and needs some thought.

The code should be valid html and css2.1 (apart from the :last-child pseudo class that I will let you use) and work in all the above mentioned browsers without hacks needed.

General Rules:

No javascript or scripting of any kind
No images or background images.
No Hacks
Firefox3 and Opera10 support only required

As usual there are no prizes other than the self-satisfaction of completing this. If you have a valid layout then post a message here but PM me the solution so that other people can still have a go. I will decide on the best layout this time rather than the first one I receive and the criteria may be based on code and looks.

Be aware that this quiz may not produce a valid day-to day real world use but the techniques used to create it are essential tools in your css toolbox.

Solutions will be posted later in the week (or longer) depending on how it goes

Yes sorry about the 31 days in November Thanks to Centauri for pointing out. I'm not even sure where it came from as my html version shows 30 days in November so I must have grabbed a screenshot from an earlier version in error before I put in the logic for the days.

Originally Posted by raena

Hmmm, I'm not sure how I feel about the semantics of this markup

No semantics went out of the window on this quiz - Otherwise we would have needed 12 more nested ols or more semantically 12 tables

I didn't expect to have time to do this quiz, since Paul said it would take a lot of time. As it happened, there was a little lull in my schedule at work, so I decided to take a look. Unless I misunderstood the rules, it wasn't really difficult. Just a bit labour intensive. (Kept me busy for about 45 minutes. Don't tell my boss!)

My submission seems to work in Opera 9.63, Firefox 3 and IE7 (and doesn't even use the :last-child pseudo-class; it's valid CSS2.1). I also did an alternative version for fun, using the power of CSS3 pseudo-classes and combinators. It only works in really good browsers (i.e., Opera ), but it's quite amazing how much code bloat can be reduced with :nth-child() and ~.

(I may have put some people off when I said it took 2 hours but that included, testing, working out the rules, deciding on what html to use and getting screenshots etc. Besides now that I've done all the work with the html there's only the CSS to worry about )

It would be much harder if we had to use :active instead of :hover. In fact I cant think of an way it would be possible?

I think you must mean something else as you can simply swap :active for :hover and it works straight away when you hold the mouse button down.

Remember that :active is just the instant you click something and then the state is gone unless you hold the mouse button down.

If you mean :focus in order to try and hold the state so that the days stay displayed then it would be difficult - in fact it would be impossible . :focus is currently only applied to elements that can receive focus (such as links and form elements).

I also did an alternative version for fun, using the power of CSS3 pseudo-classes and combinators. It only works in really good browsers (i.e., Opera ), but it's quite amazing how much code bloat can be reduced with :nth-child() and ~.

I used nth child to do the alternate colors for the weekdays and days and I also tried not to use TOO much CSS3...I was going to use ~ but I decided to just stick with +. I was too lazy so I just used nth child for the colors

I think you must mean something else as you can simply swap :active for :hover and it works straight away when you hold the mouse button down.

Remember that :active is just the instant you click something and then the state is gone unless you hold the mouse button down.

If you mean :focus in order to try and hold the state so that the days stay displayed then it would be difficult - in fact it would be impossible . :focus is currently only applied to elements that can receive focus (such as links and form elements).