Solved

How to use a div inside a while loop

Posted on 2009-06-28
13
606 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 4
  • 2
  • +1
13 Comments
 
LVL 14

Expert Comment

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

Expert Comment

by:absx
ID: 24734234
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
ID: 24734295
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
Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

 
LVL 14

Expert Comment

by:profya
ID: 24734322
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
ID: 24734681
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
ID: 24735709
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
 
LVL 30

Expert Comment

by:IanTh
ID: 24735792
are you using a repeatable region
0
 
LVL 14

Expert Comment

by:profya
ID: 24735796
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
ID: 24736056
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
ID: 24736093
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
ID: 24736265
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
ID: 24736368
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
ID: 24741690
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

Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
This article discusses how to create an extensible mechanism for linked drop downs.
Learn the basics of modules and packages in Python. Every Python file is a module, ending in the suffix: .py: Modules are a collection of functions and variables.: Packages are a collection of modules.: Module functions and variables are accessed us…
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…

636 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