[thelist] CSS - to list, to table, or to what? - A menu question

Sun Jul 13 03:41:59 CDT 2003

rudy,

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> From: rudy
>
> > i'd be inclined to have the labels first, for
> > usability and accessibility reasons.
>
> crap
>
> ;o)
>
> you have it exactly backwards, holmes
>
> wait'll you see the screenshot and how hard it is for
> your eyes to travel across from the labels to the
> links and pick the right one
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

in your screenshot, sure.  now, take the <ul> block and give it an explicit
width like it'd be if it were a menu.  notice that lining up labels and
links is no longer an issue.  also notice that when the width is narrow
enough to cause the labels to wrap that the [E] and [B] links are still
right-aligned.

now, take your example and do the same thing.  you end up with something
like this:

 - [E][B] Agatha Christie
 - [E][B] Isambard Kingdom
   Brunel
 - [E][B] John (Babbacombe)
   Lee
 - [E][B] Kents Cavern
 - [E][B] Paignton Zoo
 - [E][B] Singer Family
 - [E][B] Maritime History
 - [E][B] Torre Abbey
 - [E][B] Potteries and
   Marble Works

you can't tell me that's easier to read than this:

 - Agatha Christie   [E][B]
 - Isambard Kingdom  [E][B]
   Brunel
 - John (Babbacombe) [E][B]
   Lee
 - Kents Cavern      [E][B]
 - Paignton Zoo      [E][B]
 - Singer Family     [E][B]
 - Maritime History  [E][B]
 - Torre Abbey       [E][B]
 - Potteries and     [E][B]
   Marble Works

in the first example the portions of the labels that wrap are disconnected
from the rest of the label making it difficult to scan the list.  in the
second example the labels are grouped in a "column" on the left and the [E]
and [B] are grouped in a column on the right.

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> even if you snug the links right up to the longest
> label, there's still going to be white space your eyes
> have to track across
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

imo, being able to scan the beginning of labels to find the one you want is
a bigger problem than tracking across the whitespace to click the
corresponding [E] or [B] link, especially in tony's design where the entire
<li> block is made to look like a button with outset borders.

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> > i've got an equally simple bit of code as well.  try
> > this:
>
> crap
>
> your code has to have a css class coded on each and
> every link
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

and if you drop the link around the label text, then that's not really
necessary either.  how about this instead:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
  <title>LI w/ Floated Links</title>
  <style type="text/css">
  <!--

    li {
      text-align: left;
    }

    li a {
      float: right;
    }
  -->
  </style>
</head>

<body>

<ul>
  <li><a href="/">[B]</a> <a href="/">[E]</a> Agatha Christie</li>
  <li><a href="/">[B]</a> <a href="/">[E]</a> Isambard Kingdom Brunel</li>
  <li><a href="/">[B]</a> <a href="/">[E]</a> John (Babbacombe) Lee</li>
  <li><a href="/">[B]</a> <a href="/">[E]</a> Kents Cavern</li>
  <li><a href="/">[B]</a> <a href="/">[E]</a> Paignton Zoo</li>
  <li><a href="/">[B]</a> <a href="/">[E]</a> Singer Family</li>
  <li><a href="/">[B]</a> <a href="/">[E]</a> Maritime History</li>
  <li><a href="/">[B]</a> <a href="/">[E]</a> Torre Abbey</li>
  <li><a href="/">[B]</a> <a href="/">[E]</a> Potteries and Marble
Works</li>
</ul>

</body>
</html>

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> plus, your labels are coded as links, they shouldn't be,
> they should be labels
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

fair enough, but i still think the label should be left-aligned and the
links should be right-aligned.

.jeff

——————————————————————————————————————————————————————
Jeff Howden - Web Application Specialist
Résumé - http://jeffhowden.com/about/resume/
Code Library - http://evolt.jeffhowden.com/jeff/code/