Вёрстка макета psd>html5 — в чём ошибки?

Question

[Дмитрий Есин]

Посодействуйте пожалуйста в вёрстке.
В чём мои ошибки?

Вот код html\css:
pastebin.com/QL1E7jWM

Вот psd-файл, который я пытаюсь сверстать:
https://www.dropbox.com/s/bg0tebxox6z8hx0/icg.jpg?dl=0

Answer 1

[Александр]

У вас не правильно заданы float'ы. Нужно повторить материал о разметке на основе плавающих элементов и заодно о предотвращении выпадания блоков из потока (clearfix).
Есть хорошая статья "Всё о свойстве float"
Из O'Reilly рекомендую прочитать 12ую главу ("Разметка страницы на основе плавающих элементов" ) в книге "Большая книга CSS",
если хотите, можете закрепить эти навыки на hmlacademy (раздел сетки).

Что касается header, относительное позиционирование(relative) вложенного блока, не есть лучшее решение. Лучше сделать так

#icg{
    line-height: 200px; /* задаем для line-height такое же значению, как у высоты header. */
    padding-left: 120px;
}

Comments

[Дмитрий Есин]

Благодарю за наставление, Александр.

Answer 2

[Рома Покидаев]

А где собственно ошибки у тебя ?
просто в живую сайт не видно и так сразу и не скажешь что ты не так делаешь .
открой свой html файл в браузере и посмотри еще раз на свой код через firebag , а если ты верстал через textmate , то там сразу можно посмотреть ошибки и где именно.

Answer 3

[Vlad Timofeev]

jsfiddle.net , codepen.io .. потом вопросы. Никто за вас не будет за вас копи-пастом маяться..

Answer 4

[Дмитрий Есин]

Я верстал в простом sublime text 3, вытягивая нужные параметры (размеры хедера, цвет и т.д.) из photoshop.
Получается кривая кривь какая-то =(
"Начните с практиума"? Но я уже потратил на обучение достаточно много времени и сил после основной работы в течение нескольких лет - книжки O"Reilly, htmlacademy итд итп, не хотелось бы думать, что это впустую.

результат > jsfiddle.net/sundeath/v9nqgrj2

Comments

[Nikbes]

codepen.io
Создаете новый проект вставляете код и все. Очень удобно и полезно.
Ссылку сюда и все гуд.

[Дмитрий Есин]

Иван Беседа: сделал, ссылка вот: jsfiddle.net/sundeath/v9nqgrj2 результат должен быть таков: https://www.dropbox.com/s/bg0tebxox6z8hx0/icg.jpg?dl=0 а у меня сами видите что...

[Serj-One]

Дмитрий Есин Если б вы потратили, как вы выразились, ДОСТАТОЧНО времени и сил, да ещё и в течение нескольких !!! ЛЕТ, вы бы здесь этих вопросов не задавали.

[Дмитрий Есин]

domrachew: Ну, учителей и советчиков у меня нет, занимаюсь сам, гуглю, ищу учебники\курсы, потому и разрозненны так знания) нет системы и схематичности.
В любом случае, спасибо за советы.

Answer 5

[Валерий]

Слишком много ошибок. Нужны элементарные базовые знания HTML и CSS. Начните с практикума - htmlbook.ru/practical

Answer 6

[Nikbes]

Пробуйте сверстать разметку сайта (блоки). Все то что есть только без заголовков и меню.
Лучше напишите все по новой. Ну и конечно htmlbook.ru Вам в помощь. Удачи!

Answer 7

[Александр Зачиналов]

Если вопрос по правильности HTML5, то мне так кажется правильнее разметить https://yadi.sk/i/iuZmT5s4cy8To хотя хозяин - барин. Критика и обсуждение такого варианта тоже приветствуются.