PDA

View Full Version : Fill the hole in he table?

gorilla1
09-25-2002, 03:29 AM
In the code below, I am trying to align a logo to the left side, and then a horizontal navigation bar to the right, while using a 1005 width. The logo has a greater height then the navbar. So the logo has a lot of black and the navbar also has a black background. The logo is in a table cell with rowspan of two (again, it is larger than the navbar). The problem I am having is that a gap shows up between the nav bar and the logo, and the gap shows up with white background instead of black (white, since that area is part of the cell spanning two rows not completely filled by the logo). I was not able to line them up widths, but there must be some way. The code is below, and will display the problem if copy pasted into a browser.

G

<table border="0" cellpadding="0" cellspacing="0" align="center" width="98%">

<tr><td>



<table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr bgcolor="000000"><td bgcolor="ffffff" valign="top" align="left" rowspan="2"><a href="index.html"><img border="0" src="vlogz2.gif" height="90" width="255" alt="etc"></a></td>

<td class="basey" height="65" align="left" valign="bottom"><font color="#ffffff">&nbsp;&nbsp;Home</font></td>
<td valign="bottom" >
<table bgcolor="000000" BORDER="0" class="primenu" align="right" cellpadding=0 cellspacing=0 >

<tr ><td valign="bottom" align="right">
<a href="sub.html" class="navcell">Sub</a>&nbsp; | <a href="dachart.php3" class="navcell">Today</a>&nbsp; | <a href="wkchart.php3"class="navcell">Week</a>&nbsp;</td></tr>

</table></td></tr>
<tr bgcolor="ffffff"><td style="background-image:url('undern2.gif'); background-repeat: repeat-x; background-position: top">&nbsp;</td><td style="background-image:url('undern2.gif'); background-repeat: repeat-x; background-position: top">&nbsp;</td></tr>
</table>

<tr>

<td width="100%" height="12"><IMG src="1pix.gif" alt="" BORDER=0></td></tr>
AlienSkater23
09-25-2002, 03:58 AM
(this probly isnt right but you can try it)
Im not entirely sre but after veiwing I found out what you ment by white space. I made the backgorund color of the table black and set the height and width of the image to 100%. You need to cahnge the width and height of the table cell itself to make the picture look accurate. Below is a copy of what i did. This is the ebst i could do , im not exactly sure about your problem.

<body bgcolor="white">
<table border="0" cellpadding="0" cellspacing="0" align="center" width="98%">

<tr><td>



<table border="1" cellpadding="0" cellspacing="0" width="100%"> <tr bgcolor="000000"><td bgcolor="black"

valign="top" align="left" rowspan="2" width="SET WIDTH OF PICTURE HERE!" height="SET HEIGHT OF

PICTURE HERE!"><a href="index.html"><img border="0" src="vlogz2.gif" height="100%" width="100%"

alt="etc"></a></td>

<td class="basey" height="65" align="left" valign="bottom"><font color="#ffffff"><a href="LOCATION OF

HOME!">Home</a></font></td>
<td valign="bottom" >
<table bgcolor="000000" BORDER="0" class="primenu" align="right" cellpadding=1 cellspacing=0 >

<tr ><td valign="bottom" align="right">
<a href="sub.html" class="navcell">Sub</a> <font color="white"> | </font><a href="dachart.php3"

class="navcell">Today</a><font color="white"> | </font> <a href="wkchart.php3"class="navcell">Week</a>

</td></tr>

</table></td></tr>
<tr bgcolor="ffffff"><td style="background-image:url('undern2.gif'); background-repeat: repeat-x;

background-position: top"> </td><td style="background-image:url('undern2.gif'); background-repeat: repeat-x;

background-position: top"> </td></tr>
</table>

</body>


try that and tell me how it goes. And if you have any troubles or have another problem just reply in this thread and ill see what i can do.
gorilla1
09-25-2002, 04:31 AM
Alien,

Thansk much for your help. Your code does fill the gap. However, the key is that the navbar is to have a lesser height than the logo - is is inset from the logo - that is the design I am trying to achieve. That is why setting the table to a background of black was aovided. Similarly, this is why the frist row is given a background of baclk, but the column that spans two rows is given a background of white - this must be done if the area under the navbar is to be white. What causes the problem is that the logo does not fill up the widht of the table cell it is in, and so the white shows..... Well, I just figured it out - by simply specifying the logo width and height in the td tag, he gap vanishes... Thanks, again, you pointed me in the right direction..

G