Ребята, помогите все грамотно «обернуть», у меня выходит коряво, размер окна все ок, а вот в окне ... Как сделать чтобы div в окне и изображение подгонялось под размер окна заданный leghtbox?
<!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">
<head>
<title>
Leightbox
</title>
<!-- Meta Tags -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<!-- CSS -->
<link rel="stylesheet" href="http://www.eight.nl/static/files/leightbox/css/screen.css" media="screen,projection" type="text/css" />
<style>
#PPoverlay
{
position:absolute;
top:0;
}
</style>
<!-- JavaScript -->
<script type="text/javascript" src="http://www.eight.nl/static/files/leightbox/scripts/prototype.js"></script>
<script type="text/javascript" src="http://www.eight.nl/static/files/leightbox/scripts/lightbox.js"></script>
</head>
<body>
<div id="container">
<p>
<ul>
<li><a href="#lightbox1" rel="lightbox1" class="lbOn">Было стало</a></li>
</ul>
</p>
</div><!--container-->
<div id="lightbox1" class="leightbox">
<div style="position: relative;">
<div><img src="http://1871.by/pp/image_02.jpg"></div>
<div><input type="range" min="0" max="100" value="100" onchange="ppFunction(this);"></div>
<div id="PPoverlay"><img src="http://1871.by/pp/image_01.jpg" ></div>
</div>
<script>
function ppFunction(ths)
{
document.getElementById("PPoverlay").style.opacity = ths.value / 100;
}
</script>
<p class="footer">
<a href="#" class="lbAction" rel="deactivate">Закрыть</a>
</p>
</div>
</body>
</html>