Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 9 years ago.
Improve this question
I have a website with a fixed image at the top of my screen. When I scroll down my page the image stays at the top like it should. However, all content below overlaps my image and it is then covered.
How do I make my top bar (image) always stay on top? I want it to cover the content of the page as you scroll.
Ensure position is on your element and set the z-index to a value higher than the elements you want to cover.
element {
position: fixed;
z-index: 999;
}
div {
position: relative;
z-index: 99;
}
It will probably require some more work than that but it's a start since you didn't post any code.
Assuming that your markup looks like:
<div id="header" style="position: fixed;"></div>
<div id="content" style="position: relative;"></div>
Now both elements are positioned; in which case, the element at the bottom (in source order) will cover element above it (in source order).
Add a z-index on header; 1 should be sufficient.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have a hero image, and on the top of it, I want a logo and menu,
I have given below properties to hero image. and for nav bar I have given a position: absolute; and width : 100%.
I dont want that horizontant scroll bar, please help.this is how my page look like
height: 551px; width: 100%;background: url(../_images/banner_1.JPG) no-repeat;background-size: cover;position: relative;
You mean window horizontal scroll-bar, so to hide that add below code and change you navbar div to 100%,
body{
overflow-x:hidden;
}
for removing horiontal scroll bar
add overflow-x: hidden
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have just started creating my site and getting into web development. I was creating a social media nav bar . i wanted to place it in the bottom right side of all my pages. It worked fine except for one which showed the nav bar way below the end of my background image. After several attempts to fix it several other pages also started having the same issue.
leloupdevelopment.com
Give this bit in your CSS:
#social-media-icons {
margin: 0;
position: fixed;
bottom: 0;
right: 0;
z-index: 99;
}
This way, it always stays in the bottom of the screen, irrespective of the page size. :)
You should change the z-index but to use that you need to position it to either absolute or relative depending on your element. The higher z-index means your element is going to be on top of the lowest z-index.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
A fun game:
http://revelry-cycles.com/index.html
go to that site, identify the reason behind the white space on the right hand side.
I have been playing this game for an hour or so and I am sick of it! I have used Chrome's Object Identifier and there is NOTHING there.
The reason was not easy to identify, but I'm now pretty sure it's the label "Select bike part". By using tools like Firebug you can see that the element #bbLabel is too wide and thus causing the overflow. The problem is that you didn't change its width, so it still has the default of 100% of the 800px page width, while at the same time a relative offset of 60% to the right is applied. If you add the style rule width: 40% to the #bbLabel the problem is solved.
On the off-chance someone else has the same problem:
HTML:
<body>
<div id="container">
<!--content-->
<!--carousel-->
<!--more content-->
</div>
</body>
CSS:
#content
{
width: 600px;
margin: 0 auto;/*This means the content is centered on the page*/
}
The fact that the images in the carousel were arranged like this:
Content: Rest of page:
|[Current Img]|[Next Img][3rd Image][Final Image]
meant that the page was pushed out to the right, resulting in the appearance of the horizontal scrollbar. The easiest solution is to add overflow-x: hidden to the style for the <body> tag.
The element causing the whitespace is #bbLabel.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I have three images: one.png, two.png, and three.png. Using CSS, how would I fix one.png to the top-center of the page, three.png to the bottom-center of the page, and two.png to the middle of the page? two.png should be vertically- and horizontally-aligned the entire setup should be consistent when the viewport is resized. Thanks a lot!
For the top and bottom images, you'll want to position:absolute; and add either top:0px or bottom:0px;
The middle one, you'll also want to add position:absolute;. In this case, there's a few other CSS tricks that will help center this vertically.
img.two {
top: 50%;
height:100px;
margin-top: -50px; /* Half the height */
}
See my fiddle here: http://jsfiddle.net/9GFu9/2/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
What's the easiest way to put a div just underneath another div that occupies the full height of the browser?
I'm trying to setup the navigation so that when an anchor link is clicked (let's say "About Us", "Contact Us", etc), it just scrolls down to that anchor's position in the page.
So, essentially, the default page occupies 100% of the screen, the About Us occupies the second 100%, and so on.
Here's a jsfiddle first.
You basically make all the divs absolute positioned, taking up the whole screen
div {
position:absolute;
width:100%;
height:100%;
}
Then, you can just make each div a full screen from the top with
#div1 {
top:100%;
}
And you can use 200%, 300%, and so on for the rest
Looks like you are looking for this http://jalxob.com/cool-kitten/
Here is complete list,
http://blog.teamtreehouse.com/open-source-jquery-plugins-for-building-single-page-website-layouts
Try this: http://jsfiddle.net/r8XqV/1/
display block
means don't put anything else on the same row.
On top of that,
clear:both
means make sure you clear both the div on the left and the div on the right. Not needed for this case, but in case you start floating divs left and right this will make sure your bottom div always stays underneath them