Надеюсь на конструктивные советы по верстке

[shvv]

Сверстал на досуге еще один макет: http://shvv.pp.ua/enviroment/.

Хотел бы услышать комментарии по верстке.

[Justnewone]

Сверстал на досуге еще один макет: http://shvv.pp.ua/enviroment/.

Хотел бы услышать комментарии по верстке.

Вцелом вроде ниче.

Но при большом разрешении получается вот так:

[shvv]

Вцелом вроде ниче.

Но при большом разрешении получается вот так:

Это при 1920?

Да, наверное, нужно сделать большую картинку для спрайта.

[Great Rash]

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

Дизайн в целом простенький, но приятный.

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

[psywalker]

Вцелом вроде ниче.

Но при большом разрешении получается вот так:

Да, а у меня вообще блок развалился в ФФ, в остальном вроде нормал, макет не сложный.

Кстати минималку бы я сделал ещё меньше, 1000пк - это многовато для такого макета.

[shvv]

Хотел бы уточнить - макет бесплатный. Откуда скачал - уже не помню. Дизайн не переделывал, хотелось сделать наооборот, как можно точнее.

Спрайт увеличил: теперь ширина 570пкс. (570-20)/0,28=1964пкс. Теперь при больших должно смотреть нормально.

По высоте тоже предполагается, что значительного переполнения не будет.

min-width взял из psd макета.

[lavr-ik]

Смотрю вы разбираетесь в верстке, поэтому позволю себе несколько "глубоких" комментариев

1. .header ul - раньше использовал такие же селекторы, подкупало чистотой и опрятностью html-кода. Все стало очень плохо, когда через некоторое время вновь не пришлось работать со своей версткой, где в хедер добавили еще один список, в результате чего произошла нехорошая каша. С тех пор поступаю так: <div class="header"><ul class="header-navmenu">. HTML теряет сексуальность, CSS раздувается, зато верстка получает армированный каркас. В CSS при таком именовании не указываю родителя, т.е. .header {... } .header-navmenu {...}, а не .header .header-navmenu {...}, что позволяет легко портировать блоки с места на место и со страницы на страницу (в Яндексе почему-то наоборот рекомендуют прописывать родителя).

2. Все-таки никогда не смогу оценить отсутствие max-width, но это, признаю, чистая вкусовщина и холивар.

3. Как было правильно замечено профессионалом веб-верстки, элементы лучше именовать играя от их контента, а не от физического расположения, которое в дальнейшем легко может измениться (т.е. не .header_down, а .header-intro, например.

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

5. Старайтесь не привязывать в CSS правила к имени элемента: это значительно сокращает вашу гибкость при дальнейших изменениях. Указывать же тэг элемента для селектора с id, как минимум, странно.

6. Я CSS форматирую табуляцией исходя из уровня вложенности элементов друг в друга (имитирую древовидную структуру). При размере CSS в 2 000 строк и больше время экономит катастрофически.

7. Любые условия отступов лучше прописывать в полном виде (margin: 10px 0 0; а не margin-top: 10px). Опять же, при дальнейшей поддержке все, что вам нужно будет сделать, это заменить одну цифру, тогда как в противном случае необходимо будет дописывать целое правило.

Вроде все, благодарю за внимание.

[psywalker]

Хотел бы уточнить - макет бесплатный. Откуда скачал - уже не помню. Дизайн не переделывал, хотелось сделать наооборот, как можно точнее.

Спрайт увеличил: теперь ширина 570пкс. (570-20)/0,28=1964пкс. Теперь при больших должно смотреть нормально.

По высоте тоже предполагается, что значительного переполнения не будет.

min-width взял из psd макета.

Опять при заполнении высота рушит всё.

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

[shvv]

Смотрю вы разбираетесь в верстке, поэтому позволю себе несколько "глубоких" комментариев

1. .header ul - раньше использовал такие же селекторы, подкупало чистотой и опрятностью html-кода. Все стало очень плохо, когда через некоторое время вновь не пришлось работать со своей версткой, где в хедер добавили еще один список, в результате чего произошла нехорошая каша. С тех пор поступаю так: <div class="header"><ul class="header-navmenu">. HTML теряет сексуальность, CSS раздувается, зато верстка получает армированный каркас. В CSS при таком именовании не указываю родителя, т.е. .header {... } .header-navmenu {...}, а не .header .header-navmenu {...}, что позволяет легко портировать блоки с места на место и со страницы на страницу (в Яндексе почему-то наоборот рекомендуют прописывать родителя).

2. Все-таки никогда не смогу оценить отсутствие max-width, но это, признаю, чистая вкусовщина и холивар.

3. Как было правильно замечено профессионалом веб-верстки, элементы лучше именовать играя от их контента, а не от физического расположения, которое в дальнейшем легко может измениться (т.е. не .header_down, а .header-intro, например.

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

5. Старайтесь не привязывать в CSS правила к имени элемента: это значительно сокращает вашу гибкость при дальнейших изменениях. Указывать же тэг элемента для селектора с id, как минимум, странно.

6. Я CSS форматирую табуляцией исходя из уровня вложенности элементов друг в друга (имитирую древовидную структуру). При размере CSS в 2 000 строк и больше время экономит катастрофически.

7. Любые условия отступов лучше прописывать в полном виде (margin: 10px 0 0; а не margin-top: 10px). Опять же, при дальнейшей поддержке все, что вам нужно будет сделать, это заменить одну цифру, тогда как в противном случае необходимо будет дописывать целое правило.

Вроде все, благодарю за внимание.

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

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

В отношении древовидного форматирования - интересный совет. Нужно будет попробовать.

Опять при заполнении высота рушит всё.

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

Согласен. Во время работы продумывал и более сложные варианты. Если бы закругленные уголки были у блока с контентом, делал бы по другому. А этот вариант с 4 дивами и 1 спрайтом - по-моему, очень красивый и логичный для небольшого блока.

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

[vvsh]

shvv, это опять павел, который собирался уходить.

[shvv]

shvv, это опять павел, который собирался уходить.

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

<div class="corn tl"></div>
<div class="corn tr"></div>
<div class="corn bl"></div>
<div class="corn br"></div>
<div class="lt"></div>
<div class="lb"></div>

Не элегантно имхо, и при высоком разрешении экрана едет.

Почитайте Чикуёнка и другие блоги, там масса более красивых решений вёрстки таких вот блоков. А лучше сам придумай. +)

А теперь добавьте в сайдбар ещё текста и посмотрите что будет.

6-й динозавр рвёт вёрстку.

[shvv]

Не элегантно имхо, и при высоком разрешении экрана едет.

Почитайте Чикуёнка и другие блоги, там масса более красивых решений вёрстки таких вот блоков. А лучше сам придумай. +)

А теперь добавьте в сайдбар ещё текста и посмотрите что будет.

6-й динозавр рвёт вёрстку.

Это как раз и есть рецепт Чикуёнка в чистом виде.

В отношении высоты - согласен. Этот метод только для небольших блоков.

А чем вы тестируете под IE6? У меня IETester все нормально показывает.

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

# ну значит посылаем Чикуёнка и делаем всё сами.

# тем более посылаем, есть более универсальные и простые решения.

# а у меня на машине IE6 установлен, при помощи какой-то фигни с хабра, но не IE тестер.

# уверяю вас если вы пять минут будете сосредоточенно смотреть на мой аватар, то полюбому сможете придумать более лучий способ вёрстки сайдбара, и ещё ваш IQ повысится на 5 баллов, но это я пока не проверил, а вот про вёрстку эт я вам гарантирую!

[klierik]

хорошая чистая верстка.

хотя сайт то масинький, даже и не знаю чем можно было бы тут испаганить её =)

анне... все же внесу свои 5 копеек

рисунок:

url(../i/flower.png)

вырезан криво.. ну или так нарисован...

в общем стебель "покусанный"

[shvv]

# ну значит посылаем Чикуёнка и делаем всё сами.

# тем более посылаем, есть более универсальные и простые решения.

# а у меня на машине IE6 установлен, при помощи какой-то фигни с хабра, но не IE тестер.

# уверяю вас если вы пять минут будете сосредоточенно смотреть на мой аватар, то полюбому сможете придумать более лучий способ вёрстки сайдбара, и ещё ваш IQ повысится на 5 баллов, но это я пока не проверил, а вот про вёрстку эт я вам гарантирую!

Кстати, у меня тоже в Multi**** IE были проблемы. А в тестере нормально. Наверное, нужно виртуалку с реальным 6, потому что эти тестеры ненадежно показывают.

Про аватар потренируюсь на досуге.

хорошая чистая верстка.

хотя сайт то масинький, даже и не знаю чем можно было бы тут испаганить её =)

анне... все же внесу свои 5 копеек

рисунок:

url(../i/flower.png)

вырезан криво.. ну или так нарисован...

в общем стебель "покусанный"

Спасибо. Это, понятно, не реальный проект.

цветочек не вырезал. Такой был в psd - он то бесплатный )

[Dessss]

Могу сильно придраться? Придраться?

[psywalker]

Могу сильно придраться? Придраться?

Что значит можешь? Возьми и опиши все косяки на твой взгляд конечно-же, зачем спрашиваешь.