Покритикуйте верстку

[Sabay]

Привет всем! Покритикуйте верстку, http://sportclabchel.ru  что где не так, или что где было бы лучше, конкретного вопроса именно по этому шаблону задать не могу, все было понятно (насколько я могу понять!),  по этому ценна любая критика! От 9 эксплорера должно отображаться корректно. Всем заранее спасибо

[pangurban]

1. не выставлен min-width у элементов с фоном на всю ширину экрана

2. простые тени делаются с помощью box-shadow

3. не правильно используешь элементы strong, em, i

4. таблицы для табличных данных

5. фиксируешь высоту там, где это не нужно

6. очень много лишней разметки!

7. и.д.

 

Бери макеты попроще.

Edited October 11, 2014 by pangurban

[Sabay]

1. А зачем фиксировать горизонтальный фон, именно в этом случае? Пусть он будет где можно на ширину 100%, в чем плохо?

2.Какие именно тени? Если как у центральной части то расскажите подробнее как их надо было сделать? Я думал чтоб создать слой ниже центр части и задать ему box-shadow, но не придумал как сделать чтоб он растягивался, а так как сейчас тень начинается с отступами от краев, что красиво, и при растягивании контента она растянется.

3.В чем неправильно использую em strong  и i ?  Семантика?

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

5. Пожалуйста если можно покажите пример точнее, где лишняя фиксация высоты, за что премного благодарен.

6.Опять же пример приведите пожалуйста.

7.Считаю что макет простой.

Благодарю за критику, но хотелось бы по подробнее, у книг учиться хорошо! Но у собеседника еще лучше!

[pangurban]

1. приблизь страницу и прокрути вправо

2. почитай про box-shadow

3.

<p>  <strong> Items per page: </strong>  <em>12</em>  <em>20</em>  <i>30</i>  <span>50</span></p>

4. Что бы было проще стилизовать нужно учиться разбивать макет на логические блоки, элементы.

5. .product, .center-bg, .bottom-status-bar и т.д.

6. из этого:

<div class="bottom-status-bar">  <div class="wrapper">    <div class="bottom-nav">      <ul>        <li>          <a title="Home" href="#1"> Home </a>        </li>      </ul>    </div>  </div></div>

получаем это:

<div class='nav-wr'>  <nav class='nav'>    <a href='/'> Home </a>  </nav></div>

и т.д.

Edited October 11, 2014 by pangurban

[Sabay]

О!  прочел как max-width! так и ответил, да принято! минимальную ширину фона исправил, например 1600px это нармальный размер или в таком случае можно сделать больше?

По оптимизации логики понятно буду работать в этом направлении.

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

Какие еще замечания кроме того что перечислил, на что еще стоит обратить внимание? Спасибо!

хех! исправить исправил тока теперь шаблон по ширине прокручивается!))

Исправил

[pangurban]

О! прочел как max-width! так и ответил, да принято! минимальную ширину фона исправил, например 1600px это нармальный размер или в таком случае можно сделать больше?

 

Это минимальная ширина. Какие 1600? В твоем случае 960.

 

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

 

Лучше сверстать немного, но правильно

[Sabay]

Переделал разметку с em  strong и I на span, так будет лучше?

960 это ширина части с контентом, хедер и футор по шаблону выходят за контент и ширина их 1200px,

посмотри по span

[pangurban]

элемент "p" там не в тему, это не параграф с текстом

[Sabay]

убрал