A Question Of HTML Part 2 - Split Lists

5th February 2004 · Last updated: 21st December 2023
 

Comments

At work we have to cater for Netscape 4, at least for now. That means tables for layout. I make no apologies for this. I'll be rejoicing the day I can ditch the tables and move to a site entirely constructed from divs. I do use some divs, but Netscape 4 is so finnicky that the slightest piece of advanced code can stop a page displaying properly, if at all.

On one page I've a list of links that are short enough to fit in two columns beneath a line of text. To do this I've used code similar to this:

<table>
<tr>
<td colspan="2">A line of text that spans the whole width<td>
</tr>
<tr>
<td><a href="#">Left link here</a>
<br /><a href="#">Left link here</a></td>
<td><a href="#">Right link here</a>
<br /><a href="#">Right link here</a></td>
</tr>
</table>

The code would appear like this on screen:

A line of text that spans the whole width
Left link here
Left link here		 Right link here
Right link here


Clearly the links should be in a list. But how? The list must be split between two cells in the table. The same issue would occur if divs were used. To split the list means basically creating two lists where only one is physically needed.

So what to do. Again I'm opening this to everyone. Should a list be used here? No flames for using tables though - constructive comments only. Is there a way to define a single list that fits two columns? Even if it means using divs? I'm all ears.

Comments (8)

Comments are locked on this topic. Thanks to everyone who posted a comment.

  1. flump:
    im not sure if i know what you mean, in NS4 are we talking here? or are you asking can you make the links in a list, with using a single ul open / close tag.

    or are you talking about writing a list like
    item 1
    item 2
    item 3
    item 4

    but have item 1/2 on one side, and 3/4 on the other?

    Posted on 5 February 2004 at 9:57 pm
  2. Dysfunksional.Monkey:
    If it is *just* for Netscape 4, try the <multicol> tag as noted here: http://www.ehtml.com/html/
    reference/multicol.htm

    <multicol cols="2" width="200" gutter="10">
     <ul>
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
      <li>item6</li>
     </ul>
    </multicol>

    Other browsers just ignore this tag.

    Posted on 6 February 2004 at 8:12 am
  3. Chris Hester:
    The solution needs to work for all browsers. <multicol>? That's a new one to me!

    "or are you asking can you make the links in a list, with using a single ul open / close tag."

    Yes that's it. How to tie the two sides of lists together - if possible.

    Posted on 6 February 2004
  4. Dysfunksional.Monkey:
    I don't think you'll find anything, to be honest. There's a neat trick for "modern" browsers, which consists of the following markup:
    <style type="text/css">
     dt {
      float: left;
      clear: left;
     }

     dd {
      margin-left: 150px;
     }
    </style>
    ...
    <dl>
     <dt>Item1</dt>
     <dd>Item2</dd>
     <dt>Item1</dt>
     <dd>Item2</dd>
     <dt>Item1</dt>
     <dd>Item2</dd>
    </dl>

    Nicely styled, etc. Breaks under NS4 though. :-(

    Posted on 6 February 2004 at 12:23 pm
  5. -jul-:
    I use a simpler solution:

    ul {
     list-style: none;
     padding-left: 0;
    }
    li.multi {
     list-style: none;
    }
    li.multi.f {
     float: left;
     width: 150px;
    }
    li.multi.l {
     margin-left: 150px;
    }

    Then in html:
    <ul>
    <li class="multi f">item1</li>
    <li class="multi f">item2</li>
    <li class="multi l">item3</li>
    <li class="multi f">item4</li>
    <li class="multi f">item5</li>
    <li class="multi l">item6</li>
    <li class="multi f">item7</li>
    </ul>

    This way you can generate any number of columns, but be sure to have the amount of pixel space to do that.

    Posted on 10 February 2004 at 5:52 pm
  6. Chris Hester:
    I think that could be the ideal solution! Well done! I'll try it out later on.

    Posted on 10 February 2004 at 8:06 pm
  7. flump:
    i got bored and tried about that above example and re-did it a bit.

    css
    ul {
     list-style: none;
     padding: 0;
     margin: 0; /* IE */
    }
    li.f {
     float: left;
     width: 100px;
    }

    html
     <ul>
      <li class="f">item1</li>
      <li class="f">item2</li>
      <li class="l">item3</li>
      <li class="f">item4</li>
      <li class="f">item5</li>
      <li class="l">item6</li>
      <li class="f">item7</li>
     </ul>

    tested in ie/ff

    Posted on 11 February 2004 at 12:41 pm
  8. Chris Hester:
    Try this for an interesting effect:

    <html>
    <head>
    <style>

    ul {
     list-style: none;
     padding: 0;
     margin: 0;
    }

    li {
     width: 100px;
    }

    li.l {
     float: left;
     background: gold;
    }

    li.r {
     float: right;
     background: silver;
    }

    </style>
    </head>

    <body>
    <table border="1" cellpadding="0" width="500px">
    <tr>
    <td>
    <ul>
    <li class="l">item1</li>
    <li class="r">item2</li>
    <li class="l">item3</li>
    <li class="r">item4</li>
    <li class="l">item5</li>
    <li class="r">item6</li>
    </ul>
    </td>
    </tr>
    </table>

    </body>
    </html>

    Works in Opera 7.2, Mozilla 1.5, IE6, but not Netscape 4!

    What happens is that the floats don't follow the order in the code, but repeat side by side, moving down. Since all key browsers do this, I assume it's correct!

    What I don't get is why the table has to be 8 pixels wider than the total number of floats needed across. If you make it 508px wide, the middle gap disappears.

    Posted on 26 February 2004 at 2:44 pm