Единый блок, разбитый блок

[gesandte]

Вобщем есть такая задачка

block должен тянутся на всю страницу, но не доходить до начала страницы и самого конца определенное количество пикселей.

Сама страница тянится по высоте максимального элемента content или block.

Как решить такую задачу, при использовании целостного блока недодумкал и пришлось разбивать его на 3 части:

1) находящийся в области хедера

2) собственно сам блок

3) находящийся в области футера

Соответственно расположив 1 и 3 в хеадере и футере чтобы они совпадали со 2.

Может всетаки можно сделать block целостным? Т.к место в 1 и 3 пропадает и "вообще ни туда не сюда"

Спасибо за внимание

Edited October 22, 2009 by gesandte

[gesandte]

Аййй молодца psywalker очень порадовало что практически нет пустых, вспомогательных блоков, короче все компактно сделал. Спасибо тебе еще раз

Уже протестил и ширину резиной сделал, все норм

Edited October 25, 2009 by gesandte

[psywalker]

Аййй молодца psywalker очень порадовало что практически нет пустых, вспомогательных блоков, короче все компактно сделал. Спасибо тебе еще раз

Уже протестил и ширину резиной сделал, все норм

Да мне это решение вчера перед сном в уме пришло, а утром встал и воплотил

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

Но а в целом решение действительно гибкое, какие я люблю, тоесть можно менять и удалять, вставлять нужные и ненужные блоки, далее менять ширину, высоту, отступы на своё усмотрение. Так что каркас вышел довольно крепким и содержит в себе только необходимые элементы за исключением одного вспомогательного, о котором написано выше.

Так что пользуйся на здоровье и обращайся ещё, всегда рад решить сложную задачку по CSS

[s0rr0w]

Внимательно посмотрел на макет. Ребяты, вы конкретно гоните.

На бади ставим нижний фон. На контейнер ставим верхний градиентный фон. В этом контейнере будет заголовок (заштрихованный блок в верхнем левом углу), и блок с тремя колонками.

У первых двух колонок сделать отступ сверху.

[psywalker]

Внимательно посмотрел на макет. Ребяты, вы конкретно гоните.

На бади ставим нижний фон. На контейнер ставим верхний градиентный фон. В этом контейнере будет заголовок (заштрихованный блок в верхнем левом углу), и блок с тремя колонками.

У первых двух колонок сделать отступ сверху.

Дружище погоди, причём тут фон на Бади и т. д. В задаче нужны были

1) Футер всегда прижатый к низу, который двигается в зависимости от заполнения контента либо правой колонки

2) Хедер сверху, а не простой опятьже фон

3) В середине левая колонка тянущаяся

4) И опятьже в середине правая колонка, которая была бы 100% высоты минус 50пк сверху и снизу экрана, несмотря на то, что есть Хедер и Футер. И она должна обтекать левый Контент.

Сделай лучше, я с радостью погляжу твоё изобретение, вот отвечу

p.s. - если бы я знал, что сверху и снизу обычный красный фон, то я бы вообще делал по другому всё

Edited October 25, 2009 by psywalker

[s0rr0w]

Дружище погоди, причём тут фон на Бади и т. д. В задаче нужны были

Сделай лучше, я с радостью погляжу твоё изобретение, вот отвечу

p.s. - если бы я знал, что сверху и снизу обычный красный фон, то я бы вообще делал по другому всё

Посмотри на последний макет.

Иногда люди не знают как сделать что-то, поэтому они рисуют то, как им показалось бы удобнее по их уровню знаний. Но задача может быть банальнее.

Именно поэтому я всегда спрашивают цель.

[psywalker]

Посмотри на последний макет.

Иногда люди не знают как сделать что-то, поэтому они рисуют то, как им показалось бы удобнее по их уровню знаний. Но задача может быть банальнее.

Именно поэтому я всегда спрашивают цель.

Я узнал цель до её решения, и автор после этого посмотрел и сказал, что именно это ему было нужно, именно те условия, которые я описал выше. Я решил, что при таких условиях лучше варианта нет, по крайней мере я его не знаю

[gesandte]

Посмотри на последний макет.

Иногда люди не знают как сделать что-то, поэтому они рисуют то, как им показалось бы удобнее по их уровню знаний. Но задача может быть банальнее.

Именно поэтому я всегда спрашивают цель.

s0rr0w и что же показалось тебе, с твоим уровнем знаний?

psywalker сделал код, который удовлетворяет всем требованиям, если ты способен упростить его, то давай, сделай и покажи всем как надо было, а иначе твои слова это просто пшик.

[s0rr0w]

s0rr0w и что же показалось тебе, с твоим уровнем знаний?

psywalker сделал код, который удовлетворяет всем требованиям, если ты способен упростить его, то давай, сделай и покажи всем как надо было, а иначе твои слова это просто пшик.

Давай png с шаблоном, что тебе надо собрать. Логотипы и прочие дела можешь заменить на квадратики.

P.S. И не надо меня на понт брать, я не мальчик какой-то.

Edited October 25, 2009 by s0rr0w

[psywalker]

gesandte

Сделай так, как просит s0rr0w, предоставь ему весь материал с подробным объяснением и скринами, что нужно получить в итоге. Поверь мне, этот старый волк тот ещё спец. уверен, что он сделает тебе сказку

[gesandte]

У меня свой подход к созданию сайта

прикидываеш концепцию диза в голове, и походу верстки начинаеш дорисовывать необходимые элементы, так что s0rr0w еще нет всей графики, и она вырисовывается по ходу.

но по сути то что на скрине будет раскидано так, плюс всякие скругления и прочее по мелочи.

короче слева, всякий второстепенный текст + двойные блоки, их видно. Правый блок для основного контента ~60% от ширины экрана, заезжающие его части на хеадер и футер скруглены обводкой с градиентом, переходящим в основной цвет обводки.... ну и внутри этого блока всякий хлам нуеще какая нить графика, помещающаяся внутри блоков...............вот

П.С можеш назвать мой подход тупым

Edited October 25, 2009 by gesandte

[s0rr0w]

У меня свой подход к созданию сайта

прикидываеш концепцию диза в голове, и походу верстки начинаеш дорисовывать необходимые элементы, так что s0rr0w еще нет всей графики, и она вырисовывается по ходу.

но по сути то что на скрине будет раскидано так, плюс всякие скругления и прочее по мелочи.

короче слева, всякий второстепенный текст + двойные блоки, их видно. Правый блок для основного контента ~60% от ширины экрана, заезжающие его части на хеадер и футер скруглены обводкой с градиентом, переходящим в основной цвет обводки.... ну и внутри этого блока всякий хлам нуеще какая нить графика, помещающаяся внутри блоков...............вот

П.С можеш назвать мой подход тупым

Да мне пофиг, какие у тебя подходы.

Нет картинки - нет кода.

[gesandte]

Да пожалста, то что мне надо было, изображено выше, остальное там мелочи.

Код, который есть щас меня вполне устраивает

Я просто не понимаю что тебе не понравилось в приведенных выше изображениях.

Я говорю, что там изображено то что мне надо, ты говориш, что там изображено то, что мне не надо...

[Great Rash]

Вообще макет в первом сообщении и макет в сообщении №23 - совершенно разные вещи. Второй макет делается элементарно. А вот первый сложноват - psywalker крут, хотя экспрешн смущает.

[gesandte]

Вообще макет в первом сообщении и макет в сообщении №23 - совершенно разные вещи. Второй макет делается элементарно. А вот первый сложноват - psywalker крут, хотя экспрешн смущает.

Great Rash, объясни пожалуйста разницу. На мой взгляд одно и тоже, разве что хедер и футер не цветом, а градиентом и все или я чего то не понимаю?

[psywalker]

Вообще макет в первом сообщении и макет в сообщении №23 - совершенно разные вещи. Второй макет делается элементарно. А вот первый сложноват - psywalker крут, хотя экспрешн смущает.

1) Дружище, а я не понял, правда я нормал реализовал или говно?

2) Насчёт экспрешана я отписал чуть выше, что я не знаю, как для ИЕ6 сделать тянущаюся колонку на 100% высоты, и что-бы при этом был отступ свехну и снизу у неё, допустим по 100пк. Скажи пожалуйста, как такое реализовать для ИЕ6? Очень буду признателен за отдельный пример

[Great Rash]

2gesandte: Вот что у вас во втором макете:

<!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" xmlns:v="urn:schemas-microsoft-com:vml" xml:lang="en" lang="en">

<head>
	<title>template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font: 12px Tahoma;
		}

		html,
		body {
			height: 100%;
		}

		.container {
			overflow: hidden;
			min-height: 100%;
		}

		* html .container {
			height: 100%;
		}

		.footer {
			position: relative;
			z-index: 1;
			height: 100px;
			margin-top: -100px;
			background: #efd;
		}

		.header {
			position: absolute;
			width: 100%;
			height: 100px;
			background: #efd;
		}

		.left {
			float: left;
			width: 300px;
			padding-bottom: 32767px;
			margin-bottom: -32767px;
			background: #efdeed;
		}

		.right {
			margin-left: 300px;
			padding-bottom: 32767px;
			margin-bottom: -32767px;
		}

		.left div,
		.right div {
			margin: 100px 0;
		}
	</style>

	<script type="text/javascript">

	</script>

</head>

<body>

	<div class="container">
		<div class="header"></div>
		<div class="left">
			<div>
				111<br />111<br />111<br />111<br />111<br />111<br />111<br />111<br />111<br />111<br />
				111<br />111<br />111<br />111<br />111<br />111<br />111<br />111<br />111<br />111<br />
				111<br />111<br />111<br />111<br />111<br />111<br />111<br />111<br />111<br />111<br />
				111<br />111<br />111<br />111<br />111<br />111<br />111<br />111<br />111<br />111<br />
				111<br />111<br />111<br />111<br />111<br />111<br />111<br />111<br />111<br />111
			</div>
		</div>
		<div class="right">
			<div>
				222<br />222<br />222<br />222<br />222<br />222<br />222<br />222<br />222<br />222<br />
			</div>
		</div>
	</div>
	<div class="footer"></div>

</body>
</html>

Вы что реально разницы не видите?

[psywalker]

Great Rash

А я кстати тоже это заметил, но забил на это, потому что он не интересный и делается очень легко и решил сделать по старому варианту, который сложнее, подумав кстати что он именно его и имел ввиду

[gesandte]

2gesandte: Вот что у вас во втором макете:

Вы что реально разницы не видите?

Great Rash, с чего вы взяли что там изображено это?

В вашем примере правая колонка не заходит на футер и хеадер

Вы повнимательнее посмотрите на скрин и подпись к нему прочтите, тот скрин был с предыдущего варианта, где правая часть состояла из 3х состовляющих, соответственно и текст там начинается не с самого начала, а то что мне надо было, я изобразил в 1 посте.