Skip navigation
JimminyJamie
Currently Being Moderated

Content offsetting from background after browser window resize

Mar 25, 2012 1:32 PM

Hello all and to those that can help me solve the issue im having as i am relatively new to the web developing scene,

 

Now for the website i am developing i have a background that is 830px wide, centered and coloured.

 

The content for the several pages fits inside a div with with its width set to 750px wide with margins set to auto which positions the div in the centre of the background image.

 

All this works as i want it to until the browser windows width is reduced to less than that of the 830px's of the background, which seems to shift the background over to the left, giving me whitespace on the right and offsetting my content from the background as shown in these screen shots:

 

Screen Shot 2012-03-25 at 21.17.53.png

   Browser with maximised window.

 

Screen Shot 2012-03-25 at 21.18.34.png

   Broswer resized horizontally.

 

Any help as to why this is happening and how i can resolve it will be hugely appreciated.

 

I understand my coding may be a little messy to some of you guys as this is the first site ive ever built, but to those that can make something out of it my html and css is as followed:

 

HTML

 

 

 

CSS

 

@charset "UTF-8"; body {           background-image: url(Images/bg.png);           background-position: center;           background-repeat: repeat-y;           background-attachment: scroll; } #Container {           margin-right: auto;           margin-left: auto;           width: 750px;           padding-top: 0px;           padding-bottom: 0px;           text-align: left; } #twitter_icon img {           margin-left: 10px; } #flag_icon img {           margin-top: 10px; } #logo_icon img {           margin-top: 3px;           margin-right: 10px;           margin-bottom: 0px;           margin-left: 0px; } #top_menu {           font-family: "Bebas Neue"; } #bottom_menu {           font-family: "Bebas Neue";           float: none; } #copyright_text {           text-align: right;           font-size: 10px;           font-family: Arial;           margin-top: 60px; }
 
Replies
  • Currently Being Moderated
    Mar 25, 2012 1:32 PM   in reply to JimminyJamie

    Please upload your problem page and post a link here so we can view it in our browsers.

     

    Much easier to troubleshoot then.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 25, 2012 1:46 PM   in reply to JimminyJamie

    Do you have a web hosting account yet?  When your hosting space is set-up, your web host will send you details on how to connect to your server space.  You need that information to enter into DW.

     

    Setting Up Local & Remote site folders (CS5 & CS5.5)

    http://help.adobe.com/en_US/dreamweaver/cs/using/WS753df6af718a350a600 97e0f131686fa2b4-7ffe.html

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 25, 2012 2:02 PM   in reply to JimminyJamie

    If your ISP gives you a free web space, use that.

     

    Free web Hosting

    http://www.000webhost.com/

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 18, 2012 4:38 PM   in reply to JimminyJamie
     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points