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

gesandte · October 22, 2009

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

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

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

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

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

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

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

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

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

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

Edited October 22, 2009 by gesandte

Great Rash · October 22, 2009

Что-то типа того:

<!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" 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">
		html, 
		body {
			height: 100%;
			margin: 0;
			padding: 0;
			border: 0;
		}

		.container {
			position: relative;
			min-height: 100%;
			background: red;
		}

		.head,
		.foot {
			height: 100px;
			background: #69c;
		}

		.foot {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
		}

		.gray {
			position: absolute;
			right: 20px;
			top: 50px;
			bottom: 50px;
			width: 300px;
			background: gray;
			opacity: .7;
			-moz-opacity: .7;
			filter: alpha(opacity=70);
		}
	</style>

	<!--[if lte IE 6]>
		<style type="text/css">
			.container {
				height: 100%;
			}
		</style>
	<![endif]-->

</head>

<body>

	<div id="c" class="container">
		<div class="head"></div>
			text text text text text text text text text text text text text text text text text text text text text text text text 
			text text text text text text text text text text text text text text text text text text text text text text text text 
			text text text text text text text text text text text text text text text text text text text text text text text text 
			<br />
			text<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
			text<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
			text<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
			text<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		<div class="foot"></div>
		<div id="g" class="gray"></div>
	</div>

	<!--[if lte IE 6]>
		<script type="text/javascript">
			function normalize() {
				var c = document.getElementById('c');
				var g = document.getElementById('g');

				g.style.height = c.offsetHeight - 100px; // 50 * 2
				g.style.top = 50 + 'px';
			}

			normalize();

			window.onresize = function() {
				normalize();
			}
		</script>
	<![endif]-->

</body>
</html>

psywalker · October 22, 2009

Great Rash

Ты на высоте дружище, как обычно. Но вот вопрос к тебе:

Засчёт чего серый полупрозрачный блок тормозит слева, и оставляет перед собой 50-70 пк?

Great Rash · October 22, 2009

Тормозит слева? Не понимаю о чем ты?

psywalker · October 22, 2009

Тормозит слева? Не понимаю о чем ты?

Прости друг, я тупанул :angry:

gesandte · October 22, 2009

Мля, посмотрев вначале думал пойдет, а протестив понял что не выполнятся условие:

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

В данном случае, если в block вставить текста больше чем в content, то текст вылазит из него, а контнет не тянется всед за ним.

Думаю может надо копать в эту сторону:

<!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" xml:lang="en" lang="en">
<head>
<title>template</title>
<meta http-equiv="content-type" content="text/html;charset=windows-1251" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="oss.css" rel="stylesheet" media="screen" type="text/css" />
</head>
<body>

<div class="container">
    <div class="content">
        <div class="head"></div>
        <div class="column">
		H. Rackham's 1914 translation (with major source of Lorem Ipsum highlighted):[2]
        [32] But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?
        </div>			
        <div class="foot"></div>
    </div>
    <div class="block">
 	Many variations on the standard lorem ipsum text exist, some with little resemblance to the original.[2] Other versions have additional letters — such as k, w, and z — that were uncommon or missing in the Latin language, and nonsense words such as Z.zril, takimata, and gubergren added to the original passage to achieve a distribution of letters that more closely approximates English.
    </div>
</div>

</body>
</html>

html, 
body {
    background: #fff;
    width: 100%;
    min-width: 1000px;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

.container {
    position: relative;
    min-height: 100%;
}

.content {
    width: 100%;
    position: absolute;
	top: 0px;
	left: 0px;
}

    .head,
    .foot {
	    width: 100%;
        height: 100px;
        background: #69c;
    }

    .column {
        width: 55%;    
    }

.block {
    background: gray;
    position: relative;
    left: 65%;
    width: 30%;
    opacity: 0.7;
    -moz-opacity: 0.7;
    filter: alpha(opacity=70);
}

Но в этом случае надо как то футер прижать к самому низу....

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

П.С прозрачность на самом деле не нужна, а на картинке она сделана чтобы блок не закрывал слово контент и его было видно полностью :angry:

Great Rash · October 23, 2009

т.к при задании отступа сверху в позиционировании блока опускают его от футера на высоту отступа

Раза четыре перечитал - вообще нихрена не понятно.

psywalker · October 23, 2009

Может он хочет, что-бы в полупрозрачный серый блок можно было вставлять текста до жопы и что-бы он тянулся вместе со страницей, и соответственно вместе с футером и т. д?

Great Rash · October 23, 2009

Серый блок фиксированный по ширине или резина?

psywalker · October 23, 2009

Серый блок фиксированный по ширине или резина?

Я имел ввиду высоту, а не ширину :angry:

Great Rash · October 23, 2009

Я понимаю. Дык по ширине то эта серая штука тянуться должна или нет?

psywalker · October 23, 2009

Я понимаю. Дык по ширине то эта серая штука тянуться должна или нет?

я походу понял, что нет :angry:

gesandte · October 23, 2009

да, серая штука по высоте должна тянутся, по ширине нет, в цсс видно же что там ширина прописана :angry:

Серый блок фиксированный по ширине или резина?

резина, т.е в процентах от экрана и вообще на ширину мона забить, там все дело в высоте

Может он хочет, что-бы в полупрозрачный серый блок можно было вставлять текста до жопы и что-бы он тянулся вместе со страницей, и соответственно вместе с футером и т. д?

вот именно это и надо.

П.С. Неужто из меня такой хреновый писатель, что не понятно что надо получить на выходе?

Раза четыре перечитал - вообще нихрена не понятно.

ну не смог подругому это описать

Edited October 23, 2009 by gesandte

Great Rash · October 23, 2009

<!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" 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%;
			border: 0;
		}

		body {
			margin: 0 20px 0 0;
			background: #ededef;
		}

		.left,
		.right {
			position: relative;
		}

		.left {
			min-height: 100%;
			background: #ededef;
			border-right: #fedede 200px solid;
		}

		.right {
			float: right;
			right: -200px;
			width: 190px;
			padding: 105px 5px;
		}

		.clear {
			clear: both;
		}

		.top,
		.bottom {
			position: absolute;
			width: 100%;
			height: 100px;
			background: #69c;
			border-right: #69c 220px solid;
		}

		.bottom {
			bottom: 0;
		}

		.t-dummy,
		.b-dummy {
			position: absolute;
			right: -200px;
			width: 200px;
			height: 50px;
			background: #fedede;
		}

		.t-dummy {
			bottom: 0;
		}

		.b-dummy {
			top: 0;
		}
	</style>

	<script type="text/javascript">

	</script>

</head>

<body>

	<div class="left">
		<div class="top">
			<div class="t-dummy"></div>
		</div>
		<div class="right">
			text
		</div>
		<div class="clear"></div>
		<div class="bottom">
			<div class="b-dummy"></div>
		</div>
	</div>

</body>
</html>

Код получился мегаизвратный, зато все условия соблюдены. Еще раз повторюсь, что это мегаизвратный код - посему не уверен, что его можно заюзать в боевой ситуации.

gesandte · October 23, 2009

Да, извращение полное, но все же не то... смотри

текст не с самого начала идет. Т.е в данный момент этот блок состоит из 3-х частей: t-dumme, b-dumme и right. Так же сделано щас и у меня, только не таким извращенным способом, в первом посте описал это :angry:

Спасибо что пытались помочь, думаю топик можно закрывать, раз единым целым его (блок правый) ни как нельзя сделать, подумаю как диз подкорректировать к данной раскладке

psywalker · October 24, 2009

Погоди, получается способ не подходит из-за того, что просто текст идёт не с самого начала(верха)?

Если так, то почему бы просто не сделать в этой колонке ещё один блок и поднять его отрицательным марджином наверх немного?

Edited October 24, 2009 by psywalker

gesandte · October 24, 2009

Да, не подходит из-за этого.

Вот так надо:

Текст в сером блоке от самого верха до самого низа.

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

Если у нас примерно такая структура:

<div class="header"></div>
<div class="content">
    <div class="left"></div>
    <div class="right"></div>
</div>
<div class="footer"></div>

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

psywalker · October 24, 2009

чё я там намутил, я сам правда не особо понял, но смысл такой вобщем, подделаешь под себя))

<!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" 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%;
			border: 0;
		}

		body {
			margin: 0 20px 0 0;
			background: #ededef;
		}

		.left,
		.right {
			position: relative;
		}

		.left {
			min-height: 100%;
			background: #ededef;
			border-right: #fedede 200px solid;
		}

		.right {
			float: right;
			right: -200px;
			width: 190px;
			padding: 105px 5px;
		}

		.clear {
			clear: both;
		}

		.top,
		.bottom {
			position: absolute;
			width: 100%;
			height: 100px;
			background: #69c;
			border-right: #69c 220px solid;
		}

		.bottom {
			bottom: 0;
		}

		.t-dummy,
		.b-dummy {
			position: absolute;
			right: -200px;
			width: 200px;
			height: 50px;
			background: #fedede;
		}

		.t-dummy {
			bottom: 0;
		}

		.b-dummy {
			top: 0;
		}

		div.right_block { position: relative; bottom: -80px; margin-top: -100px; z-index: 1;}
		div.right_block2 { z-index: 1; position: relative; top: -30px; }
	</style>

	<script type="text/javascript">

	</script>

</head>

<body>

	<div class="left">
		<div class="top">
			<div class="t-dummy"></div>
		</div>
		<div class="right">
			<div class="right_block">
				<div class="right_block2">
		   Дрель электрическая ударная Калибр ДЭ – 450ЕРУ+
1950.00 руб
С+
1950.00 руб
Самая необходимая вещь в доме настоящего мужчиныДрель электрическая ударная Калибр ДЭ – 450ЕРУ+
1950.00 руб
Самая необх950.00 руб
Самая необходимая вещь в доме настоящего мужчиныДродимая вещь в доме настоящего мужчиныДрель электрическая ударная Калибр ДЭ – 450ЕРУ+
1950.00 необх950.00 руб
Самая необходимая вещь в доме настоящего мужчиныДродимая вещь в доме настоящего мужчиныДрель электрическая ударная Калибр ДЭ – 450ЕРУ+
1950.00 рубруб

Самая необходимая вещь в доме настоящего мужчиныДрель электрическая ударная Калибр ДЭ – 450ЕРУ+
1950.00 руб
Самая необходимая вещь в доме настоящего мужчины
Самая необходимая в
1950.00 руСамая необходимая в
Самая необходимая вещь в доме настоящего мужчиныДрель электрическая ударная Калибр ДЭ – 450ЕРУ+
1950.00 руб
Самая необходимая вещь в доме настоящего мужчины
Самая необходимая в
1950.00 руСамая необходимая в
1950.00 руб
Самая необходимая вещь в доме настоящего мужчиныДрель электрическая ударная Калибр ДЭ – 450ЕРУ+
1950.00 рубб
Самая необходимая вещь в доме настоящего мужчиныДрель электрическая ударная Калибр ДЭ – 450ЕРУ+
1950.00 руб
Самая необходимая вещь в доме настоящего мужчиныДрель электрическая ударная Калибр ДЭ – 450ЕРУ+
1950.00 руб
Самая необходимая вещь в доме настоящего мужчиныДрель электрическая ударная Калибр ДЭ – 450ЕРУ+
1950.00 руб
Самая необходимая вещь в доме настоящего мужчиныДрель электрическая ударная Калибр ДЭ – 450ЕРУ+
1950.00 руб
Самая необходимая вещь в доме настоящего мужчиныммммДрель электрическая ударная Калибр ДЭ – 450ЕРУ+
1950.00 руб
Самая необходимая вещь в доме настоящего мужчиныДрель электрическая ударная Калибр ДЭ – 450ЕРУ+
1950.00 руб
Самая необходимая вещь в доме настоящего мужчиныДрель электрическая ударная Калибр ДЭ – 450ЕРУ+
1950.00 руб
Самая необходимая вещь в доме настоящего мужчиныДрель электрическая ударная Калибр ДЭ – 450ЕРУ+
1950.00 руб
Самая необходимая вещь в доме настоящего мужчины
				</div></div>
		</div>
		<div class="clear"></div>
		<div class="bottom">
			<div class="b-dummy"></div>
		</div>
	</div>

</body>
</html>

gesandte · October 24, 2009

psywalker, намутил ты действительно так. что до меня как то не очень дошло

Главное, что я не понял, в какое место можно вставит текст левого блока, чтобы ничего не поплыло и встало на место....

уже все места перепробывал......

Смотри, а если немного упростить задачу и зделать так

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

Может глядя на эту проблему в упрощенном виде появятся более простые и соответсвующие всем условиям решения.

psywalker · October 24, 2009

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

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

Ты мне можешь короче сделать пока скрин того, что ты хочешь получить в ИТОГЕ, что-бы мы точно понимали твою задачу

gesandte · October 24, 2009

Походу мне в дурку пора...

Вроде в примере Great Rash все было норм за исключением что текст начинался не с самого начала...... теперь спалил баг, если текст прописать после <div class="clear"></div>, то текст в левом блоке начинается(по высоте) после окончания текста правого блока, если написать перед <div class="right"> , то текста вообще не видно........... жуть. .....................

psywalker, по сути на изображении как раз то что мне надо, без графических элементов, но раз просиш, щас выложу скрин с текущего варианта верстки...

psywalker · October 24, 2009

Походу мне в дурку пора...
Вроде в примере Great Rash все было норм за исключением что текст начинался не с самого начала...... теперь спалил баг, если текст прописать после <div class="clear"></div>, то текст в левом блоке начинается(по высоте) после окончания текста правого блока, если написать перед <div class="right"> , то текста вообще не видно........... жуть. .....................
psywalker, по сути на изображении как раз то что мне надо, без графических элементов, но раз просиш, щас выложу скрин с текущего варианта верстки...

Ты короче выложи мне скрин, на котором будет показана 1) Коненчная задача 2) Комментариями описаны все нюансы каждого миллиметра блиин 3) Подробнейшее объяснение задачи под скрином!

gesandte · October 24, 2009

Вот

Т.е слева одна часть контента, справа другая(основная). Низ не влез, но отступ до низа там аналогичен верхнему

П.С на оформление не смотрим, это альфа-альфа вариант

мля))) ты уже требования к картинке написал из этого скрина понятно или мне комментов на нем написать еще?

Edited October 24, 2009 by gesandte

psywalker · October 25, 2009

Короче слушай внимательно:

1) Я тебе сделал свой вариант с подробными коментариями

2) Текст я уже забил в колонки, в которые нужно, поэтому не мудри там

3) Для ИЕ6 я сделал тоже всё кроме следующего: Правая колонка(серая) не имеет нижнего отступа, я просто не знаю какой экспрешн прописать или JS, что-бы она имела сразу оба отступа, верхний и низжний. Предлагаю дождаться Great Rash он в этом деле спец!

4) Если нужно, что-бы правая колонка была шире, то просто тупо сделай шире два блока: div.wrap div.right_block и div.wrap div.right_column, короче смотри сам, настраивай всё как тебе нужно, но смотри, каркас не ломай, если нужно будет в Контенте слева сделать 2 колонки ещё или 3, то суй их именно в <div class="content">

Ну что ещё...вроде всё, там в принципе и так всё понятно. Короче надо в ИЕ6 добить будет, посмотришь там

http://psywalker.ru/Forum/Right_block_absolut/main.html

gesandte · October 25, 2009

Спасибо, щас гляну

на 6 осла можно в принципе и забить, пользователи того сайта его не юзают

psywalker · October 25, 2009

Спасибо, щас гляну
на 6 осла можно в принципе и забить, пользователи того сайта его не юзают

Ну если осёл не нужен, значит всё гуд 100%. Короче отпишешься после теста

Sign In

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

Question

Link to comment

Share on other sites

43 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information