-
Вот уже несколько месяцев не могу реализовать такую схему разметки страницы сайта:
[Only registered and activated users can see links. Click Here To Register...]
На рисунке первый ряд должен занимать 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 - поэтому не использовать.
-
что то как то все это разметку фрэймами напоминает...
прокрутки в блоках...буэээ..
-
Что тут размечивать то? [Only registered and activated users can see links. Click Here To Register...]
Код:
<table border='0' cellspacing='0' cellpadding='0' style='width:100%;height:100%'>
<tr style='height:200px'>
<td>200px</td>
</tr>
<tr style='height:60%'>
<td>60%</td>
</tr>
<tr style='height:40%'>
<td>40%</td>
</tr>
</table>
Внутри ячеек поставить дивы width:100% и height:100% а у них скролы сделай.
-
Цитата:
Originally posted by Darkness@Jul 30 2006, 13:31
Что тут размечивать то? [Only registered and activated users can see links. Click Here To Register...]
...
Внутри ячеек поставить дивы width:100% и height:100% а у них скролы сделай.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
[/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='0' cellspacing='0' cellpadding='0' style='width: 100%; height: 100%'>
* * * *<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>
-
Такого свойства "overflow-y" — в стандартах нету
-
agat, как это нету? Есть overflow-y и overflow-x, их лучше на auto поставить.
Rryk так не рационально делать, как ты
напичкал...
-
Darkness, [Only registered and activated users can see links. Click Here To Register...]?
-
Да какая в конце концов разница есть ли в стандартах overflow-x, overflow-y и рационально ли использование
? Что касается первого то еще можно поспорить, а второе я использовал просто чтобы заполнить обьем и появились скроллы - копи-пейст тут лучше всех... Вы бы еще на орфографические ошибки поуказывали...
Проблема в том чтобы реализовать указанную выше схему. Да так, чтобы она работала в Firefox и в IE версии 5.0 и более. Если у кого-то есть умные мысли - то пишите, а не попросту набивайте счетчик сообщений... Лучше конечно было бы если бы вы прежде чем писать еще и проверили его хотя бы на какой-то одной версии IE и на Firefox.
Буду благодарен за достойный ответ.
P.S. Кстати на днях выяснил, что CSS не очень то поддерживает высоту документа и что эту проблему как-то обходят при помощи прозрачной картинки размером 1х1 пикселей (и растагивают на нужное количество). Может кто-то слышал про подобный метод? В чем он заключается и как его можно использовать в моем случае?
