Оцените верстку

[Sergik+]

Друзья у меня творческие муки, сверстал шаблон и уже неделю

сижу и не могу понять что не так http://sergik1.esy.es/

 

Некоторые мелочи не доделал пока, хотел сделать иконки шрифтом но не все нашел,

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

 

Скажу вам одно этот макет сильно раскрывает глаза на верстку, второй раз сверстаю

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

[Get to heaven]

Сашка грей   Эх, у меня пока не выходит, долго ли шаманил ?

[Sergik+]

Часов 30 примерно.

[Temiks]

сижу и не могу понять что не так http://sergik1.esy.es/

Хорошо было бы, если бы сделал полурезину, на 1280рх полоса прокрутки

Так же в левом меню ссылку сделал бы на все строчку вместе с иконкой. (так же hover эффекты добавил бы, но то уже по желанию.)

И да, шрифт нужно править, в некоторых местах его практически не видно.

 

p.s спрайт иконок вручную делал или каким-то сервисом?

Edited September 15, 2014 by Temiks

[Sergik+]

 

сижу и не могу понять что не так http://sergik1.esy.es/

Хорошо было бы, если бы сделал полурезину, на 1280рх полоса прокрутки

Так же в левом меню ссылку сделал бы на все строчку вместе с иконкой. (так же hover эффекты добавил бы, но то уже по желанию.)

И да, шрифт нужно править, в некоторых местах его практически не видно.

 

К сожалению макет такой, его даже в 1366 не впихнуть, а про резину забудьте навсегда.

Шрифт думаю затемнить, буду адаптировать макет )))

 

 

Весь css делал в sass, спрайты делал compass, написал небольшой миксин.

Вставляю спрайт примерно так, @include s (имя спрайта), всего одна строчка

и даже не знаю размеров спрайта )

Edited September 15, 2014 by Sergik+

[Temiks]

К сожалению макет такой, его даже в 1366 не впихнуть, а про резину забудьте навсегда. Шрифт думаю затемнить, буду адаптировать макет )))

Я в общем помудрил в вашем макете, позадавал левому, центральному и правому блоку display: table-cell, vertical-align: top; убрал минимальную ширину в 1400рх, и все встало на свои места, практически, только осталось центральные колонки контента(ленту пользователя) задать в процентах с использованием box-sizing: border-box и отступы. (при этом немного рассыпалось навигационное меню слева)

И почему вы предлагаете забыть про полурезину?

Edited September 15, 2014 by Temiks

[Sergik+]

 

К сожалению макет такой, его даже в 1366 не впихнуть, а про резину забудьте навсегда. Шрифт думаю затемнить, буду адаптировать макет )))

Я в общем помудрил в вашем макете, позадавал левому, центральному и правому блоку display: table-cell, vertical-align: top; убрал минимальную ширину в 1400рх, и все встало на свои места, практически, только осталось центральные колонки контента(ленту пользователя) задать в процентах с использованием box-sizing: border-box и отступы. (при этом немного рассыпалось навигационное меню слева)

И почему вы предлагаете забыть про полурезину?

 

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

что не есть хорошо. Я думаю здесь адаптивность необходима.

[DivMan]

Изображения выходят из-за границ, этот так и есть или косяк?

 

[Sergik+]

Изображения выходят из-за границ, этот так и есть или косяк?

 

Типа фишка макета )

[Temiks]

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

Думаю макет рисовался для FullHD экранов, а для меньших разрешений должен уже продумывать верстальщик, что ли.

Но все же, я не забил бы на разрешение 1280, т.к по статистике вк это примерно 3.5-3.8 миллионов пользователей в сутки и это редизайн соц. сети.

 

 

 

Весь css делал в sass, спрайты делал compass, написал небольшой миксин. Вставляю спрайт примерно так, @include s (имя спрайта), всего одна строчка и даже не знаю размеров спрайта )

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

Edited September 15, 2014 by Temiks

[Sergik+]

 

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

Думаю макет рисовался для FullHD экранов, а для меньших разрешений должен уже продумывать верстальщик, что ли.

Но все же, я не забил бы на разрешение 1280, т.к по статистике вк это примерно 3.5-3.8 миллионов пользователей в сутки и это редизайн соц. сети.

 

 

 

Весь css делал в sass, спрайты делал compass, написал небольшой миксин. Вставляю спрайт примерно так, @include s (имя спрайта), всего одна строчка и даже не знаю размеров спрайта )

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

 

http://www.youtube.com/user/uwebdesign/videos

[Temiks]

http://www.youtube.c...ebdesign/videos

Благодарю.

[sigma77]

Недоделок очень много.

1. Отсутствуют ховеры.

2. Активные элементы не показаны, отсутствует хотя бы cursor: pointer

3. Центрирование картинок нужно сделать универсальным, а не подгонять каждую отступами, а также всё-таки ограничить их ширину

4. Строки с многоточием должны обрезаться, а не вставляться вручную. На такие элементы также должен вешаться title по-хорошему.

5. То что по макету должно быть ссылкой, в верстке сделано не ссылкой.

6. Скрипты ты, возможно не делал, но тот же атач делается чистым css.

7. В форме поиска ни скрепка, ни смайлик самбитом не являются. А самой кнопке я бы type="submit" всё-таки добавила. Да саму бы форму обернула бы в <form>

8. Почему лого - это <i>?

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

