резиновый div

redreem · 16.07.2011, 00:14

вы бы привели лучше пример с реальным контентом. а из ваших пояснений нифига не понятно. приведите пример как сейчас у вас ведет себя конструкция (с реальными контентом) и как должно быть (нарисуйте руками). 2 картинки с реальным контентом. правильная и неправильная.

√BlackCat · 16.07.2011, 00:39

OverSet,
ничего не понятно....

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

Тоесть когда сереневый будет увеличиватся - розовый соответственно будет уменьшатся, я так понимаю ?

Если же нет, нарисуйте полосками набросок дизайна (не Вашего, а аналогичному) и покажите пару таких макетов,хотя бы с текстом "text-text,"

Понять Вас напальцах почему то не получается, я реализовал "примерно" то что Вы просили, Владендарк попробовал но всёравно не то.

Если что,моя аська 650 72 71, если хотите, обращайтесь туда, там решим этот вопрос

Добавлено через 1 минуту

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

OverSet · 16.07.2011, 03:34

Вот. Объясняю "на пальцах")

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

На вопросы "зачем", "для чего" объяснить, судя по всему, не получится)
Может я упустил принцип в схеме с колонками, √BlackCat, вами приведенный. Хотелось бы, чтобы и вы мне на пальцах объяснили реализацию ЭТОГО примера. Здесь только от контента все должно зависеть.

По поводу того, как должно быть правильно и неправильно, тут смысла нет приводить картинки, т.к. все в этом рисунке понятно. Нужен ПРОСТО ПРИНЦИП в коде, конкретные величины ни к чему.

Ну как, теперь понятно?

OverSet · 16.07.2011, 05:05

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

√BlackCat · 16.07.2011, 11:26

Код:

<html>
 <head>
<style>
#global {
	width:500px;
	height:500px;
	position:relative;
	background-color:#FF99FF;
	}
#upbg {
	width:500px;
	height:400px;
	position:absolute;
	top:0px;left:0px;
	background-color:#CC66FF;
	}
#content {
	width:500px;
	position:relative;
	top:0px;left:0px;
	}
</style>
 </head>
 <body>

<div id="global">
	<div id="upbg"></div>
	<div id="content">

	</div>
</div>
 </body>
</html>

жудь, а не вёрстка )
уверен Ваш макет можно и более проще разверстать )

ах да, хочу предупредить:
вот это что я дал Вам, не должно менять структуру, тоесть если Вы это будете переносить в свой код, 2 блока " upbg " и " content " в любом случае должны оставатся в одном общем блоке, в премере эт блок " global "
но тут есть одно " но "
если блок " контент " будет залит цветом или закрыт сплошной картинкой, блока " upbg " видно не будет, т.к. он слоем ниже, картинка на repeat-y должна задаватся в блок " global " и тогда розовый будет беком по вертикали, а сереневый будет верхней частью контента. Сам контент заливать чем либо разумеется не нужно, в него только текст.

Ну надеюсь суть Вы поняли ? )

OverSet · 16.07.2011, 20:17

√BlackCat, спасибо большое!
Теперь работает. Правда этот код в старых ИЕ работает правильно, но в современных браузерах контент выпадает за пределы нижнего блока. Пришлось немного видоизменить код: заменил для блока #global правило height на min-height. Но т.к. старые ИЕ не знают правил min-height, max-width и т.д., то добавил для них условный комментарий с указанием height.
Вот что получилось:

Код:

<html>
<head>
	<style>
		#global {
			width:500px;
			min-height:500px;
			position:relative;
			background-color:#FF99FF;
		}
		#upbg {
			width:500px;
			height:400px;
			position:absolute;
			top:0px;left:0px;
			background-color:#CC66FF;
		}
		#content {
			width:500px;
			position:relative;
			top:0px;left:0px;
		}
	</style>
	<!--[if lte IE 6]>
		<style type="text/css">
			#global{
				height:500px;
			}
		</style>
	<![endif]-->
