Solved

How to use a div inside a while loop

Posted on 2009-06-28
13
592 Views
Last Modified: 2013-12-13
I have a member directory that sorts members by institution, so for example, if there are 10 people from the same institution I want to display all 10 people on the same page.  

I am new to liquid design and using <div>, but I am trying and this is where I am having problems.  As you can see in the code below I created a loop statement to pull all of the members who are from the same institution out of the database.  I also created a couple of divs to format the information, the ones that are giving me trouble are <div id='profile_left'> and <div id='profile_right'>.  Because these divs are set to float: left they stack across the page instead of displaying the first user then skipping down a space and displaying the second user.  I tried to fix this by adding a <div id ='profile wrapper'>, but I don't understand how to make that work either... it writes multiple people's information over-top of each other.  

What is the best way to handle this?  do I need the wrapper? I'm new to divs so I apologize is this is a newbie question.
<?PHP
 

include'start.php';
 

$_GET["sorter"];

$sorter = $_GET["sorter"];
 

$_GET["id"];

$id = $_GET["id"];
 

if (($sorter=="") || ($id=="")){

echo "<meta http-equiv='Refresh' content='0;URL=directory.php>";

}
 

echo "<br><div id='body_header'>" . $id . "</div><br>" ;
 

$query = mysql_query("SELECT * FROM users WHERE institution = '".$id."' ORDER BY rank DESC, last_name ASC") 

or die(mysql_error()); 
 

while($queryArray = mysql_fetch_array( $query )) 

{
 

print "<div id='body_font'><div id='profile_wrapper'><div id='profile_left'><p align='left'><img src= ../agteacher/uploaded_pics/" . $queryArray['file_name'] . " width='180'></p>" ;
 

echo "</div><div id='profile_right'>";

print "<p>" ;

if ($queryArray['institution']!=="") {

print "<b>" . $queryArray['institution'] . "</b><br><br>" ;

}

if ($queryArray['first_name']!=="") {

print "<span class='header'>Name:</span> <span class='bodytext'>" ;

print $queryArray['first_name'] ;

if ($queryArray['middle_name']!==""){

print " " . $queryArray['middle_name'] ;

}

print " " . $queryArray['last_name'] . "</span><br><br>" ;

}

print "<span class='header'>My V-Card:</span>&nbsp;&nbsp;<span class='bodytext'><a href=vcard.php?id=" . $id . " target='_blank'>Add " . $queryArray['first_name'] . " " . $queryArray['middle_name'] . " " . $queryArray['last_name'] . " to contacts<span></a>  &nbsp; <a href=vcard.php?id=" . $id . " target='_blank'><img border='0' src=vcard.gif width='25'></a><br>";

if ($queryArray['organization']!=="") {

print "<br><span class='header'>Organization:</span> <span class='bodytext'>" .  $queryArray['organization'] . "</span><br>" ;

}

if ($queryArray['university']!=="") {

print "<br><span class='header'>University:</span> <span class='bodytext'>" .  $queryArray['university'] . "</span><br>" ;

}

if ($queryArray['department']!=="") {

print "<span class='header'>Department:</span> <span class='bodytext'>" .  $queryArray['department'] . "</span><br>" ;

}

if ($queryArray['district_name']!=="") {

print "<span class='header'>District Name:</span><span class='bodytext'>" . $queryArray['district_name'] . "</span><br>" ;

}

if ($queryArray['chapter_id']!=="") {

print "<span class='header'>Chapter ID:</span><span class='bodytext'>" . $queryArray['chapter_id'] . "</span><br>" ;

}

if ($queryArray['email']!=="") {

print "<br><span class='header'>Email:</span><span class='bodytext'> <a href='mailto:" .  $queryArray['email'] . "'>" . $queryArray['email'] . "</span></a><br>" ;

}

if ($queryArray['dept_phone']!=="") {

print "<span class='header'>Department Phone:</span> <span class='bodytext'>" . $queryArray['dept_phone'] . " " . $queryArray['dept_phone_ext'] . "</span><br>" ;

}

if ($queryArray['work_phone']!=="") {

print "<span class='header'>Work Phone:</span> <span class='bodytext'>" . $queryArray['work_phone'] . "</span><br>" ;

}

if ($queryArray['work_cell']!=="") {

print "<span class='header'>Work Cell:</span> <span class='bodytext'>" . $queryArray['work_cell'] . "</span><br>" ;

}

if ($queryArray['work_fax']!=="") {

print "<span class='header'>Work Fax:</span> <span class='bodytext'>" . $queryArray['work_fax'] . "</span><br>" ;

}

if ($queryArray['work_address_1']!=="" || $queryArray['work_address_2']!=="" || $queryArray['work_city']!=="" || $queryArray['work_state']!=="") {

print "<br><span class='header'>Work Address:</span><br>";

}

if ($queryArray['work_address_1']!=="") {

print "<span class='bodytext'>" . $queryArray['work_address_1'] . "</span><br>" ;

}

if ($queryArray['work_address_2']!=="") {

print "<span class='bodytext'>" . $queryArray['work_address_2'] . "</span><br>" ;

}

if ($queryArray['work_city']!=="") {

print  "<span class='bodytext'>" . $queryArray['work_city'] . "</span>";

}

if ($queryArray['work_city']!==""){

print  "<span class='bodytext'>" . ", </span>";

}

if ($queryArray['work_state']!=="") {

print  "<span class='bodytext'>" . $queryArray['work_state'] . "  " . $queryArray['work_zip']. "</span><br>" ;

}
 

if(isset($_SESSION['username'])) {
 

if ($queryArray['home_address_1']!=="" || $queryArray['home_address_2']!=="" || $queryArray['home_city']!=="" || $queryArray['home_state']!=="") {

print "<br><span class='header'>Home Address:</span><br>";

}

if ($queryArray['home_address_1']!=="") {

print "<span class='bodytext'>" . $queryArray['home_address_1'] . "</span><br>" ;

}

if ($queryArray['home_address_2']!=="") {

print "<span class='bodytext'>" . $queryArray['home_address_2'] . "</span><br>" ;

}

if ($queryArray['home_city']!=="") {

print  "<span class='bodytext'>" . $queryArray['home_city'] . "</span>";

}

if ($queryArray['home_city']!==""){

print  "<span class='bodytext'>" . ", </span>";

}

if ($queryArray['home_state']!=="") {

print  "<span class='bodytext'>" . $queryArray['home_state'] . "  " . $queryArray['home_zip']. "</span><br>" ;

}

if ($queryArray['home_phone']!=="") {

print "<br><span class='header'>Home Phone:</span> <span class='bodytext'>" . $queryArray['home_phone'] . "</span><br>" ;

}

if ($queryArray['home_cell']!=="") {

print "<span class='header'>Home Cell:</span> <span class='bodytext'>" . $queryArray['home_cell'] . "</span><br>" ;

}
 

}
 

if ($queryArray['teaching_exp']!=="") {

print "<br><span class='header'>Teaching Experience:</span><br><span class='bodytext'> " . $queryArray['teaching_exp'] . "<br>" ;

}

if ($queryArray['first_year']=="Yes") {

print "<br><span class='header'>First Year:</span><span class='bodytext'> Yes<br>" ;

}

if ($queryArray['degree_1']!=="" || $queryArray['degree_2']!=="" || $queryArray['degree_3']!=="" ) {

print "<br><span class='header'>Education:</span><br>";

}

if ($queryArray['degree_1']!=="") {

print "<span class='bodytext'>" . $queryArray['degree_1'] . "<br>" ;

}

if ($queryArray['degree_2']!=="") {

print "<span class='bodytext'> " . $queryArray['degree_2'] . "<br>" ;

}

if ($queryArray['degree_3']!=="") {

print "<span class='bodytext'>" . $queryArray['degree_3'] . "<br>" ;

}

echo "<hr></div></div><br>";

}
 

include 'end.php';

?>
 
 
 

Below here is the css --------------------------------------------------------------------
 
 
 

/* Set the container properties */

#wrapper

{

background-image:url(images/background.png);

background-repeat:repeat-y;

background-position: 25% 0;

}
 

#header

{

background:url(images/s2.png);

height:180px;

margin-left: 0;

}
 

#container {

  border:solid 10px  #333366;

}
 

html, body {

  margin: 0px;

  padding: 0px;

} 
 

#col1

{

float: left;

width: 20%;

display: inline;

}
 

#col2

{

float: left;

width: 75%;

margin-left: 1%;

}
 

#profile_wrapper

{

position: absolute; left: 250px;

margin-left: 1%;

}
 

#profile_left

{

float: left;

width: 200px;

margin-left: 1%;

}
 

#profile_right

{

float: left;

margin-left: 1%;

}
 

#footer

{

height: 12px;

background-color: #333366;

color: #FFFFFF;

clear: both;

}
 

/* Set the font properties for the menu */

#menu_font

{

font-size: 1.0em;

font-weight: bold;

font-family: Verdana, Arial, Helvetica, sans-serif; 

color:#FFFFFF;}
 

/* Set hyperlink properties for the body */

a:link {

text-decoration: none;

color:#000099;

}

a:visited {

text-decoration: none;

color:#000099;

}

a:hover {

text-decoration: underline;

color:#000099;

}

a:active {

text-decoration: none;

color:#000099;

}
 

/* Set hyperlink properties for the menu */

a.menu:link {

text-decoration: none;

color:#FFFFFF;

}

a.menu:visited {

text-decoration: none;

color:#FFFFFF;

}

a.menu:hover {

text-decoration: underline;

color:#FFFFFF;

}

a.menu:active {

text-decoration: none;

color:#FFFFFF;

}
 

/* Set font properties */

#header_font

{

font-size: 2.0em;

font-weight: bold;

font-family: Verdana, Arial, Helvetica, sans-serif; 

}
 

#body_header

{

font-size: 1.0em;

font-weight: bold;

font-family: Verdana, Arial, Helvetica, sans-serif; 

}
 

#body_font

{

font-size: 1.0em;

font-family: Verdana, Arial, Helvetica, sans-serif; 
 

}
 

#footer_font

{

font-size: 1.0em;

font-family: Verdana, Arial, Helvetica, sans-serif; 

}

Open in new window

0
Comment
Question by:jbpeake
  • 6
  • 4
  • 2
  • +1
13 Comments
 
LVL 14

Expert Comment

by:profya
Comment Utility
You need to use padding to the style of the div.
0
 
LVL 9

Expert Comment

by:absx
Comment Utility
Hi,

Several comments:
 - The "id" property is supposed to contain a unique identifier. No two elements on the same page should have the same id. In your example, "class" should be used instead, as you're only defining formatting groups.
 - The <div id="profile_right"> tag never gets closed.
 - In this case you don't necessarily need the profile_wrapper. I've pasted an example of how the formatting could be handled using overflow and relative padding to the left.
<html>

<head><style>
 
 
 
 

/* Set the container properties */

.wrapper

{

background-image:url(images/background.png);

background-repeat:repeat-y;

background-position: 25% 0;

}
 

.header

{

background:url(images/s2.png);

height:180px;

margin-left: 0;

}
 

.container {

border:solid 10px  #333366;

}
 

html, body {

margin: 0px;

padding: 0px;

font-size: 1.0em;

font-family: Verdana, Arial, Helvetica, sans-serif; 
 

} 
 

.col1

{

float: left;

width: 20%;

display: inline;

}
 

.col2

{

float: left;

width: 75%;

margin-left: 1%;

}
 

.profile_left

{

float:left;

width: 200px;

padding-left: 250px;

margin-left: 1%;

}
 

.profile_right

{

overflow:auto;

margin-left: 1%;

}
 

.footer

{

height: 12px;

background-color: #333366;

color: #FFFFFF;

clear: both;

}
 

/* Set the font properties for the menu */

.menu_font

{

font-size: 1.0em;

font-weight: bold;

font-family: Verdana, Arial, Helvetica, sans-serif; 

color:#FFFFFF;}
 

/* Set hyperlink properties for the body */

a:link {

text-decoration: none;

color:#000099;

}

a:visited {

text-decoration: none;

color:#000099;

}

a:hover {

text-decoration: underline;

color:#000099;

}

a:active {

text-decoration: none;

color:#000099;

}
 

/* Set hyperlink properties for the menu */

a.menu:link {

text-decoration: none;

color:#FFFFFF;

}

a.menu:visited {

text-decoration: none;

color:#FFFFFF;

}

a.menu:hover {

text-decoration: underline;

color:#FFFFFF;

}

a.menu:active {

text-decoration: none;

color:#FFFFFF;

}
 

/* Set font properties */

.header_font

{

font-size: 2.0em;

font-weight: bold;

font-family: Verdana, Arial, Helvetica, sans-serif; 

}
 

.body_header

{

font-size: 1.0em;

font-weight: bold;

font-family: Verdana, Arial, Helvetica, sans-serif; 

}
 

.footer_font

{

font-size: 1.0em;

font-family: Verdana, Arial, Helvetica, sans-serif; 

}
 

</style></head><body>

<br>

<div class='body_header'>BODYID</div><br>

<div class='profile_left'>IMAGE</div>

<div class='profile_right'>

	<b>Institution</b><br><br>

	<span class='header'>Name:</span> <span class='bodytext'>First Middle Last Name</span><br><br>

	<span class='header'>My V-Card:</span>  <span class='bodytext'><a href=vcard.php?class=ID target='_blank'>Add First Middle Last Name to contacts<span></a>    <a href=vcard.php?class=id target='_blank'></a><br>

	<br><span class='header'>Organization:</span> <span class='bodytext'>ORG</span><br>

	<br><span class='header'>University:</span> <span class='bodytext'>UNI</span><br>

	<span class='header'>Department:</span> <span class='bodytext'>DPT</span><br>

	<span class='header'>District Name:</span><span class='bodytext'>DSN</span><br>

	<span class='header'>Chapter ID:</span><span class='bodytext'>CHP</span><br>

	<br><span class='header'>Email:</span><span class='bodytext'> <a href='mailto:mail'>MAIL</span></a><br>

	<span class='header'>Department Phone:</span> <span class='bodytext'>TEL1</span><br>

	<span class='header'>Work Phone:</span> <span class='bodytext'>TEL2</span><br>

	<span class='header'>Work Cell:</span> <span class='bodytext'>TEL3</span><br>

	<span class='header'>Work Fax:</span> <span class='bodytext'>TEL4</span><br>

	<br><span class='header'>Work Address:</span><br>

	<span class='bodytext'>AD1</span><br>

	<span class='bodytext'>AD2</span><br>

	<span class='bodytext'>AD3</span>

	<span class='bodytext'>, </span>

	<span class='bodytext'>AD4</span><br>

	

	<br><span class='header'>Home Address:</span><br>

	<span class='bodytext'>AD1</span><br>

	<span class='bodytext'>AD2</span><br>

	<span class='bodytext'>AD3</span>

	<span class='bodytext'>, </span>

	<span class='bodytext'>AD4</span><br>

	<br><span class='header'>Home Phone:</span> <span class='bodytext'>TEL1</span><br>

	<span class='header'>Home Cell:</span> <span class='bodytext'>TEL2</span><br>

	<br><span class='header'>Teaching Experience:</span><br><span class='bodytext'>TEL3<br>

	<br><span class='header'>First Year:</span><span class='bodytext'> Yes<br>

	<br><span class='header'>Education:</span><br>

	<span class='bodytext'>DEG1<br>

	<span class='bodytext'>DEG2<br>

	<span class='bodytext'>DEG3<br>

	<hr>

</div>
 

<div class='profile_left'>IMAGE</div>

<div class='profile_right'>

	<b>Institution</b><br><br>

	<span class='header'>Name:</span> <span class='bodytext'>First Middle Last Name</span><br><br>

	<span class='header'>My V-Card:</span>  <span class='bodytext'><a href=vcard.php?class=ID target='_blank'>Add First Middle Last Name to contacts<span></a>    <a href=vcard.php?class=id target='_blank'></a><br>

	<br><span class='header'>Organization:</span> <span class='bodytext'>ORG</span><br>

	<br><span class='header'>University:</span> <span class='bodytext'>UNI</span><br>

	<span class='header'>Department:</span> <span class='bodytext'>DPT</span><br>

	<span class='header'>District Name:</span><span class='bodytext'>DSN</span><br>

	<span class='header'>Chapter ID:</span><span class='bodytext'>CHP</span><br>

	<br><span class='header'>Email:</span><span class='bodytext'> <a href='mailto:mail'>MAIL</span></a><br>

	<span class='header'>Department Phone:</span> <span class='bodytext'>TEL1</span><br>

	<span class='header'>Work Phone:</span> <span class='bodytext'>TEL2</span><br>

	<span class='header'>Work Cell:</span> <span class='bodytext'>TEL3</span><br>

	<span class='header'>Work Fax:</span> <span class='bodytext'>TEL4</span><br>

	<br><span class='header'>Work Address:</span><br>

	<span class='bodytext'>AD1</span><br>

	<span class='bodytext'>AD2</span><br>

	<span class='bodytext'>AD3</span>

	<span class='bodytext'>, </span>

	<span class='bodytext'>AD4</span><br>

	

	<br><span class='header'>Home Address:</span><br>

	<span class='bodytext'>AD1</span><br>

	<span class='bodytext'>AD2</span><br>

	<span class='bodytext'>AD3</span>

	<span class='bodytext'>, </span>

	<span class='bodytext'>AD4</span><br>

	<br><span class='header'>Home Phone:</span> <span class='bodytext'>TEL1</span><br>

	<span class='header'>Home Cell:</span> <span class='bodytext'>TEL2</span><br>

	<br><span class='header'>Teaching Experience:</span><br><span class='bodytext'>TEL3<br>

	<br><span class='header'>First Year:</span><span class='bodytext'> Yes<br>

	<br><span class='header'>Education:</span><br>

	<span class='bodytext'>DEG1<br>

	<span class='bodytext'>DEG2<br>

	<span class='bodytext'>DEG3<br>

	<hr>

</div>
 
 

</body></html>

Open in new window

0
 
LVL 9

Expert Comment

by:absx
Comment Utility
To correct myself, as the example above didn't exactly work in IE, it actually might be a good idea to use a profile_wrapper class to keep the profiles separate. Below another example that seems to work better.
<html>

<head><style>
 

html, body {

	margin: 0px;

	padding: 0px;

	font-size: 1.0em;

	font-family: Verdana, Arial, Helvetica, sans-serif; 

} 
 

.profile_wrapper {

 

	padding-left: 250px;

	overflow: auto;

}
 

.profile_left {

	width: 200px;

	clear: both;

	float: left;

	border: solid 1px #000;

}
 

.profile_right{

	border: solid 1px #000;

	width: 500px;

	overflow: auto;

}
 

.header {

	background:url(images/s2.png);

	margin-left: 0;

}
 

.container {

	border:solid 10px #333366;

}
 

</style></head><body>

<br>

<div class='body_header'>BODYID</div><br>

<div class="profile_wrapper">

	<div class='profile_left'>IMAGE</div>

	<div class='profile_right'>

		<b>Institution</b><br><br>

		<span class='header'>Name:</span> <span class='bodytext'>First Middle Last Name</span><br><br>

		<span class='header'>My V-Card:</span>  <span class='bodytext'><a href=vcard.php?class=ID target='_blank'>Add First Middle Last Name to contacts<span></a>    <a href=vcard.php?class=id target='_blank'></a><br>

		<br><span class='header'>Organization:</span> <span class='bodytext'>ORG</span><br>

		<br><span class='header'>University:</span> <span class='bodytext'>UNI</span><br>

		<span class='header'>Department:</span> <span class='bodytext'>DPT</span><br>

		<span class='header'>District Name:</span><span class='bodytext'>DSN</span><br>

		<span class='header'>Chapter ID:</span><span class='bodytext'>CHP</span><br>

		<br><span class='header'>Email:</span><span class='bodytext'> <a href='mailto:mail'>MAIL</span></a><br>

		<span class='header'>Department Phone:</span> <span class='bodytext'>TEL1</span><br>

		<span class='header'>Work Phone:</span> <span class='bodytext'>TEL2</span><br>

		<span class='header'>Work Cell:</span> <span class='bodytext'>TEL3</span><br>

		<span class='header'>Work Fax:</span> <span class='bodytext'>TEL4</span><br>

		<br><span class='header'>Work Address:</span><br>

		<span class='bodytext'>AD1</span><br>

		<span class='bodytext'>AD2</span><br>

		<span class='bodytext'>AD3</span>

		<span class='bodytext'>, </span>

		<span class='bodytext'>AD4</span><br>

		

		<br><span class='header'>Home Address:</span><br>

		<span class='bodytext'>AD1</span><br>

		<span class='bodytext'>AD2</span><br>

		<span class='bodytext'>AD3</span>

		<span class='bodytext'>, </span>

		<span class='bodytext'>AD4</span><br>

		<br><span class='header'>Home Phone:</span> <span class='bodytext'>TEL1</span><br>

		<span class='header'>Home Cell:</span> <span class='bodytext'>TEL2</span><br>

		<br><span class='header'>Teaching Experience:</span><br><span class='bodytext'>TEL3<br>

		<br><span class='header'>First Year:</span><span class='bodytext'> Yes<br>

		<br><span class='header'>Education:</span><br>

		<span class='bodytext'>DEG1<br>

		<span class='bodytext'>DEG2<br>

		<span class='bodytext'>DEG3<br>

		<hr>

	</div>

</div>

<div class="profile_wrapper">

	<div class='profile_left'>IMAGE</div>

	<div class='profile_right'>

		<b>Institution</b><br><br>

		<span class='header'>Name:</span> <span class='bodytext'>First Middle Last Name</span><br><br>

		<span class='header'>My V-Card:</span>  <span class='bodytext'><a href=vcard.php?class=ID target='_blank'>Add First Middle Last Name to contacts<span></a>    <a href=vcard.php?class=id target='_blank'></a><br>

		<br><span class='header'>Organization:</span> <span class='bodytext'>ORG</span><br>

		<br><span class='header'>University:</span> <span class='bodytext'>UNI</span><br>

		<span class='header'>Department:</span> <span class='bodytext'>DPT</span><br>

		<span class='header'>District Name:</span><span class='bodytext'>DSN</span><br>

		<span class='header'>Chapter ID:</span><span class='bodytext'>CHP</span><br>

		<br><span class='header'>Email:</span><span class='bodytext'> <a href='mailto:mail'>MAIL</span></a><br>

		<span class='header'>Department Phone:</span> <span class='bodytext'>TEL1</span><br>

		<span class='header'>Work Phone:</span> <span class='bodytext'>TEL2</span><br>

		<span class='header'>Work Cell:</span> <span class='bodytext'>TEL3</span><br>

		<span class='header'>Work Fax:</span> <span class='bodytext'>TEL4</span><br>

		<br><span class='header'>Work Address:</span><br>

		<span class='bodytext'>AD1</span><br>

		<span class='bodytext'>AD2</span><br>

		<span class='bodytext'>AD3</span>

		<span class='bodytext'>, </span>

		<span class='bodytext'>AD4</span><br>

		

		<br><span class='header'>Home Address:</span><br>

		<span class='bodytext'>AD1</span><br>

		<span class='bodytext'>AD2</span><br>

		<span class='bodytext'>AD3</span>

		<span class='bodytext'>, </span>

		<span class='bodytext'>AD4</span><br>

		<br><span class='header'>Home Phone:</span> <span class='bodytext'>TEL1</span><br>

		<span class='header'>Home Cell:</span> <span class='bodytext'>TEL2</span><br>

		<br><span class='header'>Teaching Experience:</span><br><span class='bodytext'>TEL3<br>

		<br><span class='header'>First Year:</span><span class='bodytext'> Yes<br>

		<br><span class='header'>Education:</span><br>

		<span class='bodytext'>DEG1<br>

		<span class='bodytext'>DEG2<br>

		<span class='bodytext'>DEG3<br>

		<hr>

	</div>

</div>

</body></html>

Open in new window

0
 
LVL 14

Expert Comment

by:profya
Comment Utility
In stead of using margin use padding, padding-left: ......... since DIV objects better positioned using the padding property.
0
 
LVL 14

Expert Comment

by:profya
Comment Utility
I have create a sample table containing the 34 field. The problem is not with the css, you need to alternate the div style among loop iterations.
I have created a variable named $alternate, in odd loop iterations it uses profile_left and profile_right in even iterations.
replace lines from 21 to 30 with the code attached.
$alternate="";

while($queryArray = mysql_fetch_array( $query ))

{

	if($alternate=="id='profile_right'")

		$alternate="id='profile_left'";

	else

		$alternate="id='profile_right'";

echo $count, $alternate, "<br>";

print "<div id='body_font'><div id='profile_wrapper'><div $alternate><p align='left'><img src= ../agteacher/uploaded_pics/" . $queryArray['file_name'] . " width='180'></p>" ;
 

echo "</div><div $alternate>";

Open in new window

0
 

Author Comment

by:jbpeake
Comment Utility
There are several responses to this question, but I think that profya is correct about alternating the div through each loop iteration.  I tried implementing Profya's recommendation, but it still writes the returned values over top of each other.  Any suggestions on the code below?
<?PHP

 

include'start.php';

 

$_GET["sorter"];

$sorter = $_GET["sorter"];

 

$_GET["id"];

$id = $_GET["id"];

 

if (($sorter=="") || ($id=="")){

echo "<meta http-equiv='Refresh' content='0;URL=directory.php>";

}

 

echo "<br><div id='body_header'>" . $id . "</div><br>" ;

 

$query = mysql_query("SELECT * FROM users WHERE institution = '".$id."' ORDER BY rank DESC, last_name ASC") 

or die(mysql_error()); 

 

 

	

$alternate="";

while($queryArray = mysql_fetch_array( $query ))

{

	if($alternate=="id='profile_right'")

		$alternate="id='profile_left'";

	else

		$alternate="id='profile_right'";

echo $count, $alternate, "<br>";

print "<div id='body_font'><div id='profile_wrapper'><div $alternate><p align='left'><img src= ../agteacher/uploaded_pics/" . $queryArray['file_name'] . " width='180'></p>" ;

 

echo "</div><div $alternate>";
 
 

print "<p>" ;

if ($queryArray['institution']!=="") {

print "<b>" . $queryArray['institution'] . "</b><br><br>" ;

}

if ($queryArray['first_name']!=="") {

print "<span class='header'>Name:</span> <span class='bodytext'>" ;

print $queryArray['first_name'] ;

if ($queryArray['middle_name']!==""){

print " " . $queryArray['middle_name'] ;

}

print " " . $queryArray['last_name'] . "</span><br><br>" ;

}

print "<span class='header'>My V-Card:</span>&nbsp;&nbsp;<span class='bodytext'><a href=vcard.php?id=" . $id . " target='_blank'>Add " . $queryArray['first_name'] . " " . $queryArray['middle_name'] . " " . $queryArray['last_name'] . " to contacts<span></a>  &nbsp; <a href=vcard.php?id=" . $id . " target='_blank'><img border='0' src=vcard.gif width='25'></a><br>";

if ($queryArray['organization']!=="") {

print "<br><span class='header'>Organization:</span> <span class='bodytext'>" .  $queryArray['organization'] . "</span><br>" ;

}

if ($queryArray['university']!=="") {

print "<br><span class='header'>University:</span> <span class='bodytext'>" .  $queryArray['university'] . "</span><br>" ;

}

if ($queryArray['department']!=="") {

print "<span class='header'>Department:</span> <span class='bodytext'>" .  $queryArray['department'] . "</span><br>" ;

}

if ($queryArray['district_name']!=="") {

print "<span class='header'>District Name:</span><span class='bodytext'>" . $queryArray['district_name'] . "</span><br>" ;

}

if ($queryArray['chapter_id']!=="") {

print "<span class='header'>Chapter ID:</span><span class='bodytext'>" . $queryArray['chapter_id'] . "</span><br>" ;

}

if ($queryArray['email']!=="") {

print "<br><span class='header'>Email:</span><span class='bodytext'> <a href='mailto:" .  $queryArray['email'] . "'>" . $queryArray['email'] . "</span></a><br>" ;

}

if ($queryArray['dept_phone']!=="") {

print "<span class='header'>Department Phone:</span> <span class='bodytext'>" . $queryArray['dept_phone'] . " " . $queryArray['dept_phone_ext'] . "</span><br>" ;

}

if ($queryArray['work_phone']!=="") {

print "<span class='header'>Work Phone:</span> <span class='bodytext'>" . $queryArray['work_phone'] . "</span><br>" ;

}

if ($queryArray['work_cell']!=="") {

print "<span class='header'>Work Cell:</span> <span class='bodytext'>" . $queryArray['work_cell'] . "</span><br>" ;

}

if ($queryArray['work_fax']!=="") {

print "<span class='header'>Work Fax:</span> <span class='bodytext'>" . $queryArray['work_fax'] . "</span><br>" ;

}

if ($queryArray['work_address_1']!=="" || $queryArray['work_address_2']!=="" || $queryArray['work_city']!=="" || $queryArray['work_state']!=="") {

print "<br><span class='header'>Work Address:</span><br>";

}

if ($queryArray['work_address_1']!=="") {

print "<span class='bodytext'>" . $queryArray['work_address_1'] . "</span><br>" ;

}

if ($queryArray['work_address_2']!=="") {

print "<span class='bodytext'>" . $queryArray['work_address_2'] . "</span><br>" ;

}

if ($queryArray['work_city']!=="") {

print  "<span class='bodytext'>" . $queryArray['work_city'] . "</span>";

}

if ($queryArray['work_city']!==""){

print  "<span class='bodytext'>" . ", </span>";

}

if ($queryArray['work_state']!=="") {

print  "<span class='bodytext'>" . $queryArray['work_state'] . "  " . $queryArray['work_zip']. "</span><br>" ;

}

 

if(isset($_SESSION['username'])) {

 

if ($queryArray['home_address_1']!=="" || $queryArray['home_address_2']!=="" || $queryArray['home_city']!=="" || $queryArray['home_state']!=="") {

print "<br><span class='header'>Home Address:</span><br>";

}

if ($queryArray['home_address_1']!=="") {

print "<span class='bodytext'>" . $queryArray['home_address_1'] . "</span><br>" ;

}

if ($queryArray['home_address_2']!=="") {

print "<span class='bodytext'>" . $queryArray['home_address_2'] . "</span><br>" ;

}

if ($queryArray['home_city']!=="") {

print  "<span class='bodytext'>" . $queryArray['home_city'] . "</span>";

}

if ($queryArray['home_city']!==""){

print  "<span class='bodytext'>" . ", </span>";

}

if ($queryArray['home_state']!=="") {

print  "<span class='bodytext'>" . $queryArray['home_state'] . "  " . $queryArray['home_zip']. "</span><br>" ;

}

if ($queryArray['home_phone']!=="") {

print "<br><span class='header'>Home Phone:</span> <span class='bodytext'>" . $queryArray['home_phone'] . "</span><br>" ;

}

if ($queryArray['home_cell']!=="") {

print "<span class='header'>Home Cell:</span> <span class='bodytext'>" . $queryArray['home_cell'] . "</span><br>" ;

}

 

}

 

if ($queryArray['teaching_exp']!=="") {

print "<br><span class='header'>Teaching Experience:</span><br><span class='bodytext'> " . $queryArray['teaching_exp'] . "<br>" ;

}

if ($queryArray['first_year']=="Yes") {

print "<br><span class='header'>First Year:</span><span class='bodytext'> Yes<br>" ;

}

if ($queryArray['degree_1']!=="" || $queryArray['degree_2']!=="" || $queryArray['degree_3']!=="" ) {

print "<br><span class='header'>Education:</span><br>";

}

if ($queryArray['degree_1']!=="") {

print "<span class='bodytext'>" . $queryArray['degree_1'] . "<br>" ;

}

if ($queryArray['degree_2']!=="") {

print "<span class='bodytext'> " . $queryArray['degree_2'] . "<br>" ;

}

if ($queryArray['degree_3']!=="") {

print "<span class='bodytext'>" . $queryArray['degree_3'] . "<br>" ;

}

echo "<hr></div></div><br>";

}

 

include 'end.php';

?>

Open in new window

0
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
LVL 30

Expert Comment

by:IanTh
Comment Utility
are you using a repeatable region
0
 
LVL 14

Expert Comment

by:profya
Comment Utility
I have simulated your code and tried it my self. If there is a problem you should check your css and make sure that profile_left and profile_right have different posistions actually left, for example profile_left:
left: 150px;
profile_right:
left: 350px;

Then you can adjust them to suit your layout.
0
 

Author Comment

by:jbpeake
Comment Utility
I'm sorry guys, I have failed to communicate the problem well.  The page is posted at:

http://www.jpeake.com/agteacher2/institution.php?sorter=institution&id=Williston+High+School

Currently the divs look like:

#profile_left
{
      width: 200px;
      clear: both;
      float: left: 150px;
      border: solid 1px #000;
}

#profile_right
{
      width: 500px;
      overflow: auto;      
      float: left: 150px;
      border: solid 1px #000;
}

You can see, the two records that are returned are written directly over top of each other... I'm still playing with it trying to make them display in order from top to bottom.

J
0
 
LVL 14

Expert Comment

by:profya
Comment Utility
profile_left and profile_right both uses  float: left: 150px;
Change that for profile_right for example to  left: 150px;
You can change it to the following to see the difference:



#profile_left

{

position: absolute; left: 10px;

}
 

#profile_right

{

	position: absolute; left: 350px;

}

Open in new window

0
 

Author Comment

by:jbpeake
Comment Utility
I'm still struggling...

Now the css looks like:


#profile_left
{
      width: 200px;
      clear: both;
      float: left: 150px;
      border: solid 1px #000;
}

#profile_right
{
      width: 500px;
      overflow: auto;      
      position: absolute; left: 350px;
      border: solid 1px #000;
}

It is posted at:

http://www.jpeake.com/agteacher2/institution.php?sorter=institution&id=Williston+High+School

0
 
LVL 14

Accepted Solution

by:
profya earned 500 total points
Comment Utility
Ok, I have prepared the whole code. It is attached, please check it and use the following style:
#profile_left
{
      width:450px;
      float:left;
      padding-left:10px;
      margin-left:10px;
      background-color:#FFFFCC;
}

#profile_right
{
      width:450px;
      background-color:#DFF4FF;
      float:right;
      padding-right:10px;
      margin-right:10px;
}


I removed the wrapper and used divs directly, you can see the screen capture attached, is something like this helps you?
<?php

include'start.php';
 

$_GET["sorter"];

$sorter = $_GET["sorter"];
 

$_GET["id"];

$id = $_GET["id"];
 

if (($sorter=="") || ($id=="")){

echo "<meta http-equiv='Refresh' content='0;URL=directory.php>";

}

$query = mysql_query("SELECT * FROM users WHERE institution = '".$id."' ORDER BY rank DESC, last_name ASC")

or die(mysql_error());

$alternate="";

while($queryArray = mysql_fetch_array( $query ))

{

	if($alternate=="id='profile_right'")

		$alternate="id='profile_left'";

	else

		$alternate="id='profile_right'";

print "<div $alternate><p align='left'><img src= ../agteacher/uploaded_pics/" . $queryArray['file_name'] . " width='180'></p>" ;

print "<p>" ;

if ($queryArray['institution']!=="") {

print "<b>" . $queryArray['institution'] . "</b><br><br>" ;

}

if ($queryArray['first_name']!=="") {

print "<span class='header'>Name:</span> <span class='bodytext'>" ;

print $queryArray['first_name'] ;

if ($queryArray['middle_name']!==""){

print " " . $queryArray['middle_name'] ;

}

print " " . $queryArray['last_name'] . "</span><br><br>" ;

}

print "<span class='header'>My V-Card:</span>&nbsp;&nbsp;<span class='bodytext'><a href=vcard.php?id=" . $id . " target='_blank'>Add " . $queryArray['first_name'] . " " . $queryArray['middle_name'] . " " . $queryArray['last_name'] . " to contacts<span></a>  &nbsp; <a href=vcard.php?id=" . $id . " target='_blank'><img border='0' src=vcard.gif width='25'></a><br>";

if ($queryArray['organization']!=="") {

print "<br><span class='header'>Organization:</span> <span class='bodytext'>" .  $queryArray['organization'] . "</span><br>" ;

}

if ($queryArray['university']!=="") {

print "<br><span class='header'>University:</span> <span class='bodytext'>" .  $queryArray['university'] . "</span><br>" ;

}

if ($queryArray['department']!=="") {

print "<span class='header'>Department:</span> <span class='bodytext'>" .  $queryArray['department'] . "</span><br>" ;

}

if ($queryArray['district_name']!=="") {

print "<span class='header'>District Name:</span><span class='bodytext'>" . $queryArray['district_name'] . "</span><br>" ;

}

if ($queryArray['chapter_id']!=="") {

print "<span class='header'>Chapter ID:</span><span class='bodytext'>" . $queryArray['chapter_id'] . "</span><br>" ;

}

if ($queryArray['email']!=="") {

print "<br><span class='header'>Email:</span><span class='bodytext'> <a href='mailto:" .  $queryArray['email'] . "'>" . $queryArray['email'] . "</span></a><br>" ;

}

if ($queryArray['dept_phone']!=="") {

print "<span class='header'>Department Phone:</span> <span class='bodytext'>" . $queryArray['dept_phone'] . " " . $queryArray['dept_phone_ext'] . "</span><br>" ;

}

if ($queryArray['work_phone']!=="") {

print "<span class='header'>Work Phone:</span> <span class='bodytext'>" . $queryArray['work_phone'] . "</span><br>" ;

}

if ($queryArray['work_cell']!=="") {

print "<span class='header'>Work Cell:</span> <span class='bodytext'>" . $queryArray['work_cell'] . "</span><br>" ;

}

if ($queryArray['work_fax']!=="") {

print "<span class='header'>Work Fax:</span> <span class='bodytext'>" . $queryArray['work_fax'] . "</span><br>" ;

}

if ($queryArray['work_address_1']!=="" || $queryArray['work_address_2']!=="" || $queryArray['work_city']!=="" || $queryArray['work_state']!=="") {

print "<br><span class='header'>Work Address:</span><br>";

}

if ($queryArray['work_address_1']!=="") {

print "<span class='bodytext'>" . $queryArray['work_address_1'] . "</span><br>" ;

}

if ($queryArray['work_address_2']!=="") {

print "<span class='bodytext'>" . $queryArray['work_address_2'] . "</span><br>" ;

}

if ($queryArray['work_city']!=="") {

print  "<span class='bodytext'>" . $queryArray['work_city'] . "</span>";

}

if ($queryArray['work_city']!==""){

print  "<span class='bodytext'>" . ", </span>";

}

if ($queryArray['work_state']!=="") {

print  "<span class='bodytext'>" . $queryArray['work_state'] . "  " . $queryArray['work_zip']. "</span><br>" ;

}
 

if(isset($_SESSION['username'])) {
 

if ($queryArray['home_address_1']!=="" || $queryArray['home_address_2']!=="" || $queryArray['home_city']!=="" || $queryArray['home_state']!=="") {

print "<br><span class='header'>Home Address:</span><br>";

}

if ($queryArray['home_address_1']!=="") {

print "<span class='bodytext'>" . $queryArray['home_address_1'] . "</span><br>" ;

}

if ($queryArray['home_address_2']!=="") {

print "<span class='bodytext'>" . $queryArray['home_address_2'] . "</span><br>" ;

}

if ($queryArray['home_city']!=="") {

print  "<span class='bodytext'>" . $queryArray['home_city'] . "</span>";

}

if ($queryArray['home_city']!==""){

print  "<span class='bodytext'>" . ", </span>";

}

if ($queryArray['home_state']!=="") {

print  "<span class='bodytext'>" . $queryArray['home_state'] . "  " . $queryArray['home_zip']. "</span><br>" ;

}

if ($queryArray['home_phone']!=="") {

print "<br><span class='header'>Home Phone:</span> <span class='bodytext'>" . $queryArray['home_phone'] . "</span><br>" ;

}

if ($queryArray['home_cell']!=="") {

print "<span class='header'>Home Cell:</span> <span class='bodytext'>" . $queryArray['home_cell'] . "</span><br>" ;

}
 

}
 

if ($queryArray['teaching_exp']!=="") {

print "<br><span class='header'>Teaching Experience:</span><br><span class='bodytext'> " . $queryArray['teaching_exp'] . "<br>" ;

}

if ($queryArray['first_year']=="Yes") {

print "<br><span class='header'>First Year:</span><span class='bodytext'> Yes<br>" ;

}

if ($queryArray['degree_1']!=="" || $queryArray['degree_2']!=="" || $queryArray['degree_3']!=="" ) {

print "<br><span class='header'>Education:</span><br>";

}

if ($queryArray['degree_1']!=="") {

print "<span class='bodytext'>" . $queryArray['degree_1'] . "<br>" ;

}

if ($queryArray['degree_2']!=="") {

print "<span class='bodytext'> " . $queryArray['degree_2'] . "<br>" ;

}

if ($queryArray['degree_3']!=="") {

print "<span class='bodytext'>" . $queryArray['degree_3'] . "<br>" ;

}

echo "<hr></div><br>";

}
 

include 'end.php';

?>

Open in new window

cap3.PNG
0
 

Author Comment

by:jbpeake
Comment Utility
profya,

Thank you for your patience and help... I realized after your guidance that I was making a stupid mistake with my <div id='col2'> that was making everything move to the left.  A very stupid mistake, but since you gave me good working examples it made it easier for me to find the problem.

Thanks again,
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Author Note: Since this E-E article was originally written, years ago, formal testing has come into common use in the world of PHP.  PHPUnit (http://en.wikipedia.org/wiki/PHPUnit) and similar technologies have enjoyed wide adoption, making it possib…
Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
Learn the basics of if, else, and elif statements in Python 2.7. Use "if" statements to test a specified condition.: The structure of an if statement is as follows: (CODE) Use "else" statements to allow the execution of an alternative, if the …
The viewer will learn how to dynamically set the form action using jQuery.

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now