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


Автор: diam 19.7.2005, 09:50
Привет всем! smile

Задача.
Окно браузера должно быть разбито на две части. В верхней навигационная менюшка, в нижней контент. При этом навигационная менюшка должна всё время быть наверху, как будто страница состоит из двух фреймов. Но опять же, нужно обойтись без них (фреймов) smile.

Мысли по поводу решения.
Растянуть талицу из двух строк (по одной ячейке в каждой строке) на всю страницу. В каждую ячейку по DIV'у, который и будет обрезать контент и прочее, что вылазит за пределы ячейки (поскольку в браузерах на движках геко прокрутка в ячейках таблицы не появляется, приходится пользоваться DIV'ами). Свойства CSS задать следующим образом:
Код

.razm { border-collapse : collapse ; width : 100% ; height : 100% }
.razm > TBODY > TR > TD { padding : 0 ; height : * }
.razm > TBODY > TR > TD > DIV { width : 100% ; height : 100% ; overflow : auto ; clip : 0 }

А код HTML наваять такой:
Код

<table class='razm'>
<tr><td style='width : 30px'><div>Содержание навигационной менюшки</div></td></tr>
<tr><td><div>Контент сайта</div></td></tr>
</table>

Т.е., по идее, я задаю высоту навигационной менюшки атрибутом style, а высота ячейки второй строчки остаётся '*'.

Собственно, проблема заключается в том, что моя идея не работает ни в одном браузере:
  • IE вообще не создаёт прокрутки. Всё отображает на одной странице целиком.
  • Opera отображает только верхнюю часть (менюшку), контента нет smile.
  • Gecko показывает верхнюю часть (менюшку) правильно, как и опера, в случае необходимости включает прокрутку. А нижняя часть (контент) уезжает вниз (горизонтальную прокрутку создаёт, если нужно, а вертикальную - нет. Просто уезжает).

Подскажите, пожалуйста, в чём проблема.

Спасибо. smile

Автор: diam 19.7.2005, 10:05
Ещё один вариант. Создаём два элемента DIV.
Код

.razm { width : 100% ; height : * ; padding : 0 ; margin : 0 ; overflow : auto ; clip : 0 }

Код

<div class='razm' style='height : 30px'>Меню</div>
<div class='razm'>Содержание.</div>


Работает везде одинаково: если размер указать в % или *, т.е., не фиксированно, то поле растягивается в высоту как хочет (в ширину нормально создаётся прокрутка). Если указать фиксированный размер - всё становится нормально.

Автор: dm9 19.7.2005, 22:54
1. Селектор > не работает под ИЕ.

2. С height: * и height: 100% я бы посоветовал быть поосторожнее.

3. Создайте таблицу, в неё засуньте дивы height: ... width: ... overflow: auto; Идея понятна?

Автор: diam 20.7.2005, 07:39
Цитата(dm9 @ 19.7.2005, 22:54)
3. Создайте таблицу, в неё засуньте дивы height: ... width: ... overflow: auto; Идея понятна?

То есть, использовать фиксированные размеры таблицы?

Автор: dm9 20.7.2005, 10:30
Таблица с 100% высотой и таким разбиением по ячейкам, как тебе надо. В ячейках - дивы. В дивах - контент. Когда контент не влезает в ячейки, появляется прокрутка. Правда, боюсь, ни под один DOCTYPE это не прокатит. Только если документ начинается сразу с html, без dtd.

Автор: diam 20.7.2005, 13:18
dm9, я сделал следующим образом.
Код

TABLE.razm { width : 100% ; height : 100% ; border-collapse : collapse ; border-style : solid ; border-width : thin }
TABLE.razm TD { padding : 0 ; border-style : solid ; border-width : thin }
TABLE.razm TD > DIV { overflow : auto ; clip : 0 ; margin : 0 ; padding : 0 }

Код

<table class='razm'>
  <tr><td style='height : 30px'><div>
    меню
  </div></td></tr>
  <tr><td><div>
    Содержание
  </div></td></tr>
</table>

1. Работает только с фиксированными размерами.
2. С горизонтальной прокруткой проблемы нет, вертикальная прокрутка не появляется (если размер не фиксированный), т.е., появляется прокрутка самой страницы.
3. А чем это отличается от первого сообщения в теме? smile

Автор: dm9 20.7.2005, 13:48
diam, ну я же написал
Цитата(dm9 @ 19.7.2005, 23:54)
1. Селектор > не работает под ИЕ.


Остальное посмотрю позже.

Автор: diam 20.7.2005, 14:16
Цитата(dm9 @ 20.7.2005, 13:48)
Остальное посмотрю позже.

Спасибо smile

Автор: diam 25.7.2005, 12:22
Я извиняюсь, но UP!

Автор: diam 1.8.2005, 13:56
Я не обнаглею, если ещё раз скажу UP! ^)

Автор: dm9 1.8.2005, 14:06
Сорри, совсем нет времени посмотреть smile Попробую сегодня вечером.

Автор: Sardar 1.8.2005, 16:30
На сколько я понял задача зафиксировать меню на странице. Есть стиль position: fixed для этих целей, но ИЕ пока не поддерживает.

НО! После прочтения: http://www.stunicholls.myby.co.uk/layouts/fixed.html всё может получиться. Сразу предупреждаю, после махинаций с ИЕ у тебя все элементы с position: relative и absolute будут вести себя как position: fixed; Если это фатально, то метод использовать нельзя smile
Второе ограничение, это то что фича работает только в XHTML документе.

Смотрим результат: http://sardar.vingrad.ru/vingradattaches/IE_position_fixed.htm

Кратко:
Выставляем для body height: 100%; overflow-y: auto; и ИЕ переходит в "особый режим"(вообще это баг smile). Для остальных браузеров визуально ничего не меняеться.
Для ИЕ6 html вдруг станет самым внешним контейнером и будет сушить мозги ещё одной вертикальной полосой прокрутки, отрубаем:
Код
<!--[if IE 6]>
   <style type="text/css">
   /*<![CDATA[*/ 
html {overflow-x:auto; overflow-y:hidden;}
   /*]]>*/
   </style>
<![endif]-->


Теперь все элементы с position: absolute|relative у нас на фиксированной позиции в ИЕ. Далее ставим их действительно на positon: fixed + добавляем хак для ИЕ, где переопределяем fixed на absolute|relative;
Код
#fxd {
  position:fixed;
}
* html #fxd {position:relative;} /* Никто кроме ИЕ сие не прочтёт */


Больше о хаках можно узнать отсюда: http://www.dithered.com/css_filters/index.html

Заметим что position: fixed это больше чем просто отображение. При печати такой элемент будет рисоваться на всех страничках. В случае ИЕ такого не будет, хотя не проверял smile

Автор: diam 2.8.2005, 07:41
Sardar, изначально задача стояла именно так: аналог фреймов. Цель - разбить страницу на сколько угодно сегментов, информация в каждом из которых прокручивается в случае необходимости. position:fixed - не совсем то, но ты натолкнул меня на мысль.

Спасибо, в общем. smile Коплю плюсы, пока ставить не могу smile

Автор: Elfet 7.3.2006, 22:53
Sardar , в ИЕ глючит smile В сролле нет нижней стрелочки)) Или это только у меня?

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