</head>
<body>
<div id="global">
	<div id="upbg"></div>
	<div id="content">
		text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text
	</div>
</div>
</body>
</html>

Всем спасибо за внимание! Тема закрыта..

√BlackCat · 16.07.2011, 20:23

OverSet
Обращайтесь )
Писал в EditPlus 3 и проверял работоспособность ток под него ) на остальных браузерах не проверял, впрочем за частую приходится ток 1-2 пункта исправить )

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Резиновый макет на div	Ok_	HTML, CSS, JavaScript	5	10.08.2012 19:18
Резиновый флеш	Wir2al	Технологии Flash	7	01.09.2010 14:35
резиновый вариант при таком бэкграунде?	Den_S	HTML, CSS, JavaScript	3	29.05.2009 22:06
Резиновый сайт	Soulkeeper	HTML, CSS, JavaScript	1	16.05.2009 13:54
Резиновый сайт	web_smile	HTML, CSS, JavaScript	21	13.03.2009 23:17

16.07.2011, 00:14	#11
redreem	вы бы привели лучше пример с реальным контентом. а из ваших пояснений нифига не понятно. приведите пример как сейчас у вас ведет себя конструкция (с реальными контентом) и как должно быть (нарисуйте руками). 2 картинки с реальным контентом. правильная и неправильная.

16.07.2011, 00:39	#12
√BlackCat	OverSet, ничего не понятно.... Вам нужно что бы контент "сереневый" находился внутри общего блока "розового" ? Тоесть когда сереневый будет увеличиватся - розовый соответственно будет уменьшатся, я так понимаю ? Если же нет, нарисуйте полосками набросок дизайна (не Вашего, а аналогичному) и покажите пару таких макетов,хотя бы с текстом "text-text," Понять Вас напальцах почему то не получается, я реализовал "примерно" то что Вы просили, Владендарк попробовал но всёравно не то. Если что,моя аська 650 72 71, если хотите, обращайтесь туда, там решим этот вопрос Добавлено через 1 минуту можете так же выложить сюда макет подобного дизайна вашему, так же в полосках но понятный человеческому глазу, я и думаю другие попробуют помочь Вам его разверстать, это второй вариант Последний раз редактировалось √BlackCat; 16.07.2011 в 00:39.. Причина: Добавлено сообщение

16.07.2011, 11:26	#15
√BlackCat	Код: <html> <head> <style> #global { width:500px; height:500px; position:relative; background-color:#FF99FF; } #upbg { width:500px; height:400px; position:absolute; top:0px;left:0px; background-color:#CC66FF; } #content { width:500px; position:relative; top:0px;left:0px; } </style> </head> <body> <div id="global"> <div id="upbg"></div> <div id="content"> </div> </div> </body> </html> жудь, а не вёрстка ) уверен Ваш макет можно и более проще разверстать ) ах да, хочу предупредить: вот это что я дал Вам, не должно менять структуру, тоесть если Вы это будете переносить в свой код, 2 блока " upbg " и " content " в любом случае должны оставатся в одном общем блоке, в премере эт блок " global " но тут есть одно " но " если блок " контент " будет залит цветом или закрыт сплошной картинкой, блока " upbg " видно не будет, т.к. он слоем ниже, картинка на repeat-y должна задаватся в блок " global " и тогда розовый будет беком по вертикали, а сереневый будет верхней частью контента. Сам контент заливать чем либо разумеется не нужно, в него только текст. Ну надеюсь суть Вы поняли ? ) Последний раз редактировалось √BlackCat; 16.07.2011 в 11:30..

16.07.2011, 20:23	#17
√BlackCat	OverSet Обращайтесь ) Писал в EditPlus 3 и проверял работоспособность ток под него ) на остальных браузерах не проверял, впрочем за частую приходится ток 1-2 пункта исправить )