CODEWITHSUNDEEP
htmlcsscalendarprojecttabular
Amruth Pillai
Amruth Pillai

Reputation: 1693

I'm not able to code this calendar widget in HTML/CSS, can anyone give it a try?

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:

Proposed Calendar Widget

This is how I've designed it for now:

enter image description here

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.

Upvotes: 0

Views: 1725

Answers (1)

Dan F
Dan F

Reputation: 12051

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.

Upvotes: 2

Related Questions