Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Получится ли колонку посередине? (https://javascript.ru/forum/xhtml-html-css/7660-poluchitsya-li-kolonku-poseredine.html)

micscr 13.02.2010 12:36
Получится ли колонку посередине?
 
Привет.
Уже по верстке столько начитал, но не могу понять какими средствами получится сделать такой вариант(например хочу некие вставки(3) организовать):

Причем высота блока 3 определяется содержимым, а ширина допустим известна.
Кто-нибудь сталкивался? Какие вообще в общем решения могут быть?
Спасибо.

P.S. Чето картинка один раз не подгрузилась. Если что вот она(30Кбайт).

Tim 14.02.2010 17:47
3-й блок нужно позиционировать абсолютно. Чтобы создать эффект его обтекания можно положить в блоки 1 и 2 как бы две половинки блока 3 с float: left и float: right соответственно. Но возникнет проблема с позицонированием этих половинок по высоте. Это нужно будет делать изменяя положение этих половинок в html-коде. Другого выхода я не вижу. Позиционированием и отступами эту проблему не решить это 100 пудово - обтекания с ними не получится (имеется ввиду чтобы текст заходил туда где стоит цифра 1 на рисунке).

micscr 15.02.2010 08:53
да, я тоже насчет этого думал но это будет нелегко + к тому же это для варианта когда известна высота блока 3.

Tim 16.02.2010 00:17
м.б. в CSS-3 что нибудь есть? Я его плохо знаю. С CSS-2 то точно могу сказать что без извращений не получится. Чтобы высота была одинакова можно костыль на JS приделать.

PeaceCoder 16.02.2010 12:41
Стоп. Как видно из рисунка середина будет всегда относительно-фиксированной и будет на 2*X пикселов меньше общей высоты. Так в чем проблема?

Tim 16.02.2010 14:45
Цитата:
Так в чем проблема?
На сколько я понял это не для одной страницы, это можно понять например отсюда:
Цитата:
это для варианта когда известна высота блока 3
а проблема в том, чтобы текст обтекал блок 3 который по любому позиционируется абсолютно => обтекать его ни кто не будет => нужно создать эффект этого обтекания. Это можно сделать положив в блоки 1 и 2 как бы две половинки блока 3 с float: left и float: right соответственно. Но шаблон из этого не сделать, придётся каждую страницу верстать в ручную.

PeaceCoder может вы увидели более удобный способ вёрстки? мне так что то больше на ум ни чего не приходит

PeaceCoder 16.02.2010 20:06
Цитата:
Сообщение от Tim
PeaceCoder может вы увидели более удобный способ вёрстки?
С появления этой темы я увидел такой способ верстки.
Решение простое
Все 3 блока помещаются в 1 блок. Его высота будет известна
Создаем эффект обтекания в блоках 1 и 2 а 3 блок равен высоте общего блока минус 2*Xpx, т.е. position: absolute; left: Npx; right Npx; top: Xpx; bottom Xpx;

PeaceCoder 16.02.2010 20:14
неполучится никак

e1f 16.02.2010 20:20
Хм, ну а обтекание-то где?

UPD Выходит скорее подтекание, а не обтекание. ТС нужно, чтобы 1 и 2 реально обтекали 3, как будто он вставлен в поток некой двухколоночкой страницы.

PeaceCoder 16.02.2010 20:26
Цитата:
Сообщение от e1f
Хм, ну а обтекание-то где?
то я испытывал. неполучится даже с фиксированной высотой. Если елемент смещать относительно свое местоположения то это смещение входит в размер элемента и текст его обходит и получается сверху пустота.

subzey 16.02.2010 20:58
Вот, что получилось у меня:
<!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>Title</title>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<style type="text/css">
			body {
				margin: 0px;
			}
			.column-wrapper {
				width: 50%;
				margin: 0px auto;
				padding: 80px 0px 0px 0px;
			}
			.column-left-wrapper {
				width: 200%;
				height: 0px;
				margin-left: -100%;
				margin-top: -80px;
			}
			.column-right-wrapper {
				height: 0px;
				width: 100%;
				margin-left: 50%;
				margin-top: -80px;
				
			}
			.column-left{
				background: #ffcccc;
				text-align: justify;
				position: relative;
				padding: 10px;
			}
			.column-right {
				background: #ccccff;
				text-align: justify;
				position: relative;
				padding: 10px;

			}
			
			.column-middle-wrapper {
				width: 50%;
				margin: 0px 0px 0px 0px;
			}
			.column-middle-wrapper-2 {
				position: relative;
				z-index: 2;
				float: left;
				width: 100%;
				margin-right: 100%;
				
			}
			.column-middle {
				float: right;
				background: #ffffcc;
				position: relative;
				z-index: 2;
				padding: 5px 10px;
				width: 200%;
				margin-right: -100%;
				text-align: justify;
			}
		</style>
	</head>
	<body>
		<div class="column-wrapper">
			<div class="column-middle-wrapper">
				<div class="column-middle-wrapper-2">
					<div class="column-middle">
						MIDDLE MIDDLE MIDDLE MIDDLE MIDDLE MIDDLE MIDDLE MIDDLE MIDDLE MIDDLE MIDDLE MIDDLE MIDDLE MIDDLE MIDDLE MIDDLE MIDDLE MIDDLE MIDDLE MIDDLE MIDDLE MIDDLE MIDDLE MIDDLE MIDDLE MIDDLE MIDDLE MIDDLE MIDDLE MIDDLE MIDDLE
					</div>
					<div class="column-left-wrapper">
						<div class="column-left">
							LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT
							LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT
							LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT LEFT
						</div>
					</div>	

				</div>
			</div>

			
			<div class="column-right-wrapper">
				<div class="column-right">
					RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT
					RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT
					RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT
				</div>
			</div>
		</div>
		
	</body>
</html>


IE6, к сожалению, как обычно…

Tim 17.02.2010 00:03
:blink: кошмар! не понятно ничего :no: :(

PeaceCoder 17.02.2010 00:55
subzey,
Метод от противного. Если неможем сузить - мы расширим. хорошая хитрость. не знал что так можно. Какая хитрость в задании wrappery height: 0; ?

subzey 17.02.2010 01:23
PeaceCoder,
У правого враппера высоту нулевую тупо забыл выкосить. Левому же нужна, чтобы враппер средней не растягивался от ее высоты.

Эх, скорее бы уже CSS3!


Часовой пояс GMT +3, время: 07:06.