Solved

How to use a div inside a while loop

Posted on 2009-06-28
13
595 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
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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

I imagine that there are some, like me, who require a way of getting currency exchange rates for implementation in web project from time to time, so I thought I would share a solution that I have developed for this purpose. It turns out that Yaho…
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…
Learn the basics of strings in Python: declaration, operations, indices, and slicing. Strings are declared with quotations; for example: s = "string": Strings are immutable.: Strings may be concatenated or multiplied using the addition and multiplic…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…

816 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

8 Experts available now in Live!

Get 1:1 Help Now