没有表三列类别布局

Question

I am working with some code and am hung up a bit on a certain piece. Hoping to find some help. I am using the open source WeBid Auction Script, and trying to eliminate some of the tables used in the layout. The following function is the code in question.

if (mysql_num_rows($result) == 0)
{
    // redirect to global categories list
    header ('location: browse.php?id=0');
    exit;
}
else
{
    // Retrieve the translated category name
    $par_id = $category['parent_id'];
    $TPL_categories_string = '';
    $crumbs = $catscontrol->get_bread_crumbs($category['left_id'], $category['right_id']);
    for ($i = 0; $i < count($crumbs); $i++)
    {
        if ($crumbs[$i]['cat_id'] > 0)
        {
            if ($i > 0)
            {
                $TPL_categories_string .= ' &gt; ';
            }
            $TPL_categories_string .= '<a href="' . $system->SETTINGS['siteurl'] . 'browse.php?id=' . $crumbs[$i]['cat_id'] . '">' . $category_names[$crumbs[$i]['cat_id']] . '</a>';
        }
    }

    // get list of subcategories of this category
    $subcat_count = 0;
    $query = "SELECT * FROM " . $DBPrefix . "categories WHERE parent_id = " . $id . " ORDER BY cat_name";
    $result = mysql_query($query);
    $system->check_mysql($result, $query, __LINE__, __FILE__);
    $need_to_continue = 1;
    $cycle = 1;

    $TPL_main_value = '';
    while ($row = mysql_fetch_array($result))
    {
        ++$subcat_count;

        if ($cycle == 1)
        {
            $TPL_main_value .= '<tr align="left">' . "
";

        }
        $sub_counter = $row['sub_counter'];
        $cat_counter = $row['counter'];
        if ($sub_counter != 0)
        {
            $count_string = ' (' . $sub_counter . ')';
        }
        else
        {
            if ($cat_counter != 0)
            {
                $count_string = ' (' . $cat_counter . ')';
            }
            else
            {
                $count_string = '';
            }
        }
        if ($row['cat_colour'] != '')
        {
            $BG = 'bgcolor=' . $row['cat_colour'];
        }
        else
        {
            $BG = '';
        }
        // Retrieve the translated category name
        $row['cat_name'] = $category_names[$row['cat_id']];
        $catimage = (!empty($row['cat_image'])) ? '<img src="' . $row['cat_image'] . '" border=0>' : '';
        $TPL_main_value .= "\t" . '<td ' . $BG . ' width="33%">' . $catimage . '<a href="' . $system->SETTINGS['siteurl'] . 'browse.php?id=' . $row['cat_id'] . '">' . $row['cat_name'] . $count_string . '</a></td>' . "
";

        ++$cycle;
        if ($cycle == 4)
        {

            $cycle = 1;
            $TPL_main_value .= '</tr>' . "
";
        }
    }

    if ($cycle >= 2 && $cycle <= 3)
    {
        while ($cycle < 4)
        {
            $TPL_main_value .= '    <td width="33%">&nbsp;</td>' . "
";
            ++$cycle;

        }
        $TPL_main_value .= '</tr>' . "
";
    }

Instead of parsing into a table, I want it to go into the content areas of the html below:

    <div class="colmask blogstyle4">
       <div class="colmid">
            <div class="colleft">
            <div class="col1">
                <!-- Column 1 start -->
                <!-- Content -->
                <!-- Column 1 end -->
            </div>
            <div class="col2">
                <!-- Column 2 start -->
                <!-- Content -->
                <!-- Column 2 end -->
            </div>
            <div class="col3">
                <!-- Column 3 start -->
                <!-- Content -->
                <!-- Column 3 end -->
            </div>
        </div>
    </div>
</div>

I have tried a few things, but my code just repeats itself. Here is one of the ways I tried:

    // get list of subcategories of this category
    $subcat_count = 0;
    $query = "SELECT * FROM " . $DBPrefix . "categories WHERE parent_id = " . $id . " ORDER BY cat_name";
    $result = mysql_query($query);
    $system->check_mysql($result, $query, __LINE__, __FILE__);
    $need_to_continue = 1;
    $cycle = 1;
    $column = 1;

    $TPL_main_value = '';
    while ($row = mysql_fetch_array($result))
    {
        ++$subcat_count;

        if ($cycle == 1)
        {
            $TPL_main_value .= '<div class="col'.$column.'">' . "
";

        }
        $sub_counter = $row['sub_counter'];
        $cat_counter = $row['counter'];
        if ($sub_counter != 0)
        {
            $count_string = ' (' . $sub_counter . ')';
        }
        else
        {
            if ($cat_counter != 0)
            {
                $count_string = ' (' . $cat_counter . ')';
            }
            else
            {
                $count_string = '';
            }
        }
        if ($row['cat_colour'] != '')
        {
            $BG = 'bgcolor=' . $row['cat_colour'];
        }
        else
        {
            $BG = '';
        }
        // Retrieve the translated category name
        $row['cat_name'] = $category_names[$row['cat_id']];
        $catimage = (!empty($row['cat_image'])) ? '<img src="' . $row['cat_image'] . '" border=0>' : '';
        $TPL_main_value .= "\t" . '<p>' . $catimage . '<a href="' . $system->SETTINGS['siteurl'] . 'browse.php?id=' . $row['cat_id'] . '">' . $row['cat_name'] . $count_string . '</a></p>' . "
";

        ++$cycle;
        if ($cycle == 4)
        {

            $cycle = 1;
            $TPL_main_value .= '</dv>' . "
";
    ++$column;
        }
    }

    if ($cycle >= 2 && $cycle <= 3)
    {

        while ($cycle < 4)
        {
            $TPL_main_value .= '    <p>&nbsp;</p>' . "
";
            ++$cycle;


        }
        $TPL_main_value .= '</div>
' . "
";

    }

and I got:

<div class="col1">
    <p><a href="/browse.php?id=2">Art &amp; Antiques</a></p>
    <p><a href="/browse.php?id=198">Automotive (1)</a></p>
    <p><a href="/browse.php?id=29">Books</a></p>
</dv>
<div class="col2">
    <p><a href="/browse.php?id=68">Clothing &amp; Accessories</a></p>
    <p><a href="/browse.php?id=72">Coins &amp; Stamps</a></p>
    <p><a href="/browse.php?id=75">Collectibles</a></p>
</dv>
<div class="col3">
    <p><a href="/browse.php?id=113">Comics, Cards &amp; Science Fiction</a></p>
    <p><a href="/browse.php?id=122">Computers &amp; Software</a></p>
    <p><a href="/browse.php?id=127">Electronics &amp; Photography</a></p>
</dv>
<div class="col4">
    <p><a href="/browse.php?id=133">Home &amp; Garden</a></p>
    <p><a href="/browse.php?id=143">Movies &amp; Video</a></p>
    <p><a href="/browse.php?id=150">Music</a></p>
</dv>
<div class="col5">
    <p><a href="/browse.php?id=157">Office &amp; Business</a></p>
    <p><a href="/browse.php?id=162">Other Goods &amp; Services</a></p>
    <p><a href="/browse.php?id=170">Sports &amp; Recreation</a></p>
</dv>
<div class="col6">
    <p><a href="/browse.php?id=174">Toys &amp; Games</a></p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
</div>

which is not going to work and is not what I am after. Could someone help me to understand the changes I need to make to accomplish parsing into the 3 columns instead of the table it uses currently?

Answer 1

I also think there's no reason to avoid tables, but maybe this short example will make you a step closer. Common table looks like thi s. Lets change all tags to divs leaving corresponding classes.

<table>                            <div class="table">
    <tr>                               <div class="tr">
        <td>One</td>                       <div class="td">One</div>
        <td>Two</td>                       <div class="td">Two</div>
        <td>Three</td>                     <div class="td">Three</div>
    </tr>                  ==>         </div> 
    <tr>                               <div class="tr">
        <td>1</td>                         <div class="td">1</div>
        <td>2</td>                         <div class="td">2</div>
        <td>3</td>                         <div class="td">3</div>
    </tr>                              </div>
</table>                           </div>

Now the only thing we have to do is to convert them using css's property display

.table { display: table; }
.tr { display: table-row; }
.td { display: table-cell; }

That's it. If you add a little bit more properties, it will look exactly the same: border-spacing: 2px; for table-div and padding: 1px; for cell-divs

DEMO

If you want your example to look like:

+-------+-------+-------+
| .col1 | .col2 | .col3 |
+-------+-------+-------+
| .col4 | .col5 | .col6 |
+-------+-------+-------+

you have to wrap every three divs with additional div

$TPL_main_value = '<div class="row">';
// instead of $TPL_main_value = '';
// then close it and open again every three loops
if ($i%3==0) $TPL_main_value = '</div><div class="row">';
// and don't forget to close it after while loop ends

maybe this code will help you