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


Автор: $tatic 1.6.2006, 11:00
Пишу скрипт чата, причем т.к. чат юзает 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 может размещаться текст, который необходимо скроллить, однако во всех моих вариантах скролл не работает как надо, в результате вся страница разваливается...
Неужели нет альтернативы фреймам? 

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

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

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

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

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

  

Автор: jsse 2.6.2006, 02:42
В Опере не проверял, но в 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
jsse, в Опере при ресайзе косячит иногда.
А если вбить большой текст, то и ИЕ начинает гнатьsmile
Правильно только ФФ показывает 

Автор: jsse 2.6.2006, 10:08
У меня и с большим текстом IE нормально отображает.

Цитата($tatic @  2.6.2006,  07:55 Найти цитируемый пост)
в Опере при ресайзе косячит иногда


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

Автор: $tatic 2.6.2006, 13:41
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
А можно ли сделать такую "фреймовую структуру" с помощью ДИВов и таблиц, но без JavaScript-а? Работоспособность нужна только в Gecko & IE . 

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

Автор: jsse 2.6.2006, 18:04
Цитата($tatic @  2.6.2006,  13:41 Найти цитируемый пост)
не уменьшает иногда таблицу...


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

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

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

 

Автор: $tatic 2.6.2006, 20:49
jsse, да, действительно слои, я в код не вчиталсяsmile
А для #onlineDIV код можно из #chatDIV вставить, тогда скролл появится, только размер по высоте взять 100% 

Автор: jsse 3.6.2006, 22:37
ага. и получиться прокрутка на всем докумете  smile  

Автор: $tatic 4.6.2006, 10:33
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
$tatic, может это и совпадение, но сравни - у тебя мой вариант (с) только ты его сделал на таблицах и убрал хаки в css.
Исправленно там только JS  smile

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

Автор: $tatic 4.6.2006, 18:08
jsse, это исправленный вариант того, что я взял на сайте у Orendron'а, твой код я не использовал, к тому же мой скрипт короче раз во много smile 

Автор: jsse 5.6.2006, 09:32
Удачи! 

Автор: $tatic 5.6.2006, 14:52
Спасибо за помощь, думаю тему можно закрывать... 

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