Solved

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

Posted on 2010-08-16
9
349 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
[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
  • 3
9 Comments
 
LVL 31

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 31

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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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
 
LVL 31

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 31

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 31

Expert Comment

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

Expert Comment

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

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

733 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