Columns question revisited

Bhaal · March 15, 2006

I know - I've asked this before, and the responses were quite helpful, but I think the issue is more complicated than it appears at first blush.

I'm trying to recreate the columnar layout of this page:

[a href=\"http://www.convictmailbag.com/prisoner_list.php\" target=\"_blank\"]http://www.convictmailbag.com/prisoner_list.php[/a]

Names are pulled from a db and layed out in nice, neat columns across the page.

I realize that each name is formatted with CSS, but I don't believe the actual layout is achieved with CSS alone.

For instance, how are the columns breaking after 76(?) records and forming a new column at the top of the page?

It's been suggested that the columns do not go top to bottom, but left to right; an examination of the source reveals this to not be true: the columns do indeed go top to bottom and break after X number of records to begin a new column.

I do know that each name is formatted with CSS to give it a background and a hover effect, but the code is written such that each column contains 76(?) names, then a </td><td align="center"> is somehow inserted which creates a new column starting at the top of the container. (Plus a cool conditional that formats male/female entries differently.) This eliminates the need for pagination. If this is done with a 'limit' somehow, and more records are entered this limit can be increased so that each column contains more names. Pretty nice, eh?

So...

How are these columns created? It has to be in the PHP code...right? And how is CSS styling being applied conditionally?

I'd say this would be a challenge for even a moderately experienced code, much less a newbie like me :-)

Any help/insight would be greatly appreciated!!!!

Thanks...

_Bhaal

obsidian · March 15, 2006

after examining the code, it appears that they simply have a table with 5 cells. inside each of those cells, they simply echo out the 75 or so prisoners' names they want listed there. the actual links themselves are simply styled to allow for the "button" look they have. you'll notice that at the end of each of the columns, you'll have a "</td><td align='center'>" before the next column starts. that's all they're doing to break the columns up.

after a little more thinking, i figure i'd just write up this simulation for you to show how easily such an effect can be achieved:
[code]
<?php
$limit = 250;
$columns = 50;
$i = 0;
$out = "<table border='0' cellpadding='0' cellspacing='0'>\n" .
             "<tr>\n";

while ($i < $limit) {
    if ($i % 50 == 0)
        $out .= "<td align=\"center\">\n";
    $i++;
    $out .= "<a href='#'>$i</a>\n";
    if ($i % 50 == 0)
        $out .= "</td>\n";
}

$out .= "</tr>\n" .
                "</table>\n";
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type='text/css'>
body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
}

table {
    border: 1px solid #cccccc;
}

td {
    border: 1px solid #cccccc;
}

td a {
    display: block;
    width: 100px;
}
</style>
</head>

<body>
<?= $out ?>
</body>
</html>

[/code]

hope this helps

Bhaal · March 15, 2006

At the risk of being ridiculed for being such a damn newbie at this - I'm quite embarrassed to ask publicly.

But I AM such a damn novice with this stuff - I have no idea how to 'combine' your array (that works very well - thanks again!) with a query.

A simple query like this:

$authors = @mysql_query('SELECT ID, Name FROM Authors');
if (!$authors) {
die('<p>Error retrieving authors from database!<br />'.
'Error: ' . mysql_error() . '</p>');
}

while ($author = mysql_fetch_array($authors)) {
$id = $author['ID'];
$name = htmlspecialchars($author['Name']);

echo("<a href='editauthor.php?id=$id' class='navbutton'>$name</a>");

}

This just echos out a link for each entry in the array, while 'class='navbutton' supplies the formatting.

But how would one combine your rather elegant 'columns' solution with this (or any other) query?

If one doesn't ask, one doesn't learn...right?

obsidian · March 15, 2006

[!--quoteo(post=355444:date=Mar 15 2006, 02:36 PM:name=Bhaal)--][div class=\'quotetop\']QUOTE(Bhaal @ Mar 15 2006, 02:36 PM) [snapback]355444[/snapback][/div][div class=\'quotemain\'][!--quotec--]
If one doesn't ask, one doesn't learn...right?
[/quote]

EXACTLY! that's what this forum is all about ;-).

if you take the overall view of what i showed you above, you'll get the feel for how to limit yourself to a certain number of results to each column. did you notice that it's within a while() statement? you can do the same thing here... observe:
[code]
$authors = mysql_query('SELECT ID, Name FROM Authors') or die(mysql_error());

if (mysql_num_rows($authors) > 0) {
  echo "<table>\n<tr>\n";
  $i = 0;
  $limit = 15;
  while ($author = mysql_fetch_array($authors)) {
    if ($i % $limit == 0)
      echo "<td align='center'>\n";

    $i++;
    $id = $author['ID'];
    $name = htmlspecialchars($author['Name']);
    echo "<a href='editauthor.php?id=$id' class='navbutton'>$name</a>";

    if ($i % $limit == 0)
      echo "</td>\n";
  }
  echo "</tr>\n</table>\n";
}
[/code]

make sure that you change $limit to reflect how many results you want to appear in each column.

otherwise, you should be good to go! hope this makes sense and helps you out some

keeB · March 15, 2006

at first glance...

[code]<table>
<tr>

<?php

$perColumn = 75;
$count = 0;
    $authors = mysql_query("SELECT ID, Name from Authors");

    while ($data = mysql_fetch_row($authors)) {

        if ( $count == $perColumn ) {
            print "  </td>\n";
            $count = 0;
        }

        print '  <td align = "center">\n';
        print '<a href="index.php?id=$data[0]">$data[1]';


        $count++;
    }

?>
</tr>
</table>[/code]

That should give you what you want.. not tested, but you get the idea, right?

obsidian · March 15, 2006

[!--quoteo(post=355452:date=Mar 15 2006, 02:53 PM:name=keeB)--][div class=\'quotetop\']QUOTE(keeB @ Mar 15 2006, 02:53 PM) [snapback]355452[/snapback][/div][div class=\'quotemain\'][!--quotec--]
That should give you what you want.. not tested, but you get the idea, right?
[/quote]

the only error i found with your suggestion is that since you're checking $count == $perColumn, you're only going to create a new column after the FIRST 75. you need to use a modulous check to continuously keep your columns duplicating: ($count % $perColumn == 0)... otherwise, looks good

Bhaal · March 15, 2006

This place is the BEST! Thank you folks SO much for the help...it's almost there - I need to play around with it to understand exactly how this is working...

Thanks again!

keeB · March 16, 2006

Not a problem bud.. if you have any specific questions regarding the code I posted, don't hesitate ;)

Sign In

Columns question revisited

Recommended Posts

Bhaal

Link to comment

Share on other sites

obsidian

Link to comment

Share on other sites

Bhaal

Link to comment

Share on other sites

obsidian

Link to comment

Share on other sites

keeB

Link to comment

Share on other sites

obsidian

Link to comment

Share on other sites

Bhaal

Link to comment

Share on other sites

keeB

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information