Jump to content
  • 0

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

gesandte

Asked by gesandte,

 Share

Question

gesandte Explorer

gesandte

Posted
Posted (edited)

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

k6lDXj22dc.png

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

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

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

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

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

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

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

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

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

Edited by gesandte
Link to comment
Share on other sites

43 answers to this question

Recommended Posts

  • 0
Great Rash Explorer

Great Rash

Posted
Posted

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

<!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>

Link to comment
Share on other sites
  • 0
gesandte Explorer

gesandte

Posted
  • Author
Posted

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

"Сама страница тянится по высоте максимального элемента 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:

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

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

Link to comment
Share on other sites
  • 0
gesandte Explorer

gesandte

Posted
  • Author
Posted (edited)

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

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

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

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

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

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

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

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

Edited by gesandte
Link to comment
Share on other sites
  • 0
Great Rash Explorer

Great Rash

Posted
Posted 

<!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>

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

Link to comment
Share on other sites
  • 0
gesandte Explorer

gesandte

Posted
  • Author
Posted

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

3KzlVJisOE.png

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

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted (edited)

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

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

Edited by psywalker
Link to comment
Share on other sites
  • 0
gesandte Explorer

gesandte

Posted
  • Author
Posted

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

Вот так надо:

4LG6R19Tsf.png

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

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

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

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

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

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

<!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>

Link to comment
Share on other sites
  • 0
gesandte Explorer

gesandte

Posted
  • Author
Posted

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

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

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

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

4hJTNGl429.png

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

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

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

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

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

Link to comment
Share on other sites
  • 0
gesandte Explorer

gesandte

Posted
  • Author
Posted

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

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

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

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

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

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

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

Link to comment
Share on other sites
  • 0
gesandte Explorer

gesandte

Posted
  • Author
Posted (edited)

Вот

VT9rwam230.png

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

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

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

Edited by gesandte
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

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

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept