Забавно, что поводы для написательства мне дает студия Лебедева: выходом в свет нового сайта, или же, как в это раз, новым рецептом в Техногрете.
Что же мне не понравилось в это раз? Ну, ни то, что не понравилось, но все же.
Приводится способ выравнивания блоков с картинками по центру родительского контейнера. Что же, хороший способ применения нечасто используемого свойства inline-block. Но…
Так это выглядит в браузере:
Рецепт основан на двойственной природе элемента INS
. Как известно элементы INS
и DEL
могут быть как блочными (display: block
), так и строчными (display: inline
). При этом, будучи строчными, они могут быть контейнерами для блочных элементов, таких как DIV
или P
. Впервые подобный трюк я увидел около двух лет назад у Stuart Nicholls. Там была необходимость расположить по центру меню из табов при произвольной общей ширине меню. К сожалению, это пример был пересмотрен 24 января этого года)). Я сам использовал этот прием на своей народовской страничке (не смеяться!!!). Что забавно, в новом способе центрирования меню использован метод, который я впервые увидел у Лебедева. Но вернемся к нашим баранам.
Для чего в рецепте элементы DIV
оборачиваются в INS
? Дело в том, что применяемое свойство display: inline-block
в Internet Explorer не действует на блочные элементы, такие как DIV
, а только на строчные. INS
же элемент строчный, но может быть контейнером для блочных, не нарушая стандартов (что нельзя помещать блочные элементы внутрь строчных). Эта особенность INS
плюс особенность поведения display: inline-block
-элементов — вот и весь трюк)
�? опять но. А зачем, собственно, использовать DIV
, если картинки с описаниями можно поместить в SPAN
, который элемент строчный и на, него соответственно действует display: inline-block
. Ведь для чего предназначен INS
? Теги INS
и DEL
предназначены для выделения добавленных или удаленных частей документа, соответственно. Обычно, INS
выделяют подчеркиванием текста, а DEL
выглядит как зачеркнутый текст. Оба элемента имеют особые атрибуты cite
(URI, отсылающий к документу, объясняющему причину изменения) и datetime
(дата внесения изменения). �? использование INS
таким образом, как описано в техногрете, существенно нарушает семантику документа. �? при этом добавляет лишний код в HTML.
Но предположим, что для описание картинки нам необходимо использовать заголовок (любого уровня). Тогда, соблюдая требования стандарта, что нельзя помещать блочные элементы внутрь строчных, нам придется использовать DIV вместо SPAN. Получается, что display: inline-block
работать не будет и нам придется использовать трюк с INS
? Вовсе нет. Вместо того, чтобы портить HTML мы воспользуемся небольшим трюком в CSS. Трюк простой и забавный, как все, что касается Internet Explorer, но эффективный. Напишем в нашем файле стилей следущее:
.some_class { display: -moz-inline-stack; /*на мой взгляд малонужное правило для файрфокса 2 */ display: inline-block; /*для браузеров, которые понимают, в том числе �?Е8*/ } /** и вот трюк (можно написать в файле стилей для �?Е, * подключаемом через условные комментарии * или же используя хаки) */ /*стили для �?Е6 и �?Е7 */ .some_class { display: inline; }
�? все чудесным образом заработает.
Что неприятно удивило, так использование BR
, чтобы картинка и подпись к ней располагались на разных строках. Ведь и так уже обернули картинку и текст в ссылки по отдельности. Так почему бы не задать одной из ссылок, или обеим, display: block
. Зачем плодить мусор в коде в виде BR
. А еще лучше задать display: block;
картинке и обернуть и картинку, и текст в одну ссылку
В итоге можем получить короткий и кроссбраузерный код
Вариант без учета ФФ2
HTML:
<a href="#someURI" class="thumbnail"> <img src="someImage" /> описание картинки </a>
CSS
.thumbnail { display: inline-block; } .thumbnail img { dispaly: block; }
Отступы я не указываю, их можно взять из обсуждаемого рецепта или задать свои. Как видите, можно обойтись гораздо более компактной разметкой, чем предлагается в Техногрете.
Если же нам понадобится добавить поддержку ФФ2 и в качестве контейнера использовать DIV
, то пример немного усложниться, но все равно останется компактнее.
Inline-block с поддержкой Файрфокс 2
HTML
<div class="thumbnail"> <a href="#someURI"> <img src="someImage" /> описание картинки </a> </div>
CSS
.thumbnail { display: -moz-inline-stack;/*ФФ2*/ display: inline-block; margin:2em 0 0 2em; } .thumbnail img { display: block; } /* hack section )*/ /** с некоторых пор я предпочитаю хаки в стилях * условным комментариям для подключения стилей * почему? будет время - будет пост */ @-moz-document url-prefix() { .thumbnail a { display: block; /* нужно для ФФ2, чтобы привести в чувство -moz-inline-stack */ } .thumbnail a { position:relative; /* фигасе, это нужно для ФФ2, чтобы он увидел ссылку */ } } /* IE 7*/ *+html .thumbnail { display:inline; } /* IE 6*/ * html .thumbnail { display:inline; }
хотя можно и проще
.thumbnail { //display:inline; }
эту запись поймут только �?Е7 и �?Е6
А вот и небольшой пример, по максимуму приближенный к техногретному. За одним исключением — я не задал ширину для .thumbnail
.
P.S. Когда уже заканчивал редактировать, наткнулся на вот такой вот пост. Более подробно, лучше оформлено, но по-аглицки. Зуб даю), что все изложенное выше добыто потом и кровью, а не скопипастено.
Не хера не понял(
У Студии Лебедева вообще вёрстка очень хреновая.
а мне многое нравится у них: бывает весьма и весьма оригинально
Еще бы выравнивание по нижней части строки.
ну тут уж на вкус и цвет=)