Первый шаг

[MadMax]

Здравствуйте, уважаемые !

Оцените, пожалуйста, мою первую верстку BusinessName.com

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

з.ы. сорри, что создал тему с обсуждением в этом разделе, но надож с чего-то начинать

Edited August 16, 2011 by MadMax

[amelice]

Здравствуйте, уважаемые !

Оцените, пожалуйста, мою первую верстку BusinessName.com

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

з.ы. сорри, что создал тему с обсуждением в этом разделе, но надож с чего-то начинать

Сама недавно сверстала этот макет. И вижу, что у вас некоторые ошибки такие же как у меня были:

1. Виден четкий градиент на шапке.

Применила метод от psywalker.

2. Разноцветный список внизу -> если добавить текста к правой стороне, то он по макету не должен обтекать дату с левой стороны.

У вас обтекает.

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

Бэкграунд меню идет вместе с линиями. Нужно было сделать левой или правой рамкой самих пунктов меню.

Вдруг нужно будет добавить еще пункты?

4. Может быть, слово Search нужно было в элемент label писать, а не h2. Добавить отступы между элементами формы.

[MadMax]

cheburek, спасибо за замечания!

1. Градиент поборол, вроде все ровненько

2. Список поправил. Если я вас правильно понял, он должен выглядеть так

3. Сделал как надо

4. Честно говоря - не понял, на кой тут label нужен ??

[amelice]

4. Честно говоря - не понял, на кой тут label нужен ??

Для установки связи со словом search и элементом формы.

Вы использовали элемент h2, но слово searh не имеет ценной информации как заголовок, а просто подсказывает что за форма.

Поэтому мне так кажется, что для этого слово логичнее использовать элемент label.

[kidrock]

MadMax

1) в основной колонке, попробуйте добавить текст в абзацах, увидите как он сливается в кашу - нет отступов.

2) в процессе "борьбы" с градиентом вы просто вставили изображение на задний фон большего размера, чем было до этого, в результате минимальная ширина сайта увеличилась до размера 1200px, что очень плохо, еще рано делать ставки на такие разрешения =)

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

4) неравномерность отступов между абзацами в хедере (придирки конечно, но все же не высший пилотаж, заказчик может придраться)

5) поле ввода для поиска слишком короткое, выглядит непропорционально

6) нет отступа текста в том же поле ввода поиска

В целом замечания больше не по коду, так как я сам в этом еще не профессионал, но качественная верстка подразумевает в себе все эти аспекты, по моему скромному мнению.

[MadMax]

Ага, над градиентом и остальным еще поработать надо будет

[MadMax]

Не могу понять - почему в FF и IE при уменьшении масштаба пропадает вертикальная разделительная линия между левой и правой колонками основного блока ?

[amelice]

Не могу понять - почему в FF и IE при уменьшении масштаба пропадает вертикальная разделительная линия между левой и правой колонками основного блока ?

Линия у вас сделан бэкграундом (1pxХ1px) блока #main. Нарисуйте эту линию обычным бордером. Она у вас исчезает при сильно уменьшенном разрешении масштаба.

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

Edited July 30, 2011 by cheburek

[MadMax]

cheburek, в том и дело что при дальнейшем уменьшении масштаба она опять появляется! Посмотрел макет от psywalkerа - там та же фигня.

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

kidrock, по вашим замечаниям вроде все отработал, не понял только про п.4

Edited July 29, 2011 by MadMax

[amelice]

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

Я сама тоже делала бордером одному из блоков. Но это не правильно. Так как высота блоков зависит от контента, то такое решение имеет место быть при идельной равной высоте двух блоков.

Поэтому, я бы сейчас поступила так, создала б абсолютно позиционированный div.border внутри оберточного блока #main,и прописала бы следующие правила:

.border{
    top: 0;
    bottom: 0;
    left: 50%;
    position: absolute;
    width: 1px;
    background:#D6E4E8;
    }

Но не уверена, что это хороший вариант...

а #main присвоить relative.

[Shift-Web]

бездумное именование классов и их избыточность

[MadMax]

бездумное именование классов и их избыточность

а как должно выглядеть продуманное именование классов ?

[MadMax]

Но не уверена, что это хороший вариант...

Сделал линию отдельным абсолютно позиционированным блоком - вроде выглядит нормально

[psywalker]

Но не уверена, что это хороший вариант...

Сделал линию отдельным абсолютно позиционированным блоком - вроде выглядит нормально

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

А в целом, всё очень грязно.

[MadMax]

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

Не, просто интересно было, че это - косяк верстки или глюк ИЕ

А в целом, всё очень грязно.

А вот про это очень хотелось бы узнать подробнее