Сложности с вёрсткой списка

[Gaspode]

Прямо не знаю, как тему назвать, извините)

Выглядит это всё так.

Див-обёртка - фиксированной ширины.

В нём примерно так всё выглядит:

Ссылка 1-1 —- Ссылка 2-1 —- Ссылка 3-1

Картинка 1 —- Картинка 2 —- Картинка 3

Ссылка 1-2 —- Ссылка 2-2 —- Ссылка 3-2

Цена 1 ——-- Цена 2 ——-- Цена 3

Условия:

1. Весь контент, _в том числе и картинки_ подгружается динамически, то есть высота блоков заранее не известна.

2. Картинка N - это ссылка, ведущая туда же, куда и Ссылка N-2. Причём Ссылка N-2 подсвечивается, когда курсор наводится на картинку. Сейчас реализовано так: они обе в одном диве, при наведении на который ссылка подсвечивается.

3. Картинки центрированы по высоте и ширине ячейки.

4. Ниже этого блока может быть ещё один (или много) таких же, только ячеек там может быть две или вовсе одна.

5. Левая граница левой ячейки прижата к левому краю блока. Если есть третья ячейка, её правая граница прижата к правому краю блока.

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

Таблицей делать не хочется, потому что

а) пункт 2. тогда без скриптов не реализовать.

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

в) да и логика тогда хромать будет. Всё-таки хотелось бы, чтобы блок был блоком, а не был раскидан по разным строкам.

display: table - не подходит, потому что IE загибается на этом.

Edited April 2, 2011 by Gaspode

[swetlana]

но пока что выглядит именно как таблица.

Это по смыслу таблица, если я верно смысл улавливаю.

А можно всё же картинку желаемого результата увидеть?

Макет же есть?

[Gaspode]

_http://prokrasoty.10401.aqq.ru/

Там сейчас тоже разваливается таблица (под картинками ссылки скачут), но принцип, думаю, ясен будет. У картинок там щас просто дорисованы пустые поля сверху и снизу, чтобы были одной высоты.

PS Ну, буду благодарен, если и вёрстку попинаете заодно.

Edited April 2, 2011 by Gaspode

[swetlana]

Простейший случай, если б не заморочки с шириной.

Можно чуть более понятно про ширину?

Ссылка N-1 — это по уму заголовок для блока? Ссылка в нём другая? Не та, которая в «Ссылка N-2»?

Если заголовок не умещается в одну строку, другие заголовки должны менять высоту вместе с ним?

[Gaspode]

Можно чуть более понятно про ширину?

Если три позиции, они растягиваются от края до края блока. Скажем, максимальная ширина - 33% ширины блока. Там щас так и сделано, вроде бы.

Ссылка в нём другая? Не та, которая в «Ссылка N-2»?

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

Если заголовок не умещается в одну строку, другие заголовки должны менять высоту вместе с ним?

Ох, вот об этом я забыл спросить =/ Допустим, что нет.

[swetlana]

Ох, вот об этом я забыл спросить =/ Допустим, что нет.

просто если да, то сделать будет сложно иначе как таблицей.

Можно будет ещё несемантически разбить — заголовки отдельно, товары отдельно — но ведь такой вариант не интересен?

[Gaspode]

но ведь такой вариант не интересен?

Я его рассматриваю, но только в случае, если иначе никак)

Большую трудность у меня вызывает выравнивание картинок. Остальное можно пережить, в принципе.

[swetlana]

display: table-cell, кстати, можно пользовать.

Только для старых IE придётся лепить очередное уродство:

	display: inline;
	zoom: 1;
	height: expression(this.parentNode.offsetHeight);

Хотя на мой взгляд правильнее забить

Ну примерно так же, как те, кто сейчас требует поддержки IE6 забесплатно, года три назад говорили: да этот файрфоркс пользуют всего-то каких-то 20%, можно забить

[psywalker]

display: table-cell, кстати, можно пользовать.

Только для старых IE придётся лепить очередное уродство:

	display: inline;
	zoom: 1;
	height: expression(this.parentNode.offsetHeight);

Хотя на мой взгляд правильнее забить

Ну примерно так же, как те, кто сейчас требует поддержки IE6 забесплатно, года три назад говорили: да этот файрфоркс пользуют всего-то каких-то 20%, можно забить

Слушай Светка, а как работает этот экпрешан?

height: expression(this.parentNode.offsetHeight);

[Gaspode]

display: table-cell, кстати, можно пользовать

Куда? К чему? Как?

[swetlana]

криво.

Как и любой другой экспрешн.

Это уродство.

Не надо так делать.

Куда? К чему? Как?

к li.

И они автоматом выстроятся как надо.

Или непосредственно таблицу и делать. Так и в ископаемых ослах будет работать без кривых решений.

[Gaspode]

И они автоматом выстроятся как надо.

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

Так что, видимо, таблица - это таки оптимальный вариант.

Edited April 2, 2011 by Gaspode