aside
some favorite linksread the blog
posted on 01/12/08
Simple Tableless Calendar
This is another little CSS experiment. This is an attempt at creating a calendar without the use of tables. Instead just an unordered list and a little CSS. You can take a look at the example
To get started, you’ve got to plugin the days and the dates in ul format. I’ll mark the days of the week with the .day class. I tried condensing the code a bit here to make it easy to cut and paste if you’d like.
<ul> <li class="day">sun</li> <li class="day">mon</li> <li class="day">tues</li>
<li class="day">wed</li> <li class="day">thurs</li> <li class="day">fri</li> <li class="day">sat</li>
<li> </li> <li> </li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li>
<li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li>
<li>13</li> <li>14</li> <li>15</li> <li>16</li> <li>17</li> <li>18</li> <li>19</li>
<li>20</li> <li>21</li> <li>22</li> <li>23</li> <li>24</li> <li>25</li> <li>26</li>
<li>27</li> <li>28</li> <li>29</li> <li>30</li> <li>31</li> <li> </li> <li> </li> </ul>
Once you’ve got the list done, the rest is pretty simple. Give each list item a width, and then the entire unordered list a width equal to seven times the list item width. For example each list item could be 50px wide and the entire list could be set to 350px. This will keep 7 items on a line, and push the next 7 down. Now just change the list-style to none and float each item.
ul{width:350px;list-style:none;margin:0px;padding:0px;}
ul li{float:left;width:50px;height:50px;}You might want to change height of the days of the week too.
ul li.day{height:30px;}
And that will pretty much get the job done. You can spend a lot more time styling it. I put up an example on the demo page of a calendar with a little more CSS involved. Go view the source, and feel free to play with it.
Noel Hurtley
posted on Jan 12, 07:37 PM
Nice job! But adam2z is probably right. Calendars and a few other types of content actually need a table element.
Josh
posted on Jan 12, 07:45 PM
For calendars that need to expand their widths, sure use tables… But, say you have a user clicking a text box to select a date. I think it’s a nice solution. I prefer this way personally.
JoshV
Matt
posted on Jan 12, 09:57 PM
@adam and noel I think you’re right for the most part, I just think there are some situations where this style could come in handy. I’m just offering this up as an option.
Aşk Şiirleri Aşk Sözleri
posted on Jul 1, 12:10 PM
http://www.siirler.biz/siirler/dogum-gunu” title=“Doğum Günü”>Doğum Günü
Glueless Full Lace Wig
posted on Jul 12, 04:26 AM
If you have kids because they do tend to be the main focus for the evening when it comes to making sure that they are all sorted costume wise and all sorts of too easily you end up at the end from the pile with the cast offs from the dressing box.
chanel handbags
posted on Aug 23, 03:31 AM
v“Get down, get down,” an old man in the same room said, sheltering behind a dusty desk. Others crouched behind cars.
Then more shooting erupted from the direction of a hospital on a square just behind the academy. One sweating young fighter buried his head in his hands.
wholesale jerseys
posted on Oct 31, 03:36 AM
The Associated Press left messages for attorneys representing Beasley and Bell seeking comment.
wholesale jerseys
posted on Oct 31, 05:11 AM
a calendar is one of the few objects on an average page which qualifies itself to be ‘tabular data’. Converting them to a styled list seems to be killing the point a bit.
Nike Air Jordan Retro Shoes
posted on Nov 6, 10:31 PM
Coach is a designer brand <a href=“http://www.sneakerscrazy.com/asics-shoes-c-481.html”><strong>Asics Sports Shoes</strong></a> that is popular not only for its handbag collections, but also <a href=“http://www.cheapuggsnowboot.com/ugg-classic-short-boots-5825-c-7.html”><strong>UGG Classic Short Boots 5825</strong></a> for its exquisite range of footwear. Many
christian louboutin
posted on Nov 19, 04:04 AM
A loose fitting blazer coupled with some powdery trousers is also an distinct choice for the fluctuating weather of summer.
Christian louboutin shoes
posted on Nov 24, 01:27 AM
We are selling women shoes for many years, and many chrisitan louboutin & chloe fans come here to buy the shoes they love. Our pumps are 100% quality guaranted & fast delivery.
Adira Asuransi Kendaraan Terbaik Indonesia
posted on Nov 29, 06:09 PM
I’m totally agreed with what you said.
What?
Pixelspread is the webblog and portfolio of Matt McInerney. If you'd like to learn a little more, check out the about section.
©2008 pixelspread - powered by txp
XHTML CSSOld Blog
- Blog and Portfolio Nov 11
- Tumblr Updates Oct 09
- Summer's Over Sep 16
- Summer Jun 02
- A Brief Update Apr 30
- The Freebies Section Apr 16
- Serifs on the Web Apr 15
- More Alphabets Apr 04
Elsewhere
- matt.cc
the new home of my blog
- cameron.io
a great tumblelog by cameron hunt
- sam brown
of massive blue
- shaun inman
creator of mint
- simplebits
by dan cederholm
- the big noob
by ryan, brad, and keegan
adam2z
posted on Jan 12, 07:15 PMa calendar is one of the few objects on an average page which qualifies itself to be ‘tabular data’. Converting them to a styled list seems to be killing the point a bit.
you have done it nicely though.