Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    mat
    mat is offline
    Regular Coder
    Join Date
    Jul 2002
    Posts
    199
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation help needed with table cells

    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 but it still does that how can i fix this?

    mat,

  • #2
    Regular Coder
    Join Date
    Jul 2002
    Posts
    698
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

    ?

  • #3
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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



    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
    Last edited by beetle; 09-23-2002 at 05:37 PM.
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #4
    mat
    mat is offline
    Regular Coder
    Join Date
    Jul 2002
    Posts
    199
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i don't i don't 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

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    Auckland New Zealand
    Posts
    115
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Beware, the Cybertooth tiger cometh

  • #6
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Code:
    <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
    Last edited by beetle; 09-23-2002 at 10:15 PM.
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #7
    mat
    mat is offline
    Regular Coder
    Join Date
    Jul 2002
    Posts
    199
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks, i really appreciate your help.

    i have a couple of questions though if you don't mind , 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.



    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,

  • #8
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's cuz your missing a semicolon!
    <div style="text-align: right; width:100%; background-color: #333333">

    See it? hehe

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

    <div style="text-align: right; width:100%; background-color: #333333">
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #9
    mat
    mat is offline
    Regular Coder
    Join Date
    Jul 2002
    Posts
    199
    Thanks
    0
    Thanked 0 Times in 0 Posts
    .. but it still doesn't work ?

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

    Edit: it's ok now
    Last edited by mat; 09-24-2002 at 12:13 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •