I've been wanting to come up with a way to create small columned sections in my HTML documents (i.e. a two-column paragraph) without using the <table> tag.
This may or may not turn out to be the very best way to do stuff like this, but it's the way I've been pursuing, recently. If I would just talk with George about it, he could probably tell me what the best way is, or where I could find out all the ways people have already done this.
But, I haven't been talking to anyone about the best way to do this, I've just been kind of messing around with it.
The examples I have up for review are pretty plain, but sometimes that's helpful, right?
The basic technique is the use of CSS to style unordered lists. For in-depth information on this idea, check out an article on using styled lists to create navigation on A List Apart.
On one page I have a three-column paragraph mixed in with regular paragraphs. On a second page, I have a three-column/three-row table, with column headers (this one doesn't work right with IE, yet).
View: three-column paragraph example
View: fake table example
Download: Example Files
Ross
UTTC Course Development
April 27, 2006 at 3:25 pm |
This is interesting, Ross. I like how in both examples, if your browser is not wide enough for all three columns to fit, it will push the column (or columns) down, so that you might have two columns side-by-side, then below them is the third column. Can you share with us your stylesheet so that we can experiment? Thanks! ~Kat
April 28, 2006 at 10:58 am |
I’ve used that drop down css for a site at UTB. IE is stubborn is recognizing some CSS (or so they say), so you have to use JavaScript to make it work (you probably read that on the site). So, I am wondering if JavaScript will have to be used in this example.
April 28, 2006 at 11:00 am |
Here’s the link to the CSS:
http://komodo.utsystem.edu/coursetech/rhenderson/coursedevblog/CSS/columns/style/mColumn_style.css
April 28, 2006 at 1:14 pm |
Thanks, Matt. I just add a link to a download package of the example files, too.
Yeah, IE is pretty horrible with CSS, and as a result, there is something of a debate about using JavaScript to hack style.
A couple of CSS resources:
http://www.quirksmode.com
http://www.tizag.com/cssT/reference.php
http://www.positioniseverything.net/
http://www.dezwozhere.com/links.html (this one is a huge clearinghouse of resource links)
Ross
April 28, 2006 at 1:20 pm |
And, by the way, if anyone figures out the IE fix for the table before I do, please go ahead and post it.
Ross