VPF::DIV, ширина слоя. - Форум программистов

Opik

Дата 27.9.2006, 02:09 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Vingrad developer
Сообщений: 1918
Регистрация: 6.10.2004
Где: Рига

Репутация: нет
Всего: 55

Доброй ночи))
Вот что я сверстал:

Код


<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 (ссылка)

(нет голосов)

Загрузка ...

/*Антон Захаров*/

Профиль
Группа: Комодератор
Сообщений: 1238
Регистрация: 19.3.2005
Где: Россия, Казань

Репутация: 25
Всего: 56

Если бы не 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 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Vingrad developer
Сообщений: 1918
Регистрация: 6.10.2004
Где: Рига

Репутация: нет
Всего: 55

спасибо.
+1

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »