Замечания по верстке

[Heidel]

Посмотрите, пожалуйста, правильно ли сделана верстка http://web-portfolio1.narod.ru/index5/index.html, выскажите замечания.

*Ссылки на комменты и continue reading под постами кликабельны и ведут на вторую страницу верстки.

[Heidel]

посмотрите кто-нибудь, пожалуйста

[sigma77]

Вот что сразу бросается в глаза

1. Страница оочень долго грузится.

2.<meta http-equiv="Content-type" content="text/html; charset=utf-8"> - зачем? В HTML5, который вы обозначили есть более короткая запись <meta charset="UTF-8">

3. Используйте классы вместо идентификаторов.

4. <div id="header">, <div id="nav", <div id="sidebar">, <div id="footer"> - зачем Если есть <header>, <nav>, <aside>, <footer>.

3.

<div id="logo">
  <h1><a href="javascript:void(0)" title="">
    <img src="images/logo.png" title="" alt="Дизайн блога">
  </a></h1>
</div>

div - лишний

4. html, body {height: 100%;} - зачем?

5. Навигацию логично было бы разместить в хедере.

6. rss также в хедер и я бы прибила её абсолютом

7. #main {width: 930px;} - зачем? У вас и так задана ширина у врапера

8. #categories, #archives - зачем им флоат?

9. <div class="hFooter"></div> - лишний элемент. Есть способы очистки потока без использования лишней разметки.

10. Используются избыточные селекторы. Старайтесь, чтобы в селекторе было не более 2-3 элементов.

11. <div id="search"> - лишний

12. #search form .searchField {background: url('../images/search_field_background.png') no-repeat;}

Зачем тут картинка? Всё это легко делается и css.

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

13. Очень много отрицательных марджинов.

[Heidel]

sigma77, большое спасибо что посмотрели верстка была по возможности поправлена с учетом замечаний

[pashkje]

зачем лого брать h1? Это же не логично и поисковым системам не понравится ход ваших мыслей

[stan07]

Видал в одной верстке такой вот способ

<div class="logo"><h1><a href="#"><span>Какой-нибудь текст</span></a></h1></div>

.logo{
	background:url(logo.png)
}
.logo span{
	display:none;
}
.logo a{
	display:block;
	width:100px;
        height:100px;
}

Бред?

Edited December 10, 2012 by stan07