Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Senior Member BallardStudio's Avatar
    Join Date
    Jul 2011
    Posts
    143
    Member #
    28552
    Liked
    6 times
    I created a page in Photoshop and am now transferring it into Dreamweaver. The problem I'm having is the background image must be set with a 400px top margin. With this margin set, it also displaces the side bar (on the left of the page). If the image isn't set with the margin, it gets cut off by the top of the browser window.

    I should also mention, the CSS for the background image will not work if the CSS is attached. The CSS must be within the HTML document.

    Any suggestions on how to fix this issue? It's greatly appreciated.

    HTML

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>War And Peace Pages</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <link rel="stylesheet" type="text/css" href="css/wp.css">
    <style type="text/css">
    body {
    background-image: url(images/backimg.jpg);
    margin-top: 400px;
    background-repeat: no-repeat;
    background-position: center;
    }
    </style>
    </head>
    <body>
    <div class="wrapper">
    <!-- Save for Web Slices (War And Peace Pages.psd) -->
    <table id="Table_01" width="1000" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td colspan="8">&nbsp;</td>
    </tr>
    <tr>
    <td colspan="3" rowspan="6">
    <img id="War_And_Peace_Pages_02" src="./images/War-And-Peace-Pages_02.jpg" width="51" height="216" alt="" /></td>
    <td colspan="3">
    <a href="http://warandpeaceentertainment.com">
    <img id="War_And_Peace_Pages_03" src="images/warpeacelogo.png" width="184" height="108" border="0" alt="Home" /></a></td>
    <td colspan="2" rowspan="2">&nbsp;</td>
    </tr>
    <tr>
    <td colspan="3">
    <img id="War_And_Peace_Pages_05" src="./images/War-And-Peace-Pages_05.jpg" width="184" height="36" alt="" /></td>
    </tr>
    <tr>
    <td colspan="2" rowspan="2">
    <img id="War_And_Peace_Pages_06" src="./images/War-And-Peace-Pages_06.jpg" width="3" height="36" alt="" /></td>
    <td colspan="2">
    <a href="http://warandpeaceentertainment.com/music">
    <img id="wpmusic.png" src="images/wpmusic.png" width="183" height="20" border="0" alt="War And Peace Entertainment Music" /></a></td>
    <td rowspan="8">&nbsp;</td>
    </tr>
    <tr>
    <td colspan="2">
    <img id="War_And_Peace_Pages_09" src="./images/War-And-Peace-Pages_09.jpg" width="183" height="16" alt="" /></td>
    </tr>
    <tr>
    <td rowspan="2">
    <img id="War_And_Peace_Pages_10" src="./images/War-And-Peace-Pages_10.jpg" width="1" height="36" alt="" /></td>
    <td colspan="3">
    <a href="http://warandpeaceentertainment.com/info">
    <img id="War_And_Peace_Pages_11" src="images/wpinfo.png" width="185" height="21" border="0" alt="War And Peace Entertainment Info" /></a></td>
    </tr>
    <tr>
    <td colspan="3">
    <img id="War_And_Peace_Pages_12" src="./images/War-And-Peace-Pages_12.jpg" width="185" height="15" alt="" /></td>
    </tr>
    <tr>
    <td colspan="2" rowspan="2">
    <img id="War_And_Peace_Pages_13" src="./images/War-And-Peace-Pages_13.jpg" width="49" height="36" alt="" /></td>
    <td colspan="5">
    <a href="http://warandpeaceentertainment.com/photos">
    <img id="War_And_Peace_Pages_14" src="images/wpphoto.png" width="188" height="20" border="0" alt="War And Peace Entertainment Photos" /></a></td>
    </tr>
    <tr>
    <td colspan="5">
    <img id="War_And_Peace_Pages_15" src="./images/War-And-Peace-Pages_15.jpg" width="188" height="16" alt="" /></td>
    </tr>
    <tr>
    <td rowspan="2">&nbsp;</td>
    <td colspan="6">
    <a href="http://warandpeaceentertainment.com/contact">
    <img id="War_And_Peace_Pages_17" src="images/wpcontact.png" width="191" height="20" border="0" alt="War And Peace Entertainment/contact" /></a></td>
    </tr>
    <tr>
    <td colspan="6">&nbsp;</td>
    </tr>
    <tr>
    <td>
    <img src="images/spacer.gif" width="46" height="1" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="3" height="1" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="2" height="1" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="1" height="1" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="2" height="1" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="181" height="1" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="2" height="1" alt="" /></td>
    <td>
    <img src="images/spacer.gif" width="763" height="1" alt="" /></td>
    </tr>
    </table>
    <!-- End Save for Web Slices -->
    </div>
    </body>
    </html>

    CSS

    .wrapper {
    width: 1000px;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
    }
    I'm an art director crossing paths between print and web design.
    http://www.ballardstudio.com

  2.  

  3. #2
    WDF Staff George Dolidze's Avatar
    Join Date
    Apr 2011
    Location
    Irvine, CA
    Posts
    2,487
    Member #
    27540
    Liked
    416 times
    You shouldn't give 'body' a margin. If you want the image to move down, give it padding-top: 400px; And if you don't want the rest of the page to move down 400 px, then you can use relative positioning to scoot the page up.
    My freelancer website: DolidzeDesign



    You only need a parachute if you plan on skydiving twice.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:44 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com