Solved

PHP table is pushing content from the PrimaryContent Area to under the footer help?

Posted on 2010-08-16
9
342 Views
Last Modified: 2013-12-13
I have a 3 column website that utilizes php to call data from MySQL and other .php pages. In the PrimaryContent area I would like to display a table that is retrieved from MySQL. My code does this however the table has so many records(I believe) that it will not display in its PrimaryContent area it pushes to below the footer. I've tried css adding a table-layout, nothing is working how can I trim down this table IF it is the isssue? All other pages work fine within the Primary Content area.
<body>
<div id="outer">
	<div id="header">
    
    <!-- USE THIS AS THE RELATIVE LINK - ../CookeK/content/themes/phpmysql/ -->
    
    	<?php include "../CookeK/content/themes/phpmysql/header.php"; ?>
        
		
	</div>
	<div id="menu">
    	<?php include "../CookeK/content/themes/phpmysql/menu.php"; ?>
		
	</div>
	<div id="content">
		<div id="primaryContentContainer">
			<div id="primaryContent"> 		<!-- primaryContent - START -->
            
<?php		    if (isset($_GET['menukey'])) {
			$menukey = $_GET['menukey'];
		    } else {
			$menukey = 0;
		    }
		    switch ($menukey) {
			case 1:
        			include "../CookeK/content/themes/phpmysql/primarycontent.php";
			        break;
			case 2:
		         	include "../CookeK/content/themes/phpmysql/aboutme.php";
	        		break;
			case 3:
        			include "../CookeK/content/themes/phpmysql/projects.php";
			        break;
	    		case 4:
		        	include "../CookeK/content/themes/phpmysql/classes.php";
	        		break;
			case 5:
				readfile("../Cookek/content/themes/phpmysql/contact.php");
			        break;
	    		case 6:
		        	include "http://www.yahoo.com";
	        		break;
				case 7:
		        	include "../Cookek/content/themes/phpmysql/AdvisorsEdit.php";
	        		break;
				case 8:
		        	include "../Cookek/content/themes/phpmysql/AdvisorsEditPost.php";
	        		break;
				case 9:
		        	include "../Cookek/content/themes/phpmysql/view_customers.php";
	        		break;
			default:	// case else
        			include "../CookeK/content/themes/phpmysql/primarycontent.php";
		        	break; 
		    }
?>

		</div>  				<!-- primaryContent - END -->
        
	</div>
    
		<div id="secondaryContent">
        	
            <?php include "../Cookek/content/themes/phpmysql/secondaryContent.php"; ?>
            
			
		</div>
		<div class="clear"></div>
	</div>
	<div id="footer">
    	
        <?php include "../Cookek/content/themes/phpmysql/footer.php"; ?>
       
	</div>
</div>
</body>

//*************************************

//This is the content that keeps appearing under the footer

//
<?php

$db_host = 'localhost';
$db_user = '*****';
$db_pwd = '*****';

$database = '*****';
$table = 'customers';

if (!mysql_connect($db_host, $db_user, $db_pwd))
    die("Can't connect to database");

if (!mysql_select_db($database))
    die("Can't select database");

	
	//CONCAT ((LEFT(FirstName, 1)), (LEFT(MiddleName, 1)), LastName) AS Username,, zlu_carcolor.Description AS 'Car Color', zlu_computer.Description AS Computer, IsLaptop, zlu_Race.Description AS Race, zlu_Residence.Description AS Residence, zlu_birthmonth.Description AS 'Birth Month' FROM {$table}, zlu_Cars, zlu_carcolor, zlu_computer, zlu_race, zlu_residence, zlu_birthmonth
	
	//, zlu_CarColor.Description AS 'Car Color', zlu_Computers.Description AS Computer, IsLaptop, zlu_Race.Description AS Race, zlu_Residence.Description AS Residence, zlu_BirthMonth.Description
	
// sending query 

$result = mysql_query("SELECT CustomerID, OldCustomerID, CONCAT_WS(', ', LastName, FirstName, MiddleName) AS 'Customer Name',CONCAT ((LEFT(FirstName, 1)), (LEFT(MiddleName, 1)), LastName) AS Username, CarID AS Cars, CarColorID AS 'Car Color', ComputerID AS Computer, IsLaptop AS Laptop, RaceID AS Race, ResidenceID AS Residence, BirthMonthID AS 'Birth Month'
FROM cookek.customers 
WHERE CustomerID BETWEEN 500 AND 600
ORDER BY LastName");

//INNER JOIN cookek.zlu_cars ON cookek.customers.CarID = cookek.zlu_cars.CarID 


if (!$result) {
    die("Query to show fields from table failed");
}

$fields_num = mysql_num_fields($result);



echo "<table border='1'><tr>";

for($i=0; $i<$fields_num; $i++)
{
    $field = mysql_fetch_field($result);
    echo "<td>{$field->name}</td>";
}
echo "</tr>\n";

while($row = mysql_fetch_row($result))
{
    echo "<tr>";


    foreach($row as $cell)
        echo "<td>$cell</td>";

    echo "</tr>\n";
}
mysql_free_result($result)

?>

Open in new window

0
Comment
Question by:corporateKeenan
  • 6
  • 3
9 Comments
 
LVL 30

Expert Comment

by:Marco Gasi
ID: 33445476
If in css you give to div PrimaryContent this attribute:

overflow:auto;

then for contents wich exceed the available space, it will be added automatically a scrollbar to scroll contents. The scrollbar will not be added for content wich don't exceed tha vailable space

Best regards
0
 

Author Comment

by:corporateKeenan
ID: 33445677
@marqusG

 I've tried the overflow: auto; attribute and it seems to be unrecognized and it is still dropping to belowthe footer with no scroll bar.
0
 
LVL 30

Expert Comment

by:Marco Gasi
ID: 33445811
Do you have set a fixed height and width? overflow attribute is ignored if these attributes are not set.
0
 

Author Comment

by:corporateKeenan
ID: 33445902
I had them set at one point and everything moved to the center of the page including the secondaryContent.php(sidebar). Here is a code from my CSS still no luck:
/* Basic */
*
{
	margin: 0em;
	padding: 0em;
}

h1,h2,h3,h4,h5,h6
{
	color: #2e6e1a;/*#6a6a6a;*/
}

body
{
	font-family: "Trebuchet MS", sans-serif;
	color: #7a7a7a;
	font-size: 11pt;
}

a
{
	color: #AF0A0A;
	text-decoration: underline;
}

a:hover
{
	text-decoration: none;
}

/* Outer */

#outer
{
	margin: 2.5em 3.0em 1.5em 3.0em;
}

/* Header */

#header
{
	padding: 0em 1.5em 0em 1.5em;
	height: 8em;
	width: 15em;
	float: left;
	position: relative;
	background: /*#AF0A0A*/ url('/Cookek/images/a1.gif') top right no-repeat;
}

#header h1
{
	position: absolute;
	bottom: 2.2em;
	font-size: 1.5em;
	letter-spacing: 0.1em;
}

#header h1 a
{
	color: #fff;
	text-decoration: none;
}

#header h2
{
	position: absolute;
	bottom: 2.7em;
	color: #EFE0E0;
	font-size: 0.8em;
}

/* Menu */

#menu
{
	height: 8em;
	background: #fafafa url('/Cookek/images/a2.gif') top left repeat-x;
	margin-left: 18em;
	position: relative;
}

#menu ul
{
	list-style: none;
	position: absolute;
	top: 3.3em;
	margin-left: 1.5em;
}

#menu li
{
	display: inline;
	border-left: dotted 1px #848484;
	padding-left: 0.8em;
}

#menu li.first
{
	border-left: 0px;
	padding-left: 0em;
}

#menu li a
{
	text-decoration: none;
	color: #6a6a6a;
	font-weight: bold;
	padding: 0.8em;
	margin-right: 0.8em;
	font-size: 0.9em;
}

#menu li a:hover
{
	background: #009900/*#AF0A0A url('/Cookek/images/a4.gif') */bottom left repeat-x;
	color: #fff;
}

/* Content */

#content
{
	background: #fff url('/Cookek/images/a3.gif') top left repeat-x;
	margin-top: 1px;
	padding-top: 1.5em;
}

#content p
{
	margin-bottom: 1.5em;
	line-height: 1.6em;
}

#content h2
{
	font-size: 1.5em;
}

#content h3
{
	font-size: 1.1em;
}

#content h2,h3,h4,h5,h6
{
	padding-bottom: 0.2em;
	margin-bottom: 1.2em;
	border-bottom: dotted 1px #cacaca;
}

#content ul
{
	margin-bottom: 1.5em;
	padding-left: 1em;
	line-height: 1.6em;
}

#content blockquote
{
	border-left: solid 0.8em #cacaca;
	padding: 0.5em 0em 0.5em 1.0em;
	margin-bottom: 1.5em;
	line-height: 1.6em;
}

#content blockquote p
{
	display: inline;
}

#content table
{
	border: dotted 1px #cacaca;
	padding: 0.5em;
	margin-bottom: 1.5em;
}

#content table th
{
	text-align: left;
	font-weight: bold;
	padding: 0.5em;
}

#content table td
{
	padding: 0.5em;
}

#content table tr.rowA
{
	background-color: #f5f5f5;
	color: inherit;
}

#content table tr.rowB
{
	background-color: #fdfdfd;
	color: inherit;
}

/* Primary Content */

#primaryContentContainer
{
	float: right;
	margin-left: -19em;
	
	
	width: 100%;
	overflow: auto;

}

#primaryContentContainer table
{
	table-layout: fixed;
	height: 100%;
	width: 100%;
	overflow: auto;
}



#primaryContent
{
	margin: 0em 0em 0em 18em;
	padding: 1.5em;
	border-left: dotted 1px #cacaca;
	overflow: auto;
}

#primaryContent table
{
	table-layout: fixed;
	height: 100%;
	width: 100%;
	overflow: auto;
}

/* Secondary Content */

#secondaryContent
{
	float: left;
	width: 15em;
	padding: 1.5em;
	overflow: auto;
}

/* Footer */

#footer
{
	margin-top: 1.0em;
	border-top: dotted 1px #cacaca;
	padding: 1.5em;
	font-size: 0.5em;
	text-align: center;
	overflow: auto;
}

.clear
{
	clear: both;
}







	/* ADVISORS START CSS */

#advisors *
{
	margin: 0em;
	padding: 0em;
}

#advisors body
{
	font-family: Verdana ;
	color: #000000;
	font-size: 11pt;
}

#advisors textarea
{
	padding: 5px;
	background-color: #FBFBFB;
	width: 460px;
	height: 200px;
	font-size: small;
	font-family: Verdana;
}

#advisors input.txt
{
	background-color: #FBFBFB;
	font-size: small;
	font-family: Verdana;
	height: auto;
	padding:1px;
}

#advisors input.txtwide
{
	background-color: #FBFBFB;
	width: 460px;
	font-size: small;
	font-family: Verdana;
	height: auto;
	padding:1px;
}

#advisors input.txtmedium
{
	background-color: #FBFBFB;
	width: 140px;
	font-size: small;
	font-family: Verdana;
	height: auto;
	padding:1px;
}

#advisors td.radiobtn
{
	font-size: small;
	font-family: Verdana;
	height: auto;
	padding:1px;
}


#advisors tr.aligntop
{
	vertical-align: top;
	font-size: x-small;
	font-family: Verdana;

}

#advisor select /* dropdown list */
{
	width: 463px;
	font-size: small;
	font-family: Verdana;
}

#advisors #chklist
{
	padding: 5px;
	border: 1px solid blue;
	font-family: Verdana;
	font-size: 10pt;
	color: blue;
	overflow: auto;
	background: white;
	width: 460px;
	height: auto;
}

 <!--ADVISORS END-->

Open in new window

0
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 30

Expert Comment

by:Marco Gasi
ID: 33446118
I see this:

#primaryContent
{
      margin: 0em 0em 0em 18em;
      padding: 1.5em;
      border-left: dotted 1px #cacaca;
      overflow: auto;
}

#primaryContent table
{
      table-layout: fixed;
      height: 100%;
      width: 100%;
      overflow: auto;
}

You don't have to set overflow for table but for div. Width has to be set in pixels so you have to try to find the right value. To do it I suggest to set background color to a color you see immediatly. So  you should write this:

#primaryContent
{
      margin: 0em 0em 0em 18em;
      padding: 1.5em;
      border-left: dotted 1px #cacaca;
        height: 300px; //try several values
        background.color:#ff0000; /to delete after right height is found
      overflow: auto;
}

Hope this helps
0
 

Author Comment

by:corporateKeenan
ID: 33446700
Thanks, elements are moving and I have a scroll bar now but the content still falls under the footer and the sidebar is also connected to the PrimaryContent area.
0
 
LVL 30

Accepted Solution

by:
Marco Gasi earned 500 total points
ID: 33446848
I would try to comment width and height for primaryContent table and comment promaryContentContainer table (since it's not used in this page).
0
 
LVL 30

Expert Comment

by:Marco Gasi
ID: 33446869
Where is sidebar code? and css?
0
 
LVL 30

Expert Comment

by:Marco Gasi
ID: 33476644
Do you still need assistance with this question?
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
These days socially coordinated efforts have turned into a critical requirement for enterprises.
The viewer will learn how to dynamically set the form action using jQuery.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

708 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