Skip to main content
N
Newsgroup_User
Inspiring
October 2, 2008
Question

How to make two column list from array?

  • October 2, 2008
  • 14 replies
  • 895 views
Hi All,

I want to display an unordered list, generated by an array, in two
columns. How can this be done?

> <ul>
> <?php
> // take text field and create array using explode
> $farray = explode(', ', $row_fieldArray['features']);
> // loop through the array to process each line
> foreach ($farray as $value) {
> // output each line as a <li> element
> echo "<li> $value </li>"; }
> ?>
> </ul>

I thought of enclosing the <ul> in a width constrained div and setting
the <li> to float left, but I know that shorter length <li> elements
will cause more bullets per "line" than longer ones. How can I create a
two or three column list of bullet points?

TIA

Brett
This topic has been closed for replies.

14 replies

N
Newsgroup_UserAuthor
Inspiring
October 4, 2008
.oO(Joe Makowiec)

>On 04 Oct 2008 in macromedia.dreamweaver.appdev, Michael Fesser wrote:
>
>> OK, here we go:
>>
>> http://mfesser.de/test/tracks.html
>>
>> This was part of an eBay auction a while ago. The links don't work,
>> because the samples are not online anymore. In Firefox it will be
>> rendered in two columns, all other browsers just show a normal list.
>
>Thanks! That's easy.

You're welcome.

>Works as advertised (sort of - if you go too
>narrow with a browser window, the columns overlap).

Quite possible. But such little problems should be solvable ('min-width'
for example). I haven't tried it any further since then, but maybe I'll
play with it again if I should need such a listing somewhere.

Micha
N
Newsgroup_UserAuthor
Inspiring
October 4, 2008
On 04 Oct 2008 in macromedia.dreamweaver.appdev, Michael Fesser wrote:

> .oO(Michael Fesser)
>
>>It was a normal ordered list with two special CSS properties (Mozilla-
>>only until now). I've found the old page and will put a short example
>>online the next days.
>
> OK, here we go:
>
> http://mfesser.de/test/tracks.html
>
> This was part of an eBay auction a while ago. The links don't work,
> because the samples are not online anymore. In Firefox it will be
> rendered in two columns, all other browsers just show a normal list.

Thanks! That's easy. Works as advertised (sort of - if you go too
narrow with a browser window, the columns overlap).

--
Joe Makowiec
http://makowiec.net/
Email: http://makowiec.net/contact.php
N
Newsgroup_UserAuthor
Inspiring
October 4, 2008
.oO(Michael Fesser)

>It was a normal ordered list with two special CSS properties (Mozilla-
>only until now). I've found the old page and will put a short example
>online the next days.

OK, here we go:

http://mfesser.de/test/tracks.html

This was part of an eBay auction a while ago. The links don't work,
because the samples are not online anymore. In Firefox it will be
rendered in two columns, all other browsers just show a normal list.

Micha
N
Newsgroup_UserAuthor
Inspiring
October 3, 2008
On 03 Oct 2008 in macromedia.dreamweaver.appdev, Brett wrote:

> Anyway, play around with it to see what the future looks like.

Thanks!

--
Joe Makowiec
http://makowiec.net/
Email: http://makowiec.net/contact.php
N
Newsgroup_UserAuthor
Inspiring
October 3, 2008
Joe,

A while back I fooled around with CSS3 column support, here is an
excerpt of my stylesheet and markup (I'm only including one <li> element
for brevity sake).

body {
width: 92%;
min-width: 640px;
margin: auto;
}
h1 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 1.5em;
}
h2 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 1.25em;
}
div#content {
width: 100%;
border: thin solid black;
}
ul {
padding: 1em 2em;
column-width: 18em;
column-gap:25px;
list-style-type:none;

-moz-column-width: 18em;
-moz-column-gap: 25px;
-moz-column-rule: thin solid black;
}
li {
margin-top:1em;
}
</style>
</head>

<body>
<div id="content">
<ul>
<h1>Primary headline.</h1>
<li>Placerat vel magna nonummy demonstraverunt lobortis. Luptatum soluta
vel nihil sollemnes habent. Ipsum fiant eleifend legentis insitam
suscipit. In exerci delenit eodem ad iusto. Formas lobortis processus
mirum litterarum littera. Illum mazim typi ut est aliquam. Qui claritas
vel qui tempor cum. Quarta tation augue dolor dignissim duis.</li>

In Firefox, this displays as either two or three or more columns
depending on the width of the browser viewport. The min-width
declaration prevents it from collapsing to one column. You must use the
-moz prefix in your declaration, the normal one is for other browsers,
if and when they decide to support it so it's good to include it now.
It is exciting to see the columns of text re-flow as the browser window
resizes, but you can end up with widows and orphans. I think they are
working on some fixes for that, but which browsers will implement it and
when is always the question.

Anyway, play around with it to see what the future looks like.

Brett


N
Newsgroup_UserAuthor
Inspiring
October 3, 2008
On 02 Oct 2008 in macromedia.dreamweaver.appdev, Michael Fesser wrote:

> It was a normal ordered list with two special CSS properties (Mozilla-
> only until now). I've found the old page and will put a short example
> online the next days.

Thanks!

--
Joe Makowiec
http://makowiec.net/
Email: http://makowiec.net/contact.php
N
Newsgroup_UserAuthor
Inspiring
October 3, 2008
.oO(Joe Makowiec)

>On 02 Oct 2008 in macromedia.dreamweaver.appdev, Michael Fesser wrote:
>
>> .oO(Joe Makowiec)
>>
>>>On 02 Oct 2008 in macromedia.dreamweaver.appdev, Michael Fesser
>>>wrote:
>>>
>>>> True. But I've already played around a bit with it. I tried it on
>>>> track listings of music CDs. In most browsers it was just a single
>>>> list, but FF showed it as a two-column list. Looked good.
>>>
>>>Got a sample?
>>
>> Hmm, not online anymore. I think I still have the CSS somewhere.
>> Would you like to see a live example or just the HTML/CSS?
>
>Either way. I suppose from your description that the HTML would be just
>a straight ul? The difference is in the CSS?

It was a normal ordered list with two special CSS properties (Mozilla-
only until now). I've found the old page and will put a short example
online the next days.

Micha
N
Newsgroup_UserAuthor
Inspiring
October 3, 2008
On 02 Oct 2008 in macromedia.dreamweaver.appdev, Michael Fesser wrote:

> .oO(Joe Makowiec)
>
>>On 02 Oct 2008 in macromedia.dreamweaver.appdev, Michael Fesser
>>wrote:
>>
>>> True. But I've already played around a bit with it. I tried it on
>>> track listings of music CDs. In most browsers it was just a single
>>> list, but FF showed it as a two-column list. Looked good.
>>
>>Got a sample?
>
> Hmm, not online anymore. I think I still have the CSS somewhere.
> Would you like to see a live example or just the HTML/CSS?

Either way. I suppose from your description that the HTML would be just
a straight ul? The difference is in the CSS?

--
Joe Makowiec
http://makowiec.net/
Email: http://makowiec.net/contact.php
N
Newsgroup_UserAuthor
Inspiring
October 2, 2008
.oO(Joe Makowiec)

>On 02 Oct 2008 in macromedia.dreamweaver.appdev, Michael Fesser wrote:
>
>> True. But I've already played around a bit with it. I tried it on track
>> listings of music CDs. In most browsers it was just a single list, but
>> FF showed it as a two-column list. Looked good.
>
>Got a sample?

Hmm, not online anymore. I think I still have the CSS somewhere.
Would you like to see a live example or just the HTML/CSS?

Micha
N
Newsgroup_UserAuthor
Inspiring
October 2, 2008
Micha,

In this case it is only text, which is a feature list and will most
likely be short phrases, so the first solution will be fine. As you
pointed out, this would really only work with an unordered list, as an
ordered list will appear out of order. Furthermore, I think limiting it
to a two-column list is wise since the "gaps" issue compounds as more
columns are added.

Brett
Show more replies
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices