Слои+таблицы

[Soniclord]

Здравствуйте!

У меня такая проблема (весь гугл облазил, везде какую-то ерунду предлагают): необходимо сверстать страничку так чтобы контент независимо от наполнения был на всю страницу! можно использовать и таблицы и слои. я никак не могу догнать как же это сделать. Макет резиновый. Конечно при большом количестве контента можно сделать overflow:auto;, но если контента мало, то ни таблица, ни слой не растянутся до футера. (до футера идут необходимые background'ы, так что речь о абсолютном футере не пойдет.)

P.S. да, и забыл, УБИРАТЬ ДОКТИП НЕ ПРЕДЛАГАТЬ!

Edited October 4, 2008 by Soniclord

[Джин]

Контент (англ. content — содержание) — любое информационно значимое (содержательное) наполнение информационного ресурса (например, веб-сайта) — тексты, графика, мультимедиа — вся информация, которую пользователь может загрузить на диск компьютера с соблюдением соответствующих законностей, как правило, только для личного пользования.

с википедии взял

кстати, если я правильно понял, то

http://www.webmolot.com/recipe/footer/

http://matthewjamestaylor.com/blog/keeping...tom-of-the-page

http://xhtml.ru/2005/10/18/footer-stick/

http://www.google.ru/search?complete=1&amp...mp;aq=f&oq=

[Soniclord]

У всех ваших примеров есть 2 недостатка:

1) когда я ставлю overflow:auto; скроллинг появляется как я хочу у контента, но он уходит за футер

2) я никак не могу без сдвига всего дизайна сделать хеадер (еще один слой сверху), чтобы скроллился только средняя часть (контент)

[rus]

похоже вам сюда, если я вас правильно понял...

[Soniclord]

Отлчино! Но осталось теперь придумать, как сделать для контента полосы прокрутки если контент будет больше чем положено. overflow:auto - не работает :-((((

P.S. заметьте - только для контента (средней части)

Edited October 4, 2008 by Soniclord

[Soniclord]

Господа, я много не требую, я просто хочу добиться чтобы было 3 слоя (header,content,footer), чтобы content был определенной высоты, если высота будет меньше, то появится полоса прокрутки. Чтобы футер постоянно был прислонен к низу :-( и все это можно делать и слоями и таблицами.

[rus]

Да пожалуйста:

overflow-y:scroll;
height:800px;

Как пример. Количество пикселей можно изменить, а можно в процентах.

[Vlad]

Посмотри здесь как сделано.

http://www.cssplay.co.uk/layouts/frame.html

[Soniclord]

Посмотри здесь как сделано.

http://www.cssplay.co.uk/layouts/frame.html

Уважаемый Влад! В том то и дело что дизайн скроллинга на всю страниу не предполагает. А предполагает наличие оного ТОЛЬКО в контенте :-(

Да пожалуйста:

overflow-y:scroll;
height:800px;

Как пример. Количество пикселей можно изменить, а можно в процентах.

Пожалуйста, если Вам не сложно, приведите полный пример с использованием ваших стилей на следующие параметры: header - height:100px; content (все пространство) и footer - height:100px;

Да пожалуйста:

overflow-y:scroll;
height:800px;

Как пример. Количество пикселей можно изменить, а можно в процентах.

Пожалуйста, если Вам не сложно, приведите полный пример с использованием ваших стилей на следующие параметры: header - height:100px; content (все пространство) и footer - height:100px;

и чтобы в контенте было много информации, чтобы появился скроллинг, и ничего не смещалась при изменении разрешения.

[Victor Ananiev]

Уважаемый Влад! В том то и дело что дизайн скроллинга на всю страниу не предполагает. А предполагает наличие оного ТОЛЬКО в контенте :-(

Пожалуйста, если Вам не сложно, приведите полный пример с использованием ваших стилей на следующие параметры: header - height:100px; content (все пространство) и footer - height:100px;

Пожалуйста, если Вам не сложно, приведите полный пример с использованием ваших стилей на следующие параметры: header - height:100px; content (все пространство) и footer - height:100px;

и чтобы в контенте было много информации, чтобы появился скроллинг, и ничего не смещалась при изменении разрешения.

Это заикания??

Edited October 4, 2008 by Vindex10

[rus]

to Soniclord:

Я вам привел примеры кода, что вам не ясно?

Покажите свой код, как вы пробовали делать.

[Soniclord]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Layout 11</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
html, body {
	margin:0;
	padding:0
	width:100%;
	height:100%;
	font: normal 12px Verdana;
	text-align:center;
}
p {
	margin:0 10px 10px;
}
a {
	display:block;
	color: #006;
	padding:10px
}
#header {
	width:100%;
	background:#000000;
	height:50px;
	position:absolute;
	top:0;
	left:0;
}
#header h1 {
	color:#FFFFFF;
	font: bold 12px Verdana;
	text-align:center;
}
#header a {
	right:0;
	top:23px;
}
#content p {
	line-height:1.4;
	padding-bottom:30px;
}

#footer p {
	margin:0;
	padding:5px 10px;
}
#footer a {
	display:inline;
	padding:0;
	color: #C6D5FD;
}
#container {
height:auto !important;
min-height:100%;
height:100%;
position:relative;
min-width:800px;
}
#wrapper {
	position: absolute;
	width:70%;
	min-height: 100%;
	top:50px;
	left:15%;
	right:15%;
}
#content {
	width:100%;
	height: 100%;
	margin-top:10px;
	left:15%;
	right:15%;

overflow-y:scroll;
height:800px;
}
#navigation {
	background:#B9CAFF;
	width:15%;
	position:absolute;
	top:50px;
	left:0;
	bottom:0;
	padding-top:10px;
}
#extra {
	background:#FF8539;
	width:15%;
	position:absolute;
	top:50px;
	right:0;
	bottom:0;
	text-align:center;
	padding-top:10px;
}
#footer {
position: absolute;
left:0;
margin-top: 100%;
height: 50px;
width:100%;
bottom:0;
background: #333;
color: #FFF;
}
</style>
</head>
<body>
<div id=container>
  <div id=header>
	<h1>«Absolute Games»</h1>
  </div>
  <div id=wrapper>
	<div id=content> Внимание! Использование материалов сайта «Absolute Games» возможно только с письменного разрешения редакции. В противном случае любая перепечатка материалов сайта (даже с установленной ссылкой на оригинал) 
	  является нарушением Федерального закона РФ «Об авторском праве и смежных правах» и влечет за собой судебное разбирательство в соответствии с Гражданским и Уголовным кодексами Российской Федерации. </div>
  </div>
  <div id=navigation> Внимание! Использование материалов сайта «Absolute Games» возможно только с письменного разрешения редакции. В противном случае любая перепечатка материалов сайта (даже с установленной ссылкой на оригинал) 
	является нарушением Федерального закона РФ «Об авторском праве и смежных правах» и влечет за собой судебное разбирательство в соответствии с Гражданским и Уголовным кодексами Российской Федерации. </div>
  <div id=extra> Внимание! Использование материалов сайта «Absolute Games» возможно только с письменного разрешения редакции. В противном случае любая перепечатка материалов сайта (даже с установленной ссылкой на оригинал) 
	является нарушением Федерального закона РФ «Об авторском праве и смежных правах» и влечет за собой судебное разбирательство в соответствии с Гражданским и Уголовным кодексами Российской Федерации. </div>
  <div id=footer> fdhgchcfhfghghhfghfgh</div>
</div>
</body>
</html>

Это код который Вы выкладывали там. Сам по себе он не корректно работает - футер прилип к низу - да, но текст идет далеко вниз. скроллинг появляется на всю страницу.

[Soniclord]

Я почти нашел решения своей проблемы. Но это только для Оперы и мазилы. Ослик как всегда не хочет понимать. Подскажите кто может :-(

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Layout 11</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<meta name="generator" content="HAPedit 3.1">
</head>
<body>
	<div style="background: black; position:absolute; left:0;top:0; width:100%; height:100%;"></div>
	<div style="background: green; position:absolute; left:0;top:0; width:100%; height:100px;"></div>
	<div style="background: yellow; position:absolute; left:0; bottom:100px; top:100px; width:100%; _height:100%; height:auto; overflow:auto;">
			cont <br>cont <br>cont <br>cont <br>cont <br>cont <br>cont <br>cont <br>cont <br>cont <br>cont <br>cont <br>cont <br>cont <br>cont <br>cont <br>cont <br>cont <br>cont <br>cont <br>cont <br>cont <br>cont <br>cont <br>cont <br>cont <br>cont <br>cont <br>cont <br>cont <br>
	</div>
	<div style="background: blue; position:absolute; left:0;bottom:0; width:100%; height:100px;"></div>
</body>
</html>