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

[Serafim1991]

Сама верстка - http://serafim1991.esy.es/

 

Макет - http://rghost.ru/52789387

Картинка для PixelPerfect - http://rghost.ru/52789416

 

P.S. это первая верстка, поэтому версталось только под хром

[Great Rash]

<div class="timer">        <p class="time-one">12</p>        <p class="time-one-colon">:</p>        <p class="time-two">12</p>        <p class="time-two-colon">:</p>        <p class="time-three">12</p>        <p class="hours">часов</p>        <p class="minutes">минут</p>        <p class="second">секунд</p></div>

OMG, зачем в <p> то?

<p class="order">ЗАКАЖИТЕ СТРОИТЕЛЬСТВО ВАШЕГО ДОМА ДО 28 ФЕВРАЛЯ</p><p class="design">И ПОЛУЧИТЕ ДИЗАЙН ПРОЕКТ БЕСПЛАТНО!</p>

Это заголовок, а не параграфы. Но даже если оборачивать в параграф, то тут два не нужно.

<p class="work">НАШИ ВЫПОЛНЕННЫЕ РАБОТЫ</p>

Это тоже заголовок. Вместо капса надо юзать text-transform.

<div class="left-button">    <p class="less-then">&lt</p></div><div class="right-button">    <p class="big-then">&gt</p></div>

Зачем тут <p>?

<article>Вам хочется жить в собственном уютном доме. Повсюду вам предлагают построить его качественно и недорого. Но так ли это на самом деле? Недорогое строительство часто оказывается небезопасным, а цена снижается не за счет применения новейших технологий, а "благодаря" не совсем качественным материалам.</article>

А тут как раз нужен <p> вместо <article>.

 

Дальше я смотреть устал. Вывод: вы слишком увлекаетесь <p>, создаётся впечатление, что вы не понимаете смысл этого тега. Так же вы не понимаете смысл <article>.

[vera17]

1. Можно было задать всем блокам одну обёртку с шириной 1350px.

2.Строительство коттеджей или  СтифТрейд что-то одно из них должно быть h1.

3.Номеру телефона и заказать обратный звонок надо было сделать общую обёртку

4.В header-top можно было использовать float вместо огромных margin

5.Почему блок header-under не идет сразу после header-top?

6.Зачем так много relative?

По хедеру вроде всё...

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

Edited March 3, 2014 by vera17

[Serafim1991]

Благодарю за указание на ошибки.

 

Первоначальной целью было соответствие макеты пиксель в пиксель. Увы, не вышло(часть плывет, есть небольшая проблема с тенью у нижнего блока)

А по поводу relative  - у меня с позиционированием глобальная проблема. Я вроде бы и понимаю разницу между absolute и relative, но все равно путаю вечно. Поэтому почти везде указывал как позиционировать элементы

[Игорь Ермаков]

Скролл внизу в хроме.

Сразу домой, приходите на пересдачу. 

Edited March 3, 2014 by Игорь Ермаков

[advokatua]

как-то совсем дофига халтуры.

На 100%, в хроме здоровый скролл есть, и в футере картинки плавают.

 

Тренируйтесь больше )

[Serafim1991]

Горизонтальный скролл?

Макет же 1350px в ширину. Я даже не могу предположить, что мое "творение", будут смотреть на маленьком мониторе(у самого 22").

В будущем буду стараться учитывать такую ситуацию.

[advokatua]

Макет же 1350px в ширину. Я даже не могу предположить,

Не надо предполагать, нужно просто знать некие стандарты. Для ПК: 960, 980 и 1000 - все, все остальное это специфические заказы. Дизайнеры, которые рисуют макет  сайта предназначенный для широкой аудитории в 1360+ px мгновенно получают ярлык - криворуко-хромосомо сапиенс, это тоже нужно знать ) 

Edited March 4, 2014 by advokatua

[klierik]

Я даже не могу предположить, что мое "творение", будут смотреть на маленьком мониторе(у самого 22").

 

а про ноутбуки и планшеты ну подумал? у меня 15" и не влазит

[Serafim1991]

 

 

Я даже не могу предположить, что мое "творение", будут смотреть на маленьком мониторе(у самого 22").

 

а про ноутбуки и планшеты ну подумал? у меня 15" и не влазит

 

Подумал. Поэтому проверил на своем. Там все  влезло(и еще чуть-чуть места осталось).

 

 

Макет же 1350px в ширину. Я даже не могу предположить,

Не надо предполагать, нужно просто знать некие стандарты. Для ПК: 960, 980 и 1000 - все, все остальное это специфические заказы. Дизайнеры, которые рисуют макет  сайта предназначенный для широкой аудитории в 1360+ px мгновенно получают ярлык - криворуко-хромосомо сапиенс, это тоже нужно знать ) 

 

Спасибо, запомню.

[vera17]

Вот вёрстка  победителей в конкурсе по этому макету, если заинтересует, можно ознакомиться http://blog312.ru/     http://buca-app.zz.mu/landing/   .

Хотя, по словам участников группы она тоже не идеальна.

[advokatua]

Вот вёрстка  победителей в конкурсе по этому макету

 по ссылке  http://blog312.ru/

1) в топе надписи не по размеру. Подпись "дома на века, каче"... очень криво висит, аж глаз режет.

2) На кнопках для скролла уголки так "ровно" висят, что также хоть бери и вырви глаз ))

 

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

 

По второй ссылке, вроде все очень неплохо, на первый взгляд. Единственное, что увидел за 30 секунд просмотра - в футере нет отступа справа, у блока "НАШИ ПАРТНЕРЫ" вместо с кнопками. 

 

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

 

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

Edited March 4, 2014 by advokatua

[iKNG]

Вы еще в браузерах кроме Chrome верстку ТС не видели. В частности в Firefox

Edited March 4, 2014 by iKNG

[Serafim1991]

Вы еще в браузерах кроме Chrome верстку ТС не видели. В частности в Firefox

Подозреваю, что ее там никто и не смотрел, поскольку в первом посте я предупредил:

P.S. это первая верстка, поэтому версталось только под хром

  

[advokatua]

действительно, в ФФ вообще крах. С текстом что-то не то намутили.

Edited March 4, 2014 by advokatua

[Serafim1991]

действительно, в ФФ вообще крах. С текстом что-то не то намутили.

 

С текстом была беда и в хроме. Пока все лежало на локальном диске - хром кушал шрифты вполне нормально, как только все было выложено на хостинг - хром попросту не хотел их видеть до тех пор, пока из TTF шрифтов  я не сделал OTF шрифты. После этого хром стал нормально наблюдать шрифты.

Что в мозиле, опере, сафари и иже с ними, сказать не могу - даже не пытался о них думать. Тут бы под хром нормально верстать научиться.

[iKNG]

Font Squirrel

[Serafim1991]

Font Squirrel

 

Его генератором и переделывал.

Хром не хотел видеть указанные мною шрифты на хостинге ни в какую. На локальном диске - видит, на хостинге - нет. Наверняка дело не в расположении файлов шрифтов или коде, который их описывает.

[advokatua]

Сам кстати недавно стыкался с подобным. Были шрифты в ОТФ, пошел их конвертить на ШрифтоБелку. Переконвертировал, расписал все типы под разные браузеры. Запустил. Не работает. Что за!?"! 

Далее все снес, и оставил только шрифты ОТФ - все везде заработало, чудно - подумал я. ))

 

Плюс еще есть Куфон. Это уже вообще что-то через край народ мутит. Пытаются гнать запорожец впереди формулы-1. Не знаю на какой стадии у них рак мозга, но лично мне такие костыли вообще не по нраву. Не видел еще ни одного сайта, где были бы встроенные шрифты и Хром их нормально, без лесенки, или каких-то скосов отображал. В ФФ ситуация чуть лучше. 

Edited March 4, 2014 by advokatua

[CauseloveAV]

Добрый день, молодец продолжай практиковаться!!!

Я бы порекомендовал вам по структуре блоков, чтобы при изменении разрешения и блоки не разъезжались и были по центру.

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

 

Пример:

<html>

    <head>

        <meta charset="utf-8"/>

        <link href="./style.css" type="text/css" rel="stylesheet"/>

    </head>

    <body>

        <div id="container">

            <div id="header">Бошка</div>

            <div id="text">Тело</div>

            <div id="footer">Ноги</div>

        </div>

    </body>

</html>

/*CSS*/

*{

    padding: 0px;

    margin: 0px;

    color: white;

    font-size: 24px;

}

 

#container{

    width: 1024px;

    margin: 0px auto;

}

 

#header{

    position:relative;

    background-color: green;

    height: 10%;

}

 

#text{

    position:relative;

    background-color: blue;

    height: 80%;

}

 

#footer{

    position:relative;

    background-color: red;

    height: 10%;

}

 

Если вам нужно выровнять блок по центру в css используйте свойство margin: 0px auto;

Edited March 5, 2014 by CauseloveAV