Wrapping an unordered list into multiple columns? - GoFuckYourself.com

Angry Jew Cat - Banned for Life · 01-27-2010, 04:35 AM

How do I? So the list goes so far down, then wraps around again?

So if I wanted to display an alphabetically ordered list, across 3 columns, they would appear like this.
A_______D________G
B_______E________H
C_______F________I

Know what I mean?

georgeyw · 01-27-2010, 05:35 AM

info from a db?

easily done in a few different ways - whynot use css - far easier and cleaner.

total num rows / ceil 3

gives number of rows for each column

load up info in an array

1____________(num = column1 + num rums)____________(nm = col2 + num rows)

etc......

lots of ways to do it

RazorSharpe · 01-27-2010, 05:43 AM

Quote:

Originally Posted by Angry Jew Cat

How do I? So the list goes so far down, then wraps around again?

So if I wanted to display an alphabetically ordered list, across 3 columns, they would appear like this.
A_______D________G
B_______E________H
C_______F________I

Know what I mean?

like this?
http://sdezine.com/jewcat.html

RazorSharpe · 01-27-2010, 06:13 AM

or ....
http://sdezine.com/jewcat2.html

StaceyJo · 01-27-2010, 06:46 AM

Quote:

Originally Posted by RazorSharpe

like this?
http://sdezine.com/jewcat.html

Great !

Angry Jew Cat - Banned for Life · 01-29-2010, 02:07 AM

Quote:

Originally Posted by RazorSharpe

or ....
http://sdezine.com/jewcat2.html

Yes, that is how I'd like it, what I'm wrapping is a list of tags from wordpress. Maybe I should have mentioned that in the first post. I was just curious if their was a control via CSS which would automatically wrap the list into a new column, and display it like so across a specific number of columns.

JD · 01-29-2010, 02:16 AM

float the li left/right and assign it a width that's about 1/3rd of the area it'll be in and they'll fall in line.

Angry Jew Cat - Banned for Life · 01-29-2010, 02:22 AM

Quote:

Originally Posted by JD

float the li left/right and assign it a width that's about 1/3rd of the area it'll be in and they'll fall in line.

might be harassing you in a few

JD · 01-29-2010, 02:44 AM

Quote:

Originally Posted by Angry Jew Cat

might be harassing you in a few

be gentle I'm a virgin

Voodoo · 01-29-2010, 02:50 AM

Tables. Lots of Tables. Nested Tables inside other Nested Tables.

Angry Jew Cat - Banned for Life · 01-29-2010, 02:51 AM

Quote:

Originally Posted by Voodoo

Tables. Lots of Tables. Nested Tables inside other Nested Tables.

That sounds like an awful big headache to me.

Angry Jew Cat - Banned for Life · 01-29-2010, 02:52 AM

Quote:

Originally Posted by JD

be gentle I'm a virgin

Don't worry, I've been taking it easy on the sauce tonight dumpling.

Thanks.

bns666 · 01-29-2010, 03:17 AM

nice tip, needed something like this awhile ago.

redwhiteandblue · 01-29-2010, 03:28 AM

Quote:

Originally Posted by JD

float the li left/right and assign it a width that's about 1/3rd of the area it'll be in and they'll fall in line.

That'll sort them into rows not columns.

fris · 01-29-2010, 07:12 AM

Quote:

Originally Posted by Angry Jew Cat

Yes, that is how I'd like it, what I'm wrapping is a list of tags from wordpress. Maybe I should have mentioned that in the first post. I was just curious if their was a control via CSS which would automatically wrap the list into a new column, and display it like so across a specific number of columns.

I would make a custom tag cloud

http://briancray.com/2009/09/04/word...-php-function/

modify it to fit your needs

JD · 01-29-2010, 02:30 PM

Quote:

Originally Posted by redwhiteandblue

That'll sort them into rows not columns.

right, but with what he's getting the data from there's not much choice to do it into columns. that would require multiple UL's

cyco_cc · 01-29-2010, 02:35 PM

Quote:

Originally Posted by Voodoo

Tables. Lots of Tables. Nested Tables inside other Nested Tables.

If you're not nesting at least 5 tables deep, you're doing it wrong, right?!

borked · 01-29-2010, 03:26 PM

why can't you do it in a table? Why does it have to be an <UL>?

From a mysql query, let's say you retrieve 20 results (for nice round numbers for this eg) and you want 4 columns.

Then you know there will be 5 rows.

Code:

for ($i=0; $i<$numRows; $i++) {

  echo "<tr>";

  for ($k=0; $k<$numCols; $k++) {
    $key = ($k * $numRows) + $i;
    echo "<td>".$content[$key]."</td>
  }
  
  echo "</tr>";
}

The code above will fit your 2x3, 3x4, 3x3, 4x5 anything stuff. It just won't handle things having eg 21 results - you need standard code to add cell padding for that.

Kind of like taking a horse to water, but you can't make it drink ;)

borked · 01-29-2010, 03:37 PM

yup, this works nice

Code:

<?php
$content = array(
'a',
'b',
'c',
'd',
'e',
'f',
'g',
'h',
'i',
'j',
'k',
'l',
'm',
'n',
'o',
'p',
'q',
'r',
's',
't',
);

$numRows = 4;
$numCols = 5;

for ($i=0; $i<$numRows; $i++) {

  echo "<tr>";

  for ($k=0; $k<$numCols; $k++) {
    $key = ($k * $numRows) + $i;
    echo "<td>".$content[$key]."</td>";
  }

  echo "</tr>\n";
}
?>

Voodoo · 01-29-2010, 05:14 PM

Pure CSS:

Code:

<ul style="float: left; width: 21em; margin: 20px 0 1em 0; padding: 0; list-style: none; font-size: 1em; line-height: 1.3em;">
  <li style="float: left; width: 7em; margin: 0; padding: 0; list-style: none;">Cake</li>
  <li style="float: left; width: 7em; margin: 0; padding: 0; list-style: none;">Pie</li>
  <li style="float: left; width: 7em; margin: 0; padding: 0; list-style: none;">Cookies</li>
  <li style="float: left; width: 7em; margin: 0; padding: 0; list-style: none;">Candy</li>
  <li style="float: left; width: 7em; margin: 0; padding: 0; list-style: none;">Pudding</li>
  <li style="float: left; width: 7em; margin: 0; padding: 0; list-style: none;">Ice Cream</li>
  <li style="float: left; width: 7em; margin: 0; padding: 0; list-style: none;">Chocolate</li>
  <li style="float: left; width: 7em; margin: 0; padding: 0; list-style: none;">Vanilla</li>
  <li style="float: left; width: 7em; margin: 0; padding: 0; list-style: none;">Cherry</li>
</ul>

Angry Jew Cat - Banned for Life · 01-29-2010, 05:32 PM

Quote:

Originally Posted by Voodoo

Pure CSS:

Code:

<ul style="float: left; width: 21em; margin: 20px 0 1em 0; padding: 0; list-style: none; font-size: 1em; line-height: 1.3em;">
  <li style="float: left; width: 7em; margin: 0; padding: 0; list-style: none;">Cake</li>
  <li style="float: left; width: 7em; margin: 0; padding: 0; list-style: none;">Pie</li>
  <li style="float: left; width: 7em; margin: 0; padding: 0; list-style: none;">Cookies</li>
  <li style="float: left; width: 7em; margin: 0; padding: 0; list-style: none;">Candy</li>
  <li style="float: left; width: 7em; margin: 0; padding: 0; list-style: none;">Pudding</li>
  <li style="float: left; width: 7em; margin: 0; padding: 0; list-style: none;">Ice Cream</li>
  <li style="float: left; width: 7em; margin: 0; padding: 0; list-style: none;">Chocolate</li>
  <li style="float: left; width: 7em; margin: 0; padding: 0; list-style: none;">Vanilla</li>
  <li style="float: left; width: 7em; margin: 0; padding: 0; list-style: none;">Cherry</li>
</ul>

This is essentially the same thing me and JD went over last night, and is what I have decided to settle on for the moment. While it sorts into rows and not columns, it will still do, because everything else is far to complicated for my code-illiterate ass...

The Truth Hurts · 01-29-2010, 05:37 PM

Quote:

Originally Posted by Voodoo

Pure CSS:

Code:

<ul style="float: left; width: 21em; margin: 20px 0 1em 0; padding: 0; list-style: none; font-size: 1em; line-height: 1.3em;">
  <li style="float: left; width: 7em; margin: 0; padding: 0; list-style: none;">Cake</li>
  <li style="float: left; width: 7em; margin: 0; padding: 0; list-style: none;">Pie</li>
  <li style="float: left; width: 7em; margin: 0; padding: 0; list-style: none;">Cookies</li>
  <li style="float: left; width: 7em; margin: 0; padding: 0; list-style: none;">Candy</li>
  <li style="float: left; width: 7em; margin: 0; padding: 0; list-style: none;">Pudding</li>
  <li style="float: left; width: 7em; margin: 0; padding: 0; list-style: none;">Ice Cream</li>
  <li style="float: left; width: 7em; margin: 0; padding: 0; list-style: none;">Chocolate</li>
  <li style="float: left; width: 7em; margin: 0; padding: 0; list-style: none;">Vanilla</li>
  <li style="float: left; width: 7em; margin: 0; padding: 0; list-style: none;">Cherry</li>
</ul>

wow... not solving the problem, and defeating half the purpose of css all rolled into one.

Voodoo · 01-29-2010, 07:25 PM

Quote:

Originally Posted by The Truth Hurts

wow... not solving the problem, and defeating half the purpose of css all rolled into one.

Apparently, you don't quite understand.

The code I posted was not a full solution. It was an example of the columns. The inline-css is just for demonstration purposes. Obviously, someone would remove this and put it in their stylesheet.

The other thing that would need to be done is some php for/if/while loops to get the data into colunns, not rows, similar to what bork posted, but not using tables.

Try again.

The Truth Hurts · 01-29-2010, 07:55 PM

Quote:

Originally Posted by Voodoo

Try again.

No need....

PS, AJC.. you can handle this with jquery...
see: http://codeasily.com/jquery/multi-co...st-with-jquery

JD · 01-29-2010, 08:26 PM

Quote:

Originally Posted by borked

why can't you do it in a table? Why does it have to be an <UL>?

From a mysql query, let's say you retrieve 20 results (for nice round numbers for this eg) and you want 4 columns.

Then you know there will be 5 rows.

Code:

for ($i=0; $i<$numRows; $i++) {

  echo "<tr>";

  for ($k=0; $k<$numCols; $k++) {
    $key = ($k * $numRows) + $i;
    echo "<td>".$content[$key]."</td>
  }
  
  echo "</tr>";
}

The code above will fit your 2x3, 3x4, 3x3, 4x5 anything stuff. It just won't handle things having eg 21 results - you need standard code to add cell padding for that.

Kind of like taking a horse to water, but you can't make it drink ;)

it's coming from WP so there's not quite as much room code wise

Hotrocket · 01-29-2010, 10:21 PM

I use this hack to display Categories in 2 columns, maybe you can apply it to Tags too?
http://www.blogohblog.com/10-wordpre...e-even-easier/
(2nd tutorial on the list)

MetaMan · 01-29-2010, 11:00 PM

BAH NOOBS

<style type="text/css">
#dog {
width: 750px;
float: left;
}
#dog ul {
margin: 0;
padding: 0;
float: left;
}
#dog li {
list-style-type: none;
float:left;
padding: 0;
margin: 0;
width: 250px;
}
.dogin {
width: 250px;
float: left;
}
</style>

<body>
<div id="dog">
<ul>

<div class="dogin">
<li>A</li>
<li>B</li>
<li>C</li>
</div>

<div class="dogin">
<li>D</li>
<li>E</li>
<li>F</li>
</div>

<div class="dogin">
<li>G</li>
<li>H</li>
<li>I</li>
</div>

</ul>
</div>
</body>
</html>

The Truth Hurts · 01-30-2010, 12:02 AM

Quote:

Originally Posted by MetaMan

BAH NOOBS

1.. that wouldn't validate in 100 years..
2... that's manually breaking up the list, which isn't what he 's looking to do...
3... who's the noob?

MetaMan · 01-30-2010, 12:40 AM

Quote:

Originally Posted by The Truth Hurts

1.. that wouldn't validate in 100 years..
2... that's manually breaking up the list, which isn't what he 's looking to do...
3... who's the noob?

1. i know the guy for years and have helped him for free many times, solving many of his problems
2. i know he has never gaven a fuck if it validates because it is his own page just as long as he gets helped
3. i call him noob like he calls me scammer as a joke
4. manually insert your own foot into your ass
5. mind your own business noob

MetaMan · 01-30-2010, 12:48 AM

Quote:

Originally Posted by The Truth Hurts

1.. that wouldn't validate in 100 years..
2... that's manually breaking up the list, which isn't what he 's looking to do...
3... who's the noob?

validating is for noobs like you who cant code cross browsers. no elements are broken so it does not affect the way a search engine will read your page.

you can wave your "validation panty flag" high and mighty all you want but at the end of the day when that code is viewed by the engine it makes 0 difference.

i bet your mom gets real impressed when you code a shit page and it validates but is broken in every browser. good for you...

noob.

The Truth Hurts · 01-30-2010, 01:13 AM

I was hand coding cross browser identical pages before you handed out your first order of supersized fries.

Next time when someone points out one of your many mistakes, maybe try and learn from it instead of responding like a child.

MetaMan · 01-30-2010, 09:09 AM

Quote:

Originally Posted by The Truth Hurts

I was hand coding cross browser identical pages before you handed out your first order of supersized fries.

Next time when someone points out one of your many mistakes, maybe try and learn from it instead of responding like a child.

the internet didnt exist before i was hand coding multiple browsers.

i love how you avoided my point about validation because you have trouble admitting you are wrong.

next time someone points out your flawed thinking learn from it.

potter · 01-30-2010, 09:50 AM

Quote:

Originally Posted by MetaMan

the internet didnt exist before i was hand coding multiple browsers.

i love how you avoided my point about validation because you have trouble admitting you are wrong.

next time someone points out your flawed thinking learn from it.

Dude, face it. You're not supposed to put a div inside of a list. In fact, a lot of browsers will even break the list if there is something like that in it. The only reason what you're saying MIGHT work in all the browsers is because of an inherent flaw in the way they currently render having a block level element inside of a list like that. Meaning, eventually - they will not render correctly.

In fact, the whole idea of what you're doing makes the list completely irrelevant and useless. He could pull out all the list code and just use the divs and it would still render the same. Not only are you breaking and voiding the list item to ALL major browsers, but you're negating the whole reason for him to be putting it into a list in the first place.

Sorry dude, but you're code is wrong, let alone invalid. The End.

potter · 01-30-2010, 09:52 AM

And what you want to do is possible with CSS3. However most browsers don't support it yet, so by using it you'd be loosing the rendering for every one of your visitors.

The Truth Hurts · 01-30-2010, 09:52 AM

Quote:

Originally Posted by MetaMan

the internet didnt exist before i was hand coding multiple browsers.

i love how you avoided my point about validation because you have trouble admitting you are wrong.

next time someone points out your flawed thinking learn from it.

I didn't avoid yout point.
It was as flawed as your code.
Simple.

Although your code may have worked..
It wasn't what he asked for.
He specifically asked for an AUTOMATIC solution...
Yours was a MANUAL hackjob.
There is a difference.

MetaMan · 01-30-2010, 10:07 AM

Quote:

Originally Posted by potter

Dude, face it. You're not supposed to put a div inside of a list. In fact, a lot of browsers will even break the list if there is something like that in it. The only reason what you're saying MIGHT work in all the browsers is because of an inherent flaw in the way they currently render having a block level element inside of a list like that. Meaning, eventually - they will not render correctly.

In fact, the whole idea of what you're doing makes the list completely irrelevant and useless. He could pull out all the list code and just use the divs and it would still render the same. Not only are you breaking and voiding the list item to ALL major browsers, but you're negating the whole reason for him to be putting it into a list in the first place.

Sorry dude, but you're code is wrong, let alone invalid. The End.

i never said it validated properly. i was trying to make a quick fix.

it does render properly though and that is my point. and there is no "eventually". i can bet we come back in 5 years and it will still render.

explain to me why it make the list irrelevant? the SE will see it is a list and organize its content.

my point about validation is people over worry about the wrong things when it comes to it. yes i should have written a better code but lets talk about this:

you can have a site that validates but have over 1000 extra divs.

maybe we should start a new thread about this. i want to find out peoples views on validation. The Truth Hurts can come in there and bash me there. we are kinda crowding this thread now.

MetaMan · 01-30-2010, 10:09 AM

Quote:

Originally Posted by The Truth Hurts

I didn't avoid yout point.
It was as flawed as your code.
Simple.

Although your code may have worked..
It wasn't what he asked for.
He specifically asked for an AUTOMATIC solution...
Yours was a MANUAL hackjob.
There is a difference.

lol it was. but why not say this. your post was an obvious jab at me thinking i was hating when indeed i was not.

i never read AUTOMATIC solution in this thread. please post where it says that. or else i would have tried something different.

i actually wanted to hear your opinion on validation.

The Truth Hurts · 01-30-2010, 10:29 AM

Quote:

Originally Posted by MetaMan

lol it was. but why not say this. your post was an obvious jab at me thinking i was hating when indeed i was not.

Your post starts off with "BAH NOOBS"...
sounds a bit like hating...

Quote:

Originally Posted by MetaMan

i never read AUTOMATIC solution in this thread. please post where it says that. or else i would have tried something different.

see:

Quote:

Originally Posted by Angry Jew Cat

I was just curious if their was a control via CSS which would automatically wrap the list into a new column, and display it like so across a specific number of columns.

Quote:

Originally Posted by MetaMan

i actually wanted to hear your opinion on validation.

I try and validate everything as much as possible.
Doesn't mean it always does. doesn't mean i don't make use of hacks when necessary.

MetaMan · 01-30-2010, 10:34 AM

Quote:

Originally Posted by The Truth Hurts

Your post starts off with "BAH NOOBS"...
sounds a bit like hating...

see:

I try and validate everything as much as possible.
Doesn't mean it always does. doesn't mean i don't make use of hacks when necessary.

was just a joke with him not a personal attack. its like when you got a buddy you have known for years and you tell him he is a complete idiot.

everyone is so uppity around here lately cant even joke around anymore.

AHH ok my bad didnt notice it. i was just trying to help out.

i just find alot of people misuse the reasoning behind validation. thats all i was trying to point out. i dont even run my pages through validation anymore im sure you dont as much either. after you have been coding for a while and do things "proper" it becomes less useful i find.

i think it is a bad stepping stone for people who just validate and think pages are proper. im sure you have seen many pages where it validates and the code hurts your brain. same with the SEs.

fris · 02-16-2010, 06:46 AM

Quote:

Originally Posted by Angry Jew Cat

How do I? So the list goes so far down, then wraps around again?

So if I wanted to display an alphabetically ordered list, across 3 columns, they would appear like this.
A_______D________G
B_______E________H
C_______F________I

Know what I mean?

i know this is an old post, but I found this yesterday

http://csswizardry.com/2010/02/mutip...-using-one-ul/

01-27-2010, 04:35 AM	#1
Angry Jew Cat - Banned for Life (felis madjewicus) Industry Role: Join Date: Jul 2006 Location: In Mom & Dad's Basement Posts: 20,368	Wrapping an unordered list into multiple columns? How do I? So the list goes so far down, then wraps around again? So if I wanted to display an alphabetically ordered list, across 3 columns, they would appear like this. A_______D________G B_______E________H C_______F________I Know what I mean?

01-27-2010, 05:35 AM	#2
georgeyw 58008 53773 Industry Role: Join Date: Jul 2005 Location: Australia Posts: 9,864	info from a db? easily done in a few different ways - whynot use css - far easier and cleaner. total num rows / ceil 3 gives number of rows for each column load up info in an array 1____________(num = column1 + num rums)____________(nm = col2 + num rows) etc...... lots of ways to do it __________________ TripleXPrint on Megan Fox "I would STILL suck her pussy until her face caved in. And then blow her up and do it again!"

01-27-2010, 06:13 AM	#4
RazorSharpe Confirmed User Industry Role: Join Date: Aug 2001 Location: Scotland Posts: 2,238	or .... http://sdezine.com/jewcat2.html __________________ Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning.

01-29-2010, 02:50 AM	#10
Voodoo ♥ ♦ ♣ ♠ Industry Role: Join Date: Sep 2002 Location: Porn Valley, CA Posts: 10,590	Tables. Lots of Tables. Nested Tables inside other Nested Tables. __________________ "I'm selflessly supporting the common good, but only coincidentally looking out for No.1."

01-29-2010, 03:17 AM	#13
bns666 Confirmed Fetishist Industry Role: Join Date: Mar 2005 Location: Fetishland Posts: 11,526	nice tip, needed something like this awhile ago. __________________ ⭐ CAM SODA ⭐ STRIPCHAT ⭐ ⭐ CHATURBATE ⭐ X LOVE CAM ⭐

01-29-2010, 02:16 AM	#7
JD Too lazy to set a custom title Industry Role: Join Date: Sep 2003 Posts: 22,651	float the li left/right and assign it a width that's about 1/3rd of the area it'll be in and they'll fall in line.

01-29-2010, 03:26 PM	#18
borked Totally Borked Industry Role: Join Date: Feb 2005 Posts: 6,284	why can't you do it in a table? Why does it have to be an <UL>? From a mysql query, let's say you retrieve 20 results (for nice round numbers for this eg) and you want 4 columns. Then you know there will be 5 rows. Code: for ($i=0; $i<$numRows; $i++) { echo "<tr>"; for ($k=0; $k<$numCols; $k++) { $key = ($k * $numRows) + $i; echo "<td>".$content[$key]."</td> } echo "</tr>"; } The code above will fit your 2x3, 3x4, 3x3, 4x5 anything stuff. It just won't handle things having eg 21 results - you need standard code to add cell padding for that. Kind of like taking a horse to water, but you can't make it drink ;) __________________ For coding work - hit me up on andy // borkedcoder // com (consider figuring out the email as test #1) All models are wrong, but some are useful. George E.P. Box. p202 Last edited by borked; 01-29-2010 at 03:30 PM..

01-29-2010, 10:21 PM	#26
Hotrocket Confirmed User Join Date: May 2004 Posts: 1,327	I use this hack to display Categories in 2 columns, maybe you can apply it to Tags too? http://www.blogohblog.com/10-wordpre...e-even-easier/ (2nd tutorial on the list)

01-29-2010, 11:00 PM	#27
MetaMan I AM WEB 2.0 Industry Role: Join Date: Jan 2003 Posts: 28,682	BAH NOOBS <style type="text/css"> #dog { width: 750px; float: left; } #dog ul { margin: 0; padding: 0; float: left; } #dog li { list-style-type: none; float:left; padding: 0; margin: 0; width: 250px; } .dogin { width: 250px; float: left; } </style> <body> <div id="dog"> <ul> <div class="dogin"> <li>A</li> <li>B</li> <li>C</li> </div> <div class="dogin"> <li>D</li> <li>E</li> <li>F</li> </div> <div class="dogin"> <li>G</li> <li>H</li> <li>I</li> </div> </ul> </div> </body> </html>

01-30-2010, 01:13 AM	#31
The Truth Hurts Zph7YXfjMhg Industry Role: Join Date: Nov 2002 Location: In Your Skull Posts: 15,293	I was hand coding cross browser identical pages before you handed out your first order of supersized fries. Next time when someone points out one of your many mistakes, maybe try and learn from it instead of responding like a child.

01-30-2010, 09:52 AM	#34
potter Confirmed User Industry Role: Join Date: Dec 2004 Location: Denver Posts: 6,559	And what you want to do is possible with CSS3. However most browsers don't support it yet, so by using it you'd be loosing the rendering for every one of your visitors. __________________