Display Data from mySQL Across and then Down

FireGeek21 · Apr 6, 2014

Hi,

On our fire department website we would like to add a page of pictures of our personnel. I am against adding names of our personnel directly into the html code so I have a mySQL database with their name, position, email address, and image file. I am using php to pull the data out and display it on our page. Here is a draft of the code I have so far:

PHP:

<html>
     <body>
          <?php
               //Get data from database and display in HTML table
               $con = mysql_connect("localhost","mukwona2_Mfd3400","1913mfd!");
                    if (!$con)
                    {
                         die('Could not connect: ' . mysql_error());
                    }

                mysql_select_db("mukwona2_contacts", $con);

                $result = mysql_query("SELECT * FROM email_address ORDER BY Nbr");
                                    
                echo "<table>
                      <tr>
                      <th>Nbr</th>
                      <th>LName</th>
                      <th>FName</th>
                      <th>Email</th>
                      <th>Position</th>
                      <th>Picture</th>
                      </tr>";

                while($row = mysql_fetch_array($result))

                {
                     echo "<tr>";
                     echo "<td>" . $row['Nbr'] . "</td>";
                     echo "<td>" . $row['LName'] . "</td>";
                     echo "<td>" . $row['FName'] . "</td>";
                     echo "<td>" . $row['Email'] . "</td>";
                     echo "<td>" . $row['Position'] . "</td>";
                     echo "<td><img src=" . $row['Headshot'] . " height='200' width='150'></td>";
                     echo "</tr>";
                }

                echo "</table>";

                mysql_close($con);
          ?>
     </body>
</html>

Right now the data displays one row per person. I am looking to display 4 pictures across with name, position, and email address below each picture. Then, the next row will display the next 4 pictures across with name, position, and email address below each picture, etc...

How can I get the data to display across and then down???

Thanks,

Tammy

FireGeek
(currently using Crystal Reports XI with Lawson 9.01)

ChrisHirst · Apr 6, 2014

Fixed width container, set % width floated child container elements for each item.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

FireGeek21 · Apr 6, 2014

Thank you ChrisHirst for your input. I am a bit of a novice at HTML. Could you please explain, better yet offer an example?

THANKS!

FireGeek
(currently using Crystal Reports XI with Lawson 9.01)

ChrisHunt · Apr 7, 2014

Something like this?

Code:

<html>
     <body>
          <?php
               //Get data from database and display in HTML table
               $con = mysql_connect("localhost","mukwona2_Mfd3400","1913mfd!");
                    if (!$con)
                    {
                         die('Could not connect: ' . mysql_error());
                    }

                mysql_select_db("mukwona2_contacts", $con);

                $result = mysql_query("SELECT * FROM email_address ORDER BY Nbr");
                                    
                echo "<table>
                      <tr>";

                $pos = 0;
                $per_row = 4;      // Change this to whatever number you want

                while($row = mysql_fetch_array($result))

                {
                     if ($pos >= $per_row) {
                           echo "</tr><tr>";
                           $pos=0;
                     }

                     echo "<td><img src=" . $row['Headshot'] . " height='200' width='150'><br />";
                     echo $row['Nbr'] . "<br />";
                     echo $row['LName'] . "<br />";
                     echo $row['FName'] . "<br />";
                     echo $row['Email'] . "<br />";
                     echo $row['Position'] . "</td>";

                     $pos++;
                }

                while ($pos < $per_row) {
                     echo "<td>&nbsp;</td>";
                     $pos++;
                }

                echo "</tr></table>";

                mysql_close($con);
          ?>
     </body>
</html>

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

ChrisHirst · Apr 7, 2014

Mr Hunt!!!
The style police will be knocking your door down, using tables for tabular data indeed!

People will be thinking that's the right way to do things.

Anyhow!
Here's one I prepared earlier,

bookemdanno.com (I only built the WP template around an existing design)

And Chris Coyier on Floats

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

FireGeek21 · Apr 13, 2014

Thank you Chris Hunt for the suggestion. I believe I have a non-table solution but it isn't working quite right yet. I was hoping someone could help find the issue as I have been looking at this much too long and can no longer see the problem.

Thanks!!!

PHP:

<html>
	<head>
		<style type="text/css">
			/*Reset box model */
			*, *:before, *:after, td, th, tr {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
			
			/*Other basic resets */
			html, body, div, img{margin:0; padding:0; border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
			body{line-height:1;}

			/*Center the main display window and set some default widths */
			.persons{width:75%; min-width:200px; margin: 0 auto;}

			/*Make each person div float.  This will put up to four across a page */
			.person{margin-right: 5px; min-width:170px; width: 24.5%; padding-right:10px; padding-left: 10px; overflow:hidden; clear:left; float:left; border:thin black solid;}
			
			/*Kill the floating inside each person box */
			.person .wrapper{clear:left; text-align:center;}
			
			/*Style the actual information */
			.person .wrapper .headshot{text-align:center;}
			.person .wrapper .name{color:navy;font-size:100%; text-align: center;}
			.person .wrapper .email{color:navy;font-size:80%; font-style:italic; text-align: center;}
			.person .wrapper .position{color: red;font-size:90%; text-align: center;}
		</style>
	</head>
	<body>
		<?php
			//Get data from database and display in HTML table
			$con = mysql_connect("localhost",$dbUser, $dbPwd);
			if (!$con)
				{
					die('Could not connect: ' . mysql_error());
				}
			mysql_select_db("mukwona2_contacts", $con);
			$result = mysql_query("SELECT * FROM email_address ORDER BY Nbr");
			
			echo "<table>
				  <tr>";
				  
			$pos = 0;
            $per_row = 4;      // Change this to whatever number you want
		?>
		
		<div class="persons">
			<?php 
				while($row = mysql_fetch_array($result)):
				{
					if ($pos >= $per_row)
						{
							echo "</tr><tr>";
							$pos=0;
						}
			?>
				<div class="person">
					<div class="wrapper">
						<div class="headshot"><img src="<?=$row['Headshot'];?>" height='200' width='150'/></div>
						<div class="name"><?=htmlspecialchars($row['FName'])?> <?=htmlspecialchars($row['LName']);?></div>
						<div class="email"><?=htmlspecialchars($row['Email']);?></div>
						<div class="position"><?=htmlspecialchars($row['Position']);?></div>    
					</div><!-- end wrapper class -->
				</div><!-- end person class -->
			<?php 
				$pos++;
				}
					while ($pos < $per_row)
					{
						 echo "<td> </td>";
						 $pos++;
					}
					echo "</tr></table>";
			?>
		</div><!-- end persons -->   
	</body>
</html>

FireGeek
(currently using Crystal Reports XI with Lawson 9.01)

ChrisHunt · Apr 28, 2014

If you're going for the no-tables approach, it's probably best to tackle it in two stages. Start by writing a plain text html file that you can use to get the CSS working properly, something like this:

Code:

<html>
  <head>
    <title>Test Page</title>
    <style type="text/css">
       /* Your CSS goes in here */
    </style>
  </head>
  <body>
    <ul class="persons">
      <li>
        <img class="headshot" src="/images/dummy.jpg" height='200' width='150'/>
        <span class="name">Fred Bloggs</span>
        <span class="email">fred@example.com</span>
        <span class="position">Dogsbody</span>
      </li>
      <li>
        <img class="headshot" src="/images/dummy.jpg" height='200' width='150'/>
        <span class="name">Fred Bloggs</span>
        <span class="email">fred@example.com</span>
        <span class="position">Dogsbody</span>
      </li>
      <li>
        <img class="headshot" src="/images/dummy.jpg" height='200' width='150'/>
        <span class="name">Fred Bloggs</span>
        <span class="email">fred@example.com</span>
        <span class="position">Dogsbody</span>
      </li>
      <li>
        <img class="headshot" src="/images/dummy.jpg" height='200' width='150'/>
        <span class="name">Fred Bloggs</span>
        <span class="email">fred@example.com</span>
        <span class="position">Dogsbody</span>
      </li>
      <li>
        <img class="headshot" src="/images/dummy.jpg" height='200' width='150'/>
        <span class="name">Fred Bloggs</span>
        <span class="email">fred@example.com</span>
        <span class="position">Dogsbody</span>
      </li>
      <li>
        <img class="headshot" src="/images/dummy.jpg" height='200' width='150'/>
        <span class="name">Fred Bloggs</span>
        <span class="email">fred@example.com</span>
        <span class="position">Dogsbody</span>
      </li>
    </ul>
  </body>
</html>

Then play with the CSS until it's how you want it, maybe something like this:

Code:

ul.persons {
  margin: 0;
  padding: 0;
  list-style: none;
}

.persons li {
  display: block;
  float: left;
  width: 180px;
  height: 280px;
  padding: 10px;
  text-align:center;
  border: 1px solid black;
  margin: 0 5px 5px 0;
}

.persons img,
.persons span {
  display: block;
}

Once you've got your test page looking how you want it, tackle the (usually not too difficult) problem of getting php to produce real data in the same format.

ps. I have a broadly similar layout at

http://www.leicesteryha.org.uk/slideshows/

if you want to see a working example.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Display Data from mySQL Across and then Down

FireGeek21

Technical User

ChrisHirst

IS-IT--Management

FireGeek21

Technical User

ChrisHunt

Programmer

ChrisHirst

IS-IT--Management

FireGeek21

Technical User

ChrisHunt

Programmer

Similar threads

Part and Inventory Search

Sponsor