Hi, im trying to make a 50% opacity div appear all over the site, i gave it position absolute and width, height of 100%. but its still appears only parts of the site, if you scroll down, its not wrapping the rest of the site.
what can i do?
thanks!
+5
A:
Use position: fixed; instead of position: absolute;:
<div style="width: 100%; height: 100%; margin: 0em;
left: 0em; top: 0em; background: black;
position: fixed;">Loading ...</div>
Delan Azabani
2010-07-06 10:25:02
+3
A:
This works too:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
#big {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: #000;
}
</style>
</head>
<body>
<div id="big"></id>
</body>
</html>
Setting top and bottom should do the trick (it also works with position: fixed).
Mike
2010-07-06 10:27:44
At least in my FF, it works: http://jsbin.com/odocu ; +1
Boldewyn
2010-07-06 10:33:51
I did not know that left, right, bottom, top 'trick'.
Christopher Altman
2010-07-06 10:39:19
@Boldewyn: Thanks - I've tried it in the latest versions of Firefox, Opera, Safari and IE. I've not tried earlier versions though. @Christopher Altman: They are a little counter-intuitive at first glance, but usually work well.
Mike
2010-07-06 10:41:34