Solved

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

Posted on 2010-08-16
9
345 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 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
 

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

863 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

27 Experts available now in Live!

Get 1:1 Help Now