Seleckis.lv :: журнал Никиты Селецкого » » Позиционирование картинок для галереи

Позиционирование картинок для галереи

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

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

Я предлагаю не использовать тэги div с какими-то классами, а предлагаю обратить внимание на списки терминов. Пример из w3schools.com:

Coffee: Black hot drink
Milk: White cold drink

реализуется такой список таким образом:


Coffee
Black hot drink
Milk
White cold drink

Где dl — список терминов, dt — термин, dd — описание термина.

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



Image 1

Image 2

Image 3

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




Image 1



Image 2



Image 3

Теперь каждая картинка и её описание в своём контейнере. Здесь семантику можно оправдать: картинку и её описание, можем назвать списком не зависящим от других списков. Высосанное из пальца оправдание, ну да ладно…

CSS

Теперь, необходимо написать CSS. Причём задача следующая:

Картинки должны быть центрированы в блоке фиксированного размера, причём картинки могут быть как портретные, так и ландшафтные;
Размер внешнего блока для картинки и её описания, тоже должен быть фиксированный, поскольку описания могут быть многострочными;
Высота внешнего блока должна быть фиксирована, чтобы в зависимости от количества строк в описании, не возникал разнобой в высоте блоков;
Valid XHTML 1.0 Strict, valid CSS2, no JavaScript

Прокомментирую первую и самую главную задачу.

Центрирование по горизонтали и вертикали в таблицах в HTML4 решается просто: align=”center” valign=”absmiddle”. В CSS вёрстке это больной воспрос. Если с горизонтальным позиционированием всё понятно, то с вертикальным — проблемы, и проблемы конечно же только в IE. Если в нормальных браузерах, всего-то надо содержащему блоку добавить свойство display: table-cell и vertical-align: middle, то в IE такой способ не работает. Я предлагаю необычно «тупое», но эффективное решение — установить размер шрифта в блоке с картинкой равным 89% от высоты блока (например, если высота блока 150px, то размер шрифта должен быть 133.5px), а картинке задать vertical-align: middle;, т. е. позиционируем картинку по центру относительно высоты шрифта. Данный способ работает только для картинок, для блоков с контентом он не работает (для этого есть другие способы).

Привожу код с комментариями:

.imagelist * {
	margin: 0; padding: 0; /* если не применяется обнуление дефолных настроек браузера */
}
.imagelist dl{
	float: left; /* чтобы картинки шли друг за другом вряд */
	/* красота, размеры, отступы */
	border: 1px solid #CCC;
	background-color: #EEE;
	width: 210px;
	height: 250px;
	padding-left: 9px; /* из-за использования границ (borders) — 9, а не 10 */
	padding-top: 9px;
	margin-right: 20px;
	margin-bottom: 20px;
}
.imagelist dl dt{
	text-align: center; /* поскольку тэг img является строчным,
					то позиционируем его по центру таким способом */
	display: table-cell; /* вертикальное позиционирование */
	vertical-align: middle; /* для нормальных браузеров */
	font-size: 178px; /* 178px = 200 * 89%, то о чём я говорил выше (для IE) */
	line-height: 0px; /* чтобы не было лишних отступов, потому как line-height
				пропорционально увеличивается относительно размера шрифта */
	/* красота, размеры, отступы */
	background-color: white;
	border: 1px solid #DDD;
	width: 200px;
	height: 200px;
}
.imagelist dl dt img{
	vertical-align: middle; /* позиционирование картинки по вертикали  (для IE) */
}
.imagelist dl dd{
	text-align: center;
}

И ещё добавим небольшой код исправления для IE6 и ниже, которые ширину блока считают внешней а не внутренней, поэтому ширина блока не складывается с внутренним отступом (padding).

Вот что в итоге должно получиться:

Смотрите, качайте, пользуйтесь!

P.S. Число 89% получено опытным путём.

Дата: 30.01.2008

Категории: CSS | xhtml/xml

]]> Danaki ]]>

Никита, в чем это принципиально лучше div’ов кроме сомнительного семантического смысла?

30 01.08 16:30

]]> Никита ]]>

Не нужно дифференцировать элементы с помощью классов.

30 01.08 16:38

]]> FX Poster ]]>

Ничем не лучше

А вот за замечание про font-size – огромное спасибо. Кстати, а почему именно 89%?

30 01.08 16:45

]]> Никита ]]>

FX Poster, ну кому как, а мне удобней, меньше писанины и для меня логично.

> А вот за замечание про font-size – огромное спасибо. Кстати, а почему именно 89%?
А вот это ты спроси у MS Я дошёл до этого опытным путём.

30 01.08 16:48

]]> FX Poster ]]>

Да я такие списки скорее с помощью ul>li делаю. Парится с классами – эмм. С ними практически везде парится нужно.

30 01.08 16:54

]]> Никита ]]>

FX Poster, а в моём примере не нужно. Тем более если делать с помощью ul>li то опять же классы прописывать придётся. Здесь всё прозрачно.

30 01.08 16:56

]]> Danaki ]]>

Ну да-а-а, в селекторах нет классов, а есть тэги. Ладно, на вкус.

30 01.08 17:03

]]> Никита ]]>

Danaki, главное в html нет классов.

30 01.08 17:27

]]> rmaksim ]]>

это вовсе не – “необычно «тупое», но эффективное решение”

а первое упоминание на этот способ будет наверное вот это –
http://mrclay.org/web_design/centered_image/

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

30 01.08 17:28

]]> valodka ]]>

