From this day, I hate tables..

[Marcus Forsberg]

Hi guys!

I'm rewriting the memberlist and will package the end result as a new mod.

Everything is done, except this small problem.

Take a look at the attached image.
As you may see, the fifth box, "Test", is pushed outside the background table.
I want it to display 4 boxes in each row, and then start a new row.
I just can't figure it out. It's probably simple, as all of my question.
I appreciate any help, and of course comments and critic on the look of the new mlist.

File attached.

[Antechinus]

Can't help you, but tables are great. The info center on the new SMF 2b4 default theme would actually be better if coded in tables. I'm thinking of posting a bug report about it.

ETA: Actually this might help you. I used it to get multiple child boards listed in columns of preset lengths. With a slight alteration I imagine it could be used to restrict the table rows.

http://www.simplemachines.org/community/index.php?topic=245358.0

[Charles Hill]

It's just not good to do a lot of heavy css to tables.  Tables should just be used to organize information... not be used as the crux for a design scheme.

[Marcus Forsberg]

Can't help you, but tables are great. The info center on the new SMF 2b4 default theme would actually be better if coded in tables. I'm thinking of posting a bug report about it.

ETA: Actually this might help you. I used it to get multiple child boards listed in columns of preset lengths. With a slight alteration I imagine it could be used to restrict the table rows.

http://www.simplemachines.org/community/index.php?topic=245358.0

Thank's for the tip. Might be hard to customize that code for this code though:

Code Select Expand

// Display links to view all/search.
if (!empty($settings['use_tabs']))
{
echo '
<table cellpadding="0" cellspacing="0" border="0" style="margin-left: 10px;">
<tr>
<td class="mirrortab_first">&nbsp;</td>';

foreach ($context['sort_links'] as $link)
{
if ($link['selected'])
echo '
<td class="mirrortab_active_first">&nbsp;</td>
<td valign="top" class="mirrortab_active_back">
<a href="' . $scripturl . '?action=mlist' . (!empty($link['action']) ? ';sa=' . $link['action'] : '') . '">', $link['label'], '</a>
</td>
<td class="mirrortab_active_last">&nbsp;</td>';
else
echo '
<td valign="top" class="mirrortab_back">
<a href="' . $scripturl . '?action=mlist' . (!empty($link['action']) ? ';sa=' . $link['action'] : '') . '">', $link['label'], '</a>
</td>';
}

echo '
<td class="mirrortab_last">&nbsp;</td>
</tr>
</table>
<div class="tborder">';
}
else
{
echo '
<div class="bordercolor" style="padding: 1px;">
<div class="titlebg" style="padding: 4px 4px 4px 10px;">';
$links = array();
foreach ($context['sort_links'] as $link)
$links[] = ($link['selected'] ? '<img src="' . $settings['images_url'] . '/selected.gif" alt="&gt;" /> ' : '') . '<a href="' . $scripturl . '?action=mlist' . (!empty($link['action']) ? ';sa=' . $link['action'] : '') . '">' . $link['label'] . '</a>';

echo '
', implode(' | ', $links), '
</div>
</div>
<div class="bordercolor" style="padding: 1px">';
}

echo '

<div class="windowbg" align="center" style="padding-bottom: 1ex;">
<table width="440" border="0" cellpadding="0" cellspacing="0">';

// Display page numbers.
if (!isset($context['old_search']))
echo '
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>', $txt['pages'], ': ', $context['page_index'], '</td>
</tr>
</table>';

