Jump to content

i need help trying to center images in a table cells


Recommended Posts

ok so this is what is happening,

i load the page, the images and text come in, but the images are aligned to the left instead of centered, also the text is beside my picture instead of below it.

 

now i have set align='center' also tect-align='center' but nothing seems to be working. you can check out my site here: http://typh.ca/templates/picdb.php?dbname=traddb here is the code before php kicks in.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html><!-- InstanceBegin template="/Templates/NEW_CSS_template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="doctitle" -->
<title>cabinetglass.com - </title>
<style type="text/css">
div img {
   display:block;
   margin:auto;
}
</style>
<!-- InstanceEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
<!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->



</head>

<body>
<div id="pagetop">
<img src="images/alt_cabinetglass_01_02.png" width="186" height="46"><a href="../index.php"><img src="images/alt_cabinetglass_01_03.png" border="0"></a><a href="../contact_us.php"><img src="images/alt_cabinetglass_01_04.png" border="0"></a><a href="../testimonials.php"><img src="images/alt_cabinetglass_01_05.png" border="0"></a><a href="../measuring.php"><img src="images/alt_cabinetglass_01_06.png" border="0"></a><a href="../install.php"><img src="images/alt_cabinetglass_01_07.png" border="0"></a><a href="../links.php"><img src="images/alt_cabinetglass_01_08.png" border="0"></a><a href="../faqs.php"><img src="images/alt_cabinetglass_01_09.png" border="0"></a><img src="images/alt_cabinetglass_01_10.png"></div>
<div id="header">
<p><img src="images/alt_cabinetglass_02_01.png"><a href="../traditional.php"><img src="images/alt_cabinetglass_02_02.png" border=		"0"></a><a href="../art_glass.php"><img src="images/alt_cabinetglass_02_03.png" border="0"></a><a href="../etched_glass.php"><img src="images/alt_cabinetglass_02_04.png" border="0"></a><a href="../photos.php"><img src="images/alt_cabinetglass_02_05.png" border="0"></a><img src="images/alt_cabinetglass_02_06.png"></p>
  <p><img src="images/alt_cabinetglass_02_07.png"></p>
</div>

<div id="content">
<div align="center">
    
      <!-- InstanceBeginEditable name="Content" -->
      <? $dbtable = $_GET['dbname'];?>
      <DIV align="left>
        <h2 class="layout">
        <p><?
	if ($dbtable == "traddb"){ echo "Traditional ";}
	if ($dbtable == "etchdb"){ echo "Etched ";}
	if ($dbtable == "artdb"){ echo "Art ";}
	?>   Cabinet Glass Door Inserts
          </h2>
        </p>
        <p>
          <?

mysql_connect("localhost","username","password");
mysql_select_db("dbname");

$result=mysql_query("select * from $dbtable order by id asc");
$count = 1;
echo "<div align='top' style='text-align: -moz-center'>";
echo "<table width='400' border='1'>";
while($row = mysql_fetch_assoc($result)) {
if ($count == 1) {
	echo "<tr align='center'>";
}
echo "
<div align='top' class='center' style='text-align: -moz-center'>
	<td align='top' style='text-align: -moz-center'>
		<a href='../estimate.php?name=".$row['name']."&acprice=".$row['acprice']."&bprice=".$row['bprice']."&fcprice=".$row['fcprice	']."'>
		<img src='../images/". $row["name"].".jpg' height='150px'/>
		<br /> ".$row['name']."
	</td>
</div>";
if ($count == 3) {
	echo "</tr>";
	$count = 0;
}
$count++;
}
echo "</table>";
echo"</div>";

?>
</p>
      </DIV>
      <p align="center"></p>
      <!-- InstanceEndEditable -->      </div>
    <div></div>
    </div>
</div>
<div id="colorfade">
  <p align="center"> </p>
  <p align="center" class="style1">Due to the nature of different computer monitors as well as   difference in dye lots of colors, </p>
  <p align="center" class="style1">all color and textured glass samples shown may be subject to   slight changes. To learn more about the </p>
  <p align="center"><span class="style1">Color Accuracy of monitors and the Glass samples shown on this   site,</span> <A href="ColorNote.php">please click here</A>. </p>
</div>
<div id="footer"></div>

</body>
<!-- InstanceEnd --></html>

 

please help me, i've been going nuts for a week trying to get these stupid images to center, thank you.

Many browsers don't recognize things set in the <tr> tag, like echo "<tr align='center'>";.

 

Also, why not have the image in it's own cell/row? Like this:

echo "
<div align='top' class='center' style='text-align: -moz-center'>
	<td align='top' style='text-align: -moz-center'>
		<a href='../estimate.php?name=".$row['name']."&acprice=".$row['acprice']."&bprice=".$row['bprice']."&fcprice=".$row['fcprice	']."'>
		<img src='../images/". $row["name"].".jpg' height='150px'/>
	</td>
</tr>
<tr>
	<td align='top' style='text-align: -moz-center'>
		<a href='../estimate.php?name=".$row['name']."&acprice=".$row['acprice']."&bprice=".$row['bprice']."&fcprice=".$row['fcprice	']."'>
		<br /> ".$row['name']."
	</td>
</div>";

... yeah top was a experiment - guess i forgot to remove it. i put them in seperate <tr> except now the images aren't in line and the whole thing is blown apart. you can see if you go to the webpage. i guess i'll just start over since there is a bunch i nee to change back from experimenting. thanks.

Remove this from your css stylesheet

 

div img {

float:left;

}

 

 

Thats why it is floating to the left.

 

If you have other items depending on this css rule, then change something so that this rule don't apply to the images in question.

 

Nate

While this thread will probably help you with a temporary fix to your problems, I strongly recommend taking the time to learn to layout your pages with CSS, as table-based layouts are already outdated, and will only continue to become more so. CSS is the new way.

just a 2cent throw in here.

 

There will always be a need for tables. And for now.. The css layouts still can't do some very important things that tables can.

The CSS layouts will REALLLY REALLY take off once w3 finishes with CSS3.

 

I've been checking out some of the new properties we'll have controls over. WHOO buddy.. I seen a few entries about massive background control.. Which sooo frikin needed its not even funny. When that comes out people are going to start seeing some BEAUTIFUL sites... Matching up against flash sites. With ease. They still won't have the animation power that flash sites do. But the overall look will be just as beautiful with alot closer functionality then we've got right now.

 

 

Imagine websites where all of the graphics are transparent images. And users can change colors anytime they want to.

Without screwing up the design of the site. I have a project I"m working on using the same technique. However due to the insuffcient abilites of CSS atm.. It's not quite as gorgeous as it could be. The only reason I've even decided to go ahead with it is because the layout shape is just blocky enough to do so. We've all seen color changing websites before.. But they always have a limit of the colors. Mainly because alot of the layouts require graphics. If we had the control over the backgrounds of elements that should be given with CSS3. We could make transparent graphics. That would be used to hold the design detail. And then simply alter background colors to turn the whole site any color we want to. Problem now is that we have not the control over the background to shape it properly. In css3 we will have that ability.

yes, CSS is the "proper way", but I along with many developers have become sooo frustrated with the support for it that it is a pain in the ass. If all browsers handled it the same way without the need for hacks and tricks, then yes... css all the way, but just last night I fought with css for about 2 hours and could not accomplish what I wanted. I got so frustrated with it that I went to a simple 2 row 2 col table and accomplished in 5 minutes what I could not do in several hours in css.

 

For styling elements, yes most definitely css is the way to go, but for layouts.. I am going to stick with tables for a while. CSS takes SOOOO long to code it out and make it all work across browsers and if you happen to get some other css element in there, it can break the whole damn thing.

 

Table layouts are still very much used and will be for a long time.

 

Nate

just a 2cent throw in here.

 

There will always be a need for tables.

 

Agreed. Tables are for tabular data.

 

As for the comment on seeing some beatiful sites in the future blah blah ... I can only assume you've never seen http://www.csszengarden.com/

 

 

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.

×
×
  • 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.