Dreamweaver and tables

[jadenn]

Im working with a new website and Im having trouble figuring out how to get the images to appear where I want them to.
museum.grntech.net
Check out the website. If you notice, on the right hand side, the picture of the soldier 'jumps' from the red banner to the white space above. I want to create a
montage of images the appear that way all the way across the top of the page with the same 'jumping' effect. The problem is that the red and gold bars that you see are images, not backgroud so as a result, the color isnt 'expanding' on larger monitors. Its leaving a white space on the right hand side of the page. I need to make those colors a background color for the table instead of inserting an image. So, the white space at the top would be one row and the colors would be another two rows. However, how do I get the images to 'jump' if I do that? I'm not aware of a way to have images 'lay' over two or
three separate rows. I know thats about as clear as mud, but hopefully checking out the link above will clarify. thank you everyone!

 

[spyd3r]

The area you want to change in your HTML code is here:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="Masthead%20Example1.gif" width="902" height="217"></td>
</tr>
</table>


The easiest way (and the way that uses the least bandwith) would be to create the graphic of the soldier individually as a transparent gif.

Then when creating the table use the bgcolor and select a color for each of them so your code would then look like:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#CC0000" width="100%">&nbsp;<td>
</tr>
<tr>
<td bgcolor="#CCCC66" width="100%">&nbsp;</td>
</tr>
</table>

Then with the layers which in DreamWeaver MX is:
Insert-->Layer
Add a layer to your document in document view. Move to where you would like the picture to be located. Click inside the layer and select:
Insert-->Image
Browse to select your image file. Your code will end up looking something like this:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#CC0000" width="100%">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#CCCC66" width="100%">&nbsp;</td>
</tr>
</table>
<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; left: 560px; top: 1px;"><img src="solder.gif"></div>

You can then resize and edit the height of the table rows to correspond with your desired height, etc.

Hope this helps!
Spyd3r

Thanks!
Spyd3r