[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 370
  • Last Modified:

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

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
corporateKeenan
Asked:
corporateKeenan
  • 6
  • 3
1 Solution
 
Marco GasiFreelancerCommented:
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
 
corporateKeenanAuthor Commented:
@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
 
Marco GasiFreelancerCommented:
Do you have set a fixed height and width? overflow attribute is ignored if these attributes are not set.
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
corporateKeenanAuthor Commented:
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
 
Marco GasiFreelancerCommented:
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
 
corporateKeenanAuthor Commented:
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
 
Marco GasiFreelancerCommented:
I would try to comment width and height for primaryContent table and comment promaryContentContainer table (since it's not used in this page).
0
 
Marco GasiFreelancerCommented:
Where is sidebar code? and css?
0
 
Marco GasiFreelancerCommented:
Do you still need assistance with this question?
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 6
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now