Оцените верстку пожалуйста (исправлено). Я новичок

[aknur]

Здравствуйте!

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

И оцените пожалуйста верстку!

Валидатор ошибок не выдал. Сказал все хорошо =)

Буду очень благодарен!

Сайт на народе!

Скачать архив с сайтом:

СКАЧАТЬ 1

СКАЧАТЬ 2

Edited January 15, 2011 by aknur

[Vlad]

"Народ" не поддерживает utf, для него надо в Win-1251 переводить.

border="0" у картинок лишнее, бордер через стили убирается, если что. Альтернативного текста кое-где не хватает, не думаю, что "народ" их убрал намеренно.

[aknur]

"Народ" не поддерживает utf, для него надо в Win-1251 переводить.

border="0" у картинок лишнее, бордер через стили убирается, если что. Альтернативного текста кое-где не хватает, не думаю, что "народ" их убрал намеренно.

Спасибо за отзыв, по макету это все ?

В остальном все отлично ?

[deadrash]

1. Для чего нужна такая конструкция?

<div id="logo">
						<a href="#"><img border="0" alt="GreenOrange" src="images/logo.jpg"></a>
					</div>

<div> тут лишний.

2. Зачем в "ul#top_menu li a" используется background-image: в виде однотонной картинки? Можно было просто написать background-color:#4DAC00;

3. блок #line_center совершенно не нужен, эту картинку можно вставить фоном просто в body.

4. в #col1 и #col2 вначале идут картинки "who we are" и "what we do", а это должны быть заголовки. скорей всего h2. используй технику image-replacement Если не знаешь как, с радостью объясню и помогу.

5. в #col1 у первой картинки неправильный alt.

6. в двух местах заметил <div style="clear: both;"></div>. Он у тебя не нужен нигде. Для #content просто напиши - overflow: hidden;

7. лучше исправить.

8. Для кнопок "read more" не указан alt. alt должен быть указан всегда, если в него нечего написать то пиши просто пустой альт - alt=""

9. На страничке очень много br, в реальности ни один br не нужен.

На этом форуме много обсуждалось на счёт повсеместного использования id вместо class, к единому мнению не пришли, но одно точно могу сказать - class в отличии от id не осуждается.

p.s. CSS не смотрел.

Edited January 15, 2011 by deadrash

[aknur]

1. Для чего нужна такая конструкция?

<div id="logo">
						<a href="#"><img border="0" alt="GreenOrange" src="images/logo.jpg"></a>
					</div>

<div> тут лишний.

2. Зачем в "ul#top_menu li a" используется background-image: в виде однотонной картинки? Можно было просто написать background-color:#4DAC00;

3. блок #line_center совершенно не нужен, эту картинку можно вставить фоном просто в body.

4. в #col1 и #col2 вначале идут картинки "who we are" и "what we do", а это должны быть заголовки. скорей всего h2. используй технику image-replacement Если не знаешь как, с радостью объясню и помогу.

5. в #col1 у первой картинки неправильный alt.

6. в двух местах заметил <div style="clear: both;"></div>. Он у тебя не нужен нигде. Для #content просто напиши - overflow: hidden;

7. лучше исправить.

8. Для кнопок "read more" не указан alt. alt должен быть указан всегда, если в него нечего написать то пиши просто пустой альт - alt=""

9. На страничке очень много br, в реальности ни один br не нужен.

На этом форуме много обсуждалось на счёт повсеместного использования id вместо class, к единому мнению не пришли, но одно точно могу сказать - class в отличии от id не осуждается.

p.s. CSS не смотрел.

3. исправил 30 минут назад встало как по маслу.

4. Я с радостью приму новую информацию и буду благодарен вам! Я не знаю что такое image-replacement и у некоторых нет такого шрифта как на макете. Объясните пожалуйста подробно все это =)

p.s. все остальные пункты уже исправляю

и еще, если поставить в #content свойство overflow:hidden;

то в col1 не будет видна картинка read more

[deadrash]

Про image replacement в инете написано много инфы, техник замен текста картинкой довольно много.

Опишу самую подходящею на мой взгяд технику для данной ситуации, к тому же это самая простая техника.

Для начала Делаем заголовок и пишем в него наш текст, перед текстом вставляем нашу картинку с красивым вариантом шрифта текста:

<h2 class="head-1" ><img alt="" src="картинка.жпг" >who we are</h2>

Далее: нам известно что картинка имеет размер 155px в ширину и 23px в высоту, выставляем эти размеры для нашего заголовка и пишем заголовку свойство overflow:hidden; - таким образом всё что не поместится в габариты нашего h2, не будет отрисовано. А мы знаем что в габариты нашего заголовка поместится только картинка, так как она имеет размер такой же как и у заголовка.

.head-1{
  width:155px;
  height:23px;
  overflow:hidden;
}

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

Отключаем картинки вставленные в заголовки. Проще всего это сделать написав неправильный адрес к картинкам. так как мы не указывали размер для самих картинок и не указывали для них alt, то при отключении картинки уже не занимают весь размер своего контейнера (в нашем случае это заголовок h2), таким образом текст заголовка который до этого выталкивался нашей картинкой за границу заголовка, теперь виден. В зависимости от браузера, катринка либо полностью исчезает как в FF либо сворачивается в небольшую пиктограмму габариты которой я не помню. Теперь наша задача при отключённой картинке уразмерить текст таким образом что бы он полностью был виден во всех браузерах, тексту так же можно задать цвет и выбрать более-менее похожий шрифт (гарнитуру).

Для некоторых вариантов можно указывать alt, в таком случае после картинки должен стоять пробел, либо для картинки задать display:block; что бы текст писался ниже alt при отключённой картинке.

и еще, если поставить в #content свойство overflow:hidden;

то в col1 не будет видна картинка read more

Странно, не должно быть, по крайней мере у меня всё нормально. Edited January 15, 2011 by deadrash

[aknur]

Про image replacement в инете написано много инфы, техник замен текста картинкой довольно много.

Опишу самую подходящею на мой взгяд технику для данной ситуации, к тому же это самая простая техника.

Для начала Делаем заголовок и пишем в него наш текст, перед текстом вставляем нашу картинку с красивым вариантом шрифта текста:

<h2 class="head-1" ><img alt="" src="картинка.жпг" >who we are</h2>

Далее: нам известно что картинка имеет размер 155px в ширину и 23px в высоту, выставляем эти размеры для нашего заголовка и пишем заголовку свойство overflow:hidden; - таким образом всё что не поместится в габариты нашего h2, не будет отрисовано. А мы знаем что в габариты нашего заголовка поместится только картинка, так как она имеет размер такой же как и у заголовка.

.head-1{
  width:155px;
  height:23px;
  overflow:hidden;
}

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

Отключаем картинки вставленные в заголовки. Проще всего это сделать написав неправильный адрес к картинкам. так как мы не указывали размер для самих картинок и не указывали для них alt, то при отключении картинки уже не занимают весь размер своего контейнера (в нашем случае это заголовок h2), таким образом текст заголовка который до этого выталкивался нашей картинкой за границу заголовка, теперь виден. В зависимости от браузера, катринка либо полностью исчезает как в FF либо сворачивается в небольшую пиктограмму габариты которой я не помню. Теперь наша задача при отключённой картинке уразмерить текст таким образом что бы он полностью был виден во всех браузерах, тексту так же можно задать цвет и выбрать более-менее похожий шрифт (гарнитуру).

Для некоторых вариантов можно указывать alt, в таком случае после картинки должен стоять пробел, либо для картинки задать display:block; что бы текст писался ниже alt при отключённой картинке.

Странно, не должно быть, по крайней мере у меня всё нормально.

Спасибо, все сделал и исправил, работает.

А можно ваше icq ?

[deadrash]

Можно на ты, аськой пользуюсь очень редко. 422709088

Сразу попробую ответить на возможные вопросы.

7. Шрифт в линуксе рисуется немного шире виндового, из за этого строка не поместилась в габариты, тут можно либо задать свойство white-space:nowrap; для li что бы текст не разбивался на строки, либо учитывать возможность писать эти пункты списка в несколько строк и ухитрится сделать такую разъезжающею картинку.

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

Edited January 15, 2011 by deadrash

[x-wave]

А зачем тебе в Body бэграунд и в line_center один и тотже ? ...кодировку провер у фавикона ерогливы...