Можно попробовать вместо размера шрифта указывать высоту строки равную высоте блока, а обертку, вероятно, влево отрицательными маргинами вытягивать или есть другой способ?

30 01.08 20:05

]]> mikolka ]]>

надо будет к себе прикрутить, красивое решение.

30 01.08 22:55

]]> Никита ]]>

valodka, у IE как раз-таки проблема с этим. Уже пробовал.

31 01.08 00:51

]]> Sanekton ]]>

Спасибо, нтересное узнал для себя

31 01.08 00:52

]]> Delchyve ]]>

Хм, забавно. Спасибо за решение, Никита. Я раньше div’ами делал.

31 01.08 10:03

]]> valodka ]]>

Никита, проблема с отрицательными маргинами?

31 01.08 12:54

]]> Никита ]]>

valodka, С высотой строки. Устанавливая высоту строки равной высоте блока, картинка не становится вертикально по центру. Может поэкспериментируешь?

31 01.08 13:02

]]> Got ]]>

Хорошее решение, спасибо

01 02.08 11:04

]]> 7days ]]>

Неплохое решение, пожалуй возьму на вооружение. 89% рулят
Сапасибо.

04 02.08 02:56

]]> Алексей ]]>

оригинально,

05 02.08 12:38

]]> Тут Хумора.NET ]]>

[...] #344 Позиционирование картинок для галереи. Изящный способ избавиться от табличной верстки при [...]

11 02.08 12:32

]]> Стас ]]>

dt-dd – хороший вариант.

Вот похожий пример с ul-li:
http://www.kosivart.com/index......pers.main/

11 02.08 20:22

]]> Nikita ]]>

Спасибо за статью!

12 02.08 14:40

]]> Олег ]]>

Спасибо за статью.

Применил.

И всё таки, тупо не догоняю:
————————————————————————–
….то в IE такой способ не работает. Я предлагаю необычно «тупое», но эффективное решение — установить размер шрифта в блоке с картинкой равным 89% от высоты блока …..

font-size: 178px; /* 178px = 200 * 89%, то о чём я говорил выше (для IE) */

————————————————————————-

При загрузке страницы в фаирфоксе , буквы вылезают в слове myimage1 Точно – 178px. ( проверено на разных компьютерах )

Поменял на 12px, во всех браузерах загружается и смотрится нормально .

И в IE – тоже.

???

03 03.08 15:59

]]> Никита ]]>

Непонял.

Какие буквы где вылезают? Здесь же вроде картинки позиционируются. Можно слегка конструктивнее и с примером?

05 03.08 02:29

]]> Олег ]]>

Может я чего то я не то слепил?

Но у меня получалось так:

В Опере,

1 – http://foto.delfi.lv/ru/my_picture/103763/

2 – http://foto.delfi.lv/ru/my_picture/103765/

http://www.vereks.lv/galereja/

? :/ ?

05 03.08 11:36

]]> Никита ]]>

Поставьте для img font-size: 12px;

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

05 03.08 12:27

]]> Олег ]]>

Благодарю!

06 03.08 07:58

]]> npFly ]]>

а что написано в DTD про dl? Помоему то что dt не может содержать элементы блок уровня… От чего выше указанный пример становится очень негибким в использовании.

16 03.08 14:29

]]> Никита ]]>

npFly, а где вы в примере видите блочные элементы в dt?

16 03.08 15:58

]]> npFly ]]>

Слава богу не вижу просто этот маленький нюанс явно не в пользу Defination List как способа отобразить галерею. Кстати в IE высота меньше чем должна быть…

17 03.08 01:57

]]> Никита ]]>

Поэтому я и выбрал dl для отображении галереи, потому-что тэги img — строчные. Да, верно, меньше. Нужно дописать height: 220px; в CC.

17 03.08 11:24

]]> Влад ]]>

А вы уверены, что такой способ оптимален для любого браузера?

20 06.08 17:07

]]> Никита ]]>

Влад, информация устарела и нуждается в корректировке. Этот способ я использую, но для IE нужно ловить размер шрифта.

23 06.08 15:15

]]> Seleckis.lv :: журнал Никиты Селецкого » » Выхлоп: HTML должен быть… ]]>

[...] Именно из-за отсутствия такой возможности в статье о позиционировании картинок в галерее приходилось в качестве группирующего элемента [...]

10 07.08 00:43

Позиционирование картинок для галереи

CSS

Прокомментирую первую и самую главную задачу.

]]> Danaki ]]>

]]> Никита ]]>

]]> FX Poster ]]>

]]> Никита ]]>

]]> FX Poster ]]>

]]> Никита ]]>

]]> Danaki ]]>

]]> Никита ]]>

]]> rmaksim ]]>

]]> valodka ]]>

]]> mikolka ]]>

]]> Никита ]]>

]]> Sanekton ]]>

]]> Delchyve ]]>

]]> valodka ]]>

]]> Никита ]]>

]]> Got ]]>

]]> 7days ]]>

]]> Алексей ]]>

]]> Тут Хумора.NET ]]>

]]> Стас ]]>

]]> Nikita ]]>

]]> Олег ]]>

]]> Никита ]]>

]]> Олег ]]>

]]> Никита ]]>

]]> Олег ]]>

]]> npFly ]]>

]]> Никита ]]>

]]> npFly ]]>

]]> Никита ]]>

]]> Влад ]]>

]]> Никита ]]>

]]> Seleckis.lv :: журнал Никиты Селецкого » » Выхлоп: HTML должен быть… ]]>

Напишите комментарий

Архив

Блогролл

Рекомендую