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

Thu Jul 10 19:40:54 CDT 2003

tony,

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> From: rudy
>
>   Beg Exp  Agatha Christie
>   Beg Exp  Isambard Kingdom Brunel
>   Beg Exp  John (Babbacombe) Lee
>   Beg Exp  Kents Cavern
>   Beg Exp  Paignton Zoo
>   Beg Exp  Singer Family
>   Beg Exp  Maritime History
>   Beg Exp  Torre Abbey
>   Beg Exp  Potteries and Marble Works
>
> you suggested   [listitem label] [link1] [link2]
>
> but i prefer   [link1] [link2] [listitem label]
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

i'd be inclined to have the labels first, for usability and accessibility
reasons.

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> i prefer it not only for the obvious usability reasons
> (links closer to labels, less lateral eye movement, less
> error), but also because of the code
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

it makes it more difficult to scan the labels for the item you're looking
for though.

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> the code is simple, and therefore gorgeous
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

i've got an equally simple bit of code as well.  try this:

<!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 .exp {
      float: right;
    }

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

<body>

<ul>
  <li><a href="/" class="beg">[B]</a> <a href="/" class="exp">[E]</a> <a
href="/op/tm1/lv1/index.htm">Agatha Christie</a></li>
  <li><a href="/" class="beg">[B]</a> <a href="/" class="exp">[E]</a> <a
href="/op/tm2/lv1/index.htm">Isambard Kingdom Brunel</a></li>
  <li><a href="/" class="beg">[B]</a> <a href="/" class="exp">[E]</a> <a
href="/op/tm3/lv1/index.htm">John (Babbacombe) Lee</a></li>
  <li><a href="/" class="beg">[B]</a> <a href="/" class="exp">[E]</a> <a
href="/op/tm4/lv1/index.htm">Kents Cavern</a></li>
  <li><a href="/" class="beg">[B]</a> <a href="/" class="exp">[E]</a> <a
href="/op/tm5/lv1/index.htm">Paignton Zoo</a></li>
  <li><a href="/" class="beg">[B]</a> <a href="/" class="exp">[E]</a> <a
href="/op/tm6/lv1/index.htm">Singer Family</a></li>
  <li><a href="/" class="beg">[B]</a> <a href="/" class="exp">[E]</a> <a
href="/op/tm7/lv1/index.htm">Maritime History</a></li>
  <li><a href="/" class="beg">[B]</a> <a href="/" class="exp">[E]</a> <a
href="/op/tm8/lv1/index.htm">Torre Abbey</a></li>
  <li><a href="/" class="beg">[B]</a> <a href="/" class="exp">[E]</a> <a
href="/op/tm9/lv1/index.htm">Potteries and Marble Works</a></li>
</ul>

</body>
</html>

enjoy,

.jeff

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