Нужна критика. Pangurban

[pangurban]

Здравствуйте камрады. Ситуация следующая. Верстаю около полугода и за все время не догадался выставить свои работы на обозрение, получить обратную связь. Поэтому представления о сложности и качестве верстки полностью субъективные.

Если вы не против, то буду иногда выкладывать свои работы в этой теме.

Хочу получить максимум критики и если верстка, действительно плохая мне нужно это знать.

 

http://pangur.bget.ru/rt-3/

 

Что скажете на счет этого?

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

Edited October 14, 2014 by pangurban

[klierik]

весь html/css сжат, смотреть неначто

[pangurban]

весь html/css сжат, смотреть неначто

 

Буду знать. Разжал обратно

[Crystal-3]

Было интересно посмотреть вашу вёрстку, так как у меня тоже опыт где-то месяцев 6-7.

Код мне ваш понравился и, в общем-то, покритиковать не нашла что.

Разве что несколько советов:

У доктайпа HTML5 кодировка пишется <meta charset="UTF-8">.

Сердечко сделайте тоже спрайтом.

Зачем подключена библиотека jQuery?

[pangurban]

У доктайпа HTML5 кодировка пишется <meta charset="UTF-8">.

 

Да, в курсе. Подсмотрел что на хабре так же сделанно и с толку сбило

 

Зачем подключена библиотека jQuery?

 

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

Edited October 9, 2014 by pangurban

[klierik]

интересно, а вот для чего тут комментарии?

       <nav class="nav"><!--            --><a href="#q">Home</a><!--            --><a href="#q">Blog</a><!--            --><a href="#q">Portfolio</a><!--            --><a href="#q">Photos</a><!--            --><a href="#q">Extras</a><!--            --><a href="#q">Contact</a>        </nav>

а еще вот тут зачем 9000px

.sidebar {overflow: hidden;padding: 45px 10px 9000px;margin: 0 0 -9000px 0;background: url(../img/bg_gray.jpg);}

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

[hypnocolor]

Полагаю, теги комментариев добавлены, как способ убрать пробелы между инлайн-блоками. Но в данном случае это не нужно, поскольку у вас меню на float:left; сделано.

Поправлюсь: не нужно для того меню, что в шапке страницы.

Edited October 9, 2014 by hypnocolor

[pangurban]

1. Комментарии для того, что бы между инлайн блоками не было пробелов.  Но у меня там на флоатах. Проглядел, что уж.

 

2. 9000px для того, чтобы сайдбар казался равным по высоте блоку контетна и имел запас если высота контента увеличится.

[xsladfs]

опыта пока у меня нету, но разве тени в идеале не должны быть реализованы средствами css ?

[klierik]

1. Комментарии для того, что бы между инлайн блоками не было пробелов.  Но у меня там на флоатах. Проглядел, что уж.   2. 9000px для того, чтобы сайдбар казался равным по высоте блоку контетна и имел запас если высота контента увеличится.

1. Данный подход, как правило, можно обойти более доступными способами. Он себя изжил

2. А под какие браузеры версталось? Ибо это спокойно реализуется через d:t и d:t-c

 

опыта пока у меня нету, но разве тени в идеале не должны быть реализованы средствами css ?

Всё правильно, тени в данной работе отстают по уровню. К тому времени когда разработчик уже сам знает как что делать то выкладывать работы уже не обязательно

В данном случае тень хорошо бы легла через :after { ... }

[pangurban]

1. Данный подход, как правило, можно обойти более доступными способами. Он себя изжил

2. А под какие браузеры версталось? Ибо это спокойно реализуется через d:t и d:t-c

 

Да, точно. Исправил.

Верстал чтоб более-менее нормально отображалость в ie8

 

В данном случае тень хорошо бы легла через :after { ... }

 

там через after сделан clearfix. Если нужны сразу две тени, то :after и :before заняты, clearfix уже не всунуть. Это ж нужно будет оборачивать в еще один блок. Или я что-то упустил?

[klierik]

там через after сделан clearfix. Если нужны сразу две тени, то :after и :before заняты, clearfix уже не всунуть. Это ж нужно будет оборачивать в еще один блок. Или я что-то упустил?

 

тут ошибка в самом подходе...

по-хорошему контейнер, на который вешается тень, не должен иметь занятые :before, :after, так как такие конструкции, по хорошему, которые отвечают непосредственно за layout, должны быть индивидуальными. они могут быть частью блока, но не должны мешать его простейшей реализации.

 

это не идеальный подход и порой требует увеличение кода на пару тегов, но зато универсален.

 

Наглядно (схематично) абстрактный пример можно описать так (emmet):

.block>.block-content>.col2-set>.col*2>ul.block-list>li.item*3>a[href="#"]{$}

в таком случае лейаут для контента блока будет сам по себе, а блок и его элементы сами по себе. а тень, в данном случае, можно повесить на .block:after {}

[pangurban]

.block>.block-content>.col2-set>.col*2>ul.block-list>li.item*3>a[href="#"]{$}

в таком случае лейаут для контента блока будет сам по себе, а блок и его элементы сами по себе. а тень, в данном случае, можно повесить на .block:after {}

 

 

как-то так?

http://jsfiddle.net/9oa0t4nq/2/

Edited October 10, 2014 by pangurban

[klierik]

как-то так? http://jsfiddle.net/9oa0t4nq/2/

 

давай её немного упростим: http://jsfiddle.net/9oa0t4nq/3/

[pangurban]

давай её немного упростим: http://jsfiddle.net/9oa0t4nq/3/

 

Тогда если мало текста получаем вот это: http://jsfiddle.net/9oa0t4nq/4/

Тут то и нужен clearfix. А на .block его не повесить там :after занят под тень.

Тогда либо делать обертку и уже к ней :after с тенью, либо вставлять тень элементом в разметке.

Как-то так я понял.

[klierik]

ах да, ты прав... совершенно вылетело проверить контент.

тогда так: http://jsfiddle.net/9oa0t4nq/6/

[pangurban]

Точно, не обязательно же сам блок отчищать. Спасибо)

[pangurban]

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

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

 

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

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

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

[klierik]

            <div class="social"><!--                --><a href="#q" title="rss" class="ico_rss"></a><!--                --><a href="#q" title="facebook" class="ico_facebook"></a><!--                --><a href="#q" title="twitter" class="ico_twitter"></a><!--                --><a href="#q" title="flickr" class="ico_flickr"></a><!--                --><a href="#q" title="google" class="ico_google"></a>            </div>

заканчивай ты с этими комментариями... а то программер возьмет твой код, забьет на каменты и вставит разметку, и все -- посыпалось )))

[pangurban]

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

[Georgyi]

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

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

Логотип смотрится как на корове седло (впрочем, это уже не по верстке))

[pangurban]

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

 

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

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

Edited October 14, 2014 by pangurban