Grow your CSS skills. Land your dream job.

Scrolling outside of Div

  • # December 19, 2012 at 6:27 pm

    Hey guys just styling a site up and came across a problem, sort of hard to explain but its probably better to show you….

    And I know there is a lot of problems with the site, im working on it…

    http://scm.ulster.ac.uk/~B00615762/

    http://pokit.org/get/?b138fab65832f09306f420227b1d6258.png

    hope that explains it, All help appreciated as usual!

    Thank you, Luke.

    # December 19, 2012 at 6:44 pm

    If you give .topbar-extension, .topbar, .logo a z-index of 1, it’ll stay on top of the scrolling container no matter what.

    # December 19, 2012 at 6:51 pm

    I don’t see the blue bar on the page that you showed in the picture. You could do something like

    #background-extension {
    background: white;
    background-image: url(../images/topbar-extension.jpg);
    background-repeat: repeat-x;
    width: 100%;
    height: 225px;
    position: fixed;
    padding-bottom: 12px;
    border-bottom: 1px solid blue;
    }

    # December 19, 2012 at 6:53 pm

    @kevin11189 thanks for the response, although that’s not what I meant, I want the images to scroll under the blue line as such rather than under the top bar.

    I can photoshop an image up quickly to explain if that would help explain it ?

    # December 19, 2012 at 6:54 pm

    @kevin11189 I think the blue line is in comparison to the ruler..he doesn’t want it to go further than the top of the ruler..I did this:

    #topbar-extension {
    background-image: url(../images/topbar-extension.jpg);
    background-repeat: repeat-x;
    width: 100%;
    height: 240px;
    position: fixed;
    background-color: white;
    }

    ^^extended your background to reach the ruler, then filled the rest in white, and it worked fine, but I would also take @kevin11189‘s advice with the z-index as well, I was getting the div’s to float above your header when hovering over them.

    # December 19, 2012 at 6:58 pm

    Sweet!
    That fixed it no problem!
    Appreciate it a lot guys!
    Thanks, Luke.

    # December 19, 2012 at 10:46 pm

    Ah, didn’t fully understand what you meant. Thanks @ChrisP for clarifying. Glad you got it figured out!

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

You must be logged in to reply to this topic.

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