// Assuming there are members loop through each one displaying their data.
if (!empty($context['members']))
{
echo'
<table cellpadding="3" cellspacing="2" align="center"><tr>';

foreach ($context['members'] as $member)
{ echo'
<td><table width="200" border="0" class="bordercolor">


<tr>';
// Box header containing the usename and current status.
echo'
<td class="catbg">', $member['link'], ' ', $context['can_send_pm'] ? '<a href="' . $member['online']['href'] . '" title="' . $member['online']['text'] . '">' : '', $settings['use_image_buttons'] ? '<img src="' . $member['online']['image_href'] . '" alt="' . $member['online']['text'] . '" align="middle" />' : $member['online']['label'], $context['can_send_pm'] ? '</a>' : '', '</td>
</tr>
<tr class="windowbg2" height="170">
<td class="smalltext" style="line-height: 1.3; padding-bottom: 3ex;" align="center">';


// The avatar
echo'
', $member['avatar']['image'], '<br />';
// Membergroup
echo'
                        <b>', empty($member['group']) ? $member['post_group'] : $member['group'], '</b><br />';

// Number of posts
if (!isset($context['disabled_fields']['posts']))
echo '
                        <b>', $txt['posts_made'] ,':</b> <i>', $member['posts'], '</i><br />';

// Date registered
echo '
                        <b><b>', $txt['date_registered'] ,':</b> <i>', $member['registered_date'], '</i><br />';

// Email
echo '
                        <b>', $member['show_email'] == 'no' ? '' : '<a href="' . $scripturl . '?action=emailuser;sa=email;uid=' . $member['id'] . '" rel="nofollow"><img src="' . $settings['images_url'] . '/email_sm.gif" alt="' . $txt['email'] . '" title="' . $txt['email'] . ' ' . $member['name'] . '" /></a>', '</b>';

// Website, if any.
if (!isset($context['disabled_fields']['website']))
echo '
                        <b>', $member['website']['url'] != '' ? '<a href="' . $member['website']['url'] . '" target="_blank" class="new_win"><img src="' . $settings['images_url'] . '/www.gif" alt="' . $member['website']['title'] . '" title="' . $member['website']['title'] . '" /></a>' : '', '</b>';
// Aim, if specified.
if (!isset($context['disabled_fields']['aim']))
echo '
                        <b>', $member['aim']['link'], '</b>';

// Yim, if specified.
if (!isset($context['disabled_fields']['yim']))
echo '
                        <b>', $member['yim']['link'], '</b>';

// MSN, if specified.
if (!isset($context['disabled_fields']['msn']))
echo '
                        <b>', $member['msn']['link'], '</b>';

// ICQ, if specified.
if (!isset($context['disabled_fields']['icq']))
echo '
                        <b>', $member['icq']['link'], '</b>';

echo'

</td>
</tr>

</table></td>';




}

}

echo'
</tr></table>';

// Display page numbers again.
if (!isset($context['old_search']))
echo '
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>', $txt['pages'], ': ', $context['page_index'], '</td>
</tr>
</table>';

echo'
</table>
</div>
</div>';
}

[Antechinus]

Yeah that looks kinda mind boggling. Anyway this bit from the last post there is the crux of it:

Code Select Expand

{
                  echo '
                     </td></tr><tr>

                     <td class="middletext" valign="top">';                 


                        for(; $child_counter < ceil(3); $child_counter++)


                              echo $children[$child_counter], '<br/>';

               }

That is what sets the limit to the number of child boards in the column. As you can see by looking at the rest of the code in that post subsequent columns are done in a similar fashion. Admittedly the problem you'll have with a memberlist is that there will be stacks of rows to deal with, so you'll need a code that automatically starts a new row after a preset number instead of simply coding it for a preset number of rows with xxx items per row.

That shouldn't be hard to arrange for anyone fluent in php (which aint me). If you can point them at my example to start with it might speed things up.

ETA: Also note that this code was adapted (read: try anything that seems like a good idea until I found something that works) from the child board code in Dilber MC. That code automatically divides the child boards into two columns, based on how many child boards there are. So what you want is an amalgamation of the two, but applied to table rows rather than table cells.

[[SiNaN]]

I used something like this before:

Code Select Expand

<?php

$array = array(1,2,3,4,5,4,5,6,3,4);

echo '
<table>';

$row_check = 0;

foreach($array as $test)
{
if($row_check == 0)
echo '
<tr>';

echo '
<td>
', $test, '
</td>';

$row_check++;

if($row_check == 4)
{
echo '
</tr>';
$row_check = 0;
}
}

if(count($array) % 4 != 0)
{
$empty_cells = 4 - (count($array) % 4);

while($empty_cells > 0)
{
echo '
<td>
&nbsp;
</td>';
$empty_cells--;
}

echo '
</tr>';
}

echo '
</table>';

?>

Don't have time to do that for your file, but I'm sure it will help you.

[Marcus Forsberg]

It seems interesting [SiNaN], I'll give it a try later. thanks!

[ディン1031]

Code Select Expand


      $c = 0;
      foreach ($context['members'] as $member)
      {
      $c++;
      if(($c%4) == 0)
      echo '</tr><tr>';


This is a way how i solve this, in that example on each 4th line there will be a new table row
Later you can easy detect the missing rows, and fill them with a colspan so that the table look nice.

(But the way of [SiNaN] is also a nice way *g*).

Bye
DIN1031

[Marcus Forsberg]

Wow! Thanks! I'll add you to the credits list when I release the mod