X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Нужен совет по div, frame и table
code-by
code-by
Topic Starter сообщение 17.5.2008, 14:46; Ответить: code-by
Сообщение #1


Приветствую!
Может кто подскажет как решить проблемку:
необходимо окно разбить на 2 части, в первой части выводится заголовок, который может быть из 1, 2 и т.д. строк, т.е. высота всегда разная. Это часть должна быть всегда видна на экране и не прокручиваться.
Вторая часть должна идти сразу после первой, вне зависимости от ее высоты (расстояние между ними = 0) и будет содержать прокручиваемую таблицу, ее видимый размер должен быть до конца окна.
Благодарю!
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Webmaster_hb
Webmaster_hb
сообщение 17.5.2008, 15:31; Ответить: Webmaster_hb
Сообщение #2


code-by, используйте или <div> с применением параметров overflow
или <iframe>, что наверное более удобно
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
code-by
code-by
Topic Starter сообщение 17.5.2008, 16:48; Ответить: code-by
Сообщение #3


(Webmaster_hb @ 17.5.2008, 18:31) *
code-by, используйте или <div> с применением параметров overflow
или <iframe>, что наверное более удобно


может я не очень правильно описал проблему, но такой вариант не подходит. iframe почему-то отображается только на 1/5 часть экрана, даже если выставить height=100%; а как использовать div с overflow я не знаю.

моя задача в том, чтобы сделать 2 блока: первый блок (как бы меню), который всегда находится вверхней части страницы и может быть любого размера, от 10 пискелей и до 50%, причем не должен прокручивается; второй блок, содержащий таблицу (она может быть как в 1 строку, так и в 1000), должен следовать сразу после окончания верхнего блока (вне зависимости от его высоты) и до нижней части окна, но уже с прокруткой (самой таблицы).

желательно привести html-код или фрагменты
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Webmaster_hb
Webmaster_hb
сообщение 17.5.2008, 17:20; Ответить: Webmaster_hb
Сообщение #4


code-by, с iframe и div'ами прийдется помучаться чтобы добиться 100% высоты до конца окна браузера, особенно будет будет проблема кроссбраузерности

так, что думаю можно попробовать обычные фреймы
файл со структурой <frameset>
и отдельно html-файл который содержит меню и html- файл с содержимым
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Webmaster_hb
Webmaster_hb
сообщение 17.5.2008, 17:24; Ответить: Webmaster_hb
Сообщение #5


вот полный пример такой реализации без фреймов, но как видно слишком много нюансов из-за несовместимости браузеров различных версий

<!--Force IE6 into quirks mode with this comment tag-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Top Frame Layout</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}
#framecontent{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 130px; /*Height of frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}

#maincontent{
position: fixed;
top: 130px; /*Set top value to HeightOfFrameDiv*/
left: 0;
right: 0;
bottom: 0;
overflow: auto;
background: #fff;
}
.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}
* html body{ /*IE6 hack*/
padding: 130px 0 0 0; /*Set value to (HeightOfFrameDiv 0 0 0)*/
}
* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="framecontent">
<div class="innertube">
<h1>CSS Top Frame Layout</h1>
<h3>Sample text here</h3>
</div>
</div>

<div id="maincontent">
<div class="innertube">
<p>text text text text text text text text text </p>
</div>
</div>

</body>
</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
code-by
code-by
Topic Starter сообщение 17.5.2008, 18:17; Ответить: code-by
Сообщение #6


(Webmaster_hb @ 17.5.2008, 20:24) *
вот полный пример такой реализации без фреймов, но как видно слишком много нюансов из-за несовместимости браузеров различных версий


пример хороший, но тут установлена фиксированная высота верхней части, также как и для второй части задана верхняя координата.

у меня верхняя часть будет иметь высоту X, а вторая часть должна начинаться сразу после X. Т.е. для разного наполнения верхней части по количеству строк будет меняться позиция начало второй.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Webmaster_hb
Webmaster_hb
сообщение 17.5.2008, 18:40; Ответить: Webmaster_hb
Сообщение #7


code-by, попробуйте обычные фреймы
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
code-by
code-by
Topic Starter сообщение 17.5.2008, 19:14; Ответить: code-by
Сообщение #8


(Webmaster_hb @ 17.5.2008, 21:40) *
code-by, попробуйте обычные фреймы


Я их уже пробовал. Но не получилось сделать так, чтобы верхней фрейм был достаточной высоты для содержания, т.е. не больше и не меньше.

Разве нет возможности, чтобы последующий блок div по верхней позиции смещался ровно на столько, какова высота предшествующего div, не смотря на то, что у него position:fixed и z-index:1 ?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Webmaster_hb
Webmaster_hb
сообщение 17.5.2008, 21:25; Ответить: Webmaster_hb
Сообщение #9


code-by, а вам нужна валидная верстка ? или главное чтобы везде правильно отображалось ?
если второе, то простой вариант такой
<html>
<body>
<table border=2 height=100%>
<tr>
<td>1111</td>
</tr>
<tr height=100%>
<td><iframe src=1.html height=100%></iframe></td>
</tr>
</table>
</body>
</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
code-by
code-by
Topic Starter сообщение 18.5.2008, 0:41; Ответить: code-by
Сообщение #10


Полазив по инету + взяв фрагмент предшествующего сообщения получось следующее:

<div style="background-color:#FFFFFF;margin-top:0px; margin-bottom:0px;z-index:1;left:0px;top:0px; width:100%;position:fixed;" id=div1>
Здесь располагается содержимое тега Div<br>1<br>2<br>3<br>4<br>&nbsp;
<div id=div11></div>
</div>

<table width="100%" style="margin-top:0px; margin-bottom:0px; position:absolute;left:0px;top:expression(document.getElementById('div1').offsetHeight+'px');" id=t1 cellpadding="0" cellspacing="0">
<tr><td>
<iframe src="1.html" style="height:expression((document.documentElement.clientHeight-document.getElementById('div1').offsetHeight)+'px');" width="100%"  frameborder="0" marginheight="0" marginwidth="0"></iframe>
</td></tr></table>

</body>


Осталось только узнать, как выключить прокрутку самого окна.
Главное чтобы работало с IE5+
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
« Предыдущая тема · Программная часть · Следующая тема »
 
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Нужен кодер, чтобы пофиксить ошибку Wordpress после переноса сайта
 0 Alex-777 757 7.4.2024, 18:05
автор: Alex-777
Открытая тема (нет новых ответов) Нужен кодер, чтобы пофиксить ошибку Wordpress после переноса сайта
 0 Alex-777 364 7.4.2024, 16:33
автор: Alex-777
Открытая тема (нет новых ответов) Нужен исполнитель на постоянную основу для набора небольших текстов
 20 Думающий 9254 2.4.2024, 18:05
автор: Думающий
Открытая тема (нет новых ответов) Нужен сайт с автонаполнением по XML
 1 REGNET 1212 7.3.2024, 15:08
автор: REGNET
Открытая тема (нет новых ответов) Нужен райтер на постоянку
 13 Kiloan_Frost 3415 6.3.2024, 22:24
автор: vitaliraduga


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 16.4.2024, 15:02

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet