CODEWITHSUNDEEP
htmlcsscss-position
slev
slev

Reputation: 43

fixed bar over scrollable background: CSS

As the title says I am hoping to have fixed bar, off centre, with a background that scrolls. I have included my code so far, as of now i can either have the bar on the surface but fixed to the background, or the bar beneath the image, but fixed to the window as I would like. I can't figure out how to keep the "contentBox" on the surface of the window. Thank you for your help (and sorry for the messy code, this is my first go at CSS)

<html>
<head>
<style type="text/css">
body{ height:100%}
#bg {
    position:absolute;
    background-color:grey;
    top:0;
left:0;
width:100%;
height:100%;
}
#bg img {
position:absolute;
top:0;
bottom:0;
margin-left:10%;
min-width:80%;
height:100%;
}
#contentBox
 {
   position:top;
   left:0;
   margin-top:25%;
   height:30%;
   max-width:90%;
   background-color:#ffffff;
   opacity:0.6;
   filter:alpha(opacity=60);
 }
#contentBox:hover
 {
   position:top;
   left:0;
   margin-top:25%;
   height:30%;
   max-width:90%;
   background-color:#ffffff;
   opacity:0.9;
   filter:alpha(opacity=90);
 }
#linkCloud
 {
   float:left;
   min-width:11%;
   min-height:100%;
   background-color:blue;
   opacity:0.9;
   filter:alpha(opacity=90);
 }
#feed
 {
   float:right;
   top:0;
   right:0;
   min-height:100%;
   min-width:10%;
   background-color:red;
   opacity:0.9;
   filter:alpha(opacity=90);
 }
</style>
</head>

<body>

  <div id="bg">
      <img src="/home/samzors/Desktop/Gimp/skull.jpg" alt="">

      <div id="feed">
         <p>hello world</p>
      </div>

      <div id="contentBox">

         <div id="linkCloud">
           <p>hello world</p>
         </div>

     </div>
 </div>

</body>

</html>

Upvotes: 0

Views: 411

Answers (2)

slev
slev

Reputation: 43

I have found a solution, it is a bit of a hack however.

First in the html code I separated the bg (background) class from the contentBox class, as suggested by cmw. since fixing the content box hid the box from view here is where the hack came in: making a second div class, "content", that was a subset of contentBox, I was then able to display this box fixed to the screen with the bg class remaining scrollable.

Upvotes: 0

cmw
cmw

Reputation: 855

If I'm following you right, I believe what you want is a bar with a fixed position at the top of the viewport. This is done with position: fixed, like so:

<style>
    #contentBox {
        position: fixed;
        left: ; /* some distance from left side of screen */
        top: ; /* some distance from top of screen */
    }
    ...
</style>

...

<body>
    <div id="contentBox">content</div>
    <div id="bg"> rest of your content </div>
</body>

You will probably also want to add a margin-top property for #bg that offsets it from the top of screen at least as much as #contentBox is tall.

One additional note -- if you want to use a psuedo-class like :hover, you do not need to set each of the properties again, only the ones that are being changed. So for instance in #contentBox:hover you would only need:

#contentBox:hover {
    opacity: 0.9;
    filter = alpha(opacity = 90);
}

Upvotes: 1

Related Questions