Image menu problem in mousewheel flies away need some help

HTML & CSS
1

Hi I have problem in my image menu,when I tried to mousewheel it flies away,how can I make it stay on it’s position.

<!DOCTYPE html>
<html>
<head>
    <title>MenuImage</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

  <div id="wrapper">
     <div id="menuimg"></div>


  </div>


</body>
</html>

stylesheet

*{
    margin: 0;
    padding:0;

}

#wrapper{
    height: 1000px;
    margin: 0 auto;
    border:solid 1px red;
    width: 960px;
}

#menuimg{
    background:url('img/nav.png') no-repeat;
    width:980px;
    height:70px;
    position:absolute;
    top:128px;
    left:186px;
}

Here is the image

980×71 725 Bytes

Thank you in advance

2

position:fixed instead of position:absolute

position:fixed will make it stay in the viewport (stay with you as you scroll.) :slight_smile:

3

Thank you for the quick reply,but still it flies away

#menuimg{
    background:url('img/nav.png') no-repeat;
    width:980px;
    height:70px;
    position:fixed;
    top:128px;
    left:186px;

}
4

I have a hard time believing that. Do you have a live website?

5 
<!DOCTYPE html>
<html>
<head>
    <title>MenuImage</title>
<style>
*{
    margin: 0;
    padding:0;

}

#wrapper{
    height: 1000px;
    margin: 0 auto;
    border:solid 1px red;
    width: 960px;
}

#menuimg{
    background:url('http://cdn.discourse.org/sitepoint/uploads/default/_optimized/ed2/0bb/812bb5de16_690x49.png') no-repeat;
    width:100%;height:70px;
    position:fixed;
    top:128px;
    left:186px;
}</style>
</head>
<body>

  <div id="wrapper">
     <div id="menuimg"></div>


  </div>


</body>
</html>

Opened up a browser and it’s staying in the viewport now. Are you seeing otherwise?

6

here is my screenshot when I mouse wheel in browser CTR + mousewheel

1103×557 9.98 KB

7

The green image is still on screen. I don’t understand. This is what you said you wanted? I’m not sure what the red box is, also.

8

That red box is my wrapper,this is what I want.

1277×700 13.7 KB

it should still intact in the redbox even if I will do the mouse wheel. or zooming in or zooming out the browser.

Thank you in advance.

9 
<!DOCTYPE html>
<html>
<head>
    <title>MenuImage</title>
<style>
*{
    margin: 0;
    padding:0;

}

#wrapper{
    height: 1000px;
    margin: 0 auto;
	position:relative;
    border:solid 1px red;
    width: 674px;
}
#wrapper:before
{
	content: ' ';
	background:url('http://cdn.discourse.org/sitepoint/uploads/default/_optimized/ed2/0bb/812bb5de16_690x49.png') no-repeat;
	width:100%;
	margin:0 -8px;
	height:70px;
	position:fixed;
	top:100px;
}
</style>
</head>
<body>

  <div id="wrapper">
  asdf

  </div>


</body>
</html>

Your actual image is only 690px so I don’t know how you expect it to fix the 960px. Your better option would be to make the edges (clipping to the container) as separate images placed on the left/right side of the parent, and then make that light/darkgreen color a repeat-x’d image or something like that.

10

It is 980px width

11

Ok, then update my code to reflect htat. Opened your uploaded image on my browser and it only has it at 690, but I looked at your upload dimensions and they are 690. Sitepoint must be screwing with me.

http://cdn.discourse.org/sitepoint/uploads/default/_optimized/ed2/0bb/812bb5de16_690x49.png

That’s only 690px (and that’s what you uploaded)

12

You need to click on the uploaded image to get the full-scale version,

(If you hover over the image in the first post, it shows you it’s 980x71(px); Discourse shows very large “thumbnails”.)

13

Yes that’s how I realized it was 960…I just got the URL from Firebug though. My bad.

14

@RyanReese ,

Thank you so much,by the way why this code work ?

#wrapper:before
{
	content: ' ';
	background:url('nav.png');
	width:100%;
	margin:0 -8px;
	height:70px;
	position:fixed;
	top:100px;
}
15

That just saves you from creating an element in the HTML for the background. It’s creating a pseudo element.

16

Ok thank you. :smile:

17

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.