Scrollable content appearing above header: how can I fix it?
Hello guys, I have a problem with this here website:
http://deathless.it/lab/cireloadedtest/it/prova.html
I'd like to have a fixed position header, but I haven't been able to hide the scrollable content: if you try to scroll, you'll see it shows above the header, where it shouldn't.
I have tried using overflow:hidden; on all divs on the page but I wasn't able to fix this.
I think the main problem is, I need to keep everything inside a single div to have a uniform box-shadow. Without this limitation I would be able to fix it, but with the current structure I'm having trouble...
The code is accessible via Firebug and the like, but if you need something specific let me know.
http://deathless.it/lab/cireloadedtest/it/prova.html
I'd like to have a fixed position header, but I haven't been able to hide the scrollable content: if you try to scroll, you'll see it shows above the header, where it shouldn't.
I have tried using overflow:hidden; on all divs on the page but I wasn't able to fix this.
I think the main problem is, I need to keep everything inside a single div to have a uniform box-shadow. Without this limitation I would be able to fix it, but with the current structure I'm having trouble...
The code is accessible via Firebug and the like, but if you need something specific let me know.
You probably need a negative top margin (an ugly hack) for the image or container. The excessive inline scripting has mess up the document object to the point where I am not sure what the RenderObject for any given element is picking up from the hashtable. The mix of stylesheets and line scripting makes it even more incomprehensible.
I don't think most of the 107 validation errors are a factor but illegal and obsolete attributes for the iframe are not going to help much.
At this point I would suggest you will just have to experiment with trial and error to get it to look right. It will still be badly hack and unreliable, but if you are only concerned with how it looks for your specific environment; you will probably stumble onto something that gives you what you want.
Cd&
I don't think most of the 107 validation errors are a factor but illegal and obsolete attributes for the iframe are not going to help much.
At this point I would suggest you will just have to experiment with trial and error to get it to look right. It will still be badly hack and unreliable, but if you are only concerned with how it looks for your specific environment; you will probably stumble onto something that gives you what you want.
Cd&
ASKER
Actually the inline scripting is all necessary because my client wants all of these plugins on the home page, so I have to include all the widgets he asks me too. But the site's structure is not so complex. There's a top menu div, then a container with header and the body section. The iframes are all mandatory because of those damn widgets, but if I remove all widgets the problem is still there.
So you're right, the page I linked to is totally unfit for the task at hand: here's a much simpler example (no scripting, no iframes, just the bone structure, the simplest possible), with the problem still present.
http://deathless.it/lab/cireloadedtest/it/prova.html
So you're right, the page I linked to is totally unfit for the task at hand: here's a much simpler example (no scripting, no iframes, just the bone structure, the simplest possible), with the problem still present.
http://deathless.it/lab/cireloadedtest/it/prova.html
The problem is the header tag it needs margin-top:-20px;
Cd&
Cd&
ASKER
But with margin-top:-20px; the gap between the top menu and the header disappears.
Hello;
You can use "layer scroll" for it.
1) Add this code before </head> tag
2) Add this code after <body> tag:
Important: This code need jquery library. For your page, already included jqeury but if you try this code with your "prova.html" you need include jquery library with this code before </head>:
You can use "layer scroll" for it.
1) Add this code before </head> tag
<style type="text/css">
body,#container{
overflow:hidden;
}
#container{
height:1px;overflow-y:auto;
}
</style>2) Add this code after <body> tag:
<script type="text/javascript">
$(document).ready(function(){
$("#container").height($(document).height()-300);
$(window).on('resize', function(){
$("#container").height(1);
$("#container").height($(document).height()-300);
});
});
</script>Important: This code need jquery library. For your page, already included jqeury but if you try this code with your "prova.html" you need include jquery library with this code before </head>:
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>ASKER
Deniz Dursun, I tried that out and you can see the result following the previous link. It's not exactly what I had in mind though, because the scrollbar has disappeared from the page and now there's a scrollbar directly inside the div.
I tried layer clip/mask methods too but I can't find another way.
Try this solution in your live site, I think this is not different than body scroll.
Try this solution in your live site, I think this is not different than body scroll.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
COBOLdinosaur, yes I am charging extra, they don't seem to mind. Your solution is what I had already thought about, but I didn't try it out because of alignment woes. I guess I'll try it out, maybe I'll use the top menu div, which is already "above" the scrollable content.
ASKER
Deniz Dursun, this is probably the right way to do it (or to hack it) and very similar to what COBOLdinosaur suggested, but there's some positioning issue:
I'll work on it though, thanks.
I'll work on it though, thanks.
>>>yes I am charging extra, they don't seem to mind
In that case encourage them to give all their ideas and maximize the bill because in my experience after you are finished any problems or user complaints caused by the design issues will be blamed on you.
Cd&
In that case encourage them to give all their ideas and maximize the bill because in my experience after you are finished any problems or user complaints caused by the design issues will be blamed on you.
Cd&
@Maioneis:
I tried that code and working on my Pc without mistake (Chrome).
Please upload your code as prova.html to your site again, i must see for mistake.
I tried that code and working on my Pc without mistake (Chrome).
Please upload your code as prova.html to your site again, i must see for mistake.
ASKER
Sorry, I did it in a similar way, it seems to work now, can you confirm?
Yes it is working. just looking some line as a border (1px). I think about png.
ASKER
Yes, there's still a small defect but I think it may be negligible.
Anyway, I'm about to meet my client and I'll try to convince him to drop the fixed header altogether, it really serves no purpose whatsoever.
Anyway, I'm about to meet my client and I'll try to convince him to drop the fixed header altogether, it really serves no purpose whatsoever.
Actually it does serve a purpose. Negative SEO. The amount of space being wasted above to fold is compound by keeping it there. The reduced content above the fold will reduce the weight in the search engines, and leaving it in the way when it is not needed may be seen as an accessibility issue as well as a usability inconvenience. Your client is going to hurt their SEO if they insist on leaving it that way.
Cd&
Cd&
ASKER
Right now I have convinced them to remove the gap, so at least the site will be a little bit more manageable for me.
Still working on the fixed position header.
Still working on the fixed position header.
ASKER
Anyway, since you were kind enough to help me and walk some steps with me through this nightmare, here are points for both of you.
ASKER