ansaurus

Question

Making Tables Out of Hierarchical Lists in CSS

Answer 1

+4 A:

You're asking about "pure" CSS. Pure CSS is to use the best semantic tag for the job, and that means that if you really have tabular data, which this looks like it might be, than you should use a table.

Joel Coehoorn 2009-08-20 17:03:41

was just thinking that same thing and I was going to add it to the question. Problem is then I have to get in there and futz with the templates that produce the HTML, but yes, I guess that's why I get paid. Thanks.

Yar 2009-08-20 17:05:23

+1. Tables get a bad wrap for being overused in page layouts for so many years (when there weren't good alternatives). However, there's nothing wrong with using HTML tables for tabular data. In fact it's typically the cleanest, easiest, and most cross-browser-friendly way to do it.

Steve Wortham 2009-08-20 17:07:53

What if you don't have control of the HTML? Then you'd use Zac's answer below.

Yar 2009-08-21 18:10:28

Answer 2

A:

You can use the css tag "list-style-type:none" ie

ul li { list-style-type: none; display: inline; }

ul li ul li { list-style-type: none; display: inline; }

chotchki 2009-08-20 17:03:43

That's the _first_ step, but it's incomplete because it won't line things up like he wants.

Joel Coehoorn 2009-08-20 17:05:58

yeah trying to go horizontally thanks though

Yar 2009-08-20 17:07:48

oops forgot you have to add a "display: inline;" as well.

chotchki 2009-08-20 17:11:10

okay, that's cool, but the problem -- and it's probably not solvable in CSS -- is to get the second line as the second line and not interrupting the first.

Yar 2009-08-20 17:23:07

With your current HTML, I'm pretty sure you won't be able to pull it off without using CSS2 child selectors and positioning each element.

chotchki 2009-08-20 17:40:15

Answer 3

+1 A:

You could accomplish this with some floats and absolute positioning

ul li { list-style-type: none; display: inline; float: left; margin: 0 4px;}
ul.first {position: absolute; top: 0; left: 0;}
ul li ul li ul{ list-style-type: none; display: inline; float: left;position: absolute; top: 30px; left: 0; margin-top: 30px;}
ul.second {position: absolute; top: 30; left: 50;}

and

<ul class="first">
   <li>one</li>
   <li>two
      <ul class="second">
          <li>a</li>
          <li>b</li>
      </ul>
   </li>
   <li>three</li>
</ul>

zac 2009-08-20 17:43:32

really? I'll have to try this out immediately. If it works you'll win best answer and my undying gratitude until the project gets changed and this answer doesn't even get used :)

Yar 2009-08-21 17:42:15

Answer 4

A:

To take Zac's answer a little further, you can do the CSS addressing without modifying the HTML whatsoever. Then it would look like this:

<style>
ul li { list-style-type: none; display: inline; float: left; margin: 0 4px;}
ul  {position: absolute; top: 0; left: 0;}
ul li ul li ul{ list-style-type: none; display: inline; float: left;position: absolute; top: 20px; left: 0; margin-top: 30px;}
ul li ul {position: absolute; top: 20; left: 0;}
</style>

<ul>
   <li>one</li>
   <li>two
      <ul>
          <li>a</li>
          <li>b</li>
      </ul>
   </li>
   <li>three</li>
</ul>

Yar 2009-08-21 18:14:34

ansaurus

tags:

views:

answers:

Making Tables Out of Hierarchical Lists in CSS

related questions