Hello once again :) !
Can anyone accidently help me with this problem.
I saw very few sites before, but never bookmarked any of these.
If I have body background, fixed header and inner background, where the content is...
And if I want to scroll down to see more content/inner background, my image goes above header behind and I don't know how to make it to disappear behind headers top margin. Anyone can help me with this , please ?
Images:
Normal body background, fixed header and inner background below header
http://screensnapr.com/v/HbcNXA.png
Body background, fixed header and scrolled inner background below header, went above header's position.
http://screensnapr.com/v/TKVVuy.png
I know my English is not good enough to explain this... But let's say.
"Hey I am content background, I am standing below header and when someone scrolls me, I am disappearing at the start of header's position." :)
Thanks!
EDIT:
http://jsfiddle.net/WbtQd/
Scroll and you will notice what I want.
EDIT 2:
Seems like someone play with fiddle... Anyway, here is site example:
http://www.monofactor.com/portfolio/mcfc-auctions/
Except that my header have lets say: top: 50px;
So if we add on his site top: 50px; even he have same problem like me :)
http://snpr.cm/OrXCWa.png
EDIT 3:
http://snpr.cm/GNZaGd.png
I; not sure if I understood you completely. You mean that whenever you scroll your page, the main body passes under the header. probably this is because the header is fixed. You can try to make your main body div scrollable. This way, whenever you scroll down, only this specific div will scroll.
Im not sure what your trying to achieve exactly, but zindex in css can make items appear above others. Add this to the header css code:
#yourheaderid {
z-index:10;
}
I have created a jsfiddle of how you should markup your fixed header and the css to go with it.
http://jsfiddle.net/LYT6V/
I'm assuming this is the result you were looking for?
Related
I am working on a Drupal-7 website using the openpublic theme.
I have modifed the css to make the header fixed, but when I scroll the page - the content scrolls over my navigation menu. Can anyone tell me what needs done to prevent this? The content also scrolls above my header. I would like the content to stay below my header and menus.
I have chosen a specific page, because the template for the front-page is different.
Thank you in advance.
it happened because your div position is set to fixed.
example
.div_class_name {
position:fixed;
}
Changing the value might help.
You can use firebug(Firefox) or Chromebug(Chrome) to check your CSS .
The website I'm building features a large background header image with a transparent fixed navigation bar on top. View it here: www.bedriftsdesign.no
Right now when you scroll the content scrolls over the header image just as planned, but when it reaches the navigation bar, I'd like it to disappear under the content, the same way the header background does, but it stays on top. To see the effect I'm trying to get, take a look here: http://www.googleventures.com/
Any idea on how to solve this? I've tried messing about with the z-indexes with no result yet.
Would be really grateful for some help.
Add to your <feature> tag that holds all the content, the following css:
feature{
position:relative;
z-index:10;
}
You should probably put it as an answer if it worked for you :).
I know, I know, I asked this question before. Unfortunately, I lost my work. I started over and I came back to my old post (min-height:100% doesn't work on my container?) and couldn't remember what the trick actually was.
So I will post the link to my "experiment" here and I hope that you guys (or girls) can help me out, the problem is: I want the footer to be at the very bottom and the content and the two sidebars to connect to the top of the footer. (Also, the scrollbars have to disappear, haha)
http://www.jbehrens.nl/test/index.html
If anyone's able to help me, it's very much appreciated!
Set the footer to have
position: fixed
bottom: 0
And then set a height for your side bars and content pane and you might want to set
overflow: scroll
for the side bars and the content pane.
First, I'd like to say that I have no experience with HTML or CSS so bear with me here.
I'm trying to have a Logo, content, then footer. The Logo has a background that overlaps with content, and footer has a background that overlaps with footer aswell.
This pic might explain better: http://picpaste.com/help-vXUqWlZ8.png
HTML Code: http://pastebin.com/0ZWCB9jU
CSS Code: /w7Ugu78Z <-- also pastebin, but I can't post entire link due to spam prevention.
The problem is that, there's an extra space at the bottom of the page that I can't remove.
Would really appreciate any help.. I tried googling but the solutions I found I failed to get it to work.
Best Regards,
Essam.
It seems you want the footer to remain at the bottom of the page.
I think this is what you're looking for: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
First, a warning, I have come back from a years break of html/css and have pretty much forgotten everything, so I'm at newbie level again.
I have been trying to add background images - one at top left and one at bottom right. What I have at the moment can be seen here: http://test.nihongohub.com/Mainsite/firstsite.php as you can see if you change the width of the browser the div containing the img will hit my main part and ruin it.
I have tried a few fixes suggested on stack overflow but none of them worked. Does anybody have any suggestions how to fix this. A friend suggested that I add the img to the footer and squeeze it out, but I don't like this idea.
2 things I want this image to do, move with the browser window, and be able to go behind my main page.
Thanks for any help offered
You could try using fixed positioning and the use z-index to move it to the back, ie.
#bottom_leaf_holder {
position: fixed;
bottom: 50px;
right: 0;
z-index: -1;
}
edit: I ment fixed, changed the answer.
You could put all your content in a div, and add a css rule to that div. Something like
#main_holder {
background: transparent url('img.jpg') no-repeat bottom right;
}
The best solution for this would be to have a wrapper div just inside the body tag that contains only the background image. This will act similar to the body tag allowing you to place an image that does not interfere with the layout and will go underneath your content if the viewport is small.