Double List?

**Jimknee** · Dec 10, 2001, 13:40

Ok, I'm trying to get my lists arranged like so:

What's the best way to do this? Also, I don't want any 'dots' or numbers next to the items. (the lists are lists of links)

Tks

http://sample.adminsites.com/

**Winged Spider** · Dec 10, 2001, 13:58

To not have 'dots' you could use:

Code:

 li { list-style-type: none}

The only way I could think of to display the lists like that is to use relative positioning, and have each subset of links insite a div.

I know that wouldn't be the best solution.

**Jimknee** · Dec 10, 2001, 14:11

Tks, Winged Spider.

Hmm, that solution sounds a little complicated. There's no easier way?

**Winged Spider** · Dec 10, 2001, 14:39

There probably is. I can't think of it right now, or I don't know it.

**Jimknee** · Dec 10, 2001, 15:08

Ok

I'm basically trying to avoid having a long, scrolling page. But someone mentioned to me that the links on my page were bunched together. (still are) So I figured CSS might clean it up.

**htmlite** · Dec 10, 2001, 15:18

Give this a go...

<table><tr>
<th colspan="2">Photoshop</th>
</tr><tr>
<td><ol style="list-style-type: none;">
<li>slice images</li>
<li>glass buttons</li>
<li>photoshop cafe</li>
</ol></td>
<td><ol style="list-style-type: none;">
<li>vector shapes</li>
<li>depth of field</li>
<li>gfxsite</li>
</ol></td>
</tr></table>

I think CSS is the only "clean" way to get rid of the bullets unless you just to a regular...
slice images<br>
glass buttons<br>
photoshop cafe
Sort of thing. If you don't want the bullets, it would probably come out the same anyways?

**creole** · Dec 10, 2001, 15:44

Yep...

Just put it in a TABLE with two columns.

**Jimknee** · Dec 10, 2001, 15:49

Yes, that's a good solution- but I was wondering if there was a CSS solution. Just to keep the code simple.

Tks, htmlite

**creole** · Dec 10, 2001, 16:55

There is no list type that will put your data into two columns. There WAS a Netscape only tag that would take a paragraph of content and split into two colums. It's too bad that never caught on. That would have been a GREAT tag to keep in the spec.

**Jimknee** · Dec 10, 2001, 17:51

Netscape only? Argh. I don't want to go 'table happy' on my page.

Tks.

**Winged Spider** · Dec 11, 2001, 09:43

Ill take this as a challenge.

It will be fun.

Let's see what you can do with CSS.

**Technosailor** · Dec 11, 2001, 11:24

you could always go XML and define some patterns for the list. However, XML would probably be overkill.

Sketch

**Jimknee** · Dec 11, 2001, 15:56

"Ill take this as a challenge.

It will be fun.

Let's see what you can do with CSS."

Excellent!

---------------

XML? Hmm, looks like I'll be buying another 800 page book soon!

**Ian Glass** · Dec 11, 2001, 16:34

What, am I getting requests, now? :-D

Well, which do you want first: the good news or the bad? Lets start with the good: in CSS3 your problems will be solved with multi-column layouts. The bad news: at the rate that browsers progress regarding standards, you'll have to wait a while.

But wait, there are possibilities with CSS1! If you think creatively, I'm sure that you could use the float and clear properties to do what you want.

Code:

<html>
<head>
<title>A Title to Make This a Valid XHTML Document...</title>
<style type="text/css">
div {
  clear: left;
  }
div ul {
  float: left;
  list-style-type: none;
  }
</style>
</head>
<body>
  <div>
    <h1>My Fav CSS Tuts...</h1>
    <ul>
      <li>Link 1</li>
      <li>Link 2</li>
      <li>Link 3</li>
    </ul>
    <ul>
      <li>Link 4</li>
      <li>Link 5</li>
      <li>Link 6</li>
    </ul>
  </div>

  <div>
    <h1>My Fav HTML Tuts...</h1>
    <ul>
      <li>Link 1</li>
      <li>Link 2</li>
      <li>Link 3</li>
    </ul>
    <ul>
      <li>Link 4</li>
      <li>Link 5</li>
      <li>Link 6</li>
    </ul>
  </div>
</body>

Or, if you want to get really advanced, you could try to use CSS2's display property's "table-*" values. But I don't even tread there. ;-)

Quite frankly, I don't see how you would be any better not using tables for this. Remeber this is what they were designed for! You're listing data (this time links) into a package that is contained in as little screen space as possible. Also, putting your links inside a table takes care of that spacing problem you were having.

Now, repeat after me: tables arn't always bad, just using them for cheep layout effects is. :-D

~~Hope This Helps

**Jimknee** · Dec 11, 2001, 17:07

Thanks very much, Ian.

Good points. I was thinking there was a CSS solution that I could put once in my linked sheet, and the links - as they are added - would flow automatically into multiple lists. As you've said, some of this will be possible in CSS3.

"This module has two major advantages over table-based layouts. First, it allows content to flow from one column to another based on available space rather than document structure. Second, this module allows the column width to be specified and the number of columns to vary depending on available space."

I'm trying to avoid having to pick through tables as I update and change links. (There are 88 links so far.) So, I'm going to give that float/clear solution a try.

Tks

**creole** · Dec 11, 2001, 17:56

If you code your TABLEs right then it won't be that hard. Plus, there's always find and replace. If you do decide to go with a CSS solution, make sure that you test extensively. It would suck to change your code and then discover that some browsers can't see what you want.

**Ian Glass** · Dec 11, 2001, 18:13

I know Netscape 4 has big problems with complex floats. :-(

N4 is the bane of my existence...

**Jimknee** · Dec 11, 2001, 18:27

Yes, good point about testing.

The SitePoint Forums have moved.

User Tag List

Thread: Double List?

Thread Tools

Display

Double List?

Bookmarks

Bookmarks

Posting Permissions