SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict SunnaH's Avatar
    Join Date
    Aug 2005
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Margin-top or padding-top not moving content

    I am working on a one page scrolling layout. I am having difficulty with two items:

    1> adding a top margin for the main logo #img-home

    2> how to do I get the viewable area of the layout to fit the browser size? I may not be asking this correctly but I do not want another page/section overlapping. Currently the about section is coming into the home section in the viewable area.

    http://nova.umuc.edu/~ct385a01/final/v3/
    -=SunnaH=-

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,222
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    SunnaH,

    This thread should be a continuation of the thread that you started yesterday:
    http://www.sitepoint.com/forums/show...es-Help-Please
    and not a new thread. Please do not start new threads about the same topic. Just add a post to the existing thread. In that way, the record of progress will be continuous.

    I cannot see (or understand) the issues that you are describing.

    How do you want the page to look with a margin or padding above the main logo image? Perhaps an annotated screen shot would help.

    The "sections" seem to be very visually separated in Firefox. Are you seeing the problem with overlapping content in a particular browser? Again, an annotated screen shot might help.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by SunnaH View Post
    I am working on a one page scrolling layout. I am having difficulty with two items:

    1> adding a top margin for the main logo #img-home
    You have a typo in this rule:

    Code:
    #img-home  {
    	margin-top 5em;
    }
    Can you spot it?

    Answer:

    #img-home {
    margin-top: 5em;
    }

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by SunnaH View Post

    2> how to do I get the viewable area of the layout to fit the browser size? I may not be asking this correctly but I do not want another page/section overlapping. Currently the about section is coming into the home section in the viewable area.

    http://nova.umuc.edu/~ct385a01/final/v3/

    I assume you mean that on tall monitors your next section is visible below the current section due to the vertical scroll effect you have implemented?

    It would seem to me that you just need to make sure that each section is far enough away from the one above so that it does not become visible.

    As an aside I don't like these vertical scroll effects for main site navigation unless its for something obvious (like a long list of things such as an faq). I looked at your page and the first thing I noticed was the vertical scrollbar on the right so I started using that to scroll and see the content and for a while was confused abut the site as it seemed odd. Eventually I realised that the links in the top main nav didn't go to another page but scrolled to items on the same page. I'm a firm believer in not trying to confuse customers and these one page vertical scrolls are in my mind too confusing. But that may just be my old age showing

  5. #5
    SitePoint Addict SunnaH's Avatar
    Join Date
    Aug 2005
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @ronpat,

    Sorry about that. I was loosing sleep and tired.

    @paul,

    Thanks.
    -=SunnaH=-

  6. #6
    SitePoint Addict SunnaH's Avatar
    Join Date
    Aug 2005
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have tried to fix the issue so I hope the reason you are not seeing it is because I did something right. When the browser window is resized one section with had three boxes. Two are floated left and the third one is clear. They still wrap but the layout below does not stay under the third box and instead the layout below overlaps over the boxes. I have attached a screenshot.
    Attached Images Attached Images
    -=SunnaH=-

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Try remmoving that height on line 606:

    Code:
    .slide {
    margin: 0 auto;
    width: 99%;
    padding: 120px 0;
    padding: 12rem 0;
    height: 40rem;
    }

  8. #8
    SitePoint Addict SunnaH's Avatar
    Join Date
    Aug 2005
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @ralph,

    That seemed to have worked. Thank you.
    -=SunnaH=-


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •