Forums

LukeDaly

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.

kevin11189

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

kevin11189

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;
}

LukeDaly

@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 ?

ChrisP

@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.

LukeDaly

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

kevin11189

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

treehouse : what would you like to learn today?

Forums

Scrolling outside of Div