Close

Not a member yet? Register now and get started.

lock and key

Sign in to your account.

Account Login

Forgot your password?

Master CSS Calendars, Lists, Tables, and Timelines

Master CSS Calendars, Lists, Tables, and Timelines

CSS can be used to build calendars, timelines, and even “tables” (or charts). The tutorials below sometimes use CSS combined with various programming languages.

CSS/jQuery Sequential List
Have you ever had to manually code something that is sequential? Didn’t you find it annonying? Well, here is a simple solution for you. This tutorial will show you how to use jQuery to add a sequent of CSS classes to create a graphical list.

Menu List with CSS

Date displays with sprites
This tutorial explains how to achieve an original date display using CSS sprites. A clever technique. An alternative solution (using the

transform

property in CSS).

Styling dates with CSS

Pure CSS Timeline
A great tutorial for creating a clean-looking timeline for your site using straightforward CSS and HTML markup.

Pure CSS Timeline

A CSS-based Timeline
Another tutorial for creating a timeline with CSS.

A CSS-based Timeline

iCal-like Calendar (CSS+jQuery)
A great tutorial for creating a dynamic calendar resembling the iCal application.

iCal-like Calendar (CSS+jQuery)

Build a Calendar Using PHP, XHTML, and CSS Example
A simple tutorial for creating a dynamic online calendar.

Build a Calendar Using PHP, XHTML, and CSS Example

CSS: Menu List Design
This is a quick CSS tutorial to show you how to create a menu list using either the CSS border style or a background image. The trick is to apply a bottom border to the li element, then use the absolute position property to shift the nested elements down to cover the border.

Menu List with CSS

Pure CSS Scrollable Table with Fixed Header
This tutorial shows how to use CSS to allow scrolling within an HTML table with a header.

Pure CSS Scrollable Table with Fixed Header

Date Badges and Comment Bubbles for Your Blog
“One of the things you run into when your blog becomes bigger, is that you need to cram more info into less space, to make it possible to display all the information you want to show. One of the things I did to do that is add an icon for the date, and then a bubble over that with the number of comments in it.”

Date badges

Styling tables with CSS
A simple tutorial for styling HTML tables entirely with CSS.

Styling tables with CSS

 


Leave a comment