Sidebar looks fine in DW...stretched out on website

Discussion in 'HTML & Website Design' started by TheGrecianHero, Feb 7, 2011.

  1. #1
    Hey everyone.

    So I'm building a site in Dreamweaver. I have a sidebar set up that looks fine on one page with the content of the page in a table in the middle. The middle portion on this page is only about a paragraph and everything looks normal both in DW and online. I've been using that one as a template.

    I have another page that has much more content, a couple of pages worth of scrolling. I delete the previous content from that table and plug in the new content. Everything looks great in Dreamweaver, including the live view. But when I upload the page, the sidebar is stretched out along with the content, with an image at the top, one in the middle, and one at the end, instead of close together like they should be.

    Any ideas what it could be? Let me know if you need to see the code or a screenshot. Any help is GREATLY appreciated.
     
    TheGrecianHero, Feb 7, 2011 IP
  2. jawanda

    jawanda Peon

    Messages:
    151
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Hi,

    Post your code and I will help. I'm sure it's something simple.

    -Phil
     
    jawanda, Feb 8, 2011 IP
  3. radiant_luv

    radiant_luv Peon

    Messages:
    1,327
    Likes Received:
    34
    Best Answers:
    1
    Trophy Points:
    0
    #3
    If you want me to assume then must be style defination (css) or your mark up. Post a link or the code if you want someone to investigate.
     
    radiant_luv, Feb 8, 2011 IP
  4. AtSeaDesign

    AtSeaDesign Active Member

    Messages:
    172
    Likes Received:
    2
    Best Answers:
    1
    Trophy Points:
    93
    #4
    and NEVER trust what you see in the design view of DW as displaying correctly in browsers.
     
    AtSeaDesign, Feb 9, 2011 IP
  5. radiant_luv

    radiant_luv Peon

    Messages:
    1,327
    Likes Received:
    34
    Best Answers:
    1
    Trophy Points:
    0
    #5
    Oh yes, design view on DreamCrap :p is worst feature to use for website development.
     
    radiant_luv, Feb 9, 2011 IP
  6. Melons

    Melons Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I'm having this exact same problem :/

    I sliced my template in photoshop and imported it into DW.

    The problem is when the div box size's height is too high, the sidebar's images get spaced out :s

    Here's my code

    <html>
    <head>
    <title>Website EDIT</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="css/site_layout.css" rel="stylesheet" type="text/css">
    <style type="text/css">
    <!--
    body {
    	background-image: url(images/bg.gif);
    	background-repeat: repeat-x;
    }
    body,td,th {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    }
    -->
    </style></head>
    <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <!-- ImageReady Slices (Website EDIT.psd) -->
    <div id="site_layout">
      <table width="759" height="458" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
        <tr>
          <td colspan="3" rowspan="7">&nbsp;</td>
    	      <td colspan="18">
    		      <img src="images/Website-EDIT_02.gif" width="608" height="82" alt=""></td>
    	      <td colspan="2" rowspan="7">&nbsp;</td>
    	      <td>
    		      <img src="images/spacer.gif" width="1" height="82" alt=""></td>
          </tr>
        <tr>
          <td rowspan="2">
            <img src="images/Website-EDIT_04.gif" width="20" height="36" alt=""></td>
    	    <td colspan="3">
    	        <a href="/index.php"><img src="images/Website-EDIT_05.gif" width="90" height="18" alt=""></a></td>
    	    <td colspan="11">
    	        <img src="images/Website-EDIT_06.gif" width="390" height="18" alt=""></td>
    	    <td colspan="2">
    	        <a href="/contact.php"><img src="images/Website-EDIT_07.gif" width="90" height="18" alt=""></a></td>
    	    <td rowspan="2">
    	        <img src="images/Website-EDIT_08.gif" width="18" height="36" alt=""></td>
    	    <td>
    	        <img src="images/spacer.gif" width="1" height="18" alt=""></td>
        </tr>
        <tr>
          <td colspan="5">
            <img src="images/Website-EDIT_09.gif" width="100" height="18" alt=""></td>
    	    <td>
    	        <a href="download.php"><img src="images/Website-EDIT_10.gif" width="90" height="18" alt=""></a></td>
    	    <td>
    	        <img src="images/Website-EDIT_11.gif" width="4" height="18" alt=""></td>
    	    <td>
    	        <a href="/register.php"><img src="images/Website-EDIT_12.gif" width="90" height="18" alt=""></a></td>
    	    <td>
    	        <img src="images/Website-EDIT_13.gif" width="4" height="18" alt=""></td>
    	    <td>
    	        <a href="/community"><img src="images/Website-EDIT_14.gif" width="90" height="18" alt=""></a></td>
    	    <td>
    	        <img src="images/Website-EDIT_15.gif" width="4" height="18" alt=""></td>
    	    <td>
    	        <a href="/guide.php"><img src="images/Website-EDIT_16.gif" width="90" height="18" alt=""></a></td>
    	    <td colspan="4">
    	        <img src="images/Website-EDIT_17.gif" width="98" height="18" alt=""></td>
    	    <td>
    	        <img src="images/spacer.gif" width="1" height="18" alt=""></td>
        </tr>
        <tr>
          <td colspan="18">
            <img src="images/Website-EDIT_18.gif" width="608" height="28" alt=""></td>
    	    <td>
    	        <img src="images/spacer.gif" width="1" height="28" alt=""></td>
          </tr>
        <tr>
          <td colspan="18">&nbsp;</td>
    	    <td>
    	        <img src="images/spacer.gif" width="1" height="14" alt=""></td>
          </tr>
        <tr>
          <td colspan="5" rowspan="2">&nbsp;</td>
    	    <td colspan="9">&nbsp;</td>
    	    <td colspan="4" rowspan="2">&nbsp;</td>
    	    <td>
    	        <img src="images/spacer.gif" width="1" height="22" alt=""></td>
        </tr>
        <tr>
          <td colspan="9">
            <img src="images/Website-EDIT_23.gif" width="375" height="1" alt=""></td>
    	    <td>
    	        <img src="images/spacer.gif" width="1" height="1" alt=""></td>
          </tr>
        <tr>
          <td rowspan="6">&nbsp;</td>
    	    <td colspan="5">
    	        <img src="images/Website-EDIT_25.gif" width="167" height="11" alt=""></td>
    	    <td colspan="2" rowspan="6">&nbsp;</td>
    	    <td colspan="9" rowspan="6"><div id="site_layout_news">
    	      <div align="center">
    	        <p><strong>Become a Gold Member            </strong></p>
    	        <blockquote>
    	          <p><strong>NarutoRealm</strong> is a fan based free to play game as we do not charge a penny for you playing. Game server hosting is also <em>very</em> expensive and if we were to pay constantly without support then we would die off very easily.</p>
    	          <p>So to keep us alive, by donating us <strong>$5.99USD</strong> you get <strong>30 Days of Gold Member</strong>  in which you'll also receive:</p>
                </blockquote>
    	        <ul>
    	          <li>(1) Random Forbidden Jutsu Scroll</li>
                  <li>(1) Random Extract Tailed Beast Scroll</li>
    	          <li>Free</li>
    	        </ul>
    	      </div>
    	    </div></td>
    	    <td colspan="2" rowspan="6">&nbsp;</td>
    	    <td colspan="3" rowspan="2">
    	        <a href="/goldmember.php"><img src="images/Website-EDIT_29.gif" width="162" height="159" alt=""></a></td>
    	    <td rowspan="6">&nbsp;</td>
    	    <td>
    	        <img src="images/spacer.gif" width="1" height="11" alt=""></td>
        </tr>
        <tr>
          <td rowspan="3">
            <img src="images/Website-EDIT_31.gif" width="4" height="164" alt=""></td>
    	    <td colspan="3" rowspan="3"><div id="site_layout_account">
    	      <div align="center">
    	        <p>Content for  id "site_layout_account" Goes Here</p>
              </div>
    	    </div></td>
    	    <td rowspan="3">
    	        <img src="images/Website-EDIT_33.gif" width="4" height="164" alt=""></td>
    	    <td>
    	        <img src="images/spacer.gif" width="1" height="148" alt=""></td>
        </tr>
        <tr>
          <td colspan="3">
            <img src="images/Website-EDIT_34.gif" width="162" height="4" alt=""></td>
    	    <td>
    	        <img src="images/spacer.gif" width="1" height="4" alt=""></td>
          </tr>
        <tr>
          <td colspan="3" rowspan="3">
            <a href="/faq.php"><img src="images/Website-EDIT_35.gif" width="162" height="111" alt=""></a></td>
    	    <td>
    	        <img src="images/spacer.gif" width="1" height="12" alt=""></td>
        </tr>
        <tr>
          <td colspan="5">
            <img src="images/Website-EDIT_36.gif" width="167" height="13" alt=""></td>
    	    <td>
    	        <img src="images/spacer.gif" width="1" height="13" alt=""></td>
          </tr>
        <tr>
          <td colspan="5">&nbsp;</td>
    	    <td>
    	        <img src="images/spacer.gif" width="1" height="86" alt=""></td>
          </tr>
        <tr>
          <td>
            <img src="images/spacer.gif" width="12" height="1" alt=""></td>
    	    <td>
    	        <img src="images/spacer.gif" width="4" height="1" alt=""></td>
    	    <td>
    	        <img src="images/spacer.gif" width="66" height="1" alt=""></td>
    	    <td>
    	        <img src="images/spacer.gif" width="20" height="1" alt=""></td>
    	    <td>
    	        <img src="images/spacer.gif" width="73" height="1" alt=""></td>
    	    <td>
    	        <img src="images/spacer.gif" width="4" height="1" alt=""></td>
    	    <td>
    	        <img src="images/spacer.gif" width="13" height="1" alt=""></td>
    	    <td>
    	        <img src="images/spacer.gif" width="8" height="1" alt=""></td>
    	    <td>
    	        <img src="images/spacer.gif" width="2" height="1" alt=""></td>
    	    <td>
    	        <img src="images/spacer.gif" width="90" height="1" alt=""></td>
    	    <td>
    	        <img src="images/spacer.gif" width="4" height="1" alt=""></td>
    	    <td>
    	        <img src="images/spacer.gif" width="90" height="1" alt=""></td>
    	    <td>
    	        <img src="images/spacer.gif" width="4" height="1" alt=""></td>
    	    <td>
    	        <img src="images/spacer.gif" width="90" height="1" alt=""></td>
    	    <td>
    	        <img src="images/spacer.gif" width="4" height="1" alt=""></td>
    	    <td>
    	        <img src="images/spacer.gif" width="90" height="1" alt=""></td>
    	    <td>
    	        <img src="images/spacer.gif" width="1" height="1" alt=""></td>
    	    <td>
    	        <img src="images/spacer.gif" width="7" height="1" alt=""></td>
    	    <td>
    	        <img src="images/spacer.gif" width="9" height="1" alt=""></td>
    	    <td>
    	        <img src="images/spacer.gif" width="81" height="1" alt=""></td>
    	    <td>
    	        <img src="images/spacer.gif" width="18" height="1" alt=""></td>
    	    <td>
    	        <img src="images/spacer.gif" width="63" height="1" alt=""></td>
    	    <td>
    	        <img src="images/spacer.gif" width="5" height="1" alt=""></td>
    	    <td></td>
          </tr>
      </table>
    </div>
    <!-- End ImageReady Slices -->
    </body>
    </html>
    Code (markup):
    Any help would be greatly appreciated!
     

    Attached Files:

    Melons, Mar 1, 2011 IP