0

Hi,

I'm trying to keep my header fixed with the below code. My header is fixed however when I scroll the page the contents are overrolling on the header and it looks odd since my entire page is of white background, I can't change the background color, any help.

<style type="text/css">
body { margin:100px 0px 0px 0px;}

div#topdiv {
      position:fixed;
      top:0px;
      left:0px;
      width:100%
}
</style>

<div id="topdiv">Heading</div>
<p>
content<br>
content<br>
content<br>
.....
</p>

Edited by diafol: This is CSS not PHP

4
Contributors
6
Replies
30
Views
4 Years
Discussion Span
Last Post by JorgeM
0

I can't change the background color,

Why arent you able to apply a background color to the div? Is it because you have no access to the style sheet? If that is the problem, do you have access to the HTML where you can just apply an inline style instead?

0

I have access to style sheet, but the web page itself designed to have the background as white for standards.

0

Overlapping elements in html is handled by the z-index which is automaticaaly assigned (in order of declaration) by the browser unless you state otherwise. Try;

#topdiv {position:fixed;
z-index:1;
...
...
}

You may need a higher value or specify the z-index for the body as 0. If both still show you need an opaque background.

0

You may need a higher value or specify the z-index for the body as 0. If both still show you need an opaque background.

The div is still a transparent element so a background color is needed. Since rrlugo indicated the site must be white, then I would say that a white background should be applied.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.