Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > статичный контент, с шапкой, на один экран!

Автор: bazzjr 11.11.2008, 12:22

Добрый день всем винградовцам!
посмотрите пожалуйста прикрепленный файл-картинку и мой код.

вопрос в следующем:
Как мне сделать так, чтобы шапка всегда была на экране вверху(как на картинке), а контент ниже был как бы в отдельном окне (как бы в фрэйме).

Предлагаю свой вариант, он почти то что надо, только надо чтобы контент начинался от шапки, а не за шапкой...

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style type="text/css">
@charset "windows-1251";
* {
  padding:0px; margin:0px;
}
body { width:100%; height:100%;backgr1ound:#FFF; padding:0; margin:0 auto; overflow:hidden;
}

.top_bar{width:100%; height:150px; position:absolute; top:0px; left:0px; z-index:1; background:#CCCCCC}
.cont2{width:100%; height:100%; position:absolute; top:0px; left:0px;background:#99FFCC; overflow-y:scroll;    overflow:auto; overflow-y:scroll; overflow-x:auto scroll;
}
</style>
</head>

<body>
<div class="top_bar">ШАПКА</div>


<div class="cont2"><img src="pediatr/image/space.gif" width="100%" height="150"  border="1"/>ВЕРХ<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />НИЗ</div>


</body>
</html>

Автор: champion 11.11.2008, 22:02

Думал разные варианты - проблема возникает со скроллом, в вашем варианте, как мне кажется иначе нельзя.
С использованием JS.

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style type="text/css">
@charset "windows-1251";
* {
  padding:0px; margin:0px;
}
body { 
width:100%; 
height:100%;
background:#FFF; 
padding:0; 
margin:0 auto;
overflow: hidden;
}

#ww
{
    position: absolute;
    height: 100%;
}
.top_bar{
width:100%; 
height:150px; 
position:fixed; 
top:0px; 
left:0px; 
z-index:1;
 background:#CCCCCC}
.cont2{
width:100%; 
position:absolute; 
top:150px; 
left:0px;
background:#99FFCC; 
    overflow-y:scroll; 
    overflow-x:auto scroll;


}
</style>
</head>
<script>
function cc(){
    document.getElementById("cc").style.height=document.getElementById("ww").offsetHeight-150+'px';
}
window.onload = cc;
window.onresize = cc;
</script>
<body>
<div id="ww"></div>
<div class="top_bar">ШАПКА</div>
<div class="cont2" id="cc">
        ВЕРХ<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br    /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />НИЗ\
</div>
</body>
</html>

Автор: bazzjr 12.11.2008, 09:08

Спасибо большое Champion!

да... в данном случае без Java никак.
Ваш вариант 100% то что надо! smile

smile

Еще раз спасибо! smile

smile

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)