Первая верстка макета

[FEL]

• Макет http://forum.htmlbook.ru/index.php?showtopic=29381
  
• Верстка http://ffelax.koding.com/filmroulette
  

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

JS пока что еще не начал учить, поэтому слайдера нет.

P.S Верстал под новые версии браузеров (возможность проверить была только на win7)

Edited December 9, 2012 by FEL

[FEL]

[FEL]

[SanyaSV]

Не плохо я бы даже сказал очень хорошо так как сам учусь и думаю я такое не сверстаю посмотрел на сам код, лично моё мнение молодец 5

[Viper]

1. Описание фильма (ключ: значение), семантичнее верстать списком определений(DL).

2. Название фильма - ну явно проситься быть Заголовком(H1), а слоган - H2 и сгуппировать их.

3. Названия классов можно и посемантичнее придумать/организовать: .header1024, .span2, .txt и тд...

4. .footer_part1, .footer_part3 лишние, много пустых и не обьязательных тегов.

6. копирайт семантичнее будет помещать в small, но не в span

8. Спрайты?

9. фон wrap_bg.jpg обрезан по бокам.

10.

<header class="header_bg"></header>

почему не div'ом?

11. Очень долго грузиться...

12. Лишнее: -webkit-box-sizing, -ms-linear-gradient, 0px

Верстал под новые версии браузеров

Почему?

П.С. Довольно не плохо, но поддержки IE8 не хватает, было бы поинтереснее... ИМХО.

[FEL]

1. Описание фильма (ключ: значение), семантичнее верстать списком определений(DL).

3. Названия классов можно и посемантичнее придумать/организовать: .header1024, .span2, .txt и тд...

2. Название фильма - ну явно проситься быть Заголовком(H1), а слоган - H2 и сгуппировать их.

6. копирайт семантичнее будет помещать в small, но не в span

С семантикой у меня пока что плоховато, ну для первого макета я считаю это не критично. Буду стараться.

4. .footer_part1, .footer_part3 лишние, много пустых и не обьязательных тегов.

К сожалению пока моих знаний не хватает, чтобы сверстать блок со слайдером,коментариями,трейлером,и скриншотами как-то подругому (полупрозрачный блок с бордером и табом + "ушки" у слайдера).

Буду рад, если покажете ,как сделать это проще.

8. Спрайты?

Не понял вопроса.

9. фон wrap_bg.jpg обрезан по бокам.

Он не обрезан, он такой и есть.

Ширина макета 1260px (на фон наложен слой с белым светом с режимом наложения Overlay)точно такое же свечение я не смог сделать на css, поэтому сделал картинкой.

<header class="header_bg"></header>

почему не div'ом?

Даже не знаю Как-то на автомате.

11. Очень долго грузиться...

1.2мб вместе со всем

у автора ~1мб

буду исправляться

Верстал под новые версии браузеров

Почему?

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

[Viper]

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

Ну дело твое, конечно, но ты собираешься верстать лично для себя или только свои собственные проекты/сайты? Пока еще ИЕ8 входит в набор поддерживаемых браузеров по умолчанию, ИМХО.

Не понял вопроса.

Спрайты повышают скорость загрузки страницы:

_http://webo.in/articles/habrahabr/08-all-about-css-sprites/

К сожалению пока моих знаний не хватает, чтобы сверстать блок со слайдером,коментариями,трейлером,и скриншотами как-то подругому (полупрозрачный блок с бордером и табом + "ушки" у слайдера).

Буду рад, если покажете ,как сделать это проще.

с помощью :before, :after можно обойтись одним тегом, заместо 4-х

[FEL]

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

Ну дело твое, конечно, но ты собираешься верстать лично для себя или только свои собственные проекты/сайты? Пока еще ИЕ8 входит в набор поддерживаемых браузеров по умолчанию, ИМХО.

Не понял вопроса.

Спрайты повышают скорость загрузки страницы:

_http://webo.in/articles/habrahabr/08-all-about-css-sprites/

К сожалению пока моих знаний не хватает, чтобы сверстать блок со слайдером,коментариями,трейлером,и скриншотами как-то подругому (полупрозрачный блок с бордером и табом + "ушки" у слайдера).

Буду рад, если покажете ,как сделать это проще.

с помощью :before, :after можно обойтись одним тегом, заместо 4-х

1. К тому времени когда я начну верстать для людей, уже будет какой нибудь ИЕ 13 :DD и про все что ниже 10го забудут) имхо

так зачем же я буду тратить время сейчас (которого у меня не так много)? Да и я придерживаюсь своего мнения, и если кто-то записал ие8 в список поддерживаемых браузеров, то для меня все наоборот)

2. Можете показать на простом примере? Когда будет желание и свободное время естественно)

[Viper]

2. Можете показать на простом примере? Когда будет желание и свободное время естественно)

что именно? пример спрайта или псевдо-элементов:before/:after?

[Noel]

На желтых кнопках, а также в других местах по-моему тексту не хватает жирности, выразительности, для этого в css можно использовать font-weight, а также не помешало бы text-shadow вот так например .download { text-shadow: 1px 1px 1px #FFE }.

Для светлых текстов тень должна быть чуть светлее фона, а для темных текстов текст чуть чуть темнее фона, и будет эффект.

Edited December 14, 2012 by Noel

[FEL]

2. Можете показать на простом примере? Когда будет желание и свободное время естественно)

что именно? пример спрайта или псевдо-элементов:before/:after?

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

ну на простом примерчике, у меня не получается(

[talgautb]

А почему кадры из фильма не прокручиваются? или так задумано?))

Прикольно, но лучше так не делать: нарезал картинки и в блоки запихал

Еще учитывать надо, что текст может быть не в 1 строчку а например в 2:

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

но для начала лучше верстать с нуля.

This document was successfully checked as HTML5!

поздравляю )

[FEL]

За JS еще не брался) как видите еще много не знаю по CSS/html

а начинать делать что-то другое не закончив предыдущее - это не про меня)

кстати вот что наверстал с помощью :before/:after

http://jsbin.com/uzomiv/2/edit

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

Edited December 15, 2012 by FEL

[Viper]

кстати вот что наверстал с помощью :before/:after

http://jsbin.com/uzomiv/2/edit

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

Отлично, а кнопки навигации можно положить поверх, накрыв, заранее вырезанным bg, border'ы, сделав эмуляцию прозрачности. Просто нужно правыльно вырезать под него фон. Но и так не плохо.

И кстати, элементы слайдера лучше делать списком.