Вложенный див растягивает родительский див вправо.

pizzZ · November 3, 2009

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

1. Дизайнер сделал фиксированный макет с одной колонкой. Колонка 1000px. Выставлена по середине.

Проблем нет, сделал. Колонку выровнял margin:0 auto;

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

Проблем нет, сделал. К body background-image прикрепил.

3. Дизайнер попросил сделать как показанно на схеме:

То есть при разрешении 1024 * 768 фоновые изображения не должны отображаться. При увеличении разрешения фоновые изображения должны появляться из за края браузера. Верхние фоновые изображения имеют фиксированный размер, нижнии повторяються до конца. Чтобы было понятнее фоновые изображения это продолжение картинки на шапке и футере.

Вот тут я призадумался... И пришло мне в голову, почему бы не поместить 2 дива в шапку, задать им абсолютное позиционирование, и сместить на их размер*-1 от краев дива родителя. Сделал, слева, все как надо. А вот справа, див растягивает своего родителя. Вот код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
* {
	margin:0;
}
#all {
	width:1000px;
	background-color:#CC6699;
	margin:0 auto;	
}
#header {
	width:1000px;
	height:400px;
	background-color:#009933;
	position:relative;
}
#content {
	width:1000px;
	background-color:#009999;
	position:relative;
}
#left {
	width:400px;
	height:400px;
	background-color:#FFFF99;
	position:absolute;
	top:0;
	left:-400px;
}
#right {
	width:400px;
	height:400px;
	background-color:#9999FF;
	position:absolute;
	top:0;
	right:-400px;
}
</style>
</head>

<body>
<div id="all">
	<div id="header">
		<div id="left"></div>
		<div id="right"></div>
	</div>
	<div id="content">Много много текста</div>
</div>
</body>
</html>

Подскажите пожалуйста, как избавиться от полосы прокрутки?

pizzZ · November 3, 2009

Подумалось добавить max-width для header. Только кросбраузерность теряеться... Я правда еще не пробывал, можнт вообще работать не будет :lol: пойже отпишусь о результатах.

pizzZ · November 4, 2009

Подумалось мне еще чуть чуть. Решил более четко сформировать проблему. Получилось так: Как убрать горизонтальную прокрутку? Ответ на который быстро нашел (overflow-x у тега body), попробывал, получилось. Только теперь у оперы и при разрешении меньшем 1024 полоса прокрутки не поевляеться. Думаю сделать так:

C помощью js менять этот параметр. По умолчанию полоса прокрутки будет :lol:

Есть ли у Вас какие нибудь замечания по данному решению?

psywalker · November 4, 2009

Так ну всё, сам с собой поговорил, теперь ответь, так нормал: :lol:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
* {
	margin:0;
	padding: 0;
}
html, body { height: 100%;}
#all {


	margin:0 auto;
	min-height: 100%;
	_height: 100%; /* - ДЛЯ ИЕ6 */
	position: relative;
}
div.wrap { position: relative; z-index: 1; overflow-x:; width: 1000px; margin: 0 auto;}
#header {
   height:400px;
   background-color:#009933;


}
#content {
   background-color:#009999;
}
#top {
	width:100%;
	height:400px;
	background-color:#FFFF99;
	position:absolute;
	top:0;
	left: 0;

}
#bottom {
	width:100%;
	height:400px;
	background-color:#9999FF;
	position:absolute;
	bottom:0;
	left: 0;
}
</style>
</head>

<body>
<div id="all"> 
	<div id="top"></div>
	<div id="bottom"></div>
	<div class="wrap">
		<div id="header">HEADER</div>
		<div id="content">Много <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />много текста</div>
	</div>
</div>
</body>
</html>
</html>

pizzZ · November 4, 2009

Что я могу сказать? Спасибо :lol: Будем разбираться.

psywalker · November 4, 2009

Что я могу сказать? Спасибо Будем разбираться.

Кстати я бы тебе посоветовал вместо лишний контейнеров

повесить тупо фон: Нижний на контейнер #all, а верхний на body

pizzZ · November 4, 2009

Посмотрел. К сожелению это не то что мне надо, идея понятна, но она не подходит по условиям.

Как я уже говорил, фоновые изображения являються продолжением фона шапки, и продолжением фона подвала. Более того. Левое и правое фоновое изображение не одинаковы.

В Вашем примере, фоновые изображения прикрепляються к окну браузера. А мне надо чтобы они прикреплялись к краю шапки и футера.

Если непонятно, я могу более подробно обьяснить :lol:

psywalker · November 4, 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" />
	<title>Block</title>
	<style type="text/css">
		body{
			margin:0;
			min-width:800px;
			_width:expression(document.documentElement.clientWidth < 800 ? "800px" : "auto");
		}
		#wrapper{
			width:100%;
			overflow:hidden;
			position:relative;
		}
		.wrap{
			width:800px;
			margin:0 auto;
			position:relative;
			background:#00f;
		}
		.left,
		.right{
			width:200px;
			background:#f00;
			position:absolute;
			left:-200px;
			top:0;
		}
		.right{
			right:-200px;
			left:auto;
		}
		.center{
			overflow:hidden;
			_zoom:1;
		}
	</style>
</head>
<body>
<div id="wrapper">
	<div class="wrap">
		<div class="center">

			<p>Lorem ipsum dolor sit amet consectetuer Curabitur laoreet Aenean tellus et. Nunc justo ut consequat et Cum amet Maecenas laoreet Nulla felis. </p>
			<p>In Curabitur id condimentum id Integer dictumst ipsum nunc dictum eget. Nulla et magnis justo justo tincidunt gravida justo Curabitur turpis sagittis. Pellentesque.</p>
			<p>At eu quis ipsum elit Sed pede nec vestibulum morbi Cum. Et fringilla rhoncus pretium id enim lobortis lacus ut leo nunc. Vivamus Donec elit nunc scelerisque.</p>
		</div>
		<div class="left">
			<p>Lorem ipsum dolor sit amet consectetuer tempus nibh dolor interdum.</p>
		</div>

		<div class="right">
			<p>Lorem ipsum dolor sit amet consectetuer magna mauris justo auctor pede. Laoreet Cum lacinia wisi Aliquam nibh id.</p>
		</div>
	</div>
</div>
</body>
</html>

pizzZ · November 4, 2009

Оно. Только из за _width:expression(document. ie просит включить активное содержимое. Есть ли способы отучить его от этого?

Вобщем идея ясна, ушел искать способ эмулировать min-width без предупреждения безопасности.

Justnewone · November 4, 2009

Оно. Только из за _width:expression(document. ie просит включить активное содержимое. Есть ли способы отучить его от этого?
Вобщем идея ясна, ушел искать способ эмулировать min-width без предупреждения безопасности.

Локально небось смотрите?

Когда браузер будет получать файл через HTTP сообщения не будет.

pizzZ · November 4, 2009

Локально. Если сообщения не будет, пошел переделывать под свой шаблон :lol:

psywalker · November 4, 2009

Локально. Если сообщения не будет, пошел переделывать под свой шаблон

давай молодца, топай :lol:

pizzZ · November 4, 2009

Переделал Думал на нижних фоновых изображениях возникнет проблема, а нет. Прижались к футеру, а не к низу браузера.

Вобщем все ок. Только беспокоит меня то что в опере в консоли ошибок появляються вот такие строки:

CSS - http://site/pub/css/index.css
Linked-in stylesheet
_width is an unknown property
Line 16:
   _width:expression(document.documentElement.clientWidth < 1000 ? "1000px" : "aut
  ——--^
CSS - http://site/pub/css/index.css
Linked-in stylesheet
Declaration syntax error
Line 16:
  dth:expression(document.documentElement.clientWidth < 1000 ? "1000px" : "auto");
  ——————————————————————————--^
CSS - http://site/pub/css/index.css
Linked-in stylesheet
_zoom is an unknown property
Line 67:
	  _zoom:1;
  ———-^

Я вообще больше программист, чем верстальшик, и на других сайтах видел в этой консоли еще больше ошибок. Но все равно, хочется чтобы было красиво и без этих сообщений.

Вот например сообщения с этого много уважаемого форума

CSS - http://forum.htmlbook.ru/style_images/css_4.css
Linked-in stylesheet
Selector syntax error
Line 927:
  }
  -^
CSS - http://forum.htmlbook.ru/style_images/css_4.css
Linked-in stylesheet
-moz-border-radius is an unknown property
Line 1457:
   -moz-border-radius: 5px;
  ——————--^
CSS - http://forum.htmlbook.ru/style_images/css_4.css
Linked-in stylesheet
-moz-outline is an unknown property
Line 1612:
   -moz-outline: none;
  ————--^
CSS - http://forum.htmlbook.ru/style_images/css_4.css
Linked-in stylesheet
Declaration syntax error
Line 1676:
   filter:alpha(opacity=75);
  ————————--^
CSS - http://forum.htmlbook.ru/style_images/css_4.css
Linked-in stylesheet
-moz-border-radius is an unknown property
Line 1708:
   -moz-border-radius: 5px;
  ——————--^
CSS - http://forum.htmlbook.ru/style_images/css_4.css
Linked-in stylesheet
Declaration syntax error
Line 1715:
   filter:alpha(opacity=85);
  ————————--^
CSS - http://forum.htmlbook.ru/style_images/css_4.css
Linked-in stylesheet
-moz-border-radius is an unknown property
Line 1739:
   -moz-border-radius: 5px;
  ——————--^
CSS - http://forum.htmlbook.ru/style_images/css_4.css
Linked-in stylesheet
marginh is an unknown property
Line 2149:
   color: #c35301;marginh: 2px;
  ————————^
CSS - http://forum.htmlbook.ru/style_images/css_4.css
Linked-in stylesheet
-moz-opacity is an unknown property
Line 2154:
  .btn A IMG{opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100);}
  ————————————-^
CSS - http://forum.htmlbook.ru/style_images/css_4.css
Linked-in stylesheet
Declaration syntax error
Line 2154:
  .btn A IMG{opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100);}
  ——————————————————————--^
CSS - http://forum.htmlbook.ru/style_images/css_4.css
Linked-in stylesheet
-moz-opacity is an unknown property
Line 2155:
  .btn a:hover img {opacity:0.75; -moz-opacity:0.75; filter:alpha(opacity=75);}
  ———————————————^
CSS - http://forum.htmlbook.ru/style_images/css_4.css
Linked-in stylesheet
Declaration syntax error
Line 2155:
  .btn a:hover img {opacity:0.75; -moz-opacity:0.75; filter:alpha(opacity=75);}
  —————————————————————————-^
CSS - http://forum.htmlbook.ru/style_images/elegance/folder_editor_images/css_rte.css
Linked-in stylesheet
-moz-border-radius is an unknown property
Line 65:
   -moz-border-radius: 3px;
  ——————--^
CSS - http://forum.htmlbook.ru/style_images/elegance/folder_editor_images/css_rte.css
Linked-in stylesheet
Invalid value for property: clear
Line 91:
   clear: all;
  ————^
CSS - http://forum.htmlbook.ru/style_images/elegance/folder_editor_images/css_rte.css
Linked-in stylesheet
-moz-border-radius is an unknown property
Line 202:
   -moz-border-radius: 3px;
  ——————--^
CSS - http://forum.htmlbook.ru/style_images/elegance/folder_editor_images/css_rte.css
Linked-in stylesheet
-moz-border-radius is an unknown property
Line 214:
   -moz-border-radius: 3px;
  ——————--^
CSS - http://forum.htmlbook.ru/index.php?showtopic=16959&st=0&gopid=121949&
HTML style attribute
word-wrap is an unknown property
Line 1:
  word-wrap:break-word;
  ———-^

Ладно, если уж здесь игнорируют ошибки, то и мне не стоит так волноваться :lol:

Justnewone · November 4, 2009

Для этого экспрешшены из файла стилей нужно убрать в другой файл css, который, с помощью conditional comments показывать только нужной версии осла.

pizzZ · November 4, 2009

Всем спасибо за помощь :lol: Проблема решена

З.ы. Спрошу здесь, хотя к теме не относиться.

Вобщем только на этом сайте(который сейчас верстаю) у меня странная проблема в опере Версия: 10.01 Сборка: 1844. суть проблемы в том что после тега html появляеться тег br. Причем проблема плавающая, 10 раз нажмешь обновить и этот тег появиться в 9 из 10 случаев. В коде везде проверял, нигде нету

намека даже на это. У дизайнера в опере все ок. Как вы думаете куда копать??

Edited November 4, 2009 by pizzZ

s0rr0w · November 4, 2009

Всем спасибо за помощь Проблема решена
З.ы. Спрошу здесь, хотя к теме не относиться.
Вобщем только на этом сайте(который сейчас верстаю) у меня странная проблема в опере Версия: 10.01 Сборка: 1844. суть проблемы в том что после тега html появляеться тег br. Причем проблема плавающая, 10 раз нажмешь обновить и этот тег появиться в 9 из 10 случаев. В коде везде проверял, нигде нету
намека даже на это. У дизайнера в опере все ок. Как вы думаете куда копать??

Копать в торону официального сайта оперы. Функционирование браузеров лежит в их зоне ответственности, а не в нашей.

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