• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 192
  • Last Modified:

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.
0
Daniele Brunengo
Asked:
Daniele Brunengo
  • 10
  • 5
  • 5
2 Solutions
 
Daniele BrunengoIT Consultant, Web DesignerAuthor Commented:
Any help?
0
 
COBOLdinosaurCommented:
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&
0
 
Daniele BrunengoIT Consultant, Web DesignerAuthor Commented:
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
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
COBOLdinosaurCommented:
The problem is the header tag it needs margin-top:-20px;

Cd&
0
 
Daniele BrunengoIT Consultant, Web DesignerAuthor Commented:
But with margin-top:-20px; the gap between the top menu and the header disappears.
0
 
Deniz DursunCommented:
Hello;

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>

Open in new window





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>

Open in new window



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>

Open in new window

0
 
Daniele BrunengoIT Consultant, Web DesignerAuthor Commented:
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.
0
 
Deniz DursunCommented:
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.
0
 
COBOLdinosaurCommented:
Overflow is not going to help because the element is not overflowing, it is imple moving in response to the  scroll and moving past the fixed position elements.

If you want tp keep the gap then put a div with a white background there with position fixed or put the image in a div with padding-top:20px ;background-image:url(XXX); where XXX is the same image as used for the page. There will probably be some alignment issues with the image.  However bad design almost always ends up with a less than perfect implementation when the real world of technology limits are encountered.

A gap with nothing in it is obviously going to show anything that passes under it unless the is an implicit setting of the background.

I hope you are charging your client for all the extra time they have cost you by insisting on a dreadful design that is not going to win any points for usability, and is a maintenance nightmare.

Cd&
0
 
Deniz DursunCommented:
Overlay image is good idea @Coboldinasour but it is looking bad when scrolling because of shadow and image piece difference than background.

I did it:

Add this code before than </head> tag:
<style type="text/css">
	.fakebg {
	background: url(fakebg.png) no-repeat bottom;
	width: 1000px; 
	height: 40px;
	position: fixed;
	z-index: 101;
	}
</style>

Open in new window



And add this code before <header> tag:
<div class="fakebg"></div>

Open in new window


This code need fakebg.png image. I attached as file to this message.
fakebg.png
0
 
Daniele BrunengoIT Consultant, Web DesignerAuthor Commented:
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.
0
 
Daniele BrunengoIT Consultant, Web DesignerAuthor Commented:
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:

Cattura-di-schermata--19-.png
I'll work on it though, thanks.
0
 
COBOLdinosaurCommented:
>>>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&
0
 
Deniz DursunCommented:
@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.
0
 
Daniele BrunengoIT Consultant, Web DesignerAuthor Commented:
Sorry, I did it in a similar way, it seems to work now, can you confirm?
0
 
Deniz DursunCommented:
Yes it is working. just looking some line as a border (1px). I think about png.
0
 
Daniele BrunengoIT Consultant, Web DesignerAuthor Commented:
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.
0
 
COBOLdinosaurCommented:
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&
0
 
Daniele BrunengoIT Consultant, Web DesignerAuthor Commented:
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.
0
 
Daniele BrunengoIT Consultant, Web DesignerAuthor Commented:
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.
0

Featured Post

[Webinar] Improve your customer journey

A positive customer journey is important in attracting and retaining business. To improve this experience, you can use Google Maps APIs to increase checkout conversions, boost user engagement, and optimize order fulfillment. Learn how in this webinar presented by Dito.

  • 10
  • 5
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now