Jump to content

CSS background not expanding with MySQL table generated from loop

damianjames

By damianjames
in CSS Help

 Share

Recommended Posts

damianjames Member

damianjames

Posted
Posted

Hi all -

 

I did a search through the forums and couldn't find anything similar, so I'm hoping someone has an idea as to what to do.  I'm new, so please bear with the extraneous code.

 

The issue is I have a page that displays a table of products with images and information.  The rest of the page generates, CSS backgrounds are applied, but the PHP loop is still building the table.  My container div doesn't keep resizing with the table as it generates, so the background stops halfway down the table.  If I refresh the page the background will stop at different heights down at different times, which is why I'm thinking the problem is that the table is still generating when the rest of the page is done.  I'd also like to have a footer on the page, but a footer div winds up behind the table that is generated, farther down than the end of the background image.

 

Any assistance is greatly appreciated!

 

CSS:

 

html {
height:100%;
min-height:100%;
}

body {
margin:0pt;
padding:0pt;
text-align:center;
height:100%;
min-height:100%;
}

img {
border:0px;
}

.centered_float {
margin:0pt auto;
padding:0pt;
position:relative;
text-align:left;
width:1000px;
}

#header {
left: 0px;
top: 0px;
background:#FFFFFF;
height:150px;
}

#logo {
float:left;
margin-left:20px;
}

#logo_sub {
float:left;
display:inline;
margin-top:90px;
margin-left:10px;
}

#language_select {
float:right;
position:absolute;
top:20px;
right:120px;
color:#F3CFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}

#language_select a {
color:#5F3B6B;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}

#language_select a:visited {
color:#5F3B6B;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}

#language_select a:hover {
color:#5F3B6B;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}

#navigation {
background:url(../images/nav_bg.jpg) repeat-x #6E2B86;
color:#FFFFFF;
height: 38px;
}

.nav_float {
margin:0pt auto;
padding:0pt;
position:relative;
text-align:left;
width:1000px;
line-height:35px;
}

.nav_links {
display:inline;
position:relative;
top:-4px;
}

.nav_links img {
display:inline;
line-height:35px;
position:relative;
top:8px;
}

.nav_links a {
color:#FFFFFF;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
margin-left:5px;
margin-right:5px
}

.nav_links a:hover {
color:#F3CFFF;
}

#banner_blank {
height:40px;
min-height:40px;
background:#6E2B86;
}

#products {
background: #ffffff;
height:100%;
}

.product_float {
margin:0pt auto;
padding:0pt;
text-align:left;
width:1000px;
height:500%;
min-height:100%;
background:#ffffff url(/images/product_float.jpg) repeat-y left top;
}

#product_nav {
width:150px;
min-width:150px;
min-height:500px;
position:relative;
top:0px;
left:0px;
display:inline;
float:left;
background: url(/images/vert_nav_bg.jpg) repeat-x left top;
}

#product_table {
position:relative;
top:0px;
display:inline;
float:left;
width:800px;
height:100%;
min-height:100%;
}

.product_cell {
padding-left:15px;
padding-bottom:25px;
margin-right:10px;
border-bottom:2px solid #6E2B86;
}

.product_cell a, .product_cell a:visited {
color:#6E2B86;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}

.product_cell a:hover {
color:#F3CFFF;
text-decoration:none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
text-decoration:none;
}

 

HTML:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<?php 
require_once("includes/config.php");
?>
<script type="text/javascript" src="scripts/vertmenu.js"></script>
<title>
<?php
	echo("Company - $prodtitle");
?>
</title>
</head>
<?php
require_once("includes/heading.php");
?>
<div id="banner_blank"></div>
<div id="products">
  <div class="product_float">
		<div id="product_nav">
			<ul id="verticalmenu" class="vertmenu">
				<?php
					echo ("
						<li><a href=\"?lang=$lang&prodgroup=$prod_link[0]\">$prod_link_text[0]</a></li>
						<li><a href=\"?lang=$lang&prodgroup=$prod_link[1]\">$prod_link_text[1]</a></li>
						<li><a href=\"?lang=$lang&prodgroup=$prod_link[2]\">$prod_link_text[2]</a></li>
						<li><a href=\"?lang=$lang&prodgroup=$prod_link[3]\">$prod_link_text[3]</a></li>
						<li><a href=\"?lang=$lang&prodgroup=$prod_link[4]\">$prod_link_text[4]</a></li>
						");
				?>
			</ul>
		</div>
	  <div id="product_table">
		  <table>
			  <?php
					echo ("<h3>$prodgroup</h3>");
					$db = @mysql_connect("localhost", "user", "pass");
					if( ! ($db = @mysql_connect("localhost", "user", "pass")) ) {
					} else {
						mysql_select_db("dbname",$db) or die("Select DB Error: ".mysql_error());
					}

					$numcols = 3; // how many columns to display
					$numcolsprinted = 0; // no of columns so far

					// get the results to be displayed
					if ($prodgroup == "top") {
						$query = "SELECT * FROM $lang ORDER BY description";
						$mysql_result = mysql_query($query, $db);
					}
					else {
						$query = "SELECT * FROM $lang WHERE prodgroup = \"$prodgroup\" ORDER BY description";
						$mysql_result = mysql_query($query, $db);
					}
					// get each row
					while($myrow = mysql_fetch_row($mysql_result))
					{
						//get data - eg, reading fields 0 and 1
						$id = $myrow[0];
						$name = $myrow[1];
						$description = $myrow[2];
						$page = $myrow[3];
						$prodgroup = $myrow[4];
						$price = $myrow[5];
						$dimension = $myrow[6];

						if ($numcolsprinted == $numcols) {
							print "</tr>\n<tr>\n";
							$numcolsprinted = 0;
						}

						// output row from database
						echo "<td class=\"product_cell\" valign=\"top\"><a href=\"productdetail.php?lang=$lang&name=$name\">$name<br>$description<br><img src=\"/images/products/thumbs/p$name.jpg\"><br>$prodgroup<br>Dimension: $dimension<br>Price: $price</a></td>\n";

						// bump up row counter
						$numcolsprinted++;

					} // end while loop

					$colstobalance = $numcols - $numcolsprinted;
					for ($i=1; $i<=$colstobalance; $i++) {
					}
				?>
                  </tr>
		  </table>
	  </div>
  </div>
</div>	
</body>
</html>

Link to comment
Share on other sites
rhodesa Newbie

rhodesa

Posted
Posted

by the looks...you have a bad HTML structure. on the generated page, can you do a view source and copy/paste that code to here.

 

i notice you have an H3 tag inside a TABLE tag (it needs to be outside or in a table cell)

it doesn't look like you have an open TR or close TR tag at the beginning/end

 

try running the page through http://validator.w3.org/

Link to comment
Share on other sites
damianjames Member

damianjames

Posted
  • Author
Posted

Hi -

 

Thank you for the response!  Here is the generated code from the browser:

 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>
CUADROS Y COSAS - PRODUCTOS</title>
    <link href="/css/style.css" rel="stylesheet" type="text/css" />
</head>
<body style="background-color:#ffffff;">

    <script src="scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<div id="header">
	<div class="centered_float">

		<span id="logo"><img src="/images/logo_white.gif" /></span>
		<span id="logo_sub"><img src="/images/decoration_logo_esp.gif" /></span>
		<span id="language_select">
			ESPAÑOL | <a href="?lang=eng">ENGLISH</a>			</span>
	</div>
</div>
<div id="navigation">

	<div class="nav_float">
		<div class="nav_links">
			<a href="/home.php?lang=esp">HOME</a>			</div>
		<div class="nav_links">
			<img src="/images/nav_spacer.gif" height="25" width="2" />
		</div>
		<div class="nav_links">
			<a href="/about.php?lang=esp">QUIENES SOMOS</a>			</div>

		<div class="nav_links">
			<img src="/images/nav_spacer.gif" height="25" width="2" />
		</div>
		<div class="nav_links">
			<a href="/opportunity.php?lang=esp">OPORTUNIDAD</a>			</div>
		<div class="nav_links">
			<img src="/images/nav_spacer.gif" height="25" width="2" />
		</div>

		<div class="nav_links">
			<a href="/product_main.php?lang=esp">PRODUCTOS</a>			</div>
		<div class="nav_links">
			<img src="/images/nav_spacer.gif" height="25" width="2" />
		</div>
		<div class="nav_links">
			<a href="/contact.php?lang=esp">CONTÁCTANOS</a>			</div>

		<div class="nav_links">
			<img src="/images/nav_spacer.gif" height="25" width="2" />
		</div>
		<div class="nav_links">
			<a href="/events.php?lang=esp">EVENTOS</a>			</div>
		<div class="nav_links">
			<img src="/images/nav_spacer.gif" height="25" width="2" />
		</div>

		<div class="nav_links">
			<a href="/private/materials.php?lang=esp">MATERIALES PARA DISEÑADORAS(ES)</a>			</div>
	</div>
</div>
<script type="text/javascript" src="scripts/vertmenu.js" />
<div id="banner_blank"></div>
<div id="products">

  <div class="product_float">
		<div id="product_nav">
			<ul id="verticalmenu" class="vertmenu">

						<li><a href="?lang=esp&prodgroup=GRUPOS">GRUPOS DISEÑADOS</a></li>
						<li><a href="?lang=esp&prodgroup=ARTE_ENMARCADO">ARTE ENMARCADO</a></li>
						<li><a href="?lang=esp&prodgroup=ESPEJOS">ESPEJOS</a></li>
						<li><a href="?lang=esp&prodgroup=ACCESORIOS">ACCESORIOS</a></li>

						<li><a href="?lang=esp&prodgroup=FLORALES_Y_VELAS">FLORALES Y VELAS</a></li>
										</ul>
		</div>
	  <div id="product_table">
		  <table>
              	<tr>
			  <td class="product_cell" valign="top"><a href="productdetail.php?lang=esp&name=3005">3005<br />Alicia I<br /><img src="/images/products/thumbs/p3005.jpg" /><br />ESPEJOS<br />Dimension: 11" X 11"<br />Price: $21.99</a></td>

<td class="product_cell" valign="top"><a href="productdetail.php?lang=esp&name=3000">3000<br />Alicia II<br /><img src="/images/products/thumbs/p3000.jpg" /><br />ESPEJOS<br />Dimension: 14 1/2" X 35"<br />Price: $59.99</a></td>
<td class="product_cell" valign="top"><a href="productdetail.php?lang=esp&name=3004">3004<br />Alicia III<br /><img src="/images/products/thumbs/p3004.jpg" /><br />ESPEJOS<br />Dimension: 24 1/4" X 28 1/4"<br />Price: $129.99</a></td>
</tr>
<tr>
<td class="product_cell" valign="top"><a href="productdetail.php?lang=esp&name=3008">3008<br />Diana I<br /><img src="/images/products/thumbs/p3008.jpg" /><br />ESPEJOS<br />Dimension: 10 1/4" X 10 1/4"<br />Price: $19.99</a></td>

<td class="product_cell" valign="top"><a href="productdetail.php?lang=esp&name=3007">3007<br />Diana II<br /><img src="/images/products/thumbs/p3007.jpg" /><br />ESPEJOS<br />Dimension: 26" X 30"<br />Price: $59.99</a></td>
<td class="product_cell" valign="top"><a href="productdetail.php?lang=esp&name=3006">3006<br />Diana III<br /><img src="/images/products/thumbs/p3006.jpg" /><br />ESPEJOS<br />Dimension: 28 1/2" X 41"<br />Price: $119.99</a></td>
</tr>
<tr>
<td class="product_cell" valign="top"><a href="productdetail.php?lang=esp&name=3002">3002<br />Fiorella I<br /><img src="/images/products/thumbs/p3002.jpg" /><br />ESPEJOS<br />Dimension: 12" X 12"<br />Price: $24.99</a></td>

<td class="product_cell" valign="top"><a href="productdetail.php?lang=esp&name=3003">3003<br />Fiorella II<br /><img src="/images/products/thumbs/p3003.jpg" /><br />ESPEJOS<br />Dimension: 16" X 36"<br />Price: $69.99 </a></td>
<td class="product_cell" valign="top"><a href="productdetail.php?lang=esp&name=3001">3001<br />Fiorella III <br /><img src="/images/products/thumbs/p3001.jpg" /><br />ESPEJOS<br />Dimension: 30" X 42"<br />Price: $129.99</a></td>
</tr>
<tr>
<td class="product_cell" valign="top"><a href="productdetail.php?lang=esp&name=3022">3022<br />Isabella I<br /><img src="/images/products/thumbs/p3022.jpg" /><br />ESPEJOS<br />Dimension: 10.5" X 10.5"<br />Price: $19.99</a></td>

<td class="product_cell" valign="top"><a href="productdetail.php?lang=esp&name=3023">3023<br />Isabella II<br /><img src="/images/products/thumbs/p3023.jpg" /><br />ESPEJOS<br />Dimension: 14" X 34"<br />Price: $59.99</a></td>
<td class="product_cell" valign="top"><a href="productdetail.php?lang=esp&name=3032">3032<br />Laura Mirror<br /><img src="/images/products/thumbs/p3032.jpg" /><br />ESPEJOS<br />Dimension: 26 3/8" X 30 3/8"<br />Price: $41.95</a></td>
</tr>
<tr>
<td class="product_cell" valign="top"><a href="productdetail.php?lang=esp&name=3020">3020<br />Patricia I<br /><img src="/images/products/thumbs/p3020.jpg" /><br />ESPEJOS<br />Dimension: 12" X 12"<br />Price: $24.99</a></td>

<td class="product_cell" valign="top"><a href="productdetail.php?lang=esp&name=3019">3019<br />Patricia II<br /><img src="/images/products/thumbs/p3019.jpg" /><br />ESPEJOS<br />Dimension: 16" X 36"<br />Price: $69.99</a></td>
<td class="product_cell" valign="top"><a href="productdetail.php?lang=esp&name=3018">3018<br />Patricia III<br /><img src="/images/products/thumbs/p3018.jpg" /><br />ESPEJOS<br />Dimension: 30" X 42"<br />Price: $134.99</a></td>
</tr>
<tr>
<td class="product_cell" valign="top"><a href="productdetail.php?lang=esp&name=3017">3017<br />Sofía I <br /><img src="/images/products/thumbs/p3017.jpg" /><br />ESPEJOS<br />Dimension: 12" X 12"<br />Price: $24.99</a></td>

<td class="product_cell" valign="top"><a href="productdetail.php?lang=esp&name=3016">3016<br />Sofía II <br /><img src="/images/products/thumbs/p3016.jpg" /><br />ESPEJOS<br />Dimension: 16" X 36"<br />Price: $69.99</a></td>
<td class="product_cell" valign="top"><a href="productdetail.php?lang=esp&name=3015">3015<br />Sofía III <br /><img src="/images/products/thumbs/p3015.jpg" /><br />ESPEJOS<br />Dimension: 30" X 42"<br />Price: $139.99</a></td>
</tr>
<tr>
<td class="product_cell" valign="top"><a href="productdetail.php?lang=esp&name=3021">3021<br />Vanessa I <br /><img src="/images/products/thumbs/p3021.jpg" /><br />ESPEJOS<br />Dimension: 8.5" X 8.5"<br />Price: $14.99</a></td>

<td class="product_cell" valign="top"><a href="productdetail.php?lang=esp&name=3030">3030<br />Victoria Mirror<br /><img src="/images/products/thumbs/p3030.jpg" /><br />ESPEJOS<br />Dimension: 30" X 42"
<br />Price: $129.99</a></td>
                  </tr>
		  </table>
	  </div>
  </div>
</div>
    <div id="footer">

    	<div class="footer_float">
        	©2008 Cuadros y Cosas L.P.	All Rights Reserved.
        </div>
    </div>
</body>
</html>

 

I ran it through the validator and just about everything has to do with img alt tags and not using an html escape code for the ampersand (switched it and it broke php).  It also says a bunch of TD tags aren't closed, but looking through the source of the generated page, I can't find a single one that isn't.  I did fix the TR tag at the beginning and remove the H3 tag as well.

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.