Разметка страницы

**Rryk** · 27.07.2006, 00:18

Вот уже несколько месяцев не могу реализовать такую схему разметки страницы сайта:

[Только зарегистрированные пользователи могут видеть ссылки. ]

На рисунке первый ряд должен занимать 200 пикселей, второй и третий по 60 и 40 процентов от оставшегося пространства. Кроме того во всех блоках должен быть организован scroll при превышении размеров (типа style="overflow: auto;").

Нужен CSS (или стилями прописанные) работающий как минимум в Firefox и IE (5.5, 6.0). Желательно также поддержка в Opera и IE 7.0. Буду очень признателен если поможете решить проблему - не раз сталкивался, но самостоятельно так ничего и не добился.

P.S. 200 пикселей - для примера. Может быть любое значение - 50, 100...
P.P.S. Формулы в CSS понимает только Firefox - поэтому не использовать.

**h4mpy** · 27.07.2006, 01:49

что то как то все это разметку фрэймами напоминает...
прокрутки в блоках...буэээ..

**Darkness** · 30.07.2006, 18:31

Что тут размечивать то?

Код:

<table border=&#39;0&#39; cellspacing=&#39;0&#39; cellpadding=&#39;0&#39; style=&#39;width:100%;height:100%&#39;>
<tr style=&#39;height:200px&#39;>
 <td>200px</td>
</tr>
<tr style=&#39;height:60%&#39;>
 <td>60%</td>
</tr>
<tr style=&#39;height:40%&#39;>
 <td>40%</td>
</tr>
</table>

Внутри ячеек поставить дивы width:100% и height:100% а у них скролы сделай.

**Rryk** · 05.08.2006, 14:16

Originally posted by Darkness@Jul 30 2006, 13:31
Что тут размечивать то?
...

Внутри ячеек поставить дивы width:100% и height:100% а у них скролы сделай.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]

Увы не помогло... В IE вроде работает, а в Файрфоксе не пашет - вообще третью строку не показывает...

А если добавить дивы с style="width:100%;height:100%;overflow-y:auto;" и записать в каждую ячейку много текста (чтоб скролл появился), то снова таки в IE все пашет, а Файрфокс віпендривается - лепит без скролов (хотя третью ячейку уже показывает).

Вот измененный код:

Код:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 * *<title>test</title>
</head>
<body>
 * *<table border=&#39;0&#39; cellspacing=&#39;0&#39; cellpadding=&#39;0&#39; style=&#39;width: 100%; height: 100%&#39;>
 * * * *<tr style="height: 200px; background-color: Yellow;">
 * * * * * *<td>
 * * * * * * * *<div style="width: 100%; height: 100%; overflow-y: auto;">
 * * * * * * * * * *200px

 * * * * * * * * * *200px

 * * * * * * * * * *200px

 * * * * * * * * * *200px

 * * * * * * * * * *200px

 * * * * * * * * * *200px

 * * * * * * * * * *200px

 * * * * * * * * * *200px

 * * * * * * * * * *200px

 * * * * * * * * * *200px

 * * * * * * * * * *200px

 * * * * * * * * * *200px

 * * * * * * * * * *200px

 * * * * * * * * * *200px

 * * * * * * * * * *200px

 * * * * * * * * * *200px

 * * * * * * * * * *200px

 * * * * * * * * * *200px

 * * * * * * * * * *200px

 * * * * * * * * * *200px

 * * * * * * * *</div>
 * * * * * *</td>
 * * * *</tr>
 * * * *<tr style="height: 60%; background-color: Blue;">
 * * * * * *<td>
 * * * * * * * *<div style="width: 100%; height: 100%; overflow-y: auto;">
 * * * * * * * * * *60%

 * * * * * * * * * *60%

 * * * * * * * * * *60%

 * * * * * * * * * *60%

 * * * * * * * * * *60%

 * * * * * * * * * *60%

 * * * * * * * * * *60%

 * * * * * * * * * *60%

 * * * * * * * * * *60%

 * * * * * * * * * *60%

 * * * * * * * * * *60%

 * * * * * * * * * *60%

 * * * * * * * * * *60%

 * * * * * * * * * *60%

 * * * * * * * *</div>
 * * * * * *</td>
 * * * *</tr>
 * * * *<tr style="height: 40%; background-color: Red;">
 * * * * * *<td>
 * * * * * * * *<div style="width: 100%; height: 100%; overflow-y: auto;">
 * * * * * * * * * *40%

 * * * * * * * * * *40%

 * * * * * * * * * *40%

 * * * * * * * * * *40%

 * * * * * * * * * *40%

 * * * * * * * * * *40%

 * * * * * * * * * *40%

 * * * * * * * * * *40%

 * * * * * * * * * *40%

 * * * * * * * * * *40%

 * * * * * * * * * *40%

 * * * * * * * * * *40%

 * * * * * * * * * *40%

 * * * * * * * * * *40%

 * * * * * * * *</div>
 * * * * * *</td>
 * * * *</tr>
 * *</table>
</body>
</html>

**agat** · 05.08.2006, 20:11

Такого свойства "overflow-y" — в стандартах нету

**Darkness** · 06.08.2006, 13:03

agat, как это нету? Есть overflow-y и overflow-x, их лучше на auto поставить.
Rryk так не рационально делать, как ты
напичкал...

**makeitso** · 06.08.2006, 21:56

Darkness, [Только зарегистрированные пользователи могут видеть ссылки. ]?

**Rryk** · 10.08.2006, 15:41

Да какая в конце концов разница есть ли в стандартах overflow-x, overflow-y и рационально ли использование
? Что касается первого то еще можно поспорить, а второе я использовал просто чтобы заполнить обьем и появились скроллы - копи-пейст тут лучше всех... Вы бы еще на орфографические ошибки поуказывали...

Проблема в том чтобы реализовать указанную выше схему. Да так, чтобы она работала в Firefox и в IE версии 5.0 и более. Если у кого-то есть умные мысли - то пишите, а не попросту набивайте счетчик сообщений... Лучше конечно было бы если бы вы прежде чем писать еще и проверили его хотя бы на какой-то одной версии IE и на Firefox.

Буду благодарен за достойный ответ.

P.S. Кстати на днях выяснил, что CSS не очень то поддерживает высоту документа и что эту проблему как-то обходят при помощи прозрачной картинки размером 1х1 пикселей (и растагивают на нужное количество). Может кто-то слышал про подобный метод? В чем он заключается и как его можно использовать в моем случае?

Тема: Разметка страницы

Опции темы

Поиск по теме

Отображение

Похожие темы

Готовый сайт-разметка

Помогите, пожалуйста, есть жесткая разметка страницы требуется распологать ее по центру экрана

Float-разметка при печати страницы

предзагрузка страницы

Автообновление страницы на PHP

Ваши права