Какбэ макет

Great Rash · February 9, 2011

Вот так его надо юзать, согласно семантике:

<body>
	<div class="col-left">
		<aside>
			<!-- что-то -->
		</aside>

		<aside>
			<!-- что-то -->
		</aside>

		<aside>
			<!-- что-то -->
		</aside>
	</div>

	<div class="col-right">
		<p>
			<!-- текстовый контент -->
		</p>

		<aside>
			<!-- связанный float-блок -->
		<aside>

		<p>
			<!-- текстовый контент -->
		</p>
	</div>
</body>

Лейаут дивами, внутренние блоки - <aside>. Сам по себе его не рекомендуется юзать для лейаута.

swetlana · February 9, 2011

Great Rash, а ведь с точки зрения семантики использование специальных элементов для раскладки — это как? разве правильно?

Great Rash · February 9, 2011

Great Rash, а ведь с точки зрения семантики использование специальных элементов для раскладки — это как? разве правильно?

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

swetlana · February 9, 2011

<body>
	<div class="col-left">
		<aside>
			<!-- что-то -->
		</aside>

		<aside>
			<!-- что-то -->
		</aside>
	</div>
</body>

здесь есть семантические элементы aside, которые отражают значимость контента.

а ещё здесь div class="col-left", который служит исключительно для позиционирования, но не несёт смысловой нагрузки.

То есть, с точки зрения семантики документа этот элемент div лишний.

Вот я о чём.

Vlad · February 9, 2011

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

В том то и дело, что могут и должны. Семантика в данном смысле это система правил поведения отдельных элементов веб-страницы. Она нужна для всяких будущих браузеров предназначенных слепым и глухим людям. Если фантазировать, то таким браузерам говоришь — перейди к навигации, они прыг к <nav>, им говоришь, а что на странице еще есть кроме контента — они такие вот <aside>. Где еще семантику можно использовать, если опять помечтать? Допустим для обмена данными между сайтами. Заходит бот на твой сайт, сразу смотрит <header> и <time>, оценивает, ага, пост появился вчера, у меня его еще нет, возьму-ка я <header> с собой. Забирает такой и размещает на странице — гланьте, на соседнем сайте новость вчера появилась.

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

Great Rash · February 9, 2011

То есть, с точки зрения семантики документа этот элемент div лишний.

С точки зрения семантики нет лишних элементов. Есть элементы, которые несут смысловую нагрузку и есть элементы, которые таковой нагрузки не несут.

<div> не несет никакой смысловой нагрузки, но он необходим для сетки.

swetlana · February 9, 2011

Влад, так тут робот наоборот делает вывод о характере информации по уже имеющейся разметке, подразумевая верность этой разметки.

Такое уже время от времени встречается в реальности.

А вот как роботу проверить правомерность применения того или иного тэга для разметки?

Vlad · February 9, 2011

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

psywalker · February 9, 2011

А я хотел бы продолжить спор, ибо нужна истина. Не уйду, пока не родится)

Стало интересно насчёт <aside> и утверждением Great Rash-а по поводу того, что он НЕ предназначен для боковых колонок. Как же так? Например у Марка Пилгрима сказано, что:

<aside>
Этот элемент представляет раздел страницы, имеющий косвенное отношение к содержанию и который можно отделить от контента. В полиграфии такие участки часто выделяют плашкой. Тег <aside> может быть использован для вывода цитат, боковых панелей, рекламы, навигации через <nav> и другого контента, который считается отдельным от основного содержания страницы.

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

Great Rash

Растолкуй плиз, в чём подвох?

Vlad

А вот с этим я не согласен.

Описание
Определяет блок сбоку от контента для размещения рубрик, ссылок на архив, меток и другой информации. Такой блок, как правило, называется «сайдбар» или «боковая панель».

<aside> необязательно должен быть сбоку и необязательно должен быть сайдбаром.

Vlad · February 9, 2011

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

selevit · February 9, 2011

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

вот http://www.code-live.ru/5/

Shift-Web · February 9, 2011

Swetlana >> здесь есть семантические элементы aside

В HTML, почти все элементы семантические, за исключением font, center и ещё пары бесполезных приблуд. Семантка выражается не в самих элементах, а в их логическом употреблении к месту. Это кстати одна из причин, почему я не считаю адекватным вешать на<li> опорную функцию каркаса.

Привожу пример из жизни: тыц прямо с этого хэша можно смотреть, что под капотом.

<li id="comment-11518">

	<div class="comment comment-author-admin" id="parent-11517">

		<div class="cdata">

			<div class="count">5</div>

			<img src="http://www.gravatar.com/avatar.php?gravatar_id=15995fe28f67ecb2550c4c0025b5dd3d&size=46&default=http://dimox.name/wp-content/themes/dimox.name/i/avatar.gif" width="46" height="46" alt="Dimox" class="avatar" />

			<div class="commenter"><a href='http://dimox.name' rel='external nofollow'>Dimox</a></div>			<div class="commentmetadata">

				<a href="#comment-11518" title="14.01.2011 в 17:07">26 дней назад</a>

			<span class="up2parent">(<a href="#comment-11517">ответ на коммент <strong>MAX</strong></a>)</span>							</div>

		</div>

		<div class="ctext">

			<p>Спасибо, Макс. Добавил эти строки.</p> 
					</div>

		<div class="reply">(<a href="#respond">ответить</a>)</div>

	</div>

</li>

Эта шо адекватно? (: Списки специально оснастили марткерами для отбивки каждого элемента по умолчанию(для разметки контента а не каркаса). Фетиш чтоли такой свойский? Очень распространённая техника на буржунете. Некоторые целиком каркасы целают юлах.

Что думаете?

Edited February 9, 2011 by Shift-Web

psywalker · February 9, 2011

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

Правда твоя, но я бы исправил "сбоку" как минимум.

swetlana · February 9, 2011

Shift-Web, уместна ли разметка на списках — индивидуальное дело каждого отдельного случая.

В частности, лента комментариев — вполне список. Так что в данном случае уместно. Меню — допустимо.

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

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

Serlutin · February 9, 2011

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

div class="col-left", который служит исключительно для позиционирования, но не несёт смысловой нагрузки.

Кстати, давно хотел со Светланой поспорить. То что появлись новые элементы, не значит, что DIV устарел. И его никто не запрещает использовать. Есть вещи, которые совершенно в семантике не нужны. Как мне кажется в <div class="wrapper"> ничего страшного нет. Да он не несёт смысловой нагрузки, но даже если использование section это нагрузки не добавит. Главное, чтобы section не стал бездумной заменой div, что уже сейчас на некоторых сайтах происходит.

использование специальных элементов для раскладки — это как? разве правильно?

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

почти все элементы семантические

<div> и <span> не несёт смыслового назначения.

Списки специально оснастили марткерами для отбивки каждого элемента по умолчанию

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

swetlana · February 9, 2011

Кстати, давно хотел со Светланой поспорить. То что появлись новые элементы, не значит, что DIV устарел. И его никто не запрещает использовать. Есть вещи, которые совершенно в семантике не нужны. Как мне кажется в <div class="wrapper"> ничего страшного нет. Да он не несёт смысловой нагрузки, но даже если использование section это нагрузки не добавит. Главное, чтобы section не стал бездумной заменой div, что уже сейчас на некоторых сайтах происходит.

не получится.

Тут я спорить не буду.

div не устарел, он есть в текущей спецификации.

Устарел подход, при котором для каждого чиха всё подряд оборачивается в дивы, и иной раз в невероятное их количество.

div class="wrapper" — может и не катастрофа, но как правило в этом нет ровно никакой необходимости.

а если section становится бездумной заменой div'а — это мракобесие. В этом случае получается всё то же бессмысленное нагромождение, просто тэг другой в этом участвует.

Vlad · February 10, 2011

Народ, я сверстал этот макет, нормально отображается только в вебките, в мозилле и опере маркеры ссылок меню убегают и форма поиска порежится.
вот http://www.code-live.ru/5/

Не используйте для маркеров-картинок list-style-image, в простых случаях они себя еще хорошо ведут, в более сложных становятся слишком капризными. Задайте маркеры через обычный background.

selevit · February 10, 2011

Спасибо, Влад, кто знает как называется софтина которая из PHP+MySQL делает статичный Html сайт?

selevit · February 10, 2011

маркеры поправил - для браузеров, не поддерживающих css3 я вставил просто фоновую картинку с маркером, для норм браузеров поставил 2 background'a.

Проблема формы поиска была в том, что кроме вебкита, похоже ничего не поддерживает input type="search", сделал просто text,

А так в общем все нормально, хотелось бы, чтобы в старых браузерах отображалось нормально, тобишь IE8, можно даже IE6, если кто-нибудь готов помочь, я буду очень рад

Vlad · February 10, 2011

Через IE когда заходишь 404 ошибка выскакивает.

selevit · February 10, 2011

Странно...У меня тоже в IE9 404...

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

http://www.code-live.ru/6/

Кстати В IE 6 нормально открывает... правда все сикось накось

Edited February 10, 2011 by selevit

Veseloff · February 10, 2011

кто знает как называется софтина которая из PHP+MySQL делает статичный Html сайт?

Это что такое? Что именно требуется?

selevit · February 10, 2011

Это что такое? Что именно требуется?

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

Vlad · February 10, 2011

Я сам такую писал, когда мне надо было.

LunatiK · February 10, 2011

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

Это типа скрипт на пхп для кеширования ? или это прога типа Httrack ?

Sign In

Какбэ макет

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information