Моя первая вёрстка.

[ModMaker]

Привет друзья, решил я познать профессию верстальщика. После двух недель проведённым за книжками, мануалами, видео - я принялся за практику.
Под практику взял шаблон выложенный в одном из подфорумов(КиноРулетка). Сделал. Теперь думаю над своими основными ошибками. Наверное самое главное, что вёрстка не "резиновая" т.е при измениях scale браузера со 100% всё начинает плыть, но повторюсь. это так скажем мой первый опыт. Буду рад любой критике, js для скрола и галереи не использовал так как совсем его не знаю.  
Так же появился вопрос, почему не проигрывает видео с ютуба?
Буду рад любой критике и напутствиям. спасибо.
 

вот страница на хостинге.

Edited March 17, 2014 by ModMaker

[npofopr]

выкладывайте на хостин

[DivMan]

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

<iframe width="90%" height="90%" src="//www.youtube.com/embed/olWTSNsukmA" frameborder="0" allowfullscreen></iframe> 

и вместо него добавь под 

<div class="box2 title">Трейлер</div>

вот это 

<div id="video12">  <iframe src="http://www.youtube.com/embed/xFa2_PVMeDQ?rel=0" allowfullscreen="" frameborder="0"></iframe>  <div>

а в main.css в самый конец вот это 

#video12 iframe {  width: 500px;  height: 300px;}

[ModMaker]

выкладывайте на хостин

Извините, вот страница на хостинге.

Вот png шаблона 

 

DivMan, что за ахинею вы несёте?

Edited March 17, 2014 by ModMaker

[ModMaker]

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

[binomer]

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

Почему у тебя в блоке комментариев ВК ни одна ссылка не работает. Вернее, это походу вообще не ссылки

[Struggle]

Не плохо, особенно если 1 раз

 

Только не хватает кроссбраузерных фиксов

Edited March 17, 2014 by Struggle

[ModMaker]

 

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

Почему у тебя в блоке комментариев ВК ни одна ссылка не работает. Вернее, это походу вообще не ссылки

 

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

 

Только не хватает кроссбраузерных фиксов

 

Вы  имеете в виду префиксы для старых браузеров/новых атрибутов?

Я стараюсь проверять в http://caniuse.com/, но не всегда к сожалению об этом вспоминаю.

 

Не плохо, особенно если 1 раз

 

Спасибо, мотивирует)

Edited March 17, 2014 by ModMaker

[Struggle]

 

 

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

Почему у тебя в блоке комментариев ВК ни одна ссылка не работает. Вернее, это походу вообще не ссылки

 

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

 

Только не хватает кроссбраузерных фиксов

 

Вы  имеете в виду префиксы для старых браузеров/новых атрибутов?

Я стараюсь проверять в http://caniuse.com/, но не всегда к сожалению об этом вспоминаю.

 

Не плохо, особенно если 1 раз

 

Спасибо, мотивирует)

Да, есть люди которые не юзают хром, юзают лису, оперу, сафари, ишака и прочее дерьмо, от 3 строк кода ничего не изменится 

Edited March 17, 2014 by Struggle

[ModMaker]

Апну тему, надеюсь модераторы не будут против.
С момента публикации моей первой вёрстки, вёрсткой не занимался вообще, сейчас возвращаюсь к изучению с новыми силами, был бы рад услышать критику по этому шаблону

[xzarxzes]

Апну тему, надеюсь модераторы не будут против.

С момента публикации моей первой вёрстки, вёрсткой не занимался вообще, сейчас возвращаюсь к изучению с новыми силами, был бы рад услышать критику по этому шаблону

Ноль у альфа канала никому не нужен rgba(255,255,255,0.1), это можно записать вот так rgba(255,255,255,.1).

 

UPD: еще у вас 12 ошибок после валидации, три с youtube'a

http://validator.w3.org/check?uri=http%3A%2F%2Fmodmaker.ru%2Fsablon%2Findex.html&charset=%28detect+automatically%29&doctype=Inline&group=0

 

И кроме этого, как мне кажется вы не совсем правильно используете элементы section и article.

Edited April 26, 2014 by xzarxzes

[npofopr]

Вы совершенно не думаете, что верстаете, вернее вам лишь бы сделать pixel perfect верстку.

Вот что это?

.block {width: 505px;height: 510px;float: left;margin: 30px auto 60px;}

А если у меня исполнителей ролей будет больше? Что тогда случится?

Там же: h3 внутри ul, зачем?

 

 

[roman_kr_ru]

При изменении окна бразуера логотип смещается к центру: не стоило давать ему абсолютное позиционирование. Думаю, стоит обернуть header: 

<head>  <style type="text/css">    .header {      width: 960px;      margin: auto;    }  </style></head> <div class="header-wrap">  <div class="header">...</div></div>

Ну для .header-wrap стили 

.header-wrap {    background: url("../images/header-bg.png") repeat-x;    height: 136px;}

Еще неясно почему ширина картинки для фона header 200px. Чем руководствовались, когда резали 200px? 

 

Ну, и самое главное, какого-либо практического значения, эта верстка не имеет. Как заметил npofopr, стоит только сделать длиннее фамилию режиссера и верстка разваливается.

[ModMaker]

Спасибо.
Да, я с вами согласен, практического значения 0. Тут так получилось по двум причинам, первая - полное отсутвие опыта. Вторая - вёрстка действительно не нацелена на практическое использование, поэтому я как то даже и не удосужился проверить, не распадётся ли вёрстка при добавление  новых полей или текстов. Мой косяк. 
Будем  исправлять.
 

Еще неясно почему ширина картинки для фона header 200px. Чем руководствовались, когда резали 200px?

 

Там стыки на диагональных линиях не совпадают, если резать сильно меньше (50пикселей) заметны переходы будут. Тоже самое и с бэграундом.

Там же: h3 внутри ul, зачем?

 
Вы знаете, а сейчас и я задаюсь этим вопросом не уверен чем я руководствовался Edited April 27, 2014 by ModMaker

[amelice]

Вы знаете, а сейчас и я задаюсь этим вопросом не уверен чем я руководствовался

для начала, чтобы руководствоваться нужно:

1. узнать для чего предназначен тот или иной элемент.

2. какой у него  синтаксис.

Вам наверно непросто написали - зачем h3 внутри ul?

Потому что по синтаксису ul может содержать только элементы li. http://www.w3.org/TR/html-markup/ul.html#ul

Edited April 28, 2014 by amelice