Вторая работа

[binomer]

Собственно, моя вторая верстка.http://alex-portfoli...iness/home.html Макет здесь: http://alex-portfoli...siness_home.psdРасскажите, что так и не так. За исключением слайдеров, с ними я еще не разобрался и не прикрутил.

Что я узнал?

1. Как делать выпадающее меню

2. Как накладывать тень для img

3. Для table и table-cell не работает позиционирование

Что я сделал не так?

1. Свалил все картинки в одну папку

2...

Подскажите, пожалуйста, как было бы правильнее сверстать блоки:

1. Над Latest Works. Я сделал с помощью table-cell, но это не соответствует макету, хоть и ровно сделано.

2. Элементы футера. Я сделал с помощью float:left

И еще. Вообще не разобрался как правильно делать фон, когда его несколько на всю страницу и он шире контента. Поэтому пришлось оборачивать контент еще в один див. Если можете, помогите.

Edited October 25, 2013 by binomer

[Bassline]

1. Раз уж решили использовать теги html5, то, например, можно было для блоков с классом "quality-item" использовать тег section, так как каджый из блоков содержит заголовок и небольшой текст, что как раз соответствует этому тегу.

2. Блок с логотипами клиентов, на мой взгляд, проще реализовать с помощью дивов, и код короче, да и картинки не являются табличными данными. Тоже самое и для блока с заголовком Connect with us.

Edited October 25, 2013 by Bassline

[binomer]

1. Раз уж решили использовать теги html5, то, например, можно было для блоков с классом "quality-item" использовать тег section, так как каджый из блоков содержит заголовок и небольшой текст, что как раз соответствует этому тегу.

2. Блок с логотипами клинтов, на мой взгляд, проще реализовать с помощью дивов, и код короче, да и картинки не являются табличными данными. Тоже самое и для блока с заголовком Connect with us.

1. Ок, надо внимательно чтить новые тэги HTML5

2. Да, на самом деле понимаю, что таблица там не к месту, но мне показалось, что это проще в плане придания нужного внешнего вида. Или также table-cell и вперед?

[Bassline]

2. Да, на самом деле понимаю, что таблица там не к месту, но мне показалось, что это проще в плане придания нужного внешнего вида. Или также table-cell и вперед?

А чем float не устраивает?

[binomer]

2. Да, на самом деле понимаю, что таблица там не к месту, но мне показалось, что это проще в плане придания нужного внешнего вида. Или также table-cell и вперед?

А чем float не устраивает?

Хм, да. собственно, всем устраивает. Просто слышал звон где-то, что много флоатов на страницу - очень плохо и верстку в помойку. Или если они содержатся в каком-то еще блоке, то нормально?

[Zverushka]

можно было для блоков с классом "quality-item" использовать тег section

По-моему больше, чем на article - не тянет.

[Bassline]

можно было для блоков с классом "quality-item" использовать тег section

По-моему больше, чем на article - не тянет.

Почему? Ведь http://htmlbook.ru/html/section (в примере), вроде как тот самый случай.

Edited October 25, 2013 by Bassline

[Zverushka]

На мой взгляд это 4 статьи, каждая со своим заголовком, которые описывают преимущества сайта(темы, неважно). И они находятся в безымянной секции, которая подразумевает описание преимуществ сайта, его плюсы так сказать.

[binomer]

На мой взгляд это 4 статьи, каждая со своим заголовком, которые описывают преимущества сайта(темы, неважно). И они находятся в безымянной секции, которая подразумевает описание преимуществ сайта, его плюсы так сказать.

Zverushka, не была бы ты так любезна оценить более глобальные косяки?

[Bassline]

На мой взгляд это 4 статьи, каждая со своим заголовком, которые описывают преимущества сайта(темы, неважно). И они находятся в безымянной секции, которая подразумевает описание преимуществ сайта, его плюсы так сказать.

Полноценными статьями они будут тогда, когда щелкнете по ссылки ниже и сможете прочитать их полностью. Сами по себе эти кусочки не будут иметь особого смысла, если их отделить от содержимого сайта. Но они объеденены общим значением "описание преимуществ сайта, его плюсы так сказать", что больше подходит для section.

[cyklop77]

стрелочки, которое около read more не аккуратно вырезаны. белая обводка заметна

то же самое у иконок, которые чуть выше read more

и карусель latest works имхо должен всё таки верстальщик делать

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

кстати я не понял почему у вас лого "bis" в коде в кавычках, а на экране нет....

внешне довольно приятно смотрится. в код не заглядывал

Edited October 25, 2013 by cyklop77

[Zverushka]

Полноценными статьями они будут тогда, когда щелкнете по ссылки ниже и сможете прочитать их полностью. Сами по себе эти кусочки не будут иметь особого смысла, если их отделить от содержимого сайта. Но они объеденены общим значением "описание преимуществ сайта, его плюсы так сказать", что больше подходит для section.

А когда на сайте превью новостей (целый список) и краткая суть их содержимого - разве они не будут являться article? При этом есть обычно и заголовок и даже футер у такого article, не смотря на неполный контент.

А по поводу особого смысла. например, комментарий к статье тоже является article, но если его вырвать из сайта - он тоже не будет иметь смысла в отрыве от сайта и другого содержимого.

Можно поставить тогда вопрос по-другому, должны ли эти 4 статьи быть вынесены в оглавнеие(outline) сайта? Тут уже на усмотрение автора надо - хочет он или нет, чтобы они были будто главами на его сайте или просто обычными статьями....

[Bassline]

Хорошо, тогда в каких случаях нужно использовать тег section?

И что вы скажите об этой статье? http://noteskeeper.ru/54/

И вот это "Авторам рекомендуется использовать элемент <article> вместо <section>, если целесообразно использовать содержимое елемента где-либо вне сайта" - отсюда http://css-live.ru/articles/element-section.html

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

Edited October 25, 2013 by Bassline

[spdif]

ваш код

<div class="logo">
<a href="#">
Bis
<span class="blue">Lite</span>
</a>
</div>

а надо сделать примерно так

<div class="logo">
<a href="#">
<h1>Bis</h1>
<span class="blue">Lite</span>
</a>
</div>

главное заголовок чтоб

...

почему?

потому что

вот так - без заголовка

---

а так - с заголовком

и

для того чтоб

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

...