резиновый трехколоночный макет с отступами по бокам

ardjuna · January 21, 2010

В IE6 не удается получить тоже, что и в FF и Opera, а именно отступы от краних колонок по 10%.

Так же в IE6 не удаётся задать ширину для центральной колонки такую, как прописанно в стилях (min-width: 4,9%) почему не ясно хотя я прописал

min-width:4,9%;

width: auto !important;

width: 4,9%;

а вотFF и Opera хоть и отдают для этой колонки нужное пространство, но судя по border сам слой эту ширину не имеет?

Как можно исправить проблему с отступами в IE, какими принципами можно руководствоваться тут для верстки такого макета?

Почему ширина min-width не входит в рамку колонки pust?

psywalker · January 21, 2010

1) Отступы делай изначально у Родителя главного и убери у него ширину 100%

2) Подход хреновый к задаче.

3) % ставятся через точку, а не через запятую.

ardjuna · January 21, 2010

1) Отступы делай изначально у Родителя главного и убери у него ширину 100%
2) Подход хреновый к задаче.
3) % ставятся через точку, а не через запятую.

Сейчас переварю.

ardjuna · January 21, 2010

Насчёт ширины для контейнера(box) 100% ,это я сглупил конечно.

Попробовал через установку margin-leftn: 10% и margin-right: 10%. Однако не то пока.

А вот насчёт того , что подход хреновый - это очень интересно поподробней бы узнать.

Контейнер сейчас ведёт себя по отножению к вложенным элементам интересным образом, они по коду в нём , а визуально выпадают из него. Очень важно понять эту особенность поведения контейнера, у меня так уже случалось , но что это я так и не понял.

Ширина всех элементов кроме центрального блока не соответствует заявленной.

Ссылка такая же.

Edited January 21, 2010 by ardjuna

psywalker · January 21, 2010

Насчёт ширины для контейнера(box) 100% ,это я сглупил конечно.
Попробовал через установку margin-leftn: 10% и margin-right: 10%. Однако не то пока.
А вот насчёт того , что подход хреновый - это очень интересно поподробней бы узнать.
Контейнер сейчас ведёт себя по отножению к вложенным элементам интересным образом, они по коду в нём , а визуально выпадают из него. Очень важно понять эту особенность поведения контейнера, у меня так уже случалось , но что это я так и не понял.
Ширина всех элементов кроме центрального блока не соответствует заявленной.
Ссылка такая же.

Давай скриншот того, что хочешь получить в итоге. С подробным объяснением.

ardjuna · January 21, 2010

Давай скриншот того, что хочешь получить в итоге. С подробным объяснением.

сейчас забахаю

ardjuna · January 21, 2010

http://img4.immage.de/2101d9screen.jpg

Извините, что грузится долго картинкак много весит.

Edited January 21, 2010 by ardjuna

Justnewone · January 21, 2010

http://img2.immage.de/210195abd7cscreen.jpg
Извините, что грузится долго картинкак много весит.

Ширина берется от непосредственного родителя

то есть 80% ширины вснешнего блока для потомков = 100%. От туда и пляшите. Я бы сделал так, разбил бы на 2 дива, а третий положил бы в один из них с флоатом. ну, если по коду подходит.

psywalker · January 21, 2010

Так не пойдёт?

<!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>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />

	<style type="text/css">
	*{ margin: 0; padding: 0;}
	body {}
	div.box { padding: 0 10%; overflow: hidden;}
		div.left{ float: left; width: 32%; background: red;}
		div.right{ float: left; width: 43%; background: blue;}
		div.content{ overflow: hidden;  background: green;}

	</style>
<!--[if IE 6]>
<style type="text/css">

	body {width:expression(document.documentElement.clientWidth < 300 ? "300px" : "auto");}
	div.box {zoom:1;}
	div.left { margin-right: -3px; }
	div.right {margin-left: -3px; }

	div.content {zoom: 1;}
</style>
<![endif]-->
</head>

<body>

	<div class="box">
		<div class="left">Left</div>
		<div class="right">Right</div>
		<div class="content">Content</div>
	</div>

</body>
</html>

ardjuna · January 21, 2010

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

Хорошо буду переосмыслять.

Спасибо за подсказки, надо разобрать для себя, как всё это работает.

Ширина берется от непосредственного родителя
то есть 80% ширины вснешнего блока для потомков = 100%. От туда и пляшите. Я бы сделал так, разбил бы на 2 дива, а третий положил бы в один из них с флоатом. ну, если по коду подходит.

Подумаю и над таким способом, завтра попробую отписаться.

Edited January 21, 2010 by ardjuna

ardjuna · January 22, 2010

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

Когда мы прописываем:

<!--[if IE 6]>

..........................................

.........................................

</style>

<![endif]-->

то мы указываем конкретно браузеру, что, "если ты IE, то тебе вот эти св-ва" , а если другой браузер будет , то он что этот код не воспримет? Как это работает , ведь это же всего лишь комментарий? Я что-то не пойму.

Что здесь дает св-во zoom для IE , какой баг мы тут так правим?

overflow: hidden для content и box зачем указывать? Ведь у нас для данных блоков не указана конкретная ширина? Если мы хотим , чтобы за пределы box (когдау него есть заданная width ) не вышло содержимое , тогда мне ясно зачем overflow: hidden. Но width у box нет. Также не ясно зачем мы задали это св-во для content.

body {width:expression(document.documentElement.clientWidth < 300 ? "300px" : "auto");}

Я в js не понимаю, не скажите ли что мы тут задаем?

И ещё все же для понимания принципов, очень хочется понять, почему из бокса контейнера (<div id="box">)

выпадают вложенные в него divы?

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

<div id="box">
<div id="left-collumn">
left-coll
</div>
<div id="pust">
pust

</div>
<div id="right-collumn">
right-coll
</div>
</div>


  body {
 margin: 0px;
 padding: 0px;
 font-family: Arial, Sans-serif;
 font-size: 13px;
}


 #box{
 border: solid 3px grey;
 margin-left: 10%;
 margin-right: 10%;
}

 #left-collumn{
 border: 1px solid red;
 width: 32%;
 float: left;
 }

#pust{
  min-width:4.9%;
  width: auto !important;
  width: 4.9%;
  border: 1px solid black;
  float:left;
 }

#right-collumn{
 width: 43%;
 float: right;
 border: 1px solid green;
 }

Как это выглядит можно увидеть тут: http://concept.ru/ по border серому у div id"box"

Edited February 7, 2010 by ardjuna

Justnewone · January 22, 2010

Хоть вроде и не хорошо как бе некоторые считают, но напишу.

Все Ваши вопросы бородатые дальше некуда и гугляца моментально. Либо предпочитаете репетиторство?

ardjuna · January 22, 2010

Хоть вроде и не хорошо как бе некоторые считают, но напишу.
Все Ваши вопросы бородатые дальше некуда и гугляца моментально. Либо предпочитаете репетиторство?

Если эти вопросы дюже бородатые , то интересно тогда в чем смысл форумов , особенно с разделами для новичков.( в этот раздел "Проблемы верстки" написал лишь потому, что там молчат)/

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

Про overflow: hiden; написанно в чем его суть

hidden

Отображается только область внутри элемента, остальное будет обрезано.

Но зачем это в моем случае я не догоняю.

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

Кстати опишите , что в Вашем понимании есть бородатый вопрос.

Edited January 22, 2010 by ardjuna

ardjuna · January 22, 2010

Итак с overflow: hidden для box прояснил для себя суть , но вот для content в чем потребность overflow для content, я никак не пойму.

Justnewone · January 22, 2010

Кстати опишите , что в Вашем понимании есть бородатый вопрос.

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

psywalker · January 22, 2010

ardjuna

1) overflow: hidden для контента как раз и необходимо, чтобы он расширялся именно до нужной ширины, как он и делает.

2) zoom:1; нужен для ИЕ6 в данном случае, так как этот кал не понимает в некоторых случаях overflow: hidden

3) <!--[if IE 6]>

..........................................

.........................................

</style>

<![endif]-->

ДА, это мы говорим браузеру, чтобы он не реагировал на них. А понимал его только ИЕ6. А вообще советую почитать об условных комментариях для ИЕ6, очень полезное дело.

4) body {width:expression(document.documentElement.clientWidth < 300 ? "300px" : "auto");} - Минимальная ширина экрана, для ИЕ6

5) А теперь по-делу.

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

ardjuna · January 23, 2010

Чуть чуть переделал для соего случая:

<!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>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />

	<style type="text/css">
	*{ margin: 0; padding: 0;}
	div.box {
	width: 100%;
	margin: 0 10%; overflow: hidden;}
		div.left{ float: left; width: 32%; background: red;}
		div.right{ float: left; width: 4.9%; background: blue;}
		div.content{
		float: left;
		 width: 43%;		
		overflow: hidden;  background: green;
		}

	</style>
<!--[if IE 6]>
<style type="text/css">

	body {width:expression(document.documentElement.clientWidth < 300 ? "300px" : "auto");}
	div.box {zoom:1;}
	div.content {
	margin-left: -3px;
	zoom: 1;
	}

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

<body>

	<div class="box">
		<div class="left">Left</div>
		<div class="right">Right</div>
		<div class="content">Content</div>
	</div>

</body>
</html>

Но вот что неясно:

Зачем psywalker прописывал:

div.left { margin-right: -3px; }
	div.right {margin-left: -3px; }

Если это ни на, что не влияло вообще; т.е. у div.left и div.right не возникал 3-х пиксельный отстпуп в IE не сними, не (что Главное) без них.

А вот у div/content отступ в 3пкс был , до тех пор пока я ему не задал также как и у предыдущих блоков float: left;

Про сам трехпиксельный отступ в IE6 при применении float:left пишут везде, но вот причин нигде я не видел, чтобы прописывали(то бишь сам принцип работы IE6) При этом в моём случае, как я понял

 div.left { margin-right: -3px; }
	div.right {margin-left: -3px; }

не требовались,

Так скажите пожалуйста , когда возникают эти трехпиксельные отступы в IE6, а когда нет и почему. Так же почему в моем случае, чтобы убрать трехпиксельный отступ, достаточно было самому div.content прописать float:left; и всё?

Psywalker, спасибо за код.

Edited January 23, 2010 by ardjuna

psywalker · January 23, 2010

ardjuna

Я ставлю так

div.left { margin-right: -3px; }
	div.right {margin-left: -3px; }

потому-что как правило когда я оверфлоу прописываю контенту, то правая и левая колонки уже получают баги. В твоём случае ты не ставил оверфлоу, а повесил на контент флоат, наверное поэтому и всё гуд.

Пожалуйста, приходи ещё.

ardjuna · January 23, 2010

В твоём случае ты не ставил оверфлоу.............наверное поэтому и всё гуд.

Так, а это тогда , что у меня , если не overflow:hidden?

 div.content{
		float: left;
		 width: 43%;		
		overflow: hidden;  background: green;
		}

psywalker · January 23, 2010

Так, а это тогда , что у меня , если не overflow:hidden?
 div.content{
		float: left;
		 width: 43%;		
		overflow: hidden;  background: green;
		}

Ну у тебя же ещё и флоат, а я говорю про отдельный оверфлоу

ardjuna · January 23, 2010

Ну у тебя же ещё и флоат, а я говорю про отдельный оверфлоу

Могу ещё так сказать :

Дело в том , что до того, как я поставил float:left для div.content, у меня всё в IE6 было нормально у div.left и div.right не было бага IE6 в 3px, не нормально было только у самого div.content . у него 3px были, а после float: left ушёл отступ;

Вот как было до вставки float left в IE6 и без:

  div.left { margin-right: -3px; }
	div.right {margin-left: -3px; }

здесь: http://concept.dax.ru в IE6 это видно

можете даже сам код посмотреть

psywalker · January 23, 2010

Могу ещё так сказать :
Дело в том , что до того, как я поставил float:left для div.content, у меня всё в IE6 было нормально у div.left и div.right не было бага IE6 в 3px, не нормально было только у самого div.content . у него 3px были, а после float: left ушёл отступ;
Вот как было до вставки float left в IE6 и без:
  div.left { margin-right: -3px; }
	div.right {margin-left: -3px; }
здесь: http://concept.dax.ru в IE6 это видно
можете даже сам код посмотреть

Ну я говорю,что не знаю, ИЕ6 - это загадка, в нём то может быть, то не может, а почему так происходит, хрен его знает)

ardjuna · January 23, 2010

Да уж верно.

Ну что ж будем ждать и надеяться что "в скором времени" , IE6 изживут все юзезы.

А для этого я тоже подключусь на войну с ним как это делают многие/

Сделаю что-то вроде http://htmlbook.ru/ie6.html.

Psywalker ещё раз спасибо, вы весьма помогаете новичкам, несмотря на нашу нередкую глупость и лень.

psywalker · January 23, 2010

Psywalker ещё раз спасибо, вы весьма помогаете новичкам, несмотря на нашу нередкую глупость и лень.

Всегда рад помочь.

Sign In

резиновый трехколоночный макет с отступами по бокам

Question

Link to comment

Share on other sites

23 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

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