VPF::Верстка "фреймовой" структуры - Форум программистов

$tatic

Дата 1.6.2006, 11:00 (ссылка)

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

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 651
Регистрация: 28.1.2005

Репутация: 1
Всего: 22

Пишу скрипт чата, причем т.к. чат юзает ajax, то стандартная структура окна на фреймах немного не подходит. Нужно написать на div или table (т.е. без фреймов) структуру, аналогичную следующей:

Код


<html xmlns="http://www.w3.org/1999/xhtml">

<frameset rows="*,40" cols="*">
  <frameset cols="*,200">
    <frame src="" name="mainFrame" />
    <frame src="" name="usersFrame" />
  </frameset>
  <frame src="" name="messFrame />
</frameset>

</html>

Перепробовал все варианты, но то глючном в IE не работает, то в Нормальных Браузерах Firefox и Opera. Проблема в том, что в "фреймах" 1 и 2 может размещаться текст, который необходимо скроллить, однако во всех моих вариантах скролл не работает как надо, в результате вся страница разваливается...
Неужели нет альтернативы фреймам?

Присоединённый файл ( Кол-во скачиваний: 26 )

layout.GIF 4,62 Kb

Vaulter

Дата 1.6.2006, 11:46 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1724
Регистрация: 30.12.2002
Где: бункер

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

$tatic, а че там разваливается?
закрепил размеры
указал overflow:scroll;

--------------------

$tatic

Дата 1.6.2006, 12:57 (ссылка)

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

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 651
Регистрация: 28.1.2005

Репутация: 1
Всего: 22

дело в том, что я хотел бы сделать не строго заданных размеров все рамки, а как с фреймами - изменяющийся в зависимости от размеров страницы, постоянного размера должны быть только нижняя и правая панель...

orendron

Дата 1.6.2006, 21:03 (ссылка)

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

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 8
Регистрация: 1.6.2006
Где: Оренбург

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

пример такого чата, который делаю я тут: www.chat.all1.ru
1)вместо фреймов - таблица+div
2)корректно обрабатывается ресайз
3)пример работает и выглядит во всех нормальных и ненормальных браузерах одинаково!
4)AJAX пока что используется для приема сообщений

P.S. код не считать примером подражания (идеальным), т.к. написан спонтанно и нуждается в оптимизации и доробатке!!!
не обращать внимания на то что чуть не влазиет в экран по высоте - это лечится

$tatic,, давай вместе чат делать!!! ICQ 161041404

jsse

Дата 2.6.2006, 02:42 (ссылка)

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

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 99
Регистрация: 1.5.2006
Где: Кривой Рог

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

В Опере не проверял, но в FF и IE - работало нормально.

Код


<html>
<head>

<style type="text/css">

body {
    margin: 0;
    padding: 0;
    height: 100%;
} 

#wrap {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}     

#right {
    background: yellow;
    overflow: auto;
    float: right;
    width: 200px;
    margin-left: -200px;
}

#center {
    overflow: auto;
    float: left;
    margin-right: 200px;
}

#footer {
    background: brown;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
}

</style>

<script type="text/javascript">
<!--
   function setS()
   {
      if (document.documentElement && document.documentElement.clientHeight)
         H=document.documentElement.clientHeight;
      else
         H=document.body.clientHeight;

      if (document.documentElement && document.documentElement.clientWidth)
         W=document.documentElement.clientWidth;
      else
         W=document.body.clientWidth;
         
      obj=document.getElementById('footer');
      tabH=obj.offsetTop;
      tabW=W-200;
      document.getElementById('center').style.width=tabW+'px';
      document.getElementById('center').style.height=tabH+'px';
      document.getElementById('right').style.height=tabH+'px';

   }

   onload=setS;
   onresize=setS;
//-->
</script>

</head>
<body>
<div id="wrap">

   <div id="container">
     <div id="center">center</div>
     <div id="right">right</div>
   </div>
   <div id="footer">footer</div>

</div>
</body>
</html>

$tatic

Дата 2.6.2006, 07:55 (ссылка)

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

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 651
Регистрация: 28.1.2005

Репутация: 1
Всего: 22

jsse, в Опере при ресайзе косячит иногда.
А если вбить большой текст, то и ИЕ начинает гнать smile

Правильно только ФФ показывает

jsse

Дата 2.6.2006, 10:08 (ссылка)

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

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 99
Регистрация: 1.5.2006
Где: Кривой Рог

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

У меня и с большим текстом IE нормально отображает.

Цитата($tatic @ 2.6.2006, 07:55

)

в Опере при ресайзе косячит иногда

Че значит косячит smile

$tatic

Дата 2.6.2006, 13:41 (ссылка)

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

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 651
Регистрация: 28.1.2005

Репутация: 1
Всего: 22

jsse, не уменьшает иногда таблицу...

Вот привожу вариант ИМХО рабочего кода (модифицированный вариант orendron):

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">

<style type="text/css">
    body {
        height: 100%;
        margin: 0px;
        padding: 0px;
        overflow: auto;
    }
    #maintable {
        width: 100%;
        height: 100%;
    }
    #right {
    width: 200px;
    vertical-align: top;
    background-color: #00FFCC;
    }
    #center {
    width: 85%;
    vertical-align: top;
    background-color: #FFCC00;
    }
    #footer {
    height: 50px;
    background-color: #00CCFF;
    }
    #chatDIV {
        overflow: auto;
        margin: 0px;
        height: 438px;
    }
    #onlineDIV {
        width: 210px;
    }
</style>

<script type="text/javascript">
function ini(){
document.getElementById('chatDIV').style.height=document.body.clientHeight-113+'px';
}
</script>
</head>

<body class="body1" onLoad="ini()" onResize="ini()">
<table id="maintable" cellspacing="0">
<tbody>
<tr>
    <td id="center">    
        <div id="chatDIV"></div>
    </td>
    <td id="right">
        <div id="onlineDIV"></div>
    </td>
</tr>
<tr>
    <td id="footer" colspan="2"></td>
</tr>
</tbody>
</table>
</body></html>

Burrr

Дата 2.6.2006, 14:29 (ссылка)

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

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 459
Регистрация: 4.9.2005

Репутация: 5
Всего: 20

А можно ли сделать такую "фреймовую структуру" с помощью ДИВов и таблиц, но без JavaScript-а? Работоспособность нужна только в Gecko & IE .

Это сообщение отредактировал(а) Burrr - 2.6.2006, 14:29

--------------------

JavaScript на fastcoder, sqlinfo.ru

$tatic

Дата 2.6.2006, 17:41 (ссылка)

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

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 651
Регистрация: 28.1.2005

Репутация: 1
Всего: 22

Burrr, если у тебя получится - попробуй, у меня такое не получилось - ИМХО нужны точные (не процентные) значения для размеров, иначе переполнение не обрабатывается скроллингом, а просто расширяется контейнер...

jsse

Дата 2.6.2006, 18:04 (ссылка)

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

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 99
Регистрация: 1.5.2006
Где: Кривой Рог

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

Цитата($tatic @ 2.6.2006, 13:41

)

не уменьшает иногда таблицу...

Ну во-первых у меня не таблицы, а слои smile

2. В твоем варианте окно сообщений фиксированой высоты, при большом разрешении оно доходит лишь до половины страницы.

3. также если в окне где (я так понял) будет список пользователей превысит высоту окна - появляется скролл всего документа, а не правой части.

$tatic

Дата 2.6.2006, 20:49 (ссылка)

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

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 651
Регистрация: 28.1.2005

Репутация: 1
Всего: 22

jsse, да, действительно слои, я в код не вчитался smile

А для #onlineDIV код можно из #chatDIV вставить, тогда скролл появится, только размер по высоте взять 100%

jsse

Дата 3.6.2006, 22:37 (ссылка)

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

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 99
Регистрация: 1.5.2006
Где: Кривой Рог

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

ага. и получиться прокрутка на всем докумете smile

$tatic

Дата 4.6.2006, 10:33 (ссылка)

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

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 651
Регистрация: 28.1.2005

Репутация: 1
Всего: 22

jsse, большое спасибо за бета-тестирование smile

Вот исправленный вариант (весь документ теперь точно прокручиваться не будет smile

, работает более корректно)

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">

<style type="text/css">
    body {
        height: 100%;
        margin: 0px;
        padding: 0px;
        overflow: hidden;
    }
    #maintable {
        width: 100%;
        height: 100%;
    }
    #right {
        width: 200px;
        vertical-align: top;
        background-color: #00FFCC;
    }
    #center {
        width: 85%;
        vertical-align: top;
        background-color: #FFCC00;
    }
    #footer {
        height: 50px;
        background-color: #00CCFF;
    }
    #chatDIV {
        overflow: scroll;
        overflow-x: auto; /* Работает только в Firefox и IE - полосы прокрутки*/
        overflow-y: auto; /* появляются только при необходимости*/
    }
    #onlineDIV {
        width: 210px;
        overflow: scroll;
        overflow-x: auto; /* Работает только в Firefox и IE - полосы прокрутки*/
        overflow-y: auto; /* появляются только при необходимости*/
    }
</style>

<script type="text/javascript">
function ini(){
document.getElementById('chatDIV').style.height=
document.getElementById('onlineDIV').style.height=
document.body.clientHeight-50+'px';
}
</script>
</head>

<body onLoad="ini()" onResize="ini()">
<table id="maintable" cellspacing="0">
<tbody>
<tr>
    <td id="center">    
        <div id="chatDIV"></div>
    </td>
    <td id="right">
        <div id="onlineDIV"></div>
    </td>
</tr>
<tr>
    <td id="footer" colspan="2"></td>
</tr>
</tbody>
</table>
</body></html>

jsse

Дата 4.6.2006, 13:36 (ссылка)

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

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 99
Регистрация: 1.5.2006
Где: Кривой Рог

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

$tatic, может это и совпадение, но сравни - у тебя мой вариант (с) только ты его сделал на таблицах и убрал хаки в css.
Исправленно там только JS smile

З.Ы. Учитесь верстать на DIV.

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