Jump to content
  • 0

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


aknur
 Share

Question

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

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

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

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

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

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

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

СКАЧАТЬ 1

СКАЧАТЬ 2

Edited by aknur
Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0

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

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

Link to comment
Share on other sites

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

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

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

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

Link to comment
Share on other sites

  • 0

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. s_1295096585_8562eccf31.png лучше исправить.

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

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

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

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

Edited by deadrash
Link to comment
Share on other sites

  • 0
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. s_1295096585_8562eccf31.png лучше исправить.

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

Link to comment
Share on other sites

  • 0

Про 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

Странно, не должно быть, по крайней мере у меня всё нормально. s_1295102745_6d734bf8f0.png Edited by deadrash
Link to comment
Share on other sites

  • 0
Про 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 при отключённой картинке.

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

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

Edited by deadrash
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy