Customizing SMF > SMF Coding Discussion

Echoing a code left to right in columns

<< < (2/8) > >>

Antechinus:
Ok. Two columns within each user block? Easiest way to do that is with css. Just set each <li> to be 50% width and float :left; That will make them stack in two columns. I'd also add box-sizing so you don't have any worries about padding in the list elements:


--- Code: ---<li> {
float: left;
width: 50%;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
--- End code ---

Liam_michael:

--- Quote from: Antechinus on April 06, 2012, 09:23:16 PM ---Ok. Two columns within each user block? Easiest way to do that is with css. Just set each <li> to be 50% width and float :left; That will make them stack in two columns. I'd also add box-sizing so you don't have any worries about padding in the list elements:


--- Code: ---<li> {
float: left;
width: 50%;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
--- End code ---

--- End quote ---

Antechinus, I don't think you're getting what I want...

Generally, code gets displayed one after another like this:

1
2
3
4

I want my data to be displayed in columns. You're right about the listing thing <li>, but how do I incorporate that into the php?

I tried <table>

foreach(data)

{<tr><td>data</td></tr>}

</table>

But this is putting the data in one long row: 1 2 3 4...

I want it to break into new rows after every two:

1 2
3 4.

Antechinus:
Yes but exactly which data are you talking about? I asked if you wanted two rows of two user blocks each, but apparently you didn't so the next assumption was that you wanted the list data in two columns within each user block. If that's not what you want either, then I'm stumped. How about mocking up a screenshot of what you do want? Either that or be a lot more specific. :)

Liam_michael:
The code I provided is an SSI function that pulls out all the members in group x, for instance. As you can tell from this link (http://biology-forums.com/index.php?action=Tester), there are currently 4 members in group x. The code currently has been designed to give each member their own <td></td>, so in other words, their own column. That's fine, but as you can tell, if you exceed four members, the information will all get squished together because essentially the ssi function is continually spitting out more <td>'s inside the <tr>. I want to program the function so that after every two members it spits out, it starts a new <tr>. I've read around that you have to use the array_chunk() function somehow (http://www.suburban-glory.com/blog?page=64).

I've tried to be as informative as I can, and this is my last attempt at explaining it :(

Antechinus:
Ok, I get it now. I'd still do that with css myself. Using tables for layout is very old school and not good practice, so I'd mark it up as a big unordered list. Then you just do the same trick with the <li> bits: set 'em 50% wide and float: left;. Instant two blocks per row for as long as you want to keep stacking them up. :)

I'll write out the markup and basic css for you a bit later. It's a piece of cake once you know how. Hell of a lot easier than templating this bloody software from scratch anyway. :D

Navigation

[0] Message Index

[#] Next page

[*] Previous page