Skip navigation
nehsurk
nehsurk Calculating status...
Currently Being Moderated

Div display issue

Jun 21, 2012 11:09 AM

I am having an issue with the index page at  http://http://www.pixelsandpaper.com/stANNES/St%20annes/index.html  which islocated in a temporary location.  I have set the container div to 960 px wide and have set the left and right margins to 20%, however, when the page displays in Chrome there is a marked displacement to the left of the screen.  The other 2 pages in the site have the same settings but appear just fine.  In other browsers the left display is not as evident but it is still there. I am using Dreamweaver CS6

 

Perhaps someone can tell me what the problem is. I appreciate your comments.

 

Pat

437 Views   4 Replies   Latest reply: nehsurk, Jun 21, 2012 1:55 PM
 
Replies
  • adninjastrator
    Currently Being Moderated
    1. adninjastrator,
    Jun 21, 2012 11:44 AM   in reply to nehsurk
    Report

    Skip the 20% for the right & left margin and use "auto"

    .container {

    width: 960px;

    background-color: #FFFFFF; /* the auto value on the sides, coupled with the width, centers the layout */

    clear: both;

    margin-top: 0;

    margin-right: auto;

    margin-bottom: 0px;

    margin-left: auto;

    }

    Best wishes,

    Adninjastrator

     
    |
    Mark as:
  • nehsurk
    Currently Being Moderated
    2. nehsurk,
    Jun 21, 2012 11:56 AM   in reply to adninjastrator
    Report

    Thanks so much, looks like that will solve the problem. 

     

    Perhaps you can help with the second issue which is a difference in the top margin between the indexpage and the other pages.  I woould like a small margin and have set it to 10 in all pages, but the top margin appears larger in the other 2 pages amd so the pageappears to jumpwhen going to the index page link, rather than transition smoothly.

     
    |
    Mark as:
  • adninjastrator
    Currently Being Moderated
    3. adninjastrator,
    Jun 21, 2012 12:59 PM   in reply to nehsurk
    Report

    View the source code on the two different pages... Home and Features for example.

    CSS properties for .container are repeated in several places. I'd recommend that you consolidate all those various .container rules into one place.

    Anyway, on the Features page you have the margin-top set at 25px;

    .container {

    width: 960px;

    margin-right: auto;

    margin-left: auto;

    margin-top: 25px;

    }

    If you have all the rules for .container in just one place, it's a lot easier to troubleshoot.

    Best wishes,

    Adninjastrator

     
    |
    Mark as:
  • nehsurk
    Currently Being Moderated
    4. nehsurk,
    Jun 21, 2012 1:55 PM   in reply to adninjastrator
    Report

    Thanks so much for you help - I got that now on my local copy .

     
    |
    Mark as:
Actions

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