Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.07.2007, 16:39
Новичок на форуме
Отправить личное сообщение для nirva Посмотреть профиль Найти все сообщения от nirva
 
Регистрация: 06.07.2007
Сообщений: 5

css - три ряда в окне, stick'ры
Добрый.
Как сделать так, чтобы окно было разделено на три части, верхняя и нижняя из которых отображались полностью всегда (были бы стикнуты соответсвенно к верху и низу), а средняя была видима настолько, насколько остается места + при скроле всей страницы скролилась бы только средняя часть.
заранее спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 06.07.2007, 17:02
Аватар для Илья Кантор
Администратор
Отправить личное сообщение для Илья Кантор Посмотреть профиль Найти все сообщения от Илья Кантор
 
Регистрация: 25.05.2007
Сообщений: 1,221

Обычно для этого используются layout-ы..
Типа как
http://www.yui-ext.com/deploy/yui-ex...t/complex.html

Если, конечно, допустимо использовать YUI..
Ответить с цитированием
  #3 (permalink)  
Старый 06.07.2007, 17:04
Новичок на форуме
Отправить личное сообщение для Alex Посмотреть профиль Найти все сообщения от Alex
 
Регистрация: 03.06.2007
Сообщений: 4

Примерно так...
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Example</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

#header {
	height: 5em;
	background-color: #ff0000;
	position: fixed;
	top: 0;
	width: 100%;
}

#main {
	margin: 5em 0;
}

#footer {
	position: fixed;
	bottom: 0;
	height: 5em;
	width: 100%;
	background-color: #00ff00;
}
</style>
</head>
<body>
<div id="header">
</div>
<div id="main">
</div>
<div id="footer">
</div>
</body>
</html>
Как всегда работает везде, кроме IE. Для ослика нужен либо жабоскрипт, либо ухищрения со стилями.
Ответить с цитированием
  #4 (permalink)  
Старый 06.07.2007, 23:33
Новичок на форуме
Отправить личное сообщение для nirva Посмотреть профиль Найти все сообщения от nirva
 
Регистрация: 06.07.2007
Сообщений: 5

layout'ы это хорошо, но здесь нельзя их использовать.
ну а с вариантом fixed хорошо (текст все равно налазит же, и надо делать отсупы для центрового элемента), но от IE никуда не уйти.
попробую писать js, что делать...
Ответить с цитированием
  #5 (permalink)  
Старый 07.07.2007, 02:06
Новичок на форуме
Отправить личное сообщение для Alex Посмотреть профиль Найти все сообщения от Alex
 
Регистрация: 03.06.2007
Сообщений: 4

Хм, куда там налазит текст? Верний и нижний margin элемента с контентом просто должны быть равны высоте хедера и футера соответственно, а эмуляцию fixed для IE писали на js очень простую.
Ответить с цитированием
  #6 (permalink)  
Старый 07.07.2007, 13:24
Новичок на форуме
Отправить личное сообщение для nirva Посмотреть профиль Найти все сообщения от nirva
 
Регистрация: 06.07.2007
Сообщений: 5

нижний и верхний элементы могут иметь произвольную высоту, изменяющуюся непредсказуемо.
Ответить с цитированием
  #7 (permalink)  
Старый 07.07.2007, 14:07
Новичок на форуме
Отправить личное сообщение для Alex Посмотреть профиль Найти все сообщения от Alex
 
Регистрация: 03.06.2007
Сообщений: 4

Ну тогда javascript в помощь
Ответить с цитированием
  #8 (permalink)  
Старый 07.07.2007, 14:43
Новичок на форуме
Отправить личное сообщение для nirva Посмотреть профиль Найти все сообщения от nirva
 
Регистрация: 06.07.2007
Сообщений: 5

вобщем, получилось как-то так:
вроде работает, хотя и не идеально:
1. в ie при скроле топ и боттом элементы колбасит
2. margin центрального элмента задается отдельным javascript'ом (а expression вообще где-то кроме ие работают?)
3. код выглядит весьма уродливо

если кто может подсказать на будущее лучшее решение, - буду благодарен. всем ответившим в топике - большое спасибо.

<html>
<style type="text/css">

#top {
 position: fixed;
 top: 0;
 _position: absolute;
 _top: expression(eval(document.body.scrollTop));
 width: 100%;
 background-color: #fff;
}

#bottom {
 position: fixed;
 bottom: 0;
 _position: absolute;
 _top: expression(document.body.scrollTop + document.body.clientHeight - this.clientHeight);
 width: 100%;
 background-color: #fff;
}

#content {
 margin-top: 50px;
 margin-bottom: 50px;
}
</style>

<body>

	<div id='top'></div>

	<div id='content'></div>

	<div id='bottom'></div>
	<script type="text/javascript">
	document.getElementById("content").style.marginTop = document.getElementById("top").clientHeight;
	document.getElementById("content").style.marginBottom = document.getElementById("bottom").clientHeight;
	</script>
</body>
</html>

Последний раз редактировалось nirva, 07.07.2007 в 16:06.
Ответить с цитированием
  #9 (permalink)  
Старый 27.09.2007, 20:31
Новичок на форуме
Отправить личное сообщение для TroT Посмотреть профиль Найти все сообщения от TroT
 
Регистрация: 27.09.2007
Сообщений: 5

у среднего слоя сделать соотв. отступы

а для нижнего-верхнего position: fixed
для для упрямого ie есть соотв. хак (посмотрите реализацию меню на http://xpoint.ru/)
Ответить с цитированием
  #10 (permalink)  
Старый 27.09.2007, 20:47
Новичок на форуме
Отправить личное сообщение для nirva Посмотреть профиль Найти все сообщения от nirva
 
Регистрация: 06.07.2007
Сообщений: 5

Сообщение от TroT Посмотреть сообщение
у среднего слоя сделать соотв. отступы

а для нижнего-верхнего position: fixed
для для упрямого ie есть соотв. хак (посмотрите реализацию меню на http://xpoint.ru/)
TroT,
это вы прокоментировали мой код?
хорошим тоном было бы привести код, или хотя бы ссылку на "соотв. хак", избавив пользователей от нужны искать по ужасному xpoint, на котором "реализаций" - тысячи.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск