Ура товарищи!

[Игорь Ермаков]

Мне надоела моя бездарная деятельность и такая же бездарная вёрстка, и как следствие, я начал верстать лучший из лучших в мире шаблонов

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

Вот ссылка: http://portfolio.kg-am.com/first-orange/

Я уже верстал раньше этот макет, получилось плохо. Эта вёрстка тоже далеко не идеальна, теперь хочу задать несколько вопросов по этой вёрстке.

1. Общее. Какие у меня недостатки в самом корне вёрстки, может я верстая таким образом закапываюсь ещё глубже в яму в коей сижу? Пожалуйста прокомментируйте.
   
2. Валидность, не удалось исправить две ошибки, прошу вас объясните мне, что валидатор от меня хочет, я не понимаю.
   
3. Доктайп. Верстал на XHTML1.1 редко где вижу этот доктайп, прошу объяснить про целесообразность использования такого доктайпа.
   

Вот как-то так Направьте в правильное русло друзья

[Fenix]

Что вы прям все верстаете так. Нет чтоб восстановить лупу в фотошопе и нормально поставить возле строки поика как кнопку. Это что так сложно сделать?

[Игорь Ермаков]

Смотри макет, так и задумано.

[Fenix]

Смотри макет, так и задумано.

Сомневаюсь что так задуманно.

[Игорь Ермаков]

Сказал же смотри макет. Зайди в раздел макеты для вёрстки, там эта лупа как раз заезжает за форму слегка. Кстати сделано без z-index.

[Fenix]

Сказал же смотри макет. Зайди в раздел макеты для вёрстки, там эта лупа как раз заезжает за форму слегка. Кстати сделано без z-index.

Мало ли. В раире тоже лупа должна быть такой как там нарисованно? Должна быть "лосуточная концультация" и всекое такое? Везде кнопка поиска расположена рядом, а не под строкой поиска. Так что это может быть баг сохранения.

[Игорь Ермаков]

Никакой это не баг. В раире так только на скрине, в PSD там всё так как должно быть. Этот макет я тоже верстал с PSD. И вообще какие могут быть претензии, как в макете так и в вёрстке, никакой самодеятельности.

[rus]

Автор:

У тебя проблема с сылкой "на не отложные нужды" как в фф, так и в ие, - в опере не смотрел, не знаю.

В фф она нажимается только в одной ее части, а в ие не выделяется вся..., вобщем сам посмотри.

[Игорь Ермаков]

Увидел. И впрямь не удобно. Пёс знат, что это, наверное какой-то элемент накрывает.

[Semreg]

Игорь у тебя пляшут ссылки "На неотложные нужды", "На образование" во всех браузерах...

У меня в 3х вариантах браузеров они выглядят по разному.

в ИЕ6 вообще мрак, как они выглядят.

[lancer]

Какой по счету макет верстаете?

В address надо такие весчи закладывать.

<p>Copyright 2008 - первый оранжевый</p>
<p id="telephon">Многоканальный телефон в Москве: +7(299)234-56-78<br/>
Электронная почта:<a href="#" title="e-mail">info@firstorange.ru</a></p

Titl'ы то тут зачем, и так понятно что каждая ссылка значит, и они не картинками.

И сео-индексация портящая внешний вид этими нелепыми титл-всплываниями, естественно не уместна.

<li><a href="#" title="Малому бизнесу">Малому бизнесу</a></li>
<li><a href="#" title="Финансовым ораганизациям">Финансовым ораганизациям</a></li>
<li><a href="#" title="Ипотечное кредитование">Ипотечное кредитование</a></li>
<li><a href="#" title="Акционерам и инвесторам">Акционерам и инвесторам</a></li>
<li><a href="#" title="Филиальная сеть">Филиальная сеть</a></li>
<li><a href="#" title="Пресс центр">Пресс центр</a></li>

#footer p#telephon{color:#707070; font-size:8pt; position:relative; top:-100px; margin-left:440px}

#telephon он и так один (если, конечно, Вы понимаете, что иднетификатор можеть быть только одним с своим уникальными именем),

так что #footer p -- попросту излишне.

Использование pt прямой путь к разным размерам шрифтов во всех браузерах, используйте % или em, и то если IE6 подразумевается. Иначе px точнее и лучше, поскольку остальные браузеры увеличивают графику пропорционально шрифтам, ну и если Вы согласны с тем, что на слепых пользователей, которые хотят себе заранее выставить относительные размеры, можно чихнуть. А еще лучше использовать и px и % одновременно, px там, где надо быть внимательным к дизайну, а конкретно в тех проблемных местах страницы, где никак нельзя чтобы шрифт не пропорционально дизайну был увеличен и это не лечиться sliding-doors'ами.

Edited September 28, 2009 by lancer

[psywalker]

Какой по счету макет верстаете?

В address надо такие весчи закладывать.

<p>Copyright 2008 - первый оранжевый</p>
<p id="telephon">Многоканальный телефон в Москве: +7(299)234-56-78<br/>
Электронная почта:<a href="#" title="e-mail">info@firstorange.ru</a></p

Не правда, в address можно закладывать только инлайн-элементы

[lancer]

Не правда, в address можно закладывать только инлайн-элементы

Ну это то и так понятно.

Поэтому <p></p>, должны быть заменены на <span></span>.

<address>
<span>Copyright 2008 - первый оранжевый</span>
<span id="telephon">Многоканальный телефон в Москве: +7(299)234-56-78 <br/> Электронная почта:<a href="#" title="e-mail">info@firstorange.ru</a></span>
</address>

[Игорь Ермаков]

Поправил косяк с ссылками. Хочу переверстать меню, подкиньте информации по вёрстке таблицами, я ничего серьёзного не нашёл. Думаю меню нецелесообразно верстать блоками.

[Clayton]

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

С таблицами думаю проблем не будет.

[Игорь Ермаков]

Список тоже хороший вариант, можно поэкспериментировать.

[psywalker]

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

С таблицами думаю проблем не будет.

Может этот чувак Я?

http://psywalker.ru/Portfolio/First-Orange/main-page.html

[Clayton]

Ну, ты потом сделал) А был еще первооткрыватель, скачущего меню списком

[Searcher]

1) нужно ограничение по минимальной ширине, проверьте верстку на разных размерах окна.

2) элементы формы нужно заключать в <p> <div> и т.п.

3) зачем используете этот доктайп, если не читали спецификацию и не понимаете его сути?

Edited October 6, 2009 by Searcher

[psywalker]

1) нужно ограничение по минимальной ширине, проверьте верстку на разных размерах окна.

2) элементы формы нужно заключать в <p> <div> и т.п.

3) зачем используете этот доктайп, если не читали спецификацию и не понимаете его сути?

Друг, у меня вопросы:

1) Разве семантично заключать элементы формы (например Imput) в тег абзаца <p><p>?

2) Я для обрамляющего блочного контейнера в форме использую <fieldset></fieldset>, правильно ли я делаю?

3) Никогда не пользуюсь <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> , потому что считаю его слишком уже и не доработанным, пользуюсь <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> и считаю, что он самый нормальный из всех, не больше - не меньше

[Searcher]

1) А что тут несемантичного? Да и как-то в доках обычно инпуты всякие в параграфе.

2) филдсэт имеет изначально свое оформление и ряд недостатков.

3) солидарен

да еще забыл... при изменениях размера шрифта в броузере вся верстка плывет

[psywalker]

1) А что тут несемантичного? Да и как-то в доках обычно инпуты всякие в параграфе.

2) филдсэт имеет изначально свое оформление и ряд недостатков.

3) солидарен

да еще забыл... при изменениях размера шрифта в броузере вся верстка плывет

Спасибо друг, а ты не мог бы моей вёрстке тоже вердик вынести: http://forum.htmlbook.ru/index.php?showtopic=16410

[Игорь Ермаков]

Searcher, я не понимаю сути ни одного доктайпа, так как все спецификации написаны на английском

Я бы её всю прочитал бы если бы был перевод.

[mishka]

Форму всегда делайте так:

<form action="#">
	<div>
		...
	</div>
</form>

или

<form action="#">
	<fieldset>
		...
	</fieldset>
</form>

Я всегда использую второй вариант, если нет дополнительных требований. И еще legend тоже активно юзаю. Проблем с кроссбраузерностью нет.