Grow your CSS skills. Land your dream job.

Positioning, overflow, scroll bar, etc…

  • # August 17, 2009 at 2:50 am

    Hi again everyone,

    I’m really confused here. Check out this page I’m working on: http://www.daveatwork.com/grace

    Been trying to figure out positioning, overflow and scrollbar properties (or rather, the containing element/div that carries those properties).

    In all the links, the navigation div scrolls when I resize the page width in the browser. What property will allow me to set it to fix and let there appear a horizontal bar instead? Let me rephrase it, how do I maintain the same look even when I resize the browser, and have a horizontal bar at the bottom?

    I’ve been fiddling with the positioning and overflow property (changing it to static, fixed, show, auto, etc) in all the divs that I can think of (body id, #nav, #container) and nothing changed.

    Another thing that I can’t figure out is this: check out the ‘Destinations’ link. I have the background-position property set to:
    #main-destinations {
    position:fixed;
    background-image:url(images/eiffel.jpg);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:top center; <-the others has top left property
    overflow:hidden;
    }

    How can I have a top center property but still have it not scoll along with the page when I resize the browser? What is the recommended size for creating a large background website like this? And what about the background properties property?

    Thank you!

    # August 18, 2009 at 1:18 am

    Put EVERYTHING inside a "wrapper" div.

    EXAMPLE:

    Code:
    logo
    home
    YOUR CONTENT HERE

    Obviously don’t do the css in the html.

    The fixed size wrapper should handle the problem you’re having.

# August 18, 2009 at 3:03 am

Thank you Soap!

I have inserted everything into a ‘wrapper’ called #container.

Regarding the navigation area, I think it’s because I set the width in % that is causing it to behave unpredictably. It’s not set to a fixed width, and not jumping around anymore.

Thank you!

# August 18, 2009 at 4:15 am

No problem. Good luck.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".