Forum Moderators: not2easy
I really happy to see someone post this style is theis forum before, I'm looking for it for a long long time, but sadly it is not totally satisfy for me.
I add a DIV to at the bottom on the page, and this DIV is in red colver, I owuld like to make this DIV to cover every element on the page(including scroll bar). But...is it impossible? I know that ti is affected by the html padding
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Untitled</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
overflow: hidden;
padding: 0;
width: 100%;
}
#header {
background: #f00;
height: 30px;
position: absolute;
top:0;
width:100%;
}
#topnav {
background: #ff0;
height: 20px;
position: absolute;
top: 30px;
width: 100%;
}
#main {
bottom: 20px;
left: 0;
position: absolute;
right: 0;
top: 50px;
}
#sidenav {
background: #00f;
height: 100%;
float: left;
width: 200px;
}
#content {
height: 100%;
overflow: auto;
}
#footer {
background: #0f0;
height: 20px;
margin-top: -20px;
position: absolute;
top: 100%;
width: 100%;
}
</style>
<!--[if lt IE 7]>
<style type="text/css">
html {
padding: 50px 0 20px;
}
#main {
bottom: auto;
left: auto;
right: auto;
top: auto;
height: 100%;
position: static;
}
</style>
<![endif]-->
</head>
<body>
<div id="header">header</div>
<div id="topnav">topnav</div>
<div id="main">
<div id="sidenav">sidenav</div>
<div id="content">content<br/>content<br/>
content<br/>content<br/>content<br/>content<br/>
insert favourite foo text here........</div>
</div>
<div id="footer">footer</div>
<div style="position:absolute; top:0; left:0; width:100%; height:100%; background-color:red; filter:alpha(opacity=12); opacity:0.12; -moz-opacity:0.12; z-index:-2;"></div>
</body>
</html>
[edited by: SuzyUK at 7:16 pm (utc) on April 12, 2007]
[edit reason] fixed scrollism [/edit]
You already have overflow:hidden... there won't be any scrollbars to cover!
What's the problem with that?
Secondly... even if it was possible to cover the scrollbars of a browser (which AFAIK it isn't for most), it would be a bad idea (you shouldn't do it). Why do you want to do that?
Lastly, you shouldn't use XHTML. You're not coding proper XHTML as it is, and there's virtually no advantage to using XHTML over HTML 4.01. You can search webmasterworld for more info on this.
Until this moment I solve the problem by using expression, but I'm not really like using this since only IE support it. I still looking for a better solution.
Well...my case is want to use the DIV to cover all content and scrollbar, since I would like the user can't touch anything when there are a layer cover it.
XHTML is poor than HTML 4? I'm really intereseted on this topic, can you still remember the topic of that artical? I believe XHTML is more update than HTML4 so I choose it, no any special reason.
