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

[Zero-11]

Также посоветую многим  верстальщикам использовать мою форму - ее можно сделать полупрозрачной при желании:

<form action="../my_play/index.html" method="POST" enctype="multipart/form-data">  <div class="form">   Логин:<br>   <input type="text" class="login" name="pole1"><br>   Пароль:<br>   <input type="password" class="password" name="pole2" value="Пароль"><br>   URL-адрес вашего сайта:<br>   <input type="text" name="pole3" class="URL" value="http://" size="20"><br>   Оценка сайта:<br>   <input name="pole5" rows="5" class="name" cols="35"></textarea><br>   <div class="selected">   Тема сайта:<br>   <select name="pole6" class="Tema">     <option value="0" selected class="Tema">Тема не выбрана</option>     <option value="1" class="Tema" >JQuery</option>     <option value="2" class="Tema">HTML5</option>     <option value="3" class="Tema">CSS3</option>   </select><br>   </div>   <br>   <div class="file">   <input type="file" name="pole7" class="file_1" size="20"><br><br>   <input type="reset" value="Очистить">    <input type="submit" value="Отправить">    </div>  </div> </form>

И CSS

.form{margin-top: 50px;height: 500px;width: 700px;background-color: black;border-radius: 3px;margin-left: 250px;color: red;border: 1px solid red;box-shadow: 2px 0px 9px 3px #FFFF00;padding-left: 5px;padding: 3px;	}.login{height: 25px;width: 180px;line-height: 25px;border: 1px solid red;box-shadow: 2px 0px 9px 3px #FFFF00;color: red;padding-left: 5px; }.password{height: 25px;width: 180px;line-height: 25px;border: 1px solid red;box-shadow: 2px 0px 9px 3px #FFFF00;margin-top: 5px;margin-bottom: 5px;color: red;padding-left: 5px;}.URL{height: 25px;width: 180px;line-height: 25px;border: 1px solid red;box-shadow: 2px 0px 9px 3px #FFFF00;margin-top: 5px;margin-bottom: 5px;color: red;padding-left: 5px;}.name{height: 25px;line-height: 25px;width: 180px;border: 1px solid red;box-shadow: 2px 0px 9px 3px #FFFF00;margin-top: 5px;margin-bottom: 5px;color: red;padding-left: 5px;}.Tema{height: 25px;width: 300px;border: 1px solid red;line-height: 25px;box-shadow: 2px 0px 9px 3px #FFFF00;margin-top: 5px;margin-bottom: 5px;color: red;background-color: blue;padding-left: 5px;}.selected{margin-top: 10px;margin-left: 5px;padding-left: 5px;height: 100px;width: 500px;color: red;background-color: #696969;box-shadow:  2px 0px 9px 3px #FFFF00;border: 1px solid red;}.file{width: 500px;height: 100px;color: green;background-color: grey;box-shadow: 2px 0px 9px 3px #00FF00;border: 1px solid red;margin-left: 5px;padding-left: 5px;margin-top: 20px;}.file_1{height: 25px;width: 450px;border: 1px solid red;color: red;background-color: black;}

[SelenIT]

Это не форма, а черт-те что. Начиная с закрывающего textarea при открывающем input (!) и заканчивая отсутствием нужных label-ов и отступа двумя br-ками.

[Нарек]

Это не форма, а черт-те что. Начиная с закрывающего textarea при открывающем input (!) и заканчивая отсутствием нужных label-ов и отступа двумя br-ками.

Да что Вы понимаете в сайтостроении! Как Вы посмели противоречить гуру который окончил курсы от Microsoft?! 

 

p.s. Реально ребят, этот человек троллит во всех темах и ставит минусы, решайте что нибудь.

Edited August 27, 2014 by Нарек

[lexxcode]

Пользователь Zero-11 забанен. Какие-то потоки бессвязной неадекватности прям... ужс просто... приближающееся 1-е сентября клапана срывает людям что ли. Я прям не знаю как еще это объяснить. 

 

Всем бобра - лучей добра. Meow

[Temiks]

Итак, прочел различные статьи об использовании section, article, header..

Исправил код.

1. Убрал не нужные по мною мнению section и article

2. Изменил тег hr на <span class="hr" > </span>

3. Исправил форму. Использовал теперь тег <form>, а так же изменил ссылку "отправить" на input с type="button"

4. Попытался изменить адрес с использованием PostalAddress, как рекомендовал xzarxzes, но что то пошло не по плану, и теперь валидатор показывает семь ошибок

Код, который использовал (выложу картинкой, т.к форум убирает все span'ы):

--

Прошу помочь разобраться в ошибке, а так же покритиковать "новую" верстку

Edited August 28, 2014 by Temiks

[Sergik+]

Не всегда валидатор прав.

[Temiks]

Не всегда валидатор прав.

Возможно, но может быть я все же делаю что то не правильно.

p.s. Были такие заказчики, которым подавай валидность начисто

[Нарек]

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

[Sergik+]

Список без ul вполне нормальная практика, еще есть хак не закрывать inline-block.

[Нарек]

Список без ul вполне нормальная практика, еще есть хак не закрывать inline-block.

Зачем список без ul, чем он мешает? А инлайн блоки почему не закрывать? Пример есть для чего это, чего нельзя делать с соблюдением валидации?

[SelenIT]

В отношении базовой разметки валидатор практически всегда прав. Как минимум, любое сообщение валидатора — повод задуматься. Даже если разработчик может объяснить каждое исключение, зачем и почему оно понадобилось — возможно, они понадобились потому, что разработчик изначально выбрал неудачный инструмент/подход к задаче

Голые li без ul/ol — ненормально и неприлично . А вот отсутствие явного закрытия p, li, td, tr, option, явного открытия tbody и т.п. валидности не нарушают, это стандартная (хоть и рискованная в плане поддержки) возможность HTML.

Ошибки в микроразметке адреса — из-за лишнего itemprop="address" у дива с itemscope. Ему itemprop не нужен, это не свойство item-а, а его контейнер (грубо говоря, сам item). А так парсер путается, где сам объект, а где чьи свойства.

Ну и вместо span class="hr" лично я использовал бы h2:after, но это уже ладно, можно отнести к вкусовщине

[Sergik+]

http://css-live.ru/articles/zagadochnye-otstupy-mezhdu-inlajn-blokami.html

Вообще многие постулаты css настолько спорны что гляжу примеры версток сильнейших

веб-разработчиков наших и в шоке, стили верстки прямо противоположны.

Главная цель верстальщика чтобы код был легко читаем, в него должны легко

вносится изменения, верстка не должна разваливаться а вот валидность

даже не вторична. Вчера код был не валиден а завтра в спецификацию внесут.

[xzarxzes]

3. Исправил форму. Использовал теперь тег <form>, а так же изменил ссылку "отправить" на input с type="button"

Это вы о кнопке "send", у вас там type="submit" ?

Там не нужен type="button", форма не будет отправляться. type="button", можно указывать элементу <button></button>, у него по дефолту идет type="submit", а это не всегда нужно.

[Нарек]

В отношении базовой разметки валидатор практически всегда прав. Как минимум, любое сообщение валидатора — повод задуматься. Даже если разработчик может объяснить каждое исключение, зачем и почему оно понадобилось — возможно, они понадобились потому, что разработчик изначально выбрал неудачный инструмент/подход к задаче

 

Полностью согласен, как по мне - если есть какие то каноны - надо к ним придерживаться.

http://css-live.ru/a...jn-blokami.html

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

 

Ладно, создам тему в соответствующем разделе.

[Temiks]

Ошибки в микроразметке адреса — из-за лишнего itemprop="address" у дива с itemscope. Ему itemprop не нужен, это не свойство item-а, а его контейнер (грубо говоря, сам item). А так парсер путается, где сам объект, а где чьи свойства.

Спасибо большое, помогло!

Ну и вместо span class="hr" лично я использовал бы h2:after, но это уже ладно, можно отнести к вкусовщине

Хорошая идея, только в дальнейшем может быть h3,h4,h5,h6 и для них нужно это все прописывать, это конечно всего одна строчка, но как-то с span более удобно что-ли. Но тут да, согласен, по-вкусу

Это вы о кнопке "send", у вас там type="submit" ?

Ой, да, перепутал.

Там не нужен type="button", форма не будет отправляться. type="button", можно указывать элементу, у него по дефолту идет type="submit", а это не всегда нужно.

Делал по примеру htmlbook'a если честно, но я думаю, что она все же в реализации проекта будет отправляться, почему бы и нет?

Вчера код был не валиден а завтра в спецификацию внесут.

В данной ситуации была ошибка, спасибо SelenIT за ее решение

[Нарек]

Мне вот кажется этот макет изначально надо было делать в стиле single page website, как то очень смахивает)

[Temiks]

изначально надо было делать в стиле single page website

Если правильно понимаю, в виде одной странице?

[Нарек]

Ну как то так, http://alvarotrigo.com/fullPage/examples/apple.html ничего подходящего не нашел, но суть наверно понятна) И необязательно добавлять кастомный скролл)

[Temiks]

Ну как то так, http://alvarotrigo.c...ples/apple.html ничего подходящего не нашел, но суть наверно понятна) И необязательно добавлять кастомный скролл)

Думаю и так хорошо выглядит

p.s. мне так больше нравится