Верстка в учебных целях

[shvv]

В тренировочных целях сверстал бесплатный шаблон psd. Буду благодарен за какие-либо советы в отношении верстки.

Адрес: http://shvv.fbdhost.com/cookonline/.

IE6 и IE7 попили немало кровушки, но кажется получилось . Или можно было лучше?

Edited October 22, 2009 by shvv

[Clayton]

Да вроде смотрится... Правда есть ошибки.

<h1>Welcome
to our company</h1>

они у вас не по доктайпу идут. Нужно так - <br />

Ну и еще есть подобные ошибки. Так-то всё норм. Ровно.

Edited October 23, 2009 by Clayton

[psywalker]

В тренировочных целях сверстал бесплатный шаблон psd. Буду благодарен за какие-либо советы в отношении верстки.

Адрес: http://shvv.fbdhost.com/cookonline/.

IE6 и IE7 попили немало кровушки, но кажется получилось . Или можно было лучше?

А вот это значит: Что никто не видит кроме ИЕ7? <!--[if IE]><![if !(lte IE 7)]><![endif]-->

[Clayton]

Гг... Я сейчас вот так начал делать:

<!--[if (gt IE 5)&(lt IE 7)]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

Работает с 5-го по 7-й ие... В 8-м у нас ведь теперь всё нормально, типо

[rash]

А почему бы просто не сделать [lt IE 8]?

[Clayton]

А почему бы просто не сделать [lt IE 8]?

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

Довайте по подробнее пожалста)

[Clayton]

Вообще точно, lt - меньше чем гг... Действительно пофиг же, главное ниже 8-го... Спасибо за мыслю

[shvv]

Да вроде смотрится... Правда есть ошибки.

<h1>Welcome
to our company</h1>

они у вас не по доктайпу идут. Нужно так - <br />

Ну и еще есть подобные ошибки. Так-то всё норм. Ровно.

Видно уже так надоело, что под конец забыл проверить валидатором.

А вот это значит: Что никто не видит кроме ИЕ7? <!--[if IE]><![if !(lte IE 7)]><![endif]-->

Не видит IE меньше, либо равно 7 версии. Начало и конец этой конструкции

 <![if !(lte IE 7)]> <тег></тег> <![endif]-->

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

Вообще вся эта история началась из-за картинки в углу. Она должна идти выше фона, но ниже текста. Но текст является потомком #wrapper #content #navigation #search #p, а картинка просто #wrapper #div. В нормальных браузерах z-index работает по всему документу, если родителю не задан z-index. В IE7 и ниже любой позиционированный элемент создает стековый контекст, поэтому, чтобы картинка была выше текста див с ней должен обязательно находиться на одном уровне с p. Но это привело к другим проблемам: теперь див не могу позиционироваться относительно нижнего левого угла. Поэтому и решил, чтобы это было только для 6 и 7 IE.

Подробнее о баге http://www.quirksmode.org/bugreports/archi..._index_bug.html

А почему бы просто не сделать [lt IE 8]?

Это не валидно.

[rash]

Это не валидно.

Что именно?

[shvv]

Исправил мелкие ошибки. Теперь валидно. http://shvv.fbdhost.com/cookonline/

Что именно?

Конструкция такого рода

<![if "условие"]> HTML <![endif]>

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

[rash]

Исправил мелкие ошибки. Теперь валидно. http://shvv.fbdhost.com/cookonline/

Конструкция такого рода

<![if "условие"]> HTML <![endif]>

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

А что мешает сделать так:

<!--[if !IE]>--><link rel="stylesheet" href="style.css"><!--<![endif]-->
<!--[if IE]><link rel=stylesheet href="style_for_buggy_ie.css"><![endif]-->

[shvv]

А что мешает сделать так:

<!--[if !IE]>--><link rel="stylesheet" href="style.css"><!--<![endif]-->
<!--[if IE]><link rel=stylesheet href="style_for_buggy_ie.css"><![endif]-->

Отличный вариант. Прошу прощения за бескомромиссность.

Edited October 23, 2009 by shvv

[psywalker]

shvv

Слушай, я тут заметил ты спец по таким штукам(<!--[if !IE]>) , у меня вопрос к тебе:

Ты случайно не знаешь, как прописать комментарий, что-бы всё что в нём находится, не видел ТОЛЬКО ИЕ той версии, которая в нём прописана?

Тоесть другими словами: Какую такую хрень <!--[if !IE]>--><DIV></DIV><!--<![endif]--> нужно прописать, что-бы все браузеры видели элемент <DIV></DIV>, а тот, который написан тут <!--[if !IE]>(какой то ИЕ, 6,7 или 8) - не видел?

[WalkMan]

вот такой треш в опере 8

Version 8.53

Edited October 24, 2009 by WalkMan

[Dimitry Wolotko]

вот такой треш в опере 8 smile.gif

Version 8.53

В нейтскейпе посмотрели?

[psywalker]

вот такой треш в опере 8 smile.gif

Version 8.53

А в K-Meleon смотрел?

[WalkMan]

что стоит в том и смотрел

[shvv]

shvv

Слушай, я тут заметил ты спец по таким штукам(<!--[if !IE]>) , у меня вопрос к тебе:

Ты случайно не знаешь, как прописать комментарий, что-бы всё что в нём находится, не видел ТОЛЬКО ИЕ той версии, которая в нём прописана?

Тоесть другими словами: Какую такую хрень <!--[if !IE]>--><DIV></DIV><!--<![endif]--> нужно прописать, что-бы все браузеры видели элемент <DIV></DIV>, а тот, который написан тут <!--[if !IE]>(какой то ИЕ, 6,7 или 8) - не видел?

Про спеца это конечно сильно.

На самом деле опирался на статью http://zodios.net/htmlcss/ifcomments.html

Но учитывая предложение эксперта rash можно сделать еще проще, чем описано в статье.

<!--[if !(IE 7)]>--><link rel="stylesheet" href="style.css"><!--<![endif]-->

Все браузеры увидят, кроме IE 7. Или можно подставить свой вариант.

В нейтскейпе посмотрели?

Edited October 25, 2009 by shvv

[WalkMan]

ну если ТС планирует зарабатывать версткой на хлеб с водой,

то надо быть готовом с любым капризам заказчиков

[shvv]

ну если ТС планирует зарабатывать версткой на хлеб с водой,

то надо быть готовом с любым капризам заказчиков

В отношении капризов согласен.

Но статистика показывает, что доля Опера 8 - 0.2%. http://www.liveinternet.ru/stat/ru/browser...od=month;page=2

Edited October 27, 2009 by shvv

[Glebr]

вёрстка может и ничего, а вот дизайн...