кроссбраузерная верстка 3-х столбцов

Unsiker · May 16, 2009

Прошу помощи дизайнеров.

Есть у меня тривиальная задача. Но не получается у меня все красиво сделать. Мне нужно сверстать главную страницу, а именно информационную часть (то что находится между header и footer).

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

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

psywalker · May 16, 2009

Unsiker Не за что

<!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>Content</title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
	body{ min-width: 800px; }
div.left { float: left; width: 200px; background: #f00; }
div.right { float: right; width: 240px; background: #03F; }
div.content { background: #C63; margin: 0 240px 0 200px; }



</style>
	 <!--[if IE 6]>
		<style type="text/css">
html body {
width:expression(document.documentElement.clientWidth < 800 ? "800px" : "auto");
}
	   </style>
	 <![endif]-->
</head>

<body>
<div class="left">LEFT</div>
<div class="right">RIGHT</div>
<div class="content">Есть у меня тривиальная задача. Но не получается у меня все красиво сделать. Мне нужно сверстать главную страницу, а именно информационную часть (то что находится между header и footer).
В таблицах такое делается без проблем, но вот Дивами у меня никак не получается.
Во вложении нарисовано как это должно выглядеть. Помогите с версткой. </div>
</body>
</html>

Edited May 16, 2009 by psywalker

Unsiker · May 16, 2009

>psywalker спасибо за грамотный ответ. Действительно то что я искал.

Но у меня вопрос: стоит хак для ИЕ 6 значит для остальных браузеров все будет валидно отображатся ????

psywalker · May 16, 2009

Unsiker

Но у меня вопрос: стоит хак для ИЕ 6 значит для остальных браузеров все будет валидно отображатся ????

Видишь, я написал его в специальныx комментариях, которые понимает только ИЕ6, поэтому всё будет валидно, но я бы тебе посоветовал всё равно создавать отдельный файл стилей специально для броузеров IE6-7

Edited May 16, 2009 by psywalker

Unsiker · May 16, 2009

Unsiker
Видишь, я написал его в специальныx комментариях, которые понимает только ИЕ6, поэтому всё будет валидно, но я бы тебе посоветовал всё равно создавать отдельный файл стилей специально для броузеров IE6-7

Сделать то не проблема, но не хочу что б юзеры ИЕ грузили себе 2 файла стилей.

psywalker · May 16, 2009

Unsiker

Сделать то не проблема, но не хочу что б юзеры ИЕ грузили себе 2 файла стилей.

А ты хочешь , чтобы юзеры ИЕ грузили себе разваленный сайт?

Unsiker · May 16, 2009

Unsiker
А ты хочешь , чтобы юзеры ИЕ грузили себе разваленный сайт?

Сайт не разваленый, проверил по разным браузерам в том числе и ИЕ. Все отображается коректно.

psywalker · May 16, 2009

Сайт не разваленый, проверил по разным браузерам в том числе и ИЕ. Все отображается коректно.

Да я не про это, я хочу сказать про то, что Эти Комментарии придуманы специально для Любимых броузеров, потому что в них всегда приходиться чтото переделывать или поправлять, вот поэтому если писать все стили в Общем файле, тогда и отображение может быть разным в обычных броузерах и в ИЕ6-7, а лишний лист файлов на загрузку не повлияет, зато будет всё красиво смотреться везде :blink:

Unsiker · May 16, 2009

Да я не про это, я хочу сказать про то, что Эти Комментарии придуманы специально для Любимых броузеров, потому что в них всегда приходиться чтото переделывать или поправлять, вот поэтому если писать все стили в Общем файле, тогда и отображение может быть разным в обычных броузерах и в ИЕ6-7, а лишний лист файлов на загрузку не повлияет, зато будет всё красиво смотреться везде

полностью с Вами согласен .... тем более что проверив сайт через Браузер хост увидел что в ИЕ 6 и ИЕ 5 верстка криво пошла, а именно средний блок сместился в самый низ посмотреть можно тут. Подскажите как исправить?

psywalker · May 16, 2009

полностью с Вами согласен .... тем более что проверив сайт через Браузер хост увидел что в ИЕ 6 и ИЕ 5 верстка криво пошла, а именно средний блок сместился в самый низ посмотреть можно тут. Подскажите как исправить?

Вот я про то и говорю, допишите в комментариях для ИЕ6 вот эту строку:

div.content { zoom: 1; }

А про ИЕ5 вообще забудьте, это даже динозавром назвать нельзя, это дикий ужас доисторических времён, Большой Баг эпохи динозавров :blink:

Unsiker · May 16, 2009

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

psywalker · May 16, 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>Content</title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
	body{ min-width: 800px; }
div.left { float: left; width: 200px; background: #f00; }
div.right { float: right; width: 240px; background: #03F; }
div.content { background: #C63; overflow: hidden; }

</style>
	 <!--[if IE 6]>
		<style type="text/css">
html body {
width:expression(document.documentElement.clientWidth < 800 ? "800px" : "auto");
}
div.content { zoom: 1; }
	   </style>
	 <![endif]-->
</head>

<body>
<div class="left">LEFT</div>
<div class="right">RIGHT</div>
<div class="content">Есть у меня тривиальная задача. Но не получается у меня все красиво сделать. Мне нужно сверстать главную страницу, а именно информационную часть (то что находится между header и footer).
В таблицах такое делается без проблем, но вот Дивами у меня никак не получается.
Во вложении нарисовано как это должно выглядеть. Помогите с версткой. </div>
</body></html>

Edited May 16, 2009 by psywalker

Игорь Ермаков · May 17, 2009

Прошу помощи дизайнеров

А причём здесь вообще дизайн?

ZooY · May 22, 2009

Посмотри вот здесь, там все написано подробно

http://flack.ru/2008/02/01/semantic-coding-howto-4/

Searcher · May 22, 2009

это знаменитый 3-х пиксельный баг ИЕ6

он добавляет отступ к плавающему блоку ровно в 3 пиксела

psywalker · May 22, 2009

это знаменитый 3-х пиксельный баг ИЕ6
он добавляет отступ к плавающему блоку ровно в 3 пиксела

Да, и лечится он так: В Файле для IE6 Плавающему элементу прописываем так: margin-right: -3px;

s0rr0w · May 22, 2009

Да, и лечится он так: В Файле для IE6 Плавающему элементу прописываем так: margin-right: -3px;

Лучше лечить display: inline

Searcher · May 22, 2009

Лучше лечить display: inline

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

antonP · May 26, 2009

тыкс.. тыкс.. Интересно

Aleko · June 12, 2009

Прошу помощи дизайнеров.
Есть у меня тривиальная задача. Но не получается у меня все красиво сделать. Мне нужно сверстать главную страницу, а именно информационную часть (то что находится между header и footer).
В таблицах такое делается без проблем, но вот Дивами у меня никак не получается.

Вот точная кроссбраузерная верстка с центральной резиновой колонкой и двумя фиксированными по бокам. А тут ещё 15 примеров различных версток.

Sign In

кроссбраузерная верстка 3-х столбцов

Question

Link to comment

Share on other sites

19 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

Join the conversation

Обсуждения

Important Information