автоматическая ширина

ShumNo · September 18, 2010

Предположим есть 3 колонки в контентной части макета не важно какие, но для примера код

html

<div id="middle">
	<div id="container">
		<div id="content">
			Content: 
		</div>
	</div>

	<div class="sidebar" id="sideLeft">
		Left Sidebar:
	</div>

	<div class="sidebar" id="sideRight">
		Right Sidebar:
	</div>
</div>

css

#middle {
	width: 100%;
	height: 1%;
}
#middle:after {
	content: '.';
	display: block;
	clear: both;
	visibility: hidden;
	height: 0;
}
#container {
	width: 100%;
	float: left;
	overflow: hidden;
}
#content {
	padding: 0 270px 0 320px;
}
#sideLeft {
	float: left;
	width: 300px;
	margin-left: -100%;
	position: relative;
	background: #B5E3FF;
}
#sideRight {
	float: left;
	margin-right: -3px;
	width: 250px;
	margin-left: -250px;
	position: relative;
	background: #FFACAA;
}

Задача следующая. Предположим у нас исчезнет левый блок или правый, каким образом сделать, чтобы центральная часть автоматически растянулась на всю ширину (подразумеваю заполнение левой или правой части центральной)?

Подскажите пожалуйста

ShumNo · September 18, 2010

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

swetlana · September 18, 2010

да вообще-то направление верное, только position: relative зачем?

CEBEP · September 18, 2010

я не понимаю почему не использовать таблицу...хотя наверно я старомоден...

Edited September 19, 2010 by CEBEP

s0rr0w · September 18, 2010

я не понимаю почему не использоваTь Tаблицу...хоTя наверно я сTаромоден...

СЕВЕР, предлагаю пройтись по всем своим постам, и заменить большую Т на маленькую.

Иначе будет бан на месяц за неадекватное поведение.

ShumNo · September 18, 2010

Да, может это и вариант, просто использовать таблицы, просто я забыл как они работают

P.S а шо большая буква Т нормально меня вовсе и не раздражает я даже не заметил) какое тут неадекватное поведение ?

s0rr0w · September 19, 2010

P.S а шо большая буква Т нормально меня вовсе и не раздражает я даже не заметил) какое тут неадекватное поведение ?

Прямое. Зачем писать большую букву Т? Для чего?

psywalker · September 19, 2010

ТС, не понял вопроса, точнее где в нём подвох?

Почему бы не поступить вот так: http://psywalker.ru/Forum/Column/maing.html

ShumNo · September 19, 2010

Да, макет рабочий за исключением двух вещей:

Вещь первая блоки левый и правый идут первыми, чем блок с контентом, тем самым всякая фигня, что у нас в блоках приобретает больший вес при ранжировании, чем непосредственно контент

Вторая он резиновый, а вот как бы его сделать фиксированным.

Может кто не понял мою мысль за чем это надо так я расскажу, может и проще реализация есть, тогда подскажите. Представьте управлении cms изнутри мы выбрали какой-то блок и поставили его в левую колонку и контентная часть должна автоматически уменьшится, а если наоборот убрали правый блок, то контент должен заполнить освободившееся пространство. Вот я и спросил как это выглядит в коде. Мысли что-то не приходят

psywalker · September 19, 2010

Допустим можно сделать такой вариант, а на JS проверять, если какой нибудь колонки нет, то контент делать шире на ширину убранной колонки.

<!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" />
<title></title>
	<style type="text/css">
	*{ margin:0; padding: 0;}
		body { min-width: 500px;}
		div.head { height: 100px; background: blue;}
		div.right {
				float:left; 
				width: 200px;
				margin-left: -200px;; 
				background: red;
				display: inline;
		}
		div.wrap { float:left; width:100%;}
		div.content{ margin: 0 200px; background: #FF9; }
		div.sidebar{ 
			float:left; 
			width: 200px;
			margin-left:-100%; 
			background: red;
			display: inline;
		}

		div.foot { background: blue; height: 100px; clear: both;}

		p { padding: 10px;}



	</style>
		<!--[if lte IE 7]>
	<style type="text/css">
*html body { width:expression(document.documentElement.clientWidth < 600 ? "600px" : "auto");

	</style>
	<![endif]-->
</head>

<body>

	<div class="head">Header</div>

		<div class="wrap">
			<div class="content">
			<p><strong>2) Navigation here.</strong> long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler </p>			<p><strong>2) Navigation here.</strong> long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler </p>			<p><strong>2) Navigation here.</strong> long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler </p>

			</div>
		</div>
		<div class="sidebar">
			<p><strong>2) Navigation here.</strong> long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler </p>
		</div>
		<div class="right">
				<p><strong>3) More stuff here.</strong> very text make long silly make text very very text make long filler very make column make silly column fill silly column long make silly filler column filler silly long long column fill silly column very </p>

		</div>
		<div class="foot">Footer</div>


</body>
</html>

mishka · September 19, 2010

Ксожалению так сделать неполучится, как хочет ShumNo. И контент впереди, и все ширины автоматом.

Поэтому делай колонки sidebar первыми по коду.

Юзать тут джс, я бы не стал.

Edited September 19, 2010 by mishka2

psywalker · September 19, 2010

Ксожалению так сделать неполучится, как хочет ShumNo. И контент впереди, и все ширины автоматом.
Поэтому делай колонки sidebar первыми по коду.
Юзать тут джс, я бы не стал.

Тогда согласен косолапый.

ShumNo · September 19, 2010

psywalker спасибо за пример но JS использовать в этом случае нельзя так как он у многих отключен по умолчанию, например, у меня.

Надо попробовать сделать таблицами... может получится. или перейти к крайнему варианту - использовать несколько шаблонов

mishka · September 19, 2010

Не понимаю логики.

Чем таблица в данном случае лучше?

Сайдбары первым по коду, одному флоат лефт, второму флоат райт, контенту оверфлов хидден. Все! Все работает, если нету какогото сайдбара, или их обоих нету, то контент занимает все оставшееся место.

Чем таблица лучше?

ShumNo · September 19, 2010

Таблица ни чем не лучше

psywalker · September 19, 2010

Таблица ни чем не лучше

Тогда нужно выбрать тот вариант, который работает 100%

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