вобщем вот мой кривой код. Вроде блоки о которых я говорил должны тянуться... Но скорее всего у меня проблемы с позиционированием. И скорее всего виновато меню...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#example p:first").css("display", "block");
jQuery.fn.timer = function() {
if(!$(this).children("p:last-child").is(":visible")){
$(this).children("p:visible").css("display", "none").next("p").css("display", "block");
}
else{
$(this).children("p:visible").css("display", "none").end().children("p:first").css("display", "block");
}
}
window.setInterval(function() {
$("#example").timer();
}, 1000);
});
</script>
<style type="text/css">
body{margin:0; background-color: #DDE5FF;}
#header{
margin:0 auto;
width:1024px;
}
.head{
background-image: url(image/header.png);
width: 718px;
height:200px;
float: left;
z-index:2;
position:relative;
}
#example{
margin-left:718px;
width: 421px;
height:200px;
z-index:1;
position:relative;
left: -119px;
}
*{
margin:0;
padding:0
}
#nav{
font-size:0.7em;
list-style-type:none;
width:1020px;
height:53px;
display:inline-block;
background-image: url(image/bt.png);
line-height:53px
}
#nav li{
float:left;
width:204px;
margin-top:-10000px
}
#nav li a{
width:204px;
text-decoration:none;
text-align:center;
color:#fff;
position:relative;
float:left;
margin-right:-203px;
margin-top:10000px
}
#nav li a:hover, #content #nav li a:focus, #content #nav li a:active{
background-image: url(image/bt-hov.png);
margin-right:0;
color:#355C96
}
#nav li ul{
background-image: url(image/bt.png);
float:left;
margin-top:-53px;
padding-top:53px;
margin-bottom:-10000px;
list-style-type:none
}
#nav li ul li{
float:none;
margin:0;
width:auto
}
#nav li ul li a{
float:none;
display:block;
margin:0;
margin-right:-1px;
background-image: url(image/bt.png);
}
.footer{
background-image: url(image/line.png);
width: 1020px;
height:54px;
margin: 10px 0;
}
.page {width:1020px; overflow:hidden; }
.leftcol {
float:left; background-image: url(image/news-fon.png);
width:256px;
height: 500px;
}
.rightcol { padding-left:256px; }
.rightcol .content {
border-left:5px solid #2783D8;
margin-left: 5px;
border-right:5px solid #0059ad;
background-color:#f2f7ff;
height: 500px;
}
</style>
</head>
<body>
<div id="header">
<div class="head"></div>
<div id="example">
<p><img src="image/pht1.jpg" alt="" /></p>
<p><img src="image/pht2.jpg" alt="" /></p>
</div>
<div id="menu">
<ul id="nav">
<li><a href="">Раздел1</a></li>
<li><a href="">Раздел2</a>
<ul>
<li><a href="">Раздел2.1</a></li>
</ul>
</li>
<li><a href="">Раздел3</a>
</ul>
</div>
<div class="page">
<div class="leftcol">
</div>
<div class="rightcol">
<div class="content">
</div>
</div>
</div>
<div class="footer">
</div>
</body>
</html>
П.С. Я начинающий самоучка, так что не надо говорить какой у меня кривой код, я это и сам знаю
Если поможешь, скажу спасибо ))
Но ИМХО легче было бы с outerHeight...
, да и свойство очень интересное, в будущем пригодится...
