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

[ETishka]

Здравствуйте, оцените пожалуйста верстку http://etishkina.github.io/fitness-club/pages/

[Cherous]

Красивенько. Мелочи, которые режут мой глаз:

• Футер не по центру (на 15px сдвинут влево) и к низу страницы можно еще его приклееть.
• 3 цветные линии в левом верхнем углу шириной по 3.95882819%. Не принципиально конечно, но почему не по 4% они?)
• Кнопки в формах не cursor:pointer. 

P.S. Понравились некоторые "белые" фотки в галереи.   

[ETishka]

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

[webmasterFast]

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

Добавь вторую строчку, сюда

 

aside ul.list {

1. margin: 0 0 15px 0;
2. clear: both;

}

[ETishka]

Просмотры растут, а критика нет. Я не правильно оформила тему?

[xzarxzes]

Просмотры растут, а критика нет. Я не правильно оформила тему?

Зачем у вас  float: right; и position: absolute; right: 0; у навигации. Все заголовки у вас h1 и они находятся в div'ах, об этом я узнал из валидатора. Еще мне показалась подозрительной кнопка "read more", в слайдере, думаю что можно было и обойтись без обертки div.button вокруг нее. И вот что случается если в какой-нибудь из параграфов добавить текста http://postimg.org/image/mwmltptt7/.

Edited June 6, 2014 by xzarxzes

[ETishka]

Просмотры растут, а критика нет. Я не правильно оформила тему?

Зачем у вас float: right; и position: absolute; right: 0; у навигации. Все заголовки у вас h1 и они находятся в div'ах, об этом я узнал из валидатора. Еще мне показалась подозрительной кнопка "read more", в слайдере, думаю что можно было и обойтись без обертки div.button вокруг нее. И вот что случается если в какой-нибудь из параграфов добавить текста http://postimg.org/image/mwmltptt7/.

Про float и текст посмотрю. Валидацию проверила каждой страницы и CSS. Единственные ошибки которые показывает это то что я не ставлю alt у изображений. Ни в одном месте я не нашла что бы отдельно h1 был обернут в Div. Единственное что возможно стоило заменить див на article, так как в див завернуто название и текст к нему относящийся.

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

Edited June 6, 2014 by ETishka

[xzarxzes]

 

 

Просмотры растут, а критика нет. Я не правильно оформила тему?

Зачем у вас float: right; и position: absolute; right: 0; у навигации. Все заголовки у вас h1 и они находятся в div'ах, об этом я узнал из валидатора. Еще мне показалась подозрительной кнопка "read more", в слайдере, думаю что можно было и обойтись без обертки div.button вокруг нее. И вот что случается если в какой-нибудь из параграфов добавить текста http://postimg.org/image/mwmltptt7/.

Про float и текст посмотрю. Валидацию проверила каждой страницы и CSS. Единственные ошибки которые показывает это то что я не ставлю alt у изображений. Ни в одном месте я не нашла что бы отдельно h1 был обернут в Div. Единственное что возможно стоило заменить див на article, так как в див завернуто название и текст к нему относящийся.

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

 

Про кнопку я не очень понял что вы имеете ввиду. Вот две кнопки, одна ваша с div.button вокруг нее, а одна без http://jsfiddle.net/xzarxzes/jSeuG/1/. 

 

 Line 97, Column 8: Consider using the h1 element as a top-level heading only (all h1 elements are treated as top-level headings by many screen readers and other tools).

Валидатор

Edited June 6, 2014 by xzarxzes

[ETishka]

Да с текстом надо поправить, с кнопкой видимо действительно лишний DIV, а про заголовки это предупреждение, а не ошибка. Возможно следовало заголовок другого уровня сделать.

[xzarxzes]

Да с текстом надо поправить, с кнопкой видимо действительно лишний DIV, а про заголовки это предупреждение, а не ошибка. Возможно следовало заголовок другого уровня сделать.

http://www.youtube.com/watch?v=GIn5qJKU8VM. Да это предупреждение, но в вашем случае я бы обратил на него внимание. У вас нет ни одного заголовка на странице кроме h1, причем лично мне кажется что вот это должен быть заголовок а не span http://postimg.org/image/v2qqfkh5j/, тут конечно дело ваше что делать заголовком а что нет, но это все таки очень похоже именно на загловок.

Edited June 6, 2014 by xzarxzes

[ETishka]

Да наверное вы правы по поводу span. Просто везде где заголовки они одинаковые, поэтому и получились все h1. Хотя наверное стоило более логично поделить их, а стиль сделать одинаковый. И спасибо за критику))

[roman_kr_ru]

Не нужно задавать высоту блокам, контент которых будет обновляться динамически. Сейчас если в .info будет больше текста, то он вылезет за пределы блока: http://i61.fastpic.ru/big/2014/0607/e1/34c72531156c55d76b2753ee04b36be1.png Без заданной высоты блок .info "схлопывается", это нормальное поведение, ибо он содержит элементы с float'ом, для того чтобы это не происходило используйте clearfix, например этот: http://nicolasgallagher.com/micro-clearfix-hack/ 

 

При уменьшении ширины окна браузера, верхняя линия ведет себя не совсем правильно: http://i64.fastpic.ru/big/2014/0607/a4/33e64047699a5f880c1c257ec518ada4.png Для того, чтобы этого не происходило, напишите .line {min-width: 940px;} 

 

Еще заметил лишний padding 12px у .wrap: http://i64.fastpic.ru/big/2014/0607/c1/8774b549857dc4f3a7351a06434cfec1.png

 

Возможно, есть смысл добавит ховер эффект у кнопки Read More в слайдере. 

Кнопки социальных иконок лучше сделать спрайтами. Например, можно использовать онлайн-генератор спрайтов http://ru.spritegen.website-performance.org

 

Используйте сокращенную запись.

#thumbs li {

    margin:15px 10px 15px 10px;  //margin: 15px 10px;

}

И еще видел, что можно сократить свойство font во многих местах.

 

Может быть, код 

.info h1 span, .contact h1 span, .gallary h1 span{

    color:#01a5ca;

}

имеет смысл заменить на 

.first-word {

    color:#01a5ca;

}

и в html писать <h1><span class="first-word">Services</span> list</h1>

Так верстка станет менее "хрупкой", и более независимой от структуры html

 

reset.css лучше импортировать в style.css, а не подключать через link.

 

Опечатка в ссылке в index.html: <a href="tim[e]table.html">Timetable</a> 

 

Подключайте шрифт через css @import url(http://fonts.googleapis.com/css?family=Asap); cейчас шрифт подключен через тег link, который вы забыли добавить везде, кроме index.html и gall aery.html поэтому на остальных страницах Arial вместо Asap, этого не случилось бы, используй вы @import!

[ETishka]

Спасибо за критику с ссылками и объяснениями. Все поправлю как появится время. Как вы считаете можно ли начинать потихоньку брать простые заказы или лучше еще тренироваться 'на кошках'?

[Ironimus]

Бери, если такие берут их. то вперед!

[MichaelD]

Спасибо за критику с ссылками и объяснениями. Все поправлю как появится время. Как вы считаете можно ли начинать потихоньку брать простые заказы или лучше еще тренироваться 'на кошках'?

Можешь пойти в контору. Там и опыта больше получишь и посмотришь, как работают другие) Думаю на небольшой оклад возьмут.

Edited June 10, 2014 by MichaelD

[ETishka]

 

Спасибо за критику с ссылками и объяснениями. Все поправлю как появится время. Как вы считаете можно ли начинать потихоньку брать простые заказы или лучше еще тренироваться 'на кошках'?

Можешь пойти в контору. Там и опыта больше получишь и посмотришь, как работают другие) Думаю на небольшой оклад возьмут.

 

найти бы такую контору, да еще и не  особо в ущерб нынешнему заработку

Edited June 12, 2014 by ETishka