Jump to content
  • 0

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

Unsiker

Asked by Unsiker,

 Share

Question

Unsiker Explorer

Unsiker

Posted
Posted

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

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

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

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

0063b8df76d4633aea41a953d3402a6b.jpg

Link to comment
Share on other sites

19 answers to this question

Recommended Posts

  • 0
psywalker Explorer

psywalker

Posted
Posted (edited)

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 by psywalker
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted (edited)

Unsiker

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

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

Edited by psywalker
Link to comment
Share on other sites
  • 0
Unsiker Explorer

Unsiker

Posted
  • Author
Posted
Unsiker

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

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

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

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

Link to comment
Share on other sites
  • 0
Unsiker Explorer

Unsiker

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

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

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

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

div.content { zoom: 1; }

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted (edited)

Ну вот так вот уж точно должно работать:

<!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 by psywalker
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

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

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

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

Link to comment
Share on other sites
  • 0
Aleko Explorer

Aleko

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

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept