Jump to content

Columns question revisited


Bhaal

Recommended Posts

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
Link to comment
Share on other sites

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
Link to comment
Share on other sites

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?
Link to comment
Share on other sites

[!--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
Link to comment
Share on other sites

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?
Link to comment
Share on other sites

[!--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
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.