No Table Three Column Category Layout

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 .= ' > ';
            }
            $TPL_categories_string .= '' . $category_names[$crumbs[$i]['cat_id']] . '';
        }
    }

    // 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 .= '' . "
";

        }
        $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'])) ? '' : '';
        $TPL_main_value .= "	" . '' . $catimage . '' . $row['cat_name'] . $count_string . '' . "
";

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

            $cycle = 1;
            $TPL_main_value .= '' . "
";
        }
    }

    if ($cycle >= 2 && $cycle <= 3)
    {
        while ($cycle < 4)
        {
            $TPL_main_value .= '     ' . "
";
            ++$cycle;

        }
        $TPL_main_value .= '' . "
";
    }

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

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 .= '' . "
";

        }
        $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'])) ? '' : '';
        $TPL_main_value .= "	" . '' . $catimage . '' . $row['cat_name'] . $count_string . '' . "
";

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

            $cycle = 1;
            $TPL_main_value .= '' . "
";
    ++$column;
        }
    }

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

        while ($cycle < 4)
        {
            $TPL_main_value .= '     ' . "
";
            ++$cycle;


        }
        $TPL_main_value .= '
' . "
";

    }

and I got:


    Art & Antiques
    Automotive (1)
    Books


    Clothing & Accessories
    Coins & Stamps
    Collectibles


    Comics, Cards & Science Fiction
    Computers & Software
    Electronics & Photography


    Home & Garden
    Movies & Video
    Music


    Office & Business
    Other Goods & Services
    Sports & Recreation


    Toys & Games

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?

vladkras · Accepted Answer

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.

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 = '';
// instead of $TPL_main_value = '';
// then close it and open again every three loops
if ($i%3==0) $TPL_main_value = '';
// and don't forget to close it after while loop ends

maybe this code will help you

No Table Three Column Category Layout

Answers (1)

Related Questions