10. Отступы у абзацев обнулены, а новые не заданы.

[Sergik+]

Недоделок очень много.

1. Отсутствуют ховеры.

2. Активные элементы не показаны, отсутствует хотя бы cursor: pointer

3. Центрирование картинок нужно сделать универсальным, а не подгонять каждую отступами, а также всё-таки ограничить их ширину

4. Строки с многоточием должны обрезаться, а не вставляться вручную. На такие элементы также должен вешаться title по-хорошему.

5. То что по макету должно быть ссылкой, в верстке сделано не ссылкой.

6. Скрипты ты, возможно не делал, но тот же атач делается чистым css.

7. В форме поиска ни скрепка, ни смайлик самбитом не являются. А самой кнопке я бы type="submit" всё-таки добавила. Да саму бы форму обернула бы в <form>

8. Почему лого - это <i>?

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

10. Отступы у абзацев обнулены, а новые не заданы.

У меня cursor:pointer работает на ховере.

По поводу элементов меню, правильно ли их выделять подчеркиванием (может и правильно).

Строки с многоточием, интересная идейка. Насчет атач не понял ?

Лого переделаю, отступы добавлю, насчет таблиц тоже сомневался.

 

А и самое главное как картинки равнять, сделать дополнительную обертку ?

Кстати прочитал что на главной странице лого не надо делать ссылкой.

Edited September 15, 2014 by Sergik+

[xzarxzes]

.album_social {  width: 165px;  float: right;  position: absolute;  right: 20px;  bottom: 5px; }

Тут не нужен float: right

[Sergik+]

.album_social {  width: 165px;  float: right;  position: absolute;  right: 20px;  bottom: 5px; }

Тут не нужен float: right

 

Упс, спасибо осталось от экспериментов случайно )

[sigma77]

По поводу элементов меню, правильно ли их выделять подчеркиванием (может и правильно).

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

http://clip2net.com/s/iUT0cK

Кстати прочитал что на главной странице лого не надо делать ссылкой.

Это давний холивар. Я делаю ссылкой, но в любом случае, имхо лого должно быть картинкой.

Ну и опять же тема достаточно спорная, но спрайты семантичней делать всё-таки спаном.

[Sergik+]

 

По поводу элементов меню, правильно ли их выделять подчеркиванием (может и правильно).

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

http://clip2net.com/s/iUT0cK

Кстати прочитал что на главной странице лого не надо делать ссылкой.

Это давний холивар. Я делаю ссылкой, но в любом случае, имхо лого должно быть картинкой.

Ну и опять же тема достаточно спорная, но спрайты семантичней делать всё-таки спаном.

 

Ох спасибо за такой развернутый ответ, буду исправляться )

Насчет спрайтов я боюсь это холивар, как бы i короче span, я это подсмотрел

у Юрия Артюха, в бутстрапе тоже так сделано.

Edited September 15, 2014 by Sergik+

[xzarxzes]

Мне кажется нет разницы span или i, я где то даже, может быть, читал что в бутстрапе сделали i - это значит icon и это более семантично чем спан. И вроде их везеде вставляли всегда i'ами, не только в бутстрапе.

 

upd: тоесть это для иконочных шрифтов, а не для спрайтов. Можно вообще обойтись без этого лишнего элемента и сделать класс у которого будет :before с этой иконкой и добавлять его к ссылке, как в вашем случае, но это лишняя возня, а спрайты, да наверно все таки лучше спаном делать

Edited September 15, 2014 by xzarxzes

[Sergik+]

Друзья гляньте еще раз верстку, начал переделывать и почему то на буке на ослике последнем

под восьмеркой шапка разваливается, игнорирует inline-block (((

[sigma77]

http://htmlbook.ru/html5/semantics - читай где-то с середины.

Суть в том, что IE8 не понимает новых тегов и не применяет к ним стили пока не добавишь эти теги через js

[Sergik+]

http://htmlbook.ru/html5/semantics - читай где-то с середины.

Суть в том, что IE8 не понимает новых тегов и не применяет к ним стили пока не добавишь эти теги через js

Как говорится напиши на форуме и сразу разберешься, проблема была в ширине просто не влазило.

IE последний стоит.

[Sergik+]

Посмотрите еще пожалуйста, у меня на mozile последней под восьмеркой блок с друзьями нормально выглядит а под семеркой разваливается (

Я уже знаю как это можно исправить, но может это у меня какой то плагин так верстку ломает ?

[Нарек]

в хроме тоже ломается.

можете вытянуть этот кусочек на jsfiddle?

Так то решается проблема если добавить нижний отступ у 

<span>60 friends</span>

только хотелось бы взглянуть почему так.

А все не надо. Проблема именно в этом, это инлайн блок.

 

p.s. А имитировать ссылки задавая картинкам cursor: pointer нехорошо))

Edited September 16, 2014 by Нарек

[Sergik+]

в хроме тоже ломается.

можете вытянуть этот кусочек на jsfiddle?

Так то решается проблема если добавить нижний отступ у 

<span>60 friends</span>

только хотелось бы взглянуть почему так.

А все не надо. Проблема именно в этом, это инлайн блок.

 

p.s. А имитировать ссылки задавая картинкам cursor: pointer нехорошо))

Ох спасибо помог ) Я оказывается забыл блок целый вырезать где как раз был inline-block, он и перебивал стили )