Comments on: A Semantic List-Based CSS Calendar

By: Some Cool Web Design Solutions | I Love Innovation

Some Cool Web Design Solutions | I Love Innovation — Fri, 26 Aug 2011 10:35:41 +0000

[...] So, in light of that, here’s a great article about styling CSS lists as calendars. [...]

By: Dutchy

Dutchy — Wed, 22 Sep 2010 20:44:21 +0000

Great article! To remove the surplus div at the end that clear the floats just add overflow to the #calendar class. I used overflow:hidden; and removed the div succesfully in IE and FF.

Learned this technique from the Clearing Floats article by Russell Heimlich at http://www.russellheimlich.com/frontend-tips/clearing-floats.htm

Regards,
Rob

By: seo tutorial

seo tutorial — Thu, 12 Aug 2010 09:06:44 +0000

I visited those sites and saw the demo and downloaded some of them. they are really good and mind blowing. thanks for sharing with us.

By: blackdog

blackdog — Mon, 29 Mar 2010 21:03:06 +0000

@Charlie: list-style-position: inside ?

By: Charlie

Charlie — Mon, 29 Mar 2010 18:50:39 +0000

overflow: hidden; seems to make the #’s disappear in Firefox. Any tips on how to make the numbers show up automatically?

By: Charlies

Charlies — Sat, 27 Mar 2010 18:16:04 +0000

My Firefox 3.6 on OSX doesn’t show the dates while Safari does. Any ideas why?

By: Flavio

Flavio — Wed, 04 Nov 2009 19:41:41 +0000

…well actually i’m not able to improve on this.
It’s a nice implementation, but it is impossible to enrich the style without adding html. Adding collapsing-borders is impossible since :first/last-child won’t be able to target the right LIs :(

that’s why i started with a more complex layout the other day, but grouping weeks in other lists breaks the “semantic”.

/sigh

By: Flavio

Flavio — Wed, 04 Nov 2009 18:26:51 +0000

great tutorial.
i had the same idea a couple of days ago but my implementation was complicated and inefficent so i roamed to find a better one.
I have to add that the list approach can also be much more flexible in sense that with correct styling you can display a different layout, instead of the only calendar view, you can have a list-view (like iCal).
I’m trying just to implement this :)

By: Jestep

Jestep — Mon, 30 Mar 2009 20:59:27 +0000

Not a bad start at all. I managed to convert this to a completely fluid layout with about 30 minutes of changes and testing. I also have it working perfectly in a year style layout with 12 mini calendars on the same page.

I looked for several hours at various css based calendar styles, and this is the most versatile that I’ve found. The most difficult part in moving to a fluid width is keeping the top row even with the rows below. In this case, I used an increasing border-left width. Anyway, great resource, highly recommended.

By: Neuromancer

Neuromancer — Sat, 28 Feb 2009 22:09:46 +0000

It doesn’t work at all. I think I will use the good old table.