Первая вёрстка html5

[coldug]

Всем привет.

Вёрстка

Прошу оценить верстку html5,правильно ли применял новые тэги и вложеность заголовков?

Также интересно какие ошибки сделал в css.

Проблема при hover первого и последнего элемента,из-за чего понимаю,как решить проблему без спрайтов не знаю

Могу выложить сам макет кому интересно,но делал не 1к1 с макетом.

Заранее спасибо всем кто отпишеться

Upd. Подправил меню

Edited September 30, 2011 by coldug

[Softlink]

Если уж вы сделали все надписи вверху заголовками, то надо было в общий hgroup их объединить. Но мне кажется правая часть на заголовки не тянет.

Чтобы сработал border-radius, добавьте overflow:hidden для nav. А еще лучше скруглить сами крайние ссылки.

[Shift-Web]

	<header>
		<hgroup class="hg-1">
			<h1>Car Club</h1>
			<h2>Lorest Nesto Quisit</h2>
		</hgroup>
		<hgroup class="hg-2">
			<h2>813.453.8666</h2>
			<h3>Get Out Your Wallet. You'll Need it.</h3>
		</hgroup>
	</header>

плохо

	<article class="intro-in">
			<h2>Introduction</h2>
			<ul>
				<li>Lorest Nepsot Molson</li>
				<li>Magnus Et Crestenic</li>
				<li>Quisit Atson Dolor Ipso Excuist</li>
			</ul>
			<input class="but-blm" type="button" value="LEARN MORE" />
			<input class="but-contact" type="button" value="CONTACT ME" />
		</article>

где форма и зачем тут инпут?

Reset не оправдан вообще. Зачем классы, когда можно использовать врапперы? Слабовато .... Потренируйте на xHTML

Edited September 30, 2011 by Shift-Web

[coldug]

Input'ы заменил.

По поводу ресета можно подробней ?

По hgroup плохо потому что использовал 2 раза в одном блоке? Или зря использовал заголовки в правом блоке?

[Shift-Web]

Input'ы заменил.

По поводу ресета можно подробней ?

По hgroup плохо потому что использовал 2 раза в одном блоке? Или зря использовал заголовки в правом блоке?

зря использовали hgroup и заголовки для шапки вообще

[coldug]

Подправил шапку ,что насчет остального?

[Softlink]

<div class="box-car">
			<img src="img/car.jpg" alt="car" />
			<p>Lorest Nesto Dolor</p>
		</div>

=

<figure class="box-car">
			<img src="img/car.jpg" alt="car" />
			<figcaption>Lorest Nesto Dolor</figcaption>
		</figure>

[coldug]

Насчёт figure спс

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

И на мобильном текст вылазит из блока(по высоте) и кнопки сьежают.Как решить такие проблемы?

Edited October 1, 2011 by coldug

[Softlink]

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

И на мобильном текст вылазит из блока(по высоте) и кнопки сьежают.Как решить такие проблемы?

ну у вас оно как-то неправильно сделано. Зачем вы пункты паддингами расставляете?

Вот здесь например никто никуда не исчезает http://jsfiddle.net/PMWPL/30/

[coldug]

Может я не так понял,но вроде в примере который вы показываете тоже падингом расталвены элементы?

Если не сложно покажите как правильно расставить элементы меню.

Насчёт текста на мобильном не в курсе в чём проблема?

Edited October 1, 2011 by coldug

[Softlink]

Может я не так понял,но вроде в примере который вы показываете тоже падингом расталвены элементы?

Если не сложно покажите как правильно расставить элементы меню.

Насчёт текста на мобильном не в курсе в чём проблема?

в вашем случае хорошо подойдет конструкция ul>table li>table-cell.

А так непонятно, зачем вы задаете все размеры для nav и игнорируете непосредственного родителя - ul. На него же и радиус можно навесить и рамку. В общем, я бы не так все делал.

[coldug]

Вроде исправил ,помогло ,Спасибо (если я правильно понял ваш совет )

Насчет текста и кнопок на мобильном ,есть какие то идеи?

Или еще какие то ошибки может заметили?

Я еще учусь, буду благодарен в помощи разобрать мои ошибки

Edited October 1, 2011 by coldug

[Softlink]

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

[coldug]

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

Какие еще ошибки в вёрстке допустил?

Edited October 1, 2011 by coldug

[Softlink]

coldug, а футер так и должен болтаться или все что за нижней линией должно быть всегда строго внизу?

[coldug]

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

Edited October 1, 2011 by coldug

[Softlink]

Ну вообще от заголовков в хедере отказываться не стоило бы. Просто по-другому их надо было сделать. И еще для article допустимо использовать h1.

И вот это не есть хорошо

[coldug]

Вот насчет оглавления документа для каких элементов можно использовать h1 ,для всех новых элементов ?

<br> использовал что бы придать вид тексту как на макете ,не хотелось делить на абзацы и задавать отступы.

Согласен с вашем раним сообщением что заголовки тут только левая часть...

Такой вопрос Car Club-логотип его сделал ссылкой ,но правильней сделать

<a href="#"><h1>Car Club</h1></a>

я читал вроде тут на форуме что блочные в строчные можно вложить в html5 ,это так?

[Softlink]

Вот насчет оглавления документа для каких элементов можно использовать h1 ,для всех новых элементов ?

насколько мне понимается. Можно использовать h1 для всех самостоятельных блоков. article, aside, nav, section.

<br> использовал что бы придать вид тексту как на макете ,не хотелось делить на абзацы и задавать отступы.

понятно, что верстка тренировочная, но если такую верстку пустить в ход. Контентщикам надо будет ентером отбивать строчки?

Согласен с вашем раним сообщением что заголовки тут только левая часть...

Такой вопрос Car Club-логотип его сделал ссылкой ,но правильней сделать

<a href="#"><h1>Car Club</h1></a>

я читал вроде тут на форуме что блочные в строчные можно вложить в html5 ,это так?

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

[bayanruby2]

<a href="#"><h1>Car Club</h1></a>

СЕО не любит такое

<h1>Должен быть чистым!</h1>

А Car Club сделать просто ссылкой и с помощью ксс настроить внешний вид.

Edited October 1, 2011 by bayanruby2

[Softlink]

<a href="#"><h1>Car Club</h1></a>

СЕО не любит такое

Верстальщики не любят СЕО!

[Nekromancer]

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

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

http://davidwalsh.name/html5-elements-links

This method is far less open to abuse, and as people are saying it is only taboo because it has been taboo.

[bayanruby2]

Верстальщики не любят СЕО!

А зря.

Впринципе верстальщик отчасти СЕОшник), но только по внутренней оптимизации..

Вы же верстаете семантично? Чтобы поисковому роботу было легче определить контент и упростить индексацию сайта и его ранжирование.

КСС/JS код отделяете в отдельный файл и лишних/не нужных тегов себе не позволите? Что тоже помогает роботам ПС.

имхо

Edited October 1, 2011 by bayanruby2

[Nekromancer]

Вы же верстаете семантично? Чтобы поисковому роботу было легче определить контент и упростить индексацию сайта и его ранжирование.

КСС/JS код отделяете в отдельный файл и лишних/не нужных тегов себе не позволите? Что тоже помогает роботам

Ага, только всё это делается в первую очередь для себя, а не для роботов.

[bayanruby2]

Ага, только всё это делается в первую очередь для себя, а не для роботов.

В глубине души вы всёравно не равнодушны к поисковым роботам

Вы просто это отрицаете из принципа!!!