Выбор средств при верстке

quakeman · August 21, 2009

Всем привет! Опыта мало, поэтому прошу помощи! Есть задача - не могу определиться со способом ее решения.

Поэтому вопрос к бывалым знатокам.

Какие средства Вы бы использовали для создания "резиновой" странички следующего макета?


——————————————————————————--
|                                                            |                                    |
|                                                            |                                    |
|                                                            |                 3                 |
|                                                            |                                    |
|                                                            |—————————--|
|                          1                                |                                    |
|                                                            |                                    |
|                                                            |                                    |
|                                                            |                                    |
|                                                            |                  4                |
|                                                            |                                    |
|                                                            |                                    |
|————————————————|                                    |
|                                                            |—————————--|
|                            2                              |                                    |
|                                                            |                   5               |
——————————————————————————--

1 и 4 динамически растягиваемые; 2,3,5 - фиксированные. Полоса прокрутки только в 1 и 4. А весь макет не должен выходить за рамки экрана.

psywalker · August 21, 2009

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

quakeman · August 21, 2009

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

почему некорректная? неужели такой макет нельзя сверстать? ни блочным, ни табличным способами? и помощь JavaScript'а не подойдет? фреймы в конце концов?

psywalker · August 21, 2009

Вообще есть идеи: Вобщем левые две колонки(1, 2) помести в Обрамляющий див, правые Три тоже (3,4,5), Далее Пусть левая колонка будет прифлоатина влево(float:left;), а правая вправо(float:right;). Левой и Правую колонки сделай ширину 50%, далее 1, 4 колонки пусть тянуться по мере заполнения текста, а 2,3,5 сделай фиксированными и поставь им ovelflow:hidden; что-бы отрезали все выходы. Далее незабудь поставить обрамляющим Дивам, которые охватывают Левую и правую Колонки тоже ovelflow:hidden; что-бы ничего не схлопывалось, далее ИЕ6 поставь zoom:1; для этой же цели.

Вроде отсюда можно начать плясать!

quakeman · August 22, 2009

далее 1, 4 колонки пусть тянуться по мере заполнения текста

Вот это только не понял. 1 и 4 тоже фиксированного размера, только в процентах, в зависимости от экрана, а не от текста, с полосами прокрутки. Т.е. их содержимое подразумевает бОльшую площадь, чем они сами. Но никак оно не должно влиять на их размер.

psywalker · August 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
	*{ margin: 0; padding: 0;}
	body { min-width: 617px;}
	div { margin-bottom: 5px; padding: 10px 0;}

	div.left{ float: left; width: 49%;}
	div.right { float: right; width: 49%;}

	div.left div.one,
	div.right div.four { border: 1px solid red;}

	div.left div.two,
	div.right div.three,
	div.right div.fife { border: 1px solid #000; width: 300px;}


</style>
<title>Untitled Document</title>
</head>

<body>

	<div class="left">
		<div class="one">1</div>
		<div class="two">2</div>
	</div>

	<div class="right">
		<div class="three">3</div>
		<div class="four">4</div>
		<div class="fife">5</div>
	</div>

</body>
</html>

quakeman · August 22, 2009

Вот короче:

Вы в каком браузере тестировали?

В ФФ у меня:

1) расположение блоков 1 и 4 не на все свободное пространство на экране.

2) блок 2 находится не внизу страницы

3) блок пять аналогично блоку 2.

Скорее всего Вы были правы,что блочной версткой такого не добиться. Может табличной? Или же обратиться к средствам программирования?

psywalker · August 22, 2009

Вы в каком браузере тестировали?
В ФФ у меня:
1) расположение блоков 1 и 4 не на все свободное пространство на экране.
2) блок 2 находится не внизу страницы
3) блок пять аналогично блоку 2.
Скорее всего Вы были правы,что блочной версткой такого не добиться. Может табличной? Или же обратиться к средствам программирования?

ааа, ты имел ввиду, что блоки 1 и 4 должны тянуться в ВЫСОТУ, а не в ШИРИНУ? Далее блоки 2,5 должны находиться всегда внизу страницы и быть фиксированной Высоты? А блок 3 должен быть над 4 колонкой всегда и фиксированной высоты?

quakeman · August 22, 2009

1) расположение блоков 1 и 4 не на все свободное пространство на экране.

высоту этих блоков в процентах не задать, а вот в пикселях можно, если я не ошибаюсь. Страничку будет формировать ПХП. Есть мысль передавать размер экрана в скрипт и высоту рассчитывать и подсовывать.

Или есть более простые решения?

ааа, ты имел ввиду, что блоки 1 и 4 должны тянуться в ВЫСОТУ, а не в ШИРИНУ? Далее блоки 2,5 должны находиться всегда внизу страницы и быть фиксированной Высоты? А блок 3 должен быть над 4 колонкой всегда и фиксированной высоты?

Совершенно точно! ну не всем дано так понятно изъясняться)

psywalker · August 22, 2009

Держи заполняй текстом блоки 1,4 и проверяй:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
	*{ margin: 0; padding: 0;}
	body,html { height: 100%;}

		div.wrap { min-height: 100%; position: relative;}
			div.wrap div.case { overflow: hidden; padding-bottom: 110px;}
				div.case div.one { float: left; width: 49.7%;}
				div.case div.right { float: right; width: 49.7%;}
					div.case div.right div.three { height: 100px; background: blue; }

		div.wrap div.two,
		div.wrap div.fife { 
			position: absolute; 
			height: 100px;
			border: 1px solid red;
			width: 49.7%;
		}
			div.wrap div.two { bottom: 0; left: 0;}
			div.wrap div.fife { bottom: 0; right: 0;}




</style>
<title>Untitled Document</title>
</head>

<body>
	<div class="wrap">
		<div class="case">
			<div class="one">1</div>
			<div class="right">
				<div class="three">3</div>
				<div class="four">4</div>
			</div>
		</div>

		<div class="two">2</div>
		<div class="fife">5</div>
	</div>
</body>
</html>

quakeman · August 22, 2009

Держи заполняй текстом блоки 1,4 и проверяй:

хм.. этот результат лучше чем мой при таком же подходе!

есть одно НО. 1 и 4 раздвигаются по высоте по мере увеличения их содержимого! В этом вся и загвоздка!

простого добавления скроллов - эффекта не даст. Как быть с их высотой? Она должна быть фиксированна в процентах от экрана.

psywalker · August 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
	*{ margin: 0; padding: 0;}
	body,html { height: 100%;}

		div.wrap { min-height: 100%; position: relative;}
			div.wrap div.case { overflow: hidden; padding-bottom: 110px;}
				div.case div.one { width: 49.7%; position: absolute; top: 0; bottom: 100px; background: #0C0;}
				div.case div.right { position: absolute; top: 0; bottom: 100px; right: 0; width: 49.7%; background: #0C0;}
					div.case div.right div.three { height: 100px; background: blue; }

		div.wrap div.two,
		div.wrap div.fife { 
			position: absolute; 
			height: 100px;
			width: 49.7%;
		}
			div.wrap div.two { bottom: 0; left: 0; background: red;}
			div.wrap div.fife { bottom: 0; right: 0;background: red;}




</style>
<title>Untitled Document</title>
</head>

<body>
	<div class="wrap">
		<div class="case">
			<div class="one">1</div>
			<div class="right">
				<div class="three">3</div>
				<div class="four">4</div>
			</div>
		</div>

		<div class="two">2</div>
		<div class="fife">5</div>
	</div>
</body>
</html>

Edited August 22, 2009 by psywalker

quakeman · August 28, 2009

ну тогда получай:

хм.. задача решена! пришло осмысление работы блоков.

добавил

  div.one, div.four { overflow: auto; }

JavaScript все равно в помощь нужна будет.

А вот с IE6 придется побороться)

psywalker, Вы гений!!

psywalker · August 28, 2009

psywalker, Вы гений!!

Да нееет друг, так дело не пойдёт, какой же я гений, если это решение не работает во первых во во всех браузерах, а во вторых ты ещё и div.one, div.four { overflow: auto; } добавлял, вот сначала получи кросс-решение, распишись, а потом посмотрим

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
	*{ margin: 0; padding: 0;}
	body,html { height: 100%;}

		div.wrap { min-height: 100%; position: relative;}
			div.wrap div.case { overflow: hidden; padding-bottom: 120px; position: relative; z-index: 1; }
				div.left { width: 49%; position: absolute; left: 0; top: 0; bottom: 0; background: #390; }
				div.right { width: 49%; position: absolute; right: 0; top: 0px; bottom: 0; background: #390;}
				   div.three { position: absolute; height: 100px; width: 49%; background: red; top: 0; right: 0; z-index:2; }

		div.four { float: right; width: 49%; padding-top: 110px; background: #390;}
		div.one { float: left; width: 49%; background: #390;}
		div.wrap div.two,
		div.wrap div.fife {
			position: absolute;
			height: 100px;
			width: 49%;
		}
			div.wrap div.two { bottom: 0; left: 0; background: red;}
			div.wrap div.fife { bottom: 0; right: 0;background: red;}




</style>

	<!--[if lte IE 6]>
		<style type="text/css">
			div.wrap { height: 100%; }
			div.wrap div.case { zoom:1;}
			div.left { height: expression(document.body.clientHeight+'px'); }
			div.right {height: expression(document.body.clientHeight+'px');}
			div.four { background: #390;}
			div.one { background: #390;}
		</style>
	<![endif]-->
<title>Untitled Document</title>
</head>

<body>
	<div class="wrap">
		<div class="left"></div>
		<div class="right"></div>
		<div class="three">3</div>
		<div class="case">
			<div class="one">
elements” post in the near future. Addendum 2 May 07: I edited the CSS to change background: transparent to background-image: transparent, as it was supposed to be from the outset but I somehow didn’t see in any of the three times I looked over the declarations. So I guess that makes this post now “final.0.1″. Addendum 4 May 07: background-image: transparent? There’s a big ol’ WTF. Apparently my cold medication has warped me a lot more than I believed. I’ve taken out that whole declaration and will not be editing the styles any further until I’m off the meds. So, not quite final, apparently. [The inherit] effects, as seen in my development environment, will still serve the purpose of reminding me to build up the styles I actually want, and not use the browsers' defaults as a crutch. There is the possibility of my forgetting that (for example) IE/Win italicizes em when I don't want it to, but that's something I'll catch during the browser testing phase. So that works for me, and I think for most people who have outlooks similar to mine. But maybe you develop primarily in IE/Win, or you really want to have IE/Win handle as man
		  elements” post in the near future. Addendum 2 May 07: I edited the CSS to change background: transparent to background-image: transparent, as it was supposed to be from the outset but I somehow didn’t see in any of the three times I looked over the declarations. So I guess that makes this post now “final.0.1″. Addendum 4 May 07: background-image: transparent? There’s a big ol’ WTF. Apparently my cold medication has warped me a lot more than I believed. I’ve taken out that whole declaration and will not be editing the styles any further until I’m off the meds. So, not quite final, apparently. [The inherit] effects, as seen in my development environment, will still serve the purpose of reminding me to build up the styles I actually want, and not use the browsers' defaults as a crutch. There is the possibility of my forgetting that (for example) IE/Win italicizes em when I don't want it to, but that's something I'll catch during the browser testing phase. So that works for me, and I think for most people who have outlooks similar to mine. But maybe you develop primarily in IE/Win, or you really want to have IE/Win handle as man
		 elements” post in the near future. Addendum 2 May 07: I edited the CSS to change background: transparent to background-image: transparent, as it was supposed to be from the outset but I somehow didn’t see in any of the three times I looked over the declarations. So I guess that makes this post now “final.0.1″. Addendum 4 May 07: background-image: transparent? There’s a big ol’ WTF. Apparently my cold medication has warped me a lot more than I believed. I’ve taken out that whole declaration and will not be editing the styles any further until I’m off the meds. So, not quite final, apparently. [The inherit] effects, as seen in my development environment, will still serve the purpose of reminding me to build up the styles I actually want, and not use the browsers' defaults as a crutch. There is the possibility of my forgetting that (for example) IE/Win italicizes em when I don't want it to, but that's something I'll catch during the browser testing phase. So that works for me, and I think for most people who have outlooks similar to mine. But maybe you develop primarily in IE/Win, or you really want to have IE/Win handle as man

			</div>
 			<div class="four">
			elements” post in the near future. Addendum 2 May 07: I edited the CSS to change background: transparent to background-image: transparent, as it was supposed to be from the outset but I somehow didn’t see in any of the three times I looked over the declarations. So I guess that makes this post now “final.0.1″. Addendum 4 May 07: background-image: transparent? There’s a big ol’ WTF. Apparently my cold medication has warped me a lot more than I believed. I’ve taken out that whole declaration and will not be editing the styles any further until I’m off the meds. So, not quite final, apparently. [The inherit] effects, as seen in my development environment, will still serve the purpose of reminding me to build up the styles I actually want, and not use the browsers' defaults as a crutch. There is the possibility of my forgetting that (for example) IE/Win italicizes em when I don't want it to, but that's something I'll catch during the browser testing phase. So that works for me, and I think for most people who have outlooks similar to mine. But maybe you develop primarily in IE/Win, or you really want to have IE/Win handle as man

			</div>
		</div>
		<div class="two">2</div>
		<div class="fife">5</div>
	</div>
</body>
</html>

Кстати я вот тут кое что поправил и самое интересное, что в ИЕ5 даже работает так же как и в других браузерах!

Edited August 28, 2009 by psywalker

quakeman · September 8, 2009

Кстати я вот тут кое что поправил и самое интересное, что в ИЕ5 даже работает так же как и в других браузерах!

не выходит..

при добавлении текста в one происходит увеличение высоты страницы. Этого быть не должно. Высота страницы должна быть равна высоте экрана. Проверял в ФФ и ИЕ6.

ПС: на overflow: auto; реакции нет

Edited September 8, 2009 by quakeman

psywalker · September 8, 2009

не выходит..
при добавлении текста в one происходит увеличение высоты страницы. Этого быть не должно. Высота страницы должна быть равна высоте экрана. Проверял в ФФ и ИЕ6.
ПС: на overflow: auto; реакции нет

Погоди, так тебе не нужно, что бы при переполнении текста колонка продолжалась вниз бесконечно? А тебе нужно, что бы справа появлялась полоса прокрутки чтоли, когда тект в блоке one доходит до низа?

Sign In

Выбор средств при верстке

Question

Link to comment

Share on other sites

15 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

Join the conversation

Обсуждения

Important Information