Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > DIV, ширина слоя.


Автор: Opik 27.9.2006, 02:09
Доброй ночи))
Вот что я сверстал:
Код

<html>
  <head>
    <title>Game :)</title>
    <script type="text/javascript">
    </script>
    <style type="text/css">
    body
    {
         margin: 0px;
         padding: 0px;
         height: 100%;
    }
    html
    {
         height: 100%;
    }

    #main
    {
         border: 1px #000000 solid;
         height: 60%;
    }

    #bottom
    {
         border: 1px #000000 solid;
         height: 30px;
         width: 100%;
         bottom: 0px;
    }

    #chat
    {
         width: 100%;
         height: 40%;
         border: 1px solid #ccc;
    }

    #message
    {
         border: 1px solid #ccc;
         width: 80%;
         height: 100%;
         background-color: #f5f5ff;
         overflow: auto;
         float: left;
    }

    #online
    {
         border: 1px solid #ccc;
         width: 100%;
         height: 100%;
         background-color: #f5f5ff;
         overflow: auto;
    }

    </style>
  </head>
<body>
   <div id="main">main</div>
   <div id="chat">
      <div id="message">message</div>
      <div id="online">online</div>
      <div id="bottom">bottom</div>
   </div>
</body>
</html>

результат: http://rpg-dev.info/tmp/main.html
Проблема:
слои message и online слишком жадные на height: 100% и слой bottom загоняют ниже документа. Такого быть не должно. 

Что не так сделано?

Добавлено @ 02:10 
Заметил, что в лисе слой online тоже улетает...

Автор: Illuminaty 27.9.2006, 06:51
Если бы не IE, то код был бы таким:
Код
<?xml version="1.0" encoding="windows-1251"?>
<!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>
<title>Game :)</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style media="screen" type="text/css">
<!--/*--><![CDATA[/*><!--*/
html, body {
    margin: 0px;
    padding: 0px;
    background-color: #FFFFFF;
    height: 100%;
}
body {
    overflow: hidden;
}
#main {
    position: fixed;
    border: 1px #000000 solid;
    height: 60%;
    top: 0%;
    left: 0%;
    width: 100%;
}
#bottom {
    position: fixed;
    border: 1px #000000 solid;
    height: 30px;
    width: 100%;
    background-color: #FFCC33;
    bottom: 0%;
    left: 0%;
}
#message {
    position: fixed;
    border: 1px solid #ccc;
    width: 80%;
    background-color: #f5f5ff;
    overflow: auto;
    left: 0%;
    top: 60%;
    bottom: 30px;
    right: 20%;
}
#online {
    position: fixed;
    border: 1px solid #ccc;
    background-color: #f5f5ff;
    overflow: auto;
    left: 80%;
    top: 60%;
    bottom: 30px;
    right: 0%;
}
/*]]>*/-->
</style>
<script language="javascript" type="text/javascript"><!--//--><![CDATA[//><!--
//--><!]]></script>
</head>
<body> 
<div id="main">main</div> 
<div id="message">message</div> 
<div id="online">online</div> 
<div id="bottom">bottom</div> 
</body>
</html>
 а так.... приходится пользоваться чем-то вроде такого:
Код
<?xml version="1.0" encoding="windows-1251"?>
<!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>
<title>Game :)</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style media="screen" type="text/css">
<!--/*--><![CDATA[/*><!--*/
html, body {
    margin: 0px;
    padding: 0px;
    background-color: #FFFFFF;
    height: 100%;
}
body {
    overflow: hidden;
}
#conteyner {
    height: 100%;
    margin-top: -30px;
}
* html #conteyner {
    margin-top: -60px;
}
#bottom {
    height: 30px;
    border: 1px solid black;
}
#message {
    width: 80%;
    height: 40%;
    background-color: #f5f5ff;
    overflow: auto;
    float: left;
    border: 1px solid black;
}
#online {
    height: 40%;
    background-color: #f5f5ff;
    overflow: auto;
    border: 1px solid black;
}
#main {
    height: 60%;
    width: 100%;
}
* html #main {
    padding-top: 30px !important;
}
/*]]>*/-->
</style>
<script language="javascript" type="text/javascript"><!--//--><![CDATA[//><!--
//--><!]]></script>
</head>
<body> 
<div id="conteyner"> 
        <div id="main"><div style="height: 30px;"> </div>main</div> 
        <div id="message">message</div> 
        <div id="online">online</div> 
        <div id="bottom">bottom</div> 
</div> 
</body>
</html>

Цитата(Opik @  27.9.2006,  03:09 Найти цитируемый пост)
Что не так сделано?
Сейчас пока времени нет писать - на работу опаздываю, а еще в душ нужно забежать smile

Автор: Opik 27.9.2006, 14:14
спасибо.
+1

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