pangurban

Спасибо

Привет, камрады. Голова уже не варит, дико туплю.
Такую панельку, как на картинке можно сверстать без js чтоб при наведении загорались звезды до и та, на которую навели?
Подкиньте пример или идейку.
И как такая вещь называется? А то ведь даже загуглить не получается.

1. учись сразу делать правильно, а не проще.

2. там больше подойдет article

    http://web-standards.ru/articles/avoiding-html5-mistakes/

    http://html5doctor.com/downloads/h5d-sectioning-flowchart.pdf

6,7. нужно всегда предполагать что что-то может измениться, текста станет больше/меньше и сразу пытаться сделать гибкую структуру

1. все изображения, которые не являются контентом делать фоном.

2. при увеличении и уменьшении шрифта есть некоторые косяки.

3. если уж используешь html5 элементы, то разберись с их семантикой.

4. спрайты

5. Сделай нормальное лого.

6. текст справа от кассеты не обтекает изображение (когда его много)

7. А если в месте, где написано Mar 18th будет December 18th?

разные мелочи по css и структуре разметки - это с опытом придет.

Вроде ко всему что заметил придрался, если нет, батьки подскажут)

1. кодировку нужно ставить перед тайтлом

2. все стили объединять в один файл

3. использовать спрайты

4. существуют другие элементы, кроме div

5. много не нужных css правил, таких как height: 100%; и width: 100%;

6. много фиксированных высот. Из-за них верстка не гибкая, при добавлении текста все плывет

7. нет ховеров

8. кнопка прокрутки слайдера залезла на текст

9. на текст который нужно было сверстать!

10. в галерее убрал правый отступ не у того изображения

11. ну и разные мелочи

Сетка хаотичная получилась, упростить надо, имхо.

Что в ней хаотичного?

Как бы ты упростил?

Друзья, а почему у меня в данном случае текст не выравнивается? http://jsfiddle.net/fzuk9qxm/6/

Таким способом выравниваются блоки фиксированных размеров. Пропиши высоту

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

<script>

$(document).ready(function() {

$('.bxslider').bxSlider({

pagerCustom: '#bx-pager'

});

});

</script>

Пожалуйста, хватит(

Всем привет. Выкладываю очередную работу.

Если администрация будет против, создам новую тему.

http://pangur.bget.ru/shop/

Что бы вы сверстали по другому? Почему?

Явные ошибки верски, недочеты или то, что сверстано не удобно в плане разметки и стилей.

А в ST есть live кодинг?

Для этого использую gulp. Перезагрузка идет мгновенно, без задержки

Проще говоря кочуют ли стили из "верхних"(больших разрешений) @media queries в нижние(маленькие разрешения)

Да

Подумайте над ситуацией, когда исходники вашей верстки будут утеряны. И другому разработчику, после вас, будет очень сложно вычищать из ваших стилей все ваши @extend %clearfix; и т.п. Куда проще ему будет просто убрать у элемента класс .clearfix.

Не совсем понимаю в чем сложность между убрать %clearfix у элемента из таблицы стилей и удалить у того же элемента класс в разметке?

По моему, разница лишь в том, что в первом случае нужно будет в редакторе нажать ctrl+f и найти нужный селектор. Зато разметка становится чище.

Нет?

Какие еще классы для clearfix? На дворе 2014 год. Используйте препроцессоры.

%clearfix{  &:after{    container: '';    display: table;    clear: both;  }}ul{  @extend %clearfix;}

Что бы фон не сжимался нужно контейнерам прописывать минимальную ширину.

.color1{  min-width: 1014px;}

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

Хочу - не хочу... Нельзя так сделать.

overflow: hidden скрывает все что выходит за пределы его элемента

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

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

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

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

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>

и т.д.

http://discover.store.sony.com/be-moved/

Именно так не сделать. Для чего тут нужен overflow?

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

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

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

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

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

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

7. и.д.

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

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

У меня web developer стоит. Плагин для лисы. С помощью него Alt + Shift + L

Или ссылку вставить. Без разницы

А куча ошибок может быть из-за того, что проверял не разметку, а стили по версии 2.1