Displaying Unordered list in 2 columns?

M

Mark Parnell

Previously in alt.html said:

That would be http://donwiss.com/pictures/plants/ :)
Is there any
easy way to get the list to display in two columns?

Something along the lines of this seems to work for your page:

table{clear:both;}
li{float:left; width:15em; margin-left:1em;}

Adjust the width and margin if you want it more spread out or something.

Rather than displaying 2 columns, it displays in as many as fits nicely
across the page, which is even better. The only downside I can see is
that the items are alphabetically listed across the page, rather than in
each column, but I don't think it's a big issue. YMMV.
 
M

Mark Parnell

Previously in alt.html said:
Okay. But the list of names is an Unordered list <ul>, not a table. So this
code needs to be modified?

No, the clear on the table is because for some reason you have the
headings in tables. Without it the subsequent lists flow across the page
instead of going underneath the previous ones.

A better solution of course would be to mark up the headings as headings
instead of tables.
 
D

Don Wiss

Hi Mark,

No, the clear on the table is because for some reason you have the
headings in tables. Without it the subsequent lists flow across the page
instead of going underneath the previous ones.

Headings in tables? I'm self taught in HTML. I used to look at how other
web pages did things. Now there is an HTML 4.01 specification web site I
found that I use. Then I ask. So I do things the way I do as that is
probably the only way I know.
A better solution of course would be to mark up the headings as headings
instead of tables.

?

Well I tried your code. It did work fine. But then after seeing it I
decided I'd rather have the alphabet go down the columns. So I split into a
two column table. It was pretty easy to do. The code is being generated by
a program I wrote. I simply added another loop to the nest.

I played around with this virtual album being part of my picture albums,
but as you noted forwarding the domain name into it didn't work well. So I
redesigned the code to work from its own domain. So now
www.foragingpictures.com is real. Just it's a virtual album.

Don <www.donwiss.com> (e-mail link at home page bottom).
 
M

Mark Parnell

Previously in alt.html, Don Wiss <donwiss@no_spam.com> said:

[http://www.foragingpictures.com/]
Headings in tables?

Yes:

<table>
<td nowrap><big><b><a name="E">Edible (111)</a></big></b></td>
</table>

This is a heading, isn't it?
I'm self taught in HTML.

Aren't we all? ;-)
I used to look at how other
web pages did things.

As you have probably worked out, unfortunately most pages are not well
written. :-(
Now there is an HTML 4.01 specification web site I
found that I use.
http://www.w3.org/TR/html4/struct/global.html#h-7.5.5

Then I ask. So I do things the way I do as that is
probably the only way I know.

<h1>ForagingPictures.com</h1>
....
<h2>Edible (111)</h2>
....
etc.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,904
Latest member
HealthyVisionsCBDPrice

Latest Threads

Top