×
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Contact US

*
*
*
*

Thanks. We have received your request and will respond promptly.

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!
*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here

Display Data from mySQL Across and then Down

thread215-1729790

Display Data from mySQL Across and then Down

Display Data from mySQL Across and then Down

(OP)
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:

CODE --> 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)

RE: Display Data from mySQL Across and then Down

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

RE: Display Data from mySQL Across and then Down

(OP)
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)

RE: Display Data from mySQL Across and then Down

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> </td>";
                     $pos++;
                }

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

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

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

RE: Display Data from mySQL Across and then Down

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

RE: Display Data from mySQL Across and then Down

(OP)
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!!!

CODE --> 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)

RE: Display Data from mySQL Across and then Down

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

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members! Already a Member? Login
Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close