Вёрстка макета Global

[Vin]

Макет взят отсюда.

Макет в jpg.

PSD-исходник.

Ну и сама вёрстка IE7+.

Комментарий: макет включал в себя платный шрифт Droid Sans, поэтому в баннере (в верхней области) и в блоке с полем email вставил картинками, в верхнем меню заменил, так как предполагается, что пункты в меню могут меняться после интеграции в движок. Доктайп выбрал html5, но новые теги не использовал для кроссбраузерности. Фоны страницы тянутся до ширины в 1200px, как в исходном макете.

[cyklop77]

в 62 строке забыл id заполнить. и хотелось бы больше ховер-эффектов на ссылках. а вообще симпатично

upd:

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

на кнопках сабмит и море по вертикали текст выровнен по разному. так в макете было? (опера, фокс линукс)

Edited February 8, 2012 by cyklop77

[Vin]

Ховеры не знаю как тут делать: в макете это не отображено, можно было бы сделать ссылки посветлее, но в макете они и так сделаны #fff. Текст в шапке сделан картинкой, т.к. там шрифт платный, покупать или воровать не хотелось.

div без идентификатора поправлю, хотя надо приучаться для css использовать классы, а id — больше для программинга. Впредь буду верстать на классах.

на кнопках сабмит и море по вертикали текст выровнен по разному. так в макете было? (опера, фокс линукс)

Макет есть и в PSD, и в jpg — см. первый пост.

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

[klierik]

ещё один фанат лепить ID

Ну вот скажи, с чего ты взял что надо использовать ID а не .class?

[Vin]

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

Да, ещё, блок контента и размеры шрифтов сделал фиксированными, т.к. предположил, что это презентационная страница.

[skygazer]

Опа, я этот макетик тоже делал кстати. Как и все остальные макеты с дивхака, вплоть до того макета со слайдером.

Но если элемент встречается один раз на странице - зачем лепить класс, если можно влепить айди? Да и пользователю все равно айди или класс, он-то гнилыми помидорами не закидает если все работает.

Могу сюда скинуть как я сделал, с ховерами. Похвастаться хочется, да Ховер на самом деле ничего сложного, посмотри тут в справочнике, разберешься.

Кстати попробуй свернуть страничку в лисе, например, и посмотри налево. По-моему не очень красиво, сейчас гляну как у меня с этим дела.

Edited February 8, 2012 by skygazer

[klierik]

Учту, учту. С жёстким разграничением id и class ориентироваться гораздо легче

Как? как запись #header вместо .header помогает ориентироватся в коде?

Но если элемент встречается один раз на странице - зачем лепить класс, если можно влепить айди?

Зачем вообще на странице лепить id если для этих целей был придуман .class?

ну вот кто-то из вас обоих мне скажет с чего вы взяли что надо использовать ID вместо .className?

[skygazer]

Ну не знаю, а для чего ж тогда айди использовать? У айди по-моему функция вполне схожая с классом, только он более конкретный.

[sigma77]

Ну не знаю, а для чего ж тогда айди использовать?

- скрипты

- якоря

[skygazer]

Хорошо, тогда использовать его для слоев - не комильфо? Или разрешается в каких-то определенных случаях?

[sigma77]

Хорошо, тогда использовать его для слоев - не комильфо? Или разрешается в каких-то определенных случаях?

Лучше не использовать.

К тому же без них прекрасно можно обойтись.

[ablay2009]

Хорошо, тогда использовать его для слоев - не комильфо? Или разрешается в каких-то определенных случаях?

Лучше не использовать.

К тому же без них прекрасно можно обойтись.

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

P.S. Если я все-таки не прав, дайте ссылку на статью, в которой написано почему надо использовать только классы.

[Vin]

Hover'ы-то я знаю как делать, но не знаю, как их стилизовать в данном случае, чтобы не портили дизайн.

Заменил id на class'ы, в "нормальных браузерах" от ie7 всё нормально, в ie6 верстка поехала окончательно — людям со слабой психикой лучше не смотреть!