Создание ячейки таблицы постоянной ширины и высоты - PullRequest
Новая
       36

Создание ячейки таблицы постоянной ширины и высоты

0 голосов
/ 02 февраля 2011

Справочная информация: я использую корзину для покупок фотографий, которая автоматически генерирует галерею на основе таблиц из php, что ограничивает меня от чрезмерной гибкости. Я тоже новичок.

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

У меня есть доступ к вводу CSS в таблице стилей, а также к небольшому разделу ввода HTML, но этот HTML вставляется в отдельные ячейки таблицы миниатюр; У меня нет доступа для редактирования основной таблицы HTML. Я обнаружил имена классов и идентификаторов для многих компонентов, использующих firebug.

Что я пробовал: я пытался вставить DIV фиксированного размера, но таблица по-прежнему поглощает любое вертикальное пространство, не занятое фактическим изображением. Я попытался вставить прозрачный файл PNG размером 180px x 180px в элемент div (который работает для принудительного выбора нужного размера ячеек), а затем поместил миниатюрное изображение (размером 150px x 150px) в другой элемент div и связался с z-indexing, / абсолютное позиционирование и т. д., но мне никогда не удавалось сложить два элемента div друг на друга. Абсолютное позиционирование всегда выравнивает все 50 миниатюр по левому верхнему углу страницы, а не по ячейке таблицы. В данный момент div-файл с миниатюрами всегда появляется прямо под элементом PNG, в результате чего ячейка таблицы становится слишком высокой.

Я застрял, потому что я попробовал все, что было в моем наборе навыков, и исчерпал свой поиск в Google. Я думаю, что мне нужен способ заставить ячейки таблицы оставаться на определенной высоте или найти способ наложения миниатюрного изображения поверх PNG.

Вот мой текущий код, который помещает PNG размером 180x180 (чтобы привести таблицу к правильным размерам) в один div, а миниатюрное изображение во втором div ниже первого div. Прошу извинить меня за неряшливость, потому что я ни в коем случае не профессионал, я просто ремесленник!

HTML вставляется в отдельные ячейки таблицы 

<div id="thumb_frame"><img src="/180x180.png"</div>
<div id="thumb_image">[THUMBNAIL]</div>

И у меня есть доступ к этим дополнительным классам и идентификаторам: 

<table class="thumbnails_table">
<td class="thumbnails_cells">

Ответы [ 2 ]

1 голос
/ 02 февраля 2011

Я думаю, что вы можете сделать это с чистым CSS, без необходимости добавлять и HTML (кроме тега изображения, конечно) в TD: 

td.thumbnails_cells {
    width: 180px;
    height: 180px;
    text-align: center;
}

Это все, что нужно для меня, потому что мое тестовое изображение было уже отцентрировано по вертикали (я думаю, что оно находится внутри ТД - CSS по умолчанию и все такое)

Надеюсь, это поможет!

0 голосов
/ 02 февраля 2011

Хорошо, я понял это ... так просто, но эй, когда ты никогда не делал этого раньше ...

На основании полезного совета в другой теме: 

<div style="height:180px; width:180px>
<table cellspacing=0>
<tr>
<td style=height:180px; padding:0; vertical-alignment:middle">
[THUMBNAIL]
</td></tr></table>
</div>
...