Is there a way to put list items across multiple columns, without getting into scripting, by only changing the style applied?Is something like this what you're talking about?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'>
<title>Untitled</title>
<style type="text/css">
<!--
li {
display: inline;
padding-right: 1.5em;
}
-->
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</body>
</html>That's kind of what I'm looking for, but I have anywhere from 1-15 list items, depending on the page, and would like them in a more columnar layout. The order isn't a big deal, I just want it to look neat. It is for a list of links at the bottom of a page, if that helps.
I would like the output to look similar to this:
Item 1 Item 4 Item 7
Item 2 Item 5 Item 8
Item 3 Item 6 Item 9This seems to work in both IE6 and FF:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'>
<title>Untitled</title>
<style type="text/css">
<!--
div.list {
float: left;
margin: 0;
padding: 0;
}
ul.list {
margin: 0 3em 0 1em;
}
-->
</style>
</head>
<body>
<div class=list>
<div class=list>
<ul class=list>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<ul class=list>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
<ul class=list>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
</ul>
</body>
</html>In that case you might be better off floating them and setting a consistent width. That way you'll get your automatic columns.Setting a consistent width ended up working the best. Here's what I did:
float: left;
padding-right: 1em;
width: 15em;
.
This gave me three columns of links across the bottom of my page.Ok, well, this didn't quite work the way I need it to. It did align the elements in columns, but it spanned them across the page instead of top to bottom.
Kind of like this:
item1 item2 item3
item4 item5 item6
item7 item8 item9
What I want is this:
item1 item4 item7
item2 item5 item8
item3 item6 item9
The style will be applied to multiple pages and changing the layout of each page is not feasible. Any ideas?There was a recent ALA article about this topic: <!-- m --><a class="postlink" href="http://alistapart.com/articles/layeredfudge/">http://alistapart.com/articles/layeredfudge/</a><!-- m -->
His conclusion is to use the method proposed by NogDog, above.Unfortunately, that means rewriting all of the pages. But if that's the only way to go about it, then I guess that's what I've got to do.
Hmm... since I'm using ColdFusion as well, perhaps I need to look at incorporating some server side scripting, which I was hoping to avoid.
Oh well, thanks guys
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'>
<title>Untitled</title>
<style type="text/css">
<!--
li {
display: inline;
padding-right: 1.5em;
}
-->
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</body>
</html>That's kind of what I'm looking for, but I have anywhere from 1-15 list items, depending on the page, and would like them in a more columnar layout. The order isn't a big deal, I just want it to look neat. It is for a list of links at the bottom of a page, if that helps.
I would like the output to look similar to this:
Item 1 Item 4 Item 7
Item 2 Item 5 Item 8
Item 3 Item 6 Item 9This seems to work in both IE6 and FF:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'>
<title>Untitled</title>
<style type="text/css">
<!--
div.list {
float: left;
margin: 0;
padding: 0;
}
ul.list {
margin: 0 3em 0 1em;
}
-->
</style>
</head>
<body>
<div class=list>
<div class=list>
<ul class=list>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<ul class=list>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
<ul class=list>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
</ul>
</body>
</html>In that case you might be better off floating them and setting a consistent width. That way you'll get your automatic columns.Setting a consistent width ended up working the best. Here's what I did:
float: left;
padding-right: 1em;
width: 15em;
.
This gave me three columns of links across the bottom of my page.Ok, well, this didn't quite work the way I need it to. It did align the elements in columns, but it spanned them across the page instead of top to bottom.
Kind of like this:
item1 item2 item3
item4 item5 item6
item7 item8 item9
What I want is this:
item1 item4 item7
item2 item5 item8
item3 item6 item9
The style will be applied to multiple pages and changing the layout of each page is not feasible. Any ideas?There was a recent ALA article about this topic: <!-- m --><a class="postlink" href="http://alistapart.com/articles/layeredfudge/">http://alistapart.com/articles/layeredfudge/</a><!-- m -->
His conclusion is to use the method proposed by NogDog, above.Unfortunately, that means rewriting all of the pages. But if that's the only way to go about it, then I guess that's what I've got to do.
Hmm... since I'm using ColdFusion as well, perhaps I need to look at incorporating some server side scripting, which I was hoping to avoid.
Oh well, thanks guys