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!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Display Data from mySQL Across and then Down

Status
Not open for further replies.
FireGeek21

FireGeek21

Technical User
Dec 12, 2007
218
0
0
US
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)
 
Sort by date Sort by votes
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
 
Upvote 0 Downvote
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)
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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)
 
Upvote 0 Downvote
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 if you want to see a working example.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

PeDa
  • Locked
  • Question
Media query: display = none/inline/block 1
Replies
1
Views
166
PeDa
PeDa
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
63
lmcate
lmcate
cae154
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
212
spamjim
spamjim
PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
210
spamjim
spamjim
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
151
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top