...

View Full Version : Troubles with unordered list



Jan
09-28-2004, 12:25 PM
Hey!

It's quite some time since I last posted here, but I've run into a slight problem. You see, I have this unordered list that I'd like to divide in two and align the second part beside the first part. They should form two columns with fixed widths. How would I - keeping in mind semantics - do this the best way? I've tried using extra div's, but I belive that there should be a more effective way, shouldn't there?

Thanks for any help!


~Jan

ronaldb66
09-28-2004, 03:26 PM
I think your best bet would be to create two separate lists. Since the ul element is block level by default, you should be able to float them next to eachother.

AaronW
09-28-2004, 05:28 PM
Fix the UL width to the sum of both column widths, and float all LI to the left.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>

<style type="text/css">
#twocol {
list-style-type: none;
padding: 0;
margin: 0;
width: 240px;
}
#twocol li.col1 {
background: red;
}
#twocol li {
background: blue;
}
#twocol li {
float: left;
width: 100px;
padding: 10px;
}
</style>
</head>

<body>
<ul id="twocol">
<li class="col1">Column one</li>
<li>Column two</li>
<li class="col1">Column one</li>
<li>Column two</li>
<li class="col1">Column one</li>
<li>Column two</li>
<li class="col1">Column one</li>
<li>Column two</li>
<li class="col1">Column one</li>
<li>Column two</li>
<li class="col1">Column one</li>
<li>Column two</li>
<li class="col1">Column one</li>
<li>Column two</li>
<li class="col1">Column one</li>
<li>Column two</li>
<li class="col1">Column one</li>
<li>Column two</li>
</ul>
</body>
</html>

Eskimo
09-28-2004, 06:24 PM
While AaronW's suggestion will work just fine, here is another option that does not require you to set class's on each element (okay....half of them). In order to implement this you may want to assign the list an ID and run it that way. You can set the widths on any of the elements you wish.


ul {
list-style-type:none;
width:300px;
padding:0;
}
li {
float:left;
margin:4px;
border: 1px solid #0f0;
padding:2px;
width: 120px;
}

EDIT
This can be used with the code AaronW has above. Or any other list for that matter.

Also edited to reflect my brain fart.

AaronW
09-28-2004, 07:49 PM
Actually your method is essentially the same as mine, only yours doesn't have a width of the ul parent, and so you don't get two columns; you get a bunch of left-floated list items which form a horizontal line of themselves.

My method doesn't require a class on every other list element either. I only did that to demonstrate to the original poster how they'd go about giving each column its own colour.

Eskimo
09-28-2004, 08:43 PM
Yes the two are essentially the same. I had the width on the parent in CSSEDIT at one point, I guess I didn't get a fresh copy before I pasted it over here.

]|V|[agnus
09-29-2004, 05:17 AM
whenever my unordered lists get out of order, i just say "good job!"

tsguitar2004
09-29-2004, 05:20 AM
I just have to add that *that* was funny, Magnus.
-ts

Jan
09-29-2004, 01:34 PM
Thanks for all your replies guys! I actually found the method Eskimo presented as the best for my situation.


~Jan



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum