- From: Matt May <mcmay@w3.org>
- Date: Mon, 13 Jan 2003 22:30:55 -0800
- To: jim@jimthatcher.com
- Cc: "'W3C-WAI-IG List'" <w3c-wai-ig@w3.org>
On Monday, January 13, 2003, at 04:29 PM, Jim Thatcher wrote:
> Matt suggested: "Nested tables throughout a site are a red flag that
> design teams are stuck in a rut of outmoded markup practices." I think
> nested tables are indeed a red flag; that CSS implementation is
> inadequate - not that design teams are stuck in a rut. On a redesign of
> my site I spent 4 days trying to get my intended design to work with
> CSS. I gave up. Yes, this design team was stuck. Here's the sample
> page:
> http://jimthatcher.com/webcourse1a.htm. I challenge anyone to get that
> design to work with CSS.
Well, since I hate to back down from a challenge (erm, once a year or
so)...
http://www.bestkungfu.com/jtcom.html
(this link will not be archived longer than a week.)
This validates XHTML 1.0 Strict, and uses no tables. I took about an
hour to work on it, so I'm excusing myself from pixel-perfection (or,
for that matter, CSS best practices such as consolidating repeated
statements, making useful IDs and classes, and linking to rather than
embedding a style sheet). But I did make an actual ordered list of your
links, which should help in any case.
I don't intend to suggest that this is _ideal_ at this point; merely
that it is possible. The most popular argument I've heard against
learning CSS is that such-and-such is impossible, and that is often
times not true. CSS does take time to learn to do well, but it is well
worthwhile. (And yes, I would have said that even if they weren't
paying me.)
One thing I want to recommend here is the CSS used for the link bar.
It's possible to flow links in a bar together with very minimal HTML
and CSS. For example:
HTML:
<div class="topnav">
<a href="">Home</a>
<a href="">About</a>
<a href="">Services</a>
<a href="">Resources</a>
<a href="">Contact</a>
</div>
CSS:
.topnav a { display: block; float: left; width: 20%; text-align:
center; background-color: black; color: white; text-decoration: none;
font-family: Verdana, sans-serif; }
You can stylize each link with borders, etc., but this is much easier
to deal with and keep up than throwing them in tables. (A bonus: when
you declare the A element as a block element using "display: block",
the entire area is clickable, not just the word.)
-
m
Received on Tuesday, 14 January 2003 01:30:13 UTC