Question

I have been given a small task but I’m not able to complete it any way I try. I was asked to code this calendar widget that I designed in HTML and CSS but I’m not sure of the tables or divs that I’ll have to be using!

This is how the calendar is supposed to look like:

This is how I’ve designed it for now:

The live demo of the site can be found here, as well as the code to what I’ve done: http://trendgfx.com/projects/comet-tavern/

Please help me.

Answer 1

If you get rid of the float:left and display:inline-block on the #archive-calender th { and #archive-calender td { you get a lot closer.

Next up you’ll want to set border-collapse to separate on #archive-calender { and throw in some border-spacing:3px to get the gaps between the cells

Finally, a bit of padding:2px on the #archive-calender td { will give you some breathing room inside the cells.

HTH

edit forgot the background on the cells.

Add either some background-color or background-image to #archive-calender td { and you’ll get the nice grey cells.