Improve company productivity with a Business Account.Sign Up

x
?
Solved

Scrollable content appearing above header: how can I fix it?

Posted on 2015-01-02
21
Medium Priority
?
193 Views
Last Modified: 2015-01-05
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
Comment
Question by:Daniele Brunengo
  • 10
  • 5
  • 5
20 Comments
 

Author Comment

by:Daniele Brunengo
ID: 40528979
Any help?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40529244
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
 

Author Comment

by:Daniele Brunengo
ID: 40529302
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
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40529322
The problem is the header tag it needs margin-top:-20px;

Cd&
0
 

Author Comment

by:Daniele Brunengo
ID: 40529335
But with margin-top:-20px; the gap between the top menu and the header disappears.
0
 
LVL 1

Expert Comment

by:Deniz Dursun
ID: 40530103
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
 

Author Comment

by:Daniele Brunengo
ID: 40530298
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
 
LVL 1

Expert Comment

by:Deniz Dursun
ID: 40530304
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
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 1000 total points
ID: 40530312
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
 
LVL 1

Accepted Solution

by:
Deniz Dursun earned 1000 total points
ID: 40530380
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
 

Author Comment

by:Daniele Brunengo
ID: 40530386
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
 

Author Comment

by:Daniele Brunengo
ID: 40530394
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40530405
>>>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
 
LVL 1

Expert Comment

by:Deniz Dursun
ID: 40530441
@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
 

Author Comment

by:Daniele Brunengo
ID: 40530514
Sorry, I did it in a similar way, it seems to work now, can you confirm?
0
 
LVL 1

Expert Comment

by:Deniz Dursun
ID: 40530529
Yes it is working. just looking some line as a border (1px). I think about png.
0
 

Author Comment

by:Daniele Brunengo
ID: 40531450
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 40531858
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
 

Author Comment

by:Daniele Brunengo
ID: 40531866
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
 

Author Closing Comment

by:Daniele Brunengo
ID: 40531872
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

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

By following these Magento e-commerce development tips, you can increase your website's conversion and profitability. Read this post for more details.
Magento is the best technology for eCommerce start-ups as it offers the technical expertise and visual appeal to create a store that pulls sales and earns high ROI (Return on investment).
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

608 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question