I'm sitting and playing around with an idea about that when you hold the mouse over an image then there comes a little icon up over the image. I've tried to do like this:
HTML:
<figure>
<div class="lukIMG">
<img src="/indhold/img/intet-nyhed-img/intet-img2.png" alt="fejl" style="width:339px;">
<img src="/indhold/img/sog/sog.png" class="iconIMG">
<p><?php echo date("d-m-Y", strtotime($dag));;?></p>
</div>
</figure>
CSS:
.lukIMG {
position: relative;
}
.lukIMG p {
position:absolute;
bottom: -4px;
right: 1px;
padding: 5px 10px;
background-color: #002855;
color: #FFF;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
}
.lukIMG .iconIMG { position: absolute; display: none; }
EIDT HTML AND CSS:
HTML
<div class="lukIMG">
<img src="/indhold/img/intet-nyhed-img/intet-img2.png" alt="fejl" style="width:339px;" class="cl1">
<img src="/indhold/img/sog/loading.gif" class="cl2" width="25px;" height="25px;">
<p>dato</p>
</div>
CSS
.lukIMG {
position: relative;
}
.lukIMG p {
position:absolute;
bottom: -4px;
right: 1px;
padding: 5px 10px;
background-color: #002855;
color: #FFF;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
}
.cl1:hover+img
{
position:absolute;
left:0;
top:0;
z-index:3;
}
.cl1
{
z-index:2;
}
.cl2
{
z-index:1;
}
Check the DEMO or the following code:
<html>
<head>
<script>
</script>
<style>
img
{
position:absolute;
}
img.cl1:hover+img
{
position:relative;
left:0;
top:0;
z-index:3;
}
img.cl1
{
z-index:2;
}
img.cl2
{
z-index:1;
}
</style>
</head>
<body>
<img src="1.jpg" width=200 height=200 class="cl1"/>
<img src='2.gif' class="cl2"/>
</body>
</html>
this should be work,please test it:
.lukIMG .iconIMG:hover { position: absolute; display: block; z-index:999}
add the code to your css file
Related
I want to make a round clickable profile image which will a have button on the bottom . i can do that for a normal image but when it comes to rounded image, the button is taking the size of the container in which this image and button are available .
thanks
.img-circle {
border-radius: 50%;
}
<div class="img-thumbnail img-circle">
<div style="position: relative; padding: 0; cursor: pointer;" type="file">
<img class="img-circle" style="width: 140px; height: 140px;" >
<span style="position: absolute; color: red; bottom: 20px; left: 40px;">UPLOAD</span>
</div>
</div>
ok. see here. i think i understood what you wanted to achieve .
let me know if it helps
NOTE : the img.img-circle {background:black; } is just for example purpose so you can see where the img should be. in your code you don't have to include this
.img-circle {
border-radius: 50%;
}
img.img-circle {
background:black;
}
span {
left:0;
text-align:center;
width:100%;
background:rgba(255,255,255,0.5);
bottom:0;
padding:20px 0;
}
.img-thumbnail {
border-radius: 0;
display:inline-block;
background:#dbdbdb;
padding:20px;
}
.img-thumbnail > div {
display:inline-block;
overflow: hidden;
height: 140px;
border: 5px solid #fff;
-webkit-box-shadow: 0 2px 0 2px #333;
box-shadow: 0 2px 0 2px #333;
border-radius:50%;
}
<div class="img-thumbnail img-circle">
<div style="position: relative; padding: 0; cursor: pointer;" type="file">
<img class="img-circle" style="width: 140px; height: 140px;" >
<span style="position: absolute; color: red; ">UPLOAD</span>
</div>
</div>
<div class="img-thumbnail img-circle">
<div style=" position: relative;padding: 0; cursor: pointer;" type="file">
<img class="img-circle" style="width: 140px; height: 140px;" >
<span style="position: absolute; color: red; ">UPLOAD</span>
</div>
</div>
you can try this one:
.img-circle {
border-radius: 50%;
}
.img-circle {
background:green;
}
span {
text-align:center;
width:100%;
background:white;
bottom:0;
padding:20px 0;
opacity:.5
}
.img-thumbnail {
display:inline-block;
overflow: hidden;
height: 140px;
border: 5px solid #fff;
box-shadow: 0 2px 0 2px #dbdbdb;
}
Here Updated Fiddle
I am new due css & Html design. I am facing an issue in aligning text to center of a last div.
I have created js fiddle :http://jsfiddle.net/80sems56/
Please help aligning last div text "Stress" to center of last image.
Code is like:
<div>
<div id="imgWeight" class="floatLeft">
<img alt="Body Weight" class="icon110" src="../../images/OnTrack/bmi_icon_100.png"/>
<div class="textaligncenter">Body Weight</div>
</div>
<div id="imgBloodPressure" class="margin5 floatLeft">
<img alt="Blood Pressure" class="icon110" src="../../images/OnTrack/health_manager_icon_100.png"/>
<div class="textaligncenter">Blood Pressure</div>
</div>
<div id="imgStress" class="floatleft">
<img alt="Stress" class="icon110" src="../../images/OnTrack/stress_icon_100.png"/>
<div class="textaligncenter">Stress</div>
</div>
</div>
css
.
padding20px{
padding:20px;
}
.margin20px{
margin:20px;
}
.imgSteps{
padding:20px;
position:absolute;
}
.bckColor{
background-color: #secondary;
color:#white;
}
.fontfamily {
font-family: "Avenir Next Light";
}
h3{
color:grey;
}
.margin5 {
margin-left: 5%;
margin-right: 5%;
}
.margin15 {
margin-left: 15%;
}
.margin6{
margin-left: 6%;
}
.margin10 {
margin-left: 10%;
}
.margin50{
margin-left:50%;
}
.absPosition{
position: absolute;
}
.floatLeft{
float:left;
}
.shadow {
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.4);
}
.opacity{
opacity: 0.3;
filter: alpha(opacity=30);
}
#dvNavigationArea ul li {
display: inline;
padding-right:20px;
width:100px;
position:relative;
}
.underline{
content:'';
height: 0;
left:0;
bottom:0px;
border-bottom: 4px solid #53ADB3;
}
/*for css chart control*/
.container {
width: 100px;
margin: 20px;
background: #fff;
padding: 20px;
float: left;
}
.horizontal .progress-bar {
height: 45px;
width: 100%;
padding: 12px 0;
}
.horizontal .progress-track {
width: 100%;
height: 20px;
background: #ebebeb;
}
.horizontal .progress-fill {
background: #666;
height: 20px;
width: 50%;
color: #fff;
text-align: center;
font-size: 12px;
line-height: 20px;
}
.fontColor{
color:#53ADB3;
}
.fontsizexlarge{
font-size: x-large;
}
.fontsizexxlarge{
font-size: xx-large;
}
.fontsize22{
font-size: larger;
}
.fontsize10{
font-size: large;
}
.icon110
{
background-color:#secondary;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius: 50%;
width:#col-size;height:#col-size;
}
.textaligncenter{
text-align:center;
}
.minwidth
{
}
You did the typo while assigning the class for the last div. Use floatLeft instead of floatleft (the letter l is culprit)
Js Fiddle
Your last div class name should be floatLeft instead of flaotleft.
<div id="imgStress" class="floatLeft">
Fiddle
* add this code *
.floatleft{
float: left;
text-align: center;}
http://jsfiddle.net/80sems56/3/
Your HTML has a mistake in. Your missing a capital 'L' on the floatLeft class.
Updated Fiddle
<div>
<div id="imgWeight" class="floatLeft">
<img alt="Body Weight" class="icon110" src="../../images/OnTrack/bmi_icon_100.png"/>
<div class="textaligncenter">Body Weight</div>
</div>
<div id="imgBloodPressure" class="margin5 floatLeft">
<img alt="Blood Pressure" class="icon110" src="../../images/OnTrack/health_manager_icon_100.png"/>
<div class="textaligncenter">Blood Pressure</div>
</div>
<div id="imgStress" class="floatLeft">
<img alt="Stress" class="icon110" src="../../images/OnTrack/stress_icon_100.png"/>
<div class="textaligncenter">Stress</div>
</div>
</div>
I'm trying to create a footer at the bottom of my page, but my body only covers half of the page. I've tried body { height:auto;, height:1200px;and height:100%; but it won't resize.
I'll just put my whole code here, maybe there's something else reacting with it.
HTML:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="jquery-1.4.2.min.js"></script>
<link rel="shortcut icon" href="clade.png" />
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<title>Artotek</title>
<script src="jquery-1.10.2.min.js">
</script>
<LINK REL="SHORTCUT ICON"
HREF="favicon.ico">
</head>
<body>
<!-- KIELET -->
<div class="kielet">
<nav>
<!--Englanti-->
<img class="icon" src="iconit/en.gif" title="in english" onmouseover="this.src='iconit/en_hover.gif'" onmouseout= "this.src='iconit/en.gif'">
<!--Ruotsi-->
<img class="icon" src="iconit/swe.gif" title="på svenska" onmouseover="this.src='iconit/swe_hover.gif'" onmouseout="this.src='iconit/swe.gif'">
<!--Venäjä-->
<img class="icon" src="iconit/ru.gif" title="По русски" onmouseover="this.src='iconit/ru_hover.gif'" onmouseout="this.src='iconit/ru.gif'">
</div>
<div class="navigointi">
<ul>
<li>Tietoa Meistä</li>
<li>Yhteystiedot</li>
</ul>
</div>
<div id="footer" style="bottom:0px; right:0px; width:100px; font-size:8px;">
</div>
<div id="teksti" style="position:absolute; width:100%; top: 40px; font-size: 20px; height:130px; margin-top:0px; text-align:center; ">
Tervetuloa
<br>
<br>
<p>Olemme startup innovatiivisten tuotteiden kehitysyritys<br>
Kysyttävää? Ota yhteyttä!</p>
</div>
<div id="slidy" class="slidepart fl">
<img src="1.jpg"><img src="2.jpg"><img src="3.jpg"><img src="4.jpg"><img src="5.jpg">
<div class="sl_paginationpart">
<ul id="slidya" class="slpagination">
<li></li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li></li>
</ul>
<script type="text/javascript">
var slo=null;
var sola = Array();
var prev = 0;
var cur = 1;
var timi=null
$(document).ready(function() {
sol = document.getElementById('slidy').getElementsByTagName('img')
var sho = document.getElementById('slidya').getElementsByTagName('a');
for(var i=1;i<sho.length-1;i++)sola.push(sho[i])
for(var i=1;i<sol.length;i++)sol[i].style.display = 'none';
timi = window.setInterval('doslide()',5000);
})
function doslide()
{
$(sol[prev]).fadeOut(500);
$(sol[cur]).fadeIn(500);
sola[prev].className = 'number'
sola[cur].className = 'number select'
prev = cur++;
if(cur>sol.length-1)
{
cur=0;
prev= sol.length-1;
}
}
function prevnext(mode)
{
window.clearInterval(timi);timi=null;
if(mode)
{
if(cur>sol.length-1)
{
cur=0;
prev= sol.length-1;
}
doslide();
}
else
{
cur--;
prev--;
if(prev<0)
{
cur=0;
prev= sol.length-1;
}
if(cur<0)
{
cur=sol.length-1;
prev=cur-1 ;
}
$(sol[cur]).fadeOut(500);
$(sol[prev]).fadeIn(500);
sola[cur].className = 'number'
sola[prev].className = 'number select'
}
timi = window.setInterval('doslide()',2000)
}
function thisisit(aiyo)
{
cur = aiyo
window.clearInterval(timi);timi=null;
$(sol[cur]).fadeIn(500);
$(sol[prev]).fadeOut(500);
sola[cur].className = 'number select'
sola[prev].className = 'number'
prev=cur
++cur;
if(prev<0)prev = sol.length-1;
timi = window.setInterval('doslide()',2000)
}
</script>
</div>
</div>
</div>
</div>
<!--Twitter
<div class="twitter" style="width:50px; top:0px; margin-top:0px;">
<a class="twitter-timeline" href="https://twitter.com/ArtotekTmi" data-widget-id="381408956653899776">#ArtotekTmi Twitter</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>-->
<span style="bottom:0px; left:500px;">Tehnyt: Claudio Lintunen</span>
</body>
</html>
CSS:
body {
font-family:helvetica;
margin: auto;
min-height: 100%;
width: 100%;
}
#background {
background-image:kuvat/nainen.png;
background-repeat: none;
height: 100%;
width: 100%;
}
.fl {
top:150px;
width: 100%;
left: 25%;
transition: all;
position: absolute;
}
.slidepart {
width:700px;
height:450px;
overflow:hidden;
position:relative;
border:#218559 solid 2px;
box-shadow:gray 2px 5px 5px;
}
.slidepart img {
position:absolute;
height:450px;
border: black solid 1px;
}
.sl_paginationpart {
display:block;
background:#BE5252 no-repeat left;
width:100%;
height:1px;
position:absolute;
right:0px;
bottom:0px;
padding:6px;
transition:all 0.5s ease
}
.sl_paginationpart:hover {
height:15px;
opacity: 0.8;
background:#B80E39
}
ul.slpagination {
margin:0px;
padding:0px;
list-style:none;
font-family:helvetica;
right: 0px;
}
ul.slpagination:hover {
margin:0px;
padding:0px;
list-style:none;
font-family:helvetica;
}
ul.slpagination li {
margin:0px;
padding:0px;
list-style:none;
float:left;
height:100%
}
ul.slpagination li a {
text-decoration:none;
}
ul.slpagination li a.prev {
width:14px;
height:15px;
display:block;
margin-top: 2px;
}
ul.slpagination li a.next {
width:14px;
height:15px;
display:block;
margin-top: 2px;
}
ul.slpagination li a.number {
background:lightgray;
width:25px;
height:4px;
display:block;
text-align:center;
margin:0px 3px;
font-size:0px;
font-weight:bold;
color:#A3916D;
text-decoration:italic;
font-family: helvetica;
border-radius:5px 5px 2px;
transition: all 0.5s ease;
}
ul.slpagination li a.number:hover {
background:#977E79;
color:lightgray;
height:18px;
font-size:10px;
}
ul.slpagination li a.select {
background:#B78B59;
color:white;
text-decoration:none;
text-decoration:italic;
font-size:0px;
}
.sl_paginationpart:hover li a.select {
height: 18px;
font-size: 10px;
}
.sl_paginationpart:hover li a.number {
height: 18px;
}
#logo {
opacity: 1;
}
.kielet {
top:0px;
width:100%;
background-color: #908967;
padding:0px;
height: 35px;
color: white;
}
.kielet nav {
text-align: left;
height: 35px;
}
.kielet a {
display: inline;
left: 0px;
}
.icon {
width: 50px;
height: 100%;
right: 0px;
float: right;
margin:0 10px;
margin-top:0px;
margin-bottom:0px;
padding: 0px;
}
.parent {
font-family: Verdana;
height: 30px;
font-size: 20px;
transition: background 0.5s ease;
}
.parent:hover {
background: #C2C3C4;
}
.parent a {
color: black;
text-decoration: none;
cursor: pointer;
}
.show ul
{
/*animation for show*/
transition:max-height 1s;
-webkit-transition:max-height 1s;
max-height: 100%;
}
.navigointi
{
width: 533px;
height: 35px;
top: 0px;
position: absolute;
}
.navigointi ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
.navigointi a
{
float:left;
width:6em;
top: 0px;
text-decoration:none;
color:white;
background: FFE97D;
padding:0.2em 0.6em;
border-right:1px solid white;
height:29px;
transition: all 0.5s ease;
}
.navigointi a:hover
{
background-color:#FFF1B0;
color: #645406;
}
.navigointi li
{
display:inline;
}
Fot sticking footer use this method:
U just need to create wrapper div and get out footer from there. Then make margin-bottom in this wrapper equal footer height and create some push div - it will be place for footer. Look at this: fiddle
Add 100% also to html, like this:
html {
height: 100%;
}
Maybe put an div before closing with a clear both on it.
so
<div class="clearBoth"></div>
style:
.clearBoth{
clear: both;
}
I've been having a problem with a new website theme I'm creating, this didn't occur to me before until I scrolled down.
Here is the problem. I created a fixed menu (which will stick to the top of the page wherever you are on the page). When you scroll down, the menu goes UNDER the content box instead. I couldn't find a solution to this either. I'm not a professional html or css web developer anyway.
Source:
File: Header.php
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="interface/css/style.css">
</head>
<script type="text/javascript" src="interface/js/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('a').mouseout(function() {
$(this).stop().animate({
opacity:'0.7'
});
});
$('a').mouseover(function() {
$(this).stop().animate({
opacity:'1'
});
});
$('#header-container > a').mouseout(function() {
$(this).stop().animate({
opacity:'0.7'
});
});
$('#header-container > a').mouseover(function() {
$(this).stop().animate({
opacity:'1'
});
});
});
</script>
<div id="header-container">
<div id="header-image" align="center"><img src="interface/images/interface/header.png" title="Home"></div>
<div id="header-social">
<a id="icon" href="#"><img src="interface/images/icons/facebook.png" title="Facebook"></a>
<a id="icon" href="#"><img src="interface/images/icons/twitter.png" title="Twitter"></a>
<a id="icon" href="#"><img src="interface/images/icons/blog.png" title="Blog"></a>
</div>
<div id="header-bottom"></div>
<div id="menu">
<ul><a class="text" href="#" title="">Home</a></ul>
<ul><a class="text" href="#" title="">About</a></ul>
<ul><a class="text" href="#" title="">Articles</a></ul>
<ul><a class="text" href="#" title="">Videos</a></ul>
<ul><a class="text" href="#" title="">Tutorials</a></ul>
<ul><a class="text" href="#" title="">Downloads</a></ul>
<ul><a class="text" href="#" title="">Contact</a></ul>
<ul><a class="text" href="#" title="">Help</a></ul>
</div>
</div>
<body>
<div id="main-container">
File: index.php
<div id="container">
<div id="content-container">
lorem ipsum
</div>
</div>
File: Footer.php
<!--Footer Container-->
</body>
</div>
</html>
The CSS Styles: style.css:
#font-face { font-family: myriad; src: url('../font/MYRIADPRO-REGULAR.OTF'); }
/*HTML Ententites*/
html{
margin:0;
left: 0;
right: 0;
top:0;
bottom: 0;
position: absolute;
font-family: myriad;
color: white;
}
body{
background:white;
}
a{
text-decoration: none;
color: white;
}
/*Containers*/
#header-container{
background:#202020;
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 100px;
}
#header-bottom{
height: 1px;
width: auto;
background:#8A8A8A;
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
box-shadow: 0 0 50px 5px rgba(255,255,255,.5);
}
#header-image{
position: absolute;
top:70px;
left:300px;
cursor: pointer;
opacity: .7;
}
#header-social{
position: absolute;
right:0px;
top:50px;
}
#header-social > #icon{
opacity: .7;
}
#header-social > #icon:hover{
background: url('../images/icons/icon-hover.png') no-repeat;
opacity: 1;
}
#main-container{
background:#454545;
margin-left: -10px;
margin-right: -8px;
height: 1500px;
}
#menu{
position: fixed;
top:0px;
left: 0px;
right: 0px;
height: 50px;
background: rgba(0,0,0,.5);
}
#menu > ul{
display: inline-block;
background: rgba(10,174,254,.8);
height:40px;
cursor: pointer;
margin: 5px 0px 10px 0px;
width: 100px;
text-decoration: none;
font-size: 20px;
font-family: myriad;
}
#menu > ul:hover{
background: rgba(10,174,254,1);
}
#menu > ul > .text{
text-align: left;
color: white;
text-decoration: none;
opacity: .7;
}
#container{
position: absolute;
right: 500px;
left: 10px;
margin-top:250px;
background-clip: content-box;
}
#content-container{
background:#646464;
padding: 20px;
height: 200px;
overflow: auto;
border-bottom:3px solid #2B312D;
border-left:3px solid #2B312D;
border-right:3px solid #2B312D;
box-shadow: inset 0 0 10px 0px rgba(0,0,0,0.5);
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
}
#content-header{
}
I suppose the problem must be somewhere in my CSS for the menu. I don't think it's layered correctly in the html, but again, I suck at layering, I'm still learning. :)
Thanks in advance.
LIVE VIEW
Scroll down over the content box.
Set the z-index to 2.
#menu {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
height: 50px;
background: rgba(0,0,0,.5);
z-index: 2;
}
Just add z-index in your menu.
CSS
#menu {
z-index: 99999;
}
I am trying to create an overlay box and want the whole background to be masked.
However, the mask is only covering the body of the page. I want the mask to extend to the edge and top of the page.
Is there a way to manually position the mask to cover the entire page?
Thank you.
CSS:
body
{
background-color: #C75656;
text-align:center;
font-size:16px;
font-variant:small-caps;
font-family:Lucida,Helvetica,sans-serif;
font-weight:500;
text-decoration: none;
position: absolute;
left: 50%;
width: 780px;
margin-left: -390px;
}
#middleContainer {
width:780px;
margin: 5px auto;
padding: 10px 0;
}
.box {
background:white;
border-style:solid;
border-width:1.5px;
border-color:#071419;
border-radius: 12px;
-moz-border-radius: 12px;
}
.modal {
background-color:#fff;
display:none;
width:700px;
padding:15px;
text-align:left;
border:2px solid #333;
opacity:0.8;
-moz-border-radius:6px;
-webkit-border-radius:6px;
-moz-box-shadow: 0 0 50px #ccc;
-webkit-box-shadow: 0 0 50px #ccc;
}
.modal h2 {
margin:0px;
padding:10px 0 10px 45px;
border-bottom:1px solid #333;
font-size:20px;
}
HTML:
<!DOCTYPE html>
<html lang='en'>
<head>
<title>mySITE</title>
<!-- Meta tags go here -->
<!-- Links to Icon, favicon, css, jquery, ajax, etc. -->
<link rel='stylesheet' type='text/css' href='default.css' />
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<script>
$(document).ready(function() {
var triggers = $(".modalInput").overlay({
mask: {
color: '#ebecff',
loadSpeed: 200,
opacity: 0.5,
},
});
$("#login form").submit(function(e) {
triggers.eq(1).overlay().close();
var input = $("input", this).val();
triggers.eq(1).html(input);
return e.preventDefault();
});
});
</script>
</head>
<body>
<span><h1>my<font color="red">SITE</font></h1></span>
<a class="modalInput" rel="#login">Login</a>
<div id="middleContainer" class="box">
<div id="title">Content</div>
</div>
<div class="modal" id="login">
<h2>Login or Regester.</h2>
<form>
<input />
<button type="submit"> OK </button>
<button type="button" class="close"> Cancel </button>
</form>
<br />
</div>
</body>
</html>
This is what i am using for all my projects
<style>
.mask {
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
z-index:1000;
opacity: 0.5;
}
.overlay {
position: absolute;
width: 300px;
height: 200px;
top: 100px;
left: -50%;
margin-left: -150px;
background: white;
z-index: 1001
}
</style>
<div class="mask"></div>
<div class="overlay"></div>
Put this in the head of your document
<style type="text/css" media="all">
.mask {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 2000px;
background: black;
opacity: 0.5;
}
</style>
And then put
<div class="mask"></div>
anywhere in your html, but I would put it at the top or the bottom. Because it is absolutely positioned, it really doesn't matter.