Оцените верстку

[Kronus]

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

Просьба оценить стиль и качество верстки. Макет взял отсюда: http://htmlforum.ru/index.php?showtopic=29381 .Подогнал под 1024px. Сам готовый вариант здесь http://prk-variant.ru/222

Заранее спасибо тем, кто решит покопаться в моей поделке

[npofopr]

Ну в 1024 то и не влазит.

outline на картиночных кнопках лучше убрать. И зачем их было пихать в форму и делать инпутами? о_О

Беграунд надо по другому делать. И видимо через несколько фоновых картинок.

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

[Kronus]

Ну в 1024 то и не влазит.

Точно, проклятый дизайнерский скролл на 10 пикселей недоглядел.

И зачем их было пихать в форму и делать инпутами?

По виду они были похожи на кнопки Хотя надо было, наверное, сделать ссылками.

Беграунд надо по другому делать. И видимо через несколько фоновых картинок. На широкоформатке очень не хорошо будет светлый кругляш отображаться, повторяться по горизонтали. Да и не пихают такие здоровые картинки в беграунд

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

[Bassline]

В IE7-8 все выглядит очень и очень плохо, верстка разъежается, фон разрывается.

[advokatua]

Беглый осмотр:

1) двойные слова в классах на html принято разделять дефисами. Кемел кейс это JS или PHP.

3) Для шрифта почти нигде не задана дополнительная гарнитура.

ИЕ7? забудьте, чем меньше о нем говорить, тем быстрее народ поймет, что его несуществует.

В ИЕ8 да, все бэд.

ЗЫ Даже гиганты послали на 3 буквы всех юзверов ИЕ8 http://habrahabr.ru/post/151536/ а тем-временем бедный верстальщик из Огаповки рисует закругленные уголки под ИЕ6, патамушта так хочет колхозник Вася ))

Edited October 12, 2013 by advokatua

[Struggle]

Беглый осмотр:

1) двойные слова в классах на html принято разделять дефисами. Кемел кейс это JS или PHP.

2) В чем прикол шапке ставить релатив?

header {
background: url(../img/header.png);
height: 128px;
position: relative;
z-index: 2;
}

3) Для шрифта почти нигде не задана дополнительная гарнитура.

ИЕ7? забудьте, чем меньше о нем говорить, тем быстрее народ поймет, что его несуществует.

В ИЕ8 да, все бэд.

ЗЫ Даже гиганты послали на 3 буквы всех юзверов ИЕ8 http://habrahabr.ru/post/151536/ а тем-временем бедный верстальщик из Огаповки рисует закругленные уголки под ИЕ6, патамушта так хочет колхозник Вася ))

Вот именно что беглый осмотр, когда оцениваешь верстку, открывай инспектор, relative нужен для z-index, он в свою очередь закрывает кусочек логотипа.

[advokatua]

Struggle, на картинку не дообратил внимания.

Так если ты такой внимательный, написал бы свои находки или все идеально? )

На картинку смотреть неинтересно потому что там одни косяки:

4) Оступы текста в class="infoFilm" выполнены неверно, смотрите макет.

5) Рисочки в описании текста неверные, смотрим макет.

6) Границы блоков с радиусом неверные, смотрим макет, должна быть прозрачной.

7) Текст в описании фильма оформлен неверно, нет тени, смотрим макет.

8) Постер фильма, тень - очень плохо. Смотрим макет, сравниваем.

9) Шапка - нет тени, смотрим макет.

и т.д.

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

(Это если мы говорим о людях которые стремятся верстать на профи уровне).

Edited October 12, 2013 by advokatua

[Struggle]

Struggle, на картинку не дообратил внимания.

Так если ты такой внимательный, написал бы свои находки или все идеально? )

Второй беглый осмотр, по визуальному совпадению:

4) Оступы текста в class="infoFilm" выполнены неверно, смотрите макет.

5) Рисочки в описании текста неверные, смотрим макет.

6) Границы блоков с радиусом неверные, смотрим макет, должна быть прозрачной.

7) Текст в описании фильма оформлен неверно, нет тени, смотрим макет.

и т.д.

Нарк или что? я прав, а ты в свою очередь отредачил свой пост, я прав.

В следующий раз, пиши с обращением, а то подумал что ты мне написал, ссори за минус.

Да бедному парню исправлять и исправлять, ему хватит того что вы ему насоветовали.

А так не плохо, макет простенький.

Edited October 12, 2013 by Struggle

[Zverushka]

Как-то выглядит слишком круто для первого раза.

Но вообще я не могу понять, почему в 8м осле все расползается? boz-sizing не применялся, так почему на луну все улетело?

Вот я тоже ее кстати верстала, если интересно.

http://zverushka.zz.mu/ruletka/

[Bassline]

Но вообще я не могу понять, почему в 8м осле все расползается? boz-sizing не применялся, так почему на луну все улетело?

Потому, что отсутствует скрипт, который позволяет ослу распозновать теги HTML 5. Автор задал тегу header высоту в пикселях, все на этом и держится, а так как внутри плавающие элементы, и обертка с классом "wrapAll" схлопывается. IE игнорируют тег header и не видит этой высоты, вся шапка схлопывается и содержимое контента въезжает в нее. Если задать классу "wrapAll" overflow:hidden; , то все встает на места.

Edited October 13, 2013 by Bassline

[Николя223]

Беглый осмотр:

1) двойные слова в классах на html принято разделять дефисами. Кемел кейс это JS или PHP.

3) Для шрифта почти нигде не задана дополнительная гарнитура.

ИЕ7? забудьте, чем меньше о нем говорить, тем быстрее народ поймет, что его несуществует.

В ИЕ8 да, все бэд.

ЗЫ Даже гиганты послали на 3 буквы всех юзверов ИЕ8 http://habrahabr.ru/post/151536/ а тем-временем бедный верстальщик из Огаповки рисует закругленные уголки под ИЕ6, патамушта так хочет колхозник Вася ))

чё курим? )

[advokatua]

А по делу что-то слабо сказать? )

ЗЫ Не курю и не пью.

[Kronus]

Спасибо всем за замечания, было полезно знать свои недочеты. Надо будет, наверное, еще учиться.

Как-то выглядит слишком круто для первого раза. Но вообще я не могу понять, почему в 8м осле все расползается? boz-sizing не применялся, так почему на луну все улетело? Вот я тоже ее кстати верстала, если интересно.

Ну так я сразу сказал, что до этого был знаком с html и css. После пары заказов, не совсем удачных, решил поверстать учебные макеты и узнать свои основные ошибки.

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

[Bassline]

Вот я тоже ее кстати верстала, если интересно.

http://zverushka.zz.mu/ruletka/

Можно вопрос по Вашей верстке? В css нашел такое свойство для IE progid:DXImageTransform.Microsoft.gradient(startColorstr=#26000000, endColorstr=#26000000). Откуда такие значения #26000000, в смысле с помощью чего опеределялся нужный цвет и прозрачность, и по какому принципу?

Edited October 14, 2013 by Bassline

[sayapinant]

Глянул во нескольких браузерах. Могу сказать одно: для двухмесячного новичка это огромный прорыв. Молодец! Есть куда расти

[Kronus]

Подключил модернайзер, в 8 осле все встало на места. Кстати, оказалось, что он почему-то не дружит с последней версией jquery, пришлось качать версию 1.7.2. Может, для кого-то это станет неожиданностью.

Чуть позже исправлю остальные недочеты и перезалью.

Могу сказать одно: для двухмесячного новичка это огромный прорыв. Молодец! Есть куда расти

Надеюсь, это не сарказм, спасибо

[sayapinant]

Надеюсь, это не сарказм, спасибо

Нет, не сарказм Совет: когда что-то делаешь, обязательно записывай куда-нить в блокнот все теги, селекторы и т.п. и их назначение с небольшими примерами. В дальнейшем, это поможет тебе, когда будешь уже самомтоятельно делать сайт. Быстро освежишь память. Говорю так, потому что по себе знаю, сколько информации придется напихать себе в голову. Потом путаешься

[Николя223]

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

Это первые пол года - год )) затем хоть в чем можно без особых проблемм разобраться в любом языке

[Bassline]

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

Это первые пол года - год )) затем хоть в чем можно без особых проблемм разобраться в любом языке

Воистину. Год назад думал, что никогда не разберусь во всем этом. Но после, по совету из сети, выкинул дримвивер и стал пользоваться только notepad++, теперь знаю наизусть большинство тегов и свойств css.

Edited October 14, 2013 by Bassline

[Николя223]

Воистину. Год назад думал, что никогда не разберусь во всем этом. Но после, по совету из сети, выкинул дримвивер и стал пользоваться только notepad++, теперь знаю наизусть большинство тегов и свойств css.

я не об этом )) html - по сути это просто)) я за год преодолел и html и javascipt , php + их некотрые фреймворки + перебрал много CMS =) модули для них пишу, свою обновляем, delphi , VB, , c серверами боле-менее разобрался )) С++ при необходимости осмотрю ))) я к тому, что чисто на html зацикливаться не нужно. дальше нужно идти

Edited October 14, 2013 by Николя223

[Bassline]

Воистину. Год назад думал, что никогда не разберусь во всем этом. Но после, по совету из сети, выкинул дримвивер и стал пользоваться только notepad++, теперь знаю наизусть большинство тегов и свойств css.

я не об этом )) html - по сути это просто)) я за год преодолел и html и javascipt , php + их некотрые фреймворки + перебрал много CMS =) модули для них пишу, свою обновляем, delphi , VB, , c серверами боле-менее разобрался )) С++ при необходимости осмотрю ))) я к тому, что чисто на html зацикливаться не нужно. дальше нужно идти

Ну, для меня и html достижение. Моя нынешняя работа никак не связана с вебом, верстку я изучаю в свободное от работы и семьи время, а это в среднем час в день, и то не каждый день. Все то, что Вы описали выше, я смогу освоить разве что к пенсии.))

Это так, хобби.

[Kronus]

http://prk-variant.ru/222/ Теперь в 8 ie все нормально.

Не стал добавлять только второй дизайнерский шрифт, так как при конверте у меня почему-то везде часть некоторых букв "съедается". В остальном основное все доделано: микро-тень под шапкой, фон двумя слоями (метод подсмотрел у Zverushki, только ей не говорите), добавил/изменил тени.

[SelenIT]

Откуда такие значения #26000000, в смысле с помощью чего опеределялся нужный цвет и прозрачность, и по какому принципу?

Это MS-овский формат ARGB (первые 2 16-ричных цифры — альфа-прозрачность, остальные 6 — обычный RGB). В данном случае черный цвет (все нули) с непрозрачностью 0x26 из 0xFF, т.е. 38/255, или 0.149. Т.е. это эквивалент стандартного rgba(0,0,0,.149).

[Zverushka]

http://prk-variant.ru/222/ Теперь в 8 ie все нормально.

Не стал добавлять только второй дизайнерский шрифт, так как при конверте у меня почему-то везде часть некоторых букв "съедается". В остальном основное все доделано: микро-тень под шапкой, фон двумя слоями (метод подсмотрел у Zverushki, только ей не говорите), добавил/изменил тени.

Знал бы ты как я мучалась с этой тенью, полдня пыталась разобраться с понятием "контекст наложения" и z-index в нем туды-сюды)... Может кстати там и косячно даже сделано и можно проще... Какие-то псевдослои... Кстати сложнее макета у меня не было ....

[cris7iano]

Зачем блоку leftBlock и rightBlock установлена фиксир. высота:?а если добавится контент:?

лучше убери высоту и чтоб были нижние отступы пропиши нижний паддинг блокам.

может тебе уже сказали по поводу этого, не читал все сообщения