HTML Forum

**redline5th** · 01:44 PM

Hello! I am a hobby designer, and am helping out a friend of mine make a site for his tint and graphics shop. We're both stumped. My problem is that I have sliced the layout in Photoshop, and have imported it into an HTML editor. I am using an old version of dreamweaver (just because that's what I learned on) I have set the content image as the background of the table so it will expand. When it expands it actually takes my navigation bar with it...

The website is a left hand navigation site...and I haven't done this in FOREVER. (it's been three years probably.) The site is extremely simple, but I am trying to work with his template.

Here is a picture of the problem:

And here is the code as well:

Code:

<style type="text/css">
<!--
body {
    margin-top: 25px;
    margin-bottom: 30px;
}
-->
</style>

</head>
<body bgcolor="#FFFFFF" leftmargin="0" marginwidth="0" background="images/carbonfiber.gif">
<!-- ImageReady Slices (sliced.psd) -->
<table width="771" height="751" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
    <tr>
        <td align="left" valign="top" bgcolor="#FFFFFF">
            <div id="nav">
                            <img src="images/logo_01.jpg" alt="" width="227" height="133" align="top">            
          </div></td>
        <td rowspan="4">
                        <img src="images/header_02.jpg" width="543" height="185" alt=""></td>
        <td>
            <p align="center">
            <img src="images/spacer.gif" width="1" height="133" alt=""></td>
    </tr>
    <tr>
        <td align="left" valign="top" bgcolor="#FFFFFF">
            <div id="home">
                            <img src="images/home_03.jpg" alt="" width="227" height="24" align="top">            
          </div></td>
        <td>
                        <img src="images/spacer.gif" width="1" height="24" alt=""></td>
    </tr>
    <tr>
        <td align="left" valign="top" bgcolor="#FFFFFF">
            <div id="res">
                            <img src="images/residentialcommercial_04.jpg" alt="" width="227" height="24" align="top">            
          </div></td>
        <td>
            <p align="center">
            <img src="images/spacer.gif" width="1" height="24" alt=""></td>
    </tr>
    <tr>
        <td rowspan="2" align="left" valign="top" bgcolor="#FFFFFF">
            <div id="auto">
                            <img src="images/automotive_05.jpg" alt="" width="227" height="24" align="top">            
          </div></td>
        <td>
            <p align="center">
            <img src="images/spacer.gif" width="1" height="4" alt=""></td>
    </tr>
    <tr>
      <td rowspan="8" valign="bottom" background="images/content_06.gif"><p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p></td>
        <td>
            <img src="images/spacer.gif" width="1" height="20" alt=""></td>
    </tr>
    <tr>
        <td align="left" valign="top" bgcolor="#FFFFFF">
            <div class="graphics">
                            <img src="images/graphics_07.jpg" alt="" width="227" height="24" align="top">            
          </div></td>
        <td>
            <img src="images/spacer.gif" width="1" height="24" alt=""></td>
    </tr>
    <tr>
        <td align="left" valign="top" bgcolor="#FFFFFF">
            <div id="contact">
                            <img src="images/contact_08.jpg" alt="" width="227" height="24" align="top">            
          </div></td>
        <td>
            <img src="images/spacer.gif" width="1" height="24" alt=""></td>
    </tr>
    <tr>
        <td align="left" valign="top" bgcolor="#FFFFFF">
            <div id="gallery">
                            <img src="images/gallery_09.jpg" alt="" width="227" height="25" align="top">            
          </div></td>
        <td>
            <img src="images/spacer.gif" width="1" height="25" alt=""></td>
    </tr>
    <tr>
        <td align="left" valign="top" bgcolor="#FFFFFF">
            <div id="corvette">
                            <img src="images/corvette_10.jpg" alt="" width="227" height="133" align="top">            
          </div></td>
        <td>
            <img src="images/spacer.gif" width="1" height="133" alt=""></td>
    </tr>
    <tr>
        <td align="left" valign="top" bgcolor="#FFFFFF">
            <div id="email">
                            <img src="images/email_11.jpg" alt="" width="227" height="27" align="top">            
          </div></td>
        <td>
            <img src="images/spacer.gif" width="1" height="27" alt=""></td>
    </tr>
    <tr>
        <td align="left" valign="top" bgcolor="#FFFFFF">
            <div id="phone">
                            <img src="images/phone_12.jpg" alt="" width="227" height="27" align="top">            
          </div></td>
        <td>
                        <img src="images/spacer.gif" width="1" height="27" alt=""></td>
    </tr>
    <tr>
        <td height="131" align="left" valign="top" bgcolor="#FFFFFF">
                      <img src="images/getdirections_13.jpg" alt="" width="227" height="28" align="top">          
          </div></td>
        <td>
            <img src="images/spacer.gif" width="1" height="28" alt=""></td>
    </tr>
    <tr>
        <td colspan="2" align="left" valign="top" background="images/spacer_14.gif" bgcolor="#FFFFFF">&nbsp;
          <p align="left">&nbsp;</p>
      <p align="center"></td>
        <td>
            <img src="images/spacer.gif" width="1" height="13" alt=""></td>
    </tr>
    <tr>
        <td colspan="2" align="left" valign="top" bgcolor="#FFFFFF">
      <img src="images/footer_15.jpg" width="770" height="79" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="79" alt=""></td>
    </tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>

**LadynRed** · 01-17-2008, 01:30 PM

Get rid of the <p></p> tags surrounding your nav images first, see where that leaves you.

I realize you're trying to work with his template, but that whole thing would be SO much simpler and cleaner without the tables and using CSS

.

**redline5th** · 01-17-2008, 01:48 PM

I removed the paragraph tags. Unsure on how they got there.

Anyway, it's still doing that. It's fine when I take out all of the content that's in the content table, but when it stretches it takes the nav with it. Starting right underneath that automotive button. And each time I space down the nav spaces down one more (see picture)

Yeah I'm kind of old fashioned I guess. I have the sliced .PSD file. I could go back and make it table-less, but I wouldn't even know where to start with that!! I just need it to work and not drag my res/commercial button with it when I go to add content.

**LadynRed** · 01:59 PM

Quote:

Unsure on how they got there.

Dreamweaver will do that if you don't set your configuration properly and tell it NOT to.

Is there any other CSS other than what you've got it the <head> and inline ?

Do you have it online anywhere ?

**redline5th** · 02:04 PM

Quote:

Originally Posted by LadynRed

Dreamweaver will do that if you don't set your configuration properly and tell it NOT to.

Is there any other CSS other than what you've got it the <head> and inline ?

No ma'am. The only thing that isn't listed in the above code is the metatags, the title, and of course the beginning <head> and <html> tags.

Embarrassingly enough, I know nothing about CSS. The only thing that is set is the margin through css, which dream weaver did for me whenever I set the margin.

I am using dream weaver 8 if that helps. If it means using some CSS to help fix this problem I am willing to try it! Especially if it makes it easier on you all helping me.

~No it's not online anywhere. I don't have any webspace anymore. I might can put it on a friends site just for a little while if he'll let me.

I just noticed that you are from TN! Same here!-- I'm in the Western flatlands of TN.

**LadynRed** · 01-17-2008, 02:11 PM

Well then, hello neighbor

. I'm in Nashville !

If you'd be willing to zip up the graphics, I could help you with the layout in CSS.

**redline5th** · 01-17-2008, 02:53 PM

Well I need to do it...that's why I'm doing it is for the challenge, but this is kicking my butt.

I don't really need CSS for this, I just need to work.

I can get it to stretch but I have to a use a space between the nav bar and the footer. I outa just do that and throw a layer over it. Screw the tables!

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!