...

View Full Version : help needed with table cells



mat
09-23-2002, 12:51 PM
i'm trying not to use DW on this, so i'm keeping it pretty simple. I have ran into a little prob though, the two top buttons ('about us' & 'contact') are not doing what they should (aligning like the ones below against the right side) if you take a peep it's pretty obvious what they are supposed to be doing:

> http://www.theory1.orcon.net.nz/layout.html


I have tried everything i know so far :confused: but it still does that :mad: how can i fix this?

mat,

Garadon
09-23-2002, 01:59 PM
how about replacing this:

<tr height=22>
<td colspan=4 width=515>&nbsp;</td>
<td><IMG SRC="images/ab.gif" WIDTH=74 HEIGHT=22></TD>
<TD><IMG SRC="images/cn.gif" WIDTH=71 HEIGHT=22></TD>
</tr>

with this:

<tr height=22>
<td colspan=6 width=515 align=rigth><IMG SRC="images/ab.gif" WIDTH=74 HEIGHT=22> <IMG SRC="images/cn.gif" WIDTH=71 HEIGHT=22></TD>
</tr>

?

beetle
09-23-2002, 06:34 PM
I think he wants the table border to show up around each image.

You aren't going to get that to work, here's an illustration why

http://www.peterbailey.net/images/web_photos/table-error.gif

As you can see, since your images in the columns at the bottom are wider than at the top, the are setting the columns' widths, and override any width specification you make in the upper row. Remember, just because you don't use a column the whole length of the table doesn't mean the the HTML renderer doesn't know how wide it's supposed to be

A better solution would be to not rely on the the table border to outline your images

mat
09-23-2002, 10:30 PM
i don't i don't :o sorry the border is actually just for me to help see whats going on, i am going to remove it later.

i did try your method Garadon but the table messes up :confused:

Tonz
09-23-2002, 11:10 PM
Yes - it can be done.

You have the right idea by making every <tr> a new table - just make the main table one cell.

IE:

<td>

ALL THE MAIN CONTENT TABLES HERE</td>

Or just make the row with the two menu items a seperate table.


Good luck

Tonz:cool:

beetle
09-23-2002, 11:13 PM
I re-worked your page's code with some better/more compliant stuff. It's a decent amout of change so I won't outline it all here, but rather just cut'n'paste and let you have at it.
<html>
<head>
<title>Layout test</title>
<style>
body {
text-align:center;
}
img#tag {
position: absolute;
z-index: 2;
margin-left:-80px;
margin-top:4px;
}

table#tbl {
width: 100%;
padding-top: 40px;
}
</style>
</head>

<body bgcolor="#333333">
<img src="tag.gif" id="tag" alt="">
<div style="width:660px; background-color: #BFB48E">
<div style="text-align: right; width:100%">
<img src="images/ab.gif" width="74 height="22"><img src="images/cn.gif" width="71" height="22"></div>
<table id="tbl" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height=200>
<table align="center" border=1 width=115>
<tr>
<td colspan=2><A HREF='detail.php?pot=28' target='popup' onClick="window.open('detail.php?pot=28','popup','width=400,height=500'); return false"><img src="cg/cg1_small.jpg" border=0></a></td>
</tr>
<tr>
<td>BirdBath</td>
</tr>
</table>
</td>
<td height=200>
<table align="center" border=1 width=115>
<tr>
<td colspan=2><A HREF='detail.php?pot=29' target='popup' onClick="window.open('detail.php?pot=29','popup','width=400,height=500'); return false"><img src="cg/cg2_small.jpg" border=0></a></td>
</tr>
<tr>
<td>Water Feaure</td>
</tr>
</table>
</td>
<td height=200>
<table align="center" border=1 width=115>
<tr>
<td colspan=2><A HREF='detail.php?pot=30' target='popup' onClick="window.open('detail.php?pot=30','popup','width=400,height=500'); return false"><img src="cg/cg3_small.jpg" border=0></a></td>
</tr>
<tr>
<td>Water Feature</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height=200>
<table align="center" border=1 width=115>
<tr>
<td colspan=2><A HREF='detail.php?pot=31' target='popup' onClick="window.open('detail.php?pot=31','popup','width=400,height=500'); return false"><img src="cg/cg4_small.jpg" border=0></a></td>
</tr>
<tr>
<td>Tall Cylinder</td>

</tr>
</table>
</td>
<td height=200>
<table align="center" border=1 width=115>
<tr>
<td colspan=2><A HREF='detail.php?pot=32' target='popup' onClick="window.open('detail.php?pot=32','popup','width=400,height=500'); return false"><img src="cg/cg5_small.jpg" border=0></a></td>
</tr>
<tr>
<td>Tall Cylinder</td>

</tr>
</table>
</td>
<td height=200>
<table align="center" border=1 width=115>
<tr>
<td colspan=2><A HREF='detail.php?pot=33' target='popup' onClick="window.open('detail.php?pot=33','popup','width=400,height=500'); return false"><img src="cg/cg6_small.jpg" border=0></a></td>
</tr>
<tr>
<td>Tall Cylinder</td>

</tr>
</table>
</td>
</tr>
</table>
<a href="output.php?page=2&collection=1">Next</a><br>
<img src="images/mg.gif" width="121" height="22"><img src="images/cg.gif" width="107" height="22"><img src="images/mj.gif" width="104" height="22"><img src="images/rt.gif" width="124" height="22"><img src="images/it.gif" width="127" height="22"><img src="images/tz.gif" width="77" height="22"></div>
</body>
</html>Of course, this could be refined and refined until the tables are completely gone, but I think this is a step in the right direction

mat
09-23-2002, 11:47 PM
thanks, i really appreciate your help. :)

i have a couple of questions though if you don't mind :o , first being how can i make the bit behind the two top buttons the same color as the actual body-page background (#333333) here is what i mean.

http://www.theory1.orcon.net.nz/examplea.gif

i tried adding a "background color" bit to what i thought was the box containg the 2 buttons

<div style="text-align: right; width:100% background-color: #333333">
<img src="images/ab.gif" width="74 height="22"><img src="images/cn.gif" width="71" height="22"></div>

didn't make a difference though?


mat,

beetle
09-24-2002, 12:07 AM
That's cuz your missing a semicolon!
<div style="text-align: right; width:100%; background-color: #333333">

See it? hehe :D

Ok, now for the non-smart*ss-version

<div style="text-align: right; width:100%; background-color: #333333">

mat
09-24-2002, 12:16 AM
:eek: .. but it still doesn't work ?

would it be the one above ( <div style="width:660px; background-color: #BFB48E"> ) overiding it or something?

it's ok now :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum