ПлохишЪ
02 Апр 2011

Как обрезать до нужного размера изображение или любой фрагмент, элемент страницы сайта, ячейку таблицы

Будем делать обрезание... ячейки таблицы. Насколько это кошерно - я не знаю. Надо будет спросить у раввина

Достала меня одна штука на нашем сайте. Эту штуку можно видеть, например, на Глагне странице нашего сайта. Там, вверху, расположены информеры - рулетки, регулярно достающие из недр базы данных старые креативы наших авторов, чтобы они не забывались. Область ячеек информеров так и называется: Никто не забыт, ничто не забыто". Один информер представляет все материалы кроме рубрики "Веселые картинки", другой представляет "Веселые картинки". Что же меня и других, как я думаю, так изрядно доставало? А доставало растягивание страницы при изменении объема анонса очередного представленного на Глагне старого материала. А если вдруг так совпадает, что из глубин достается одновременно два видеоматериала, страница расползается до безобразия. Максимальный размер картинок, представленный в информерах, мною был ограничен ранее. Но что делать, когда анонс представлен в виде большого куска текста? Задача была решена с применением стилей CSS и контейнера <div>. Теперь область анонса у нас ограничена в высоту до 150 пикселей и в ширину до 330 пикселей для каждого из информеров. Всё, что превышает заданные максимальные размеры ячейки, будет обрезаться.

Делюсь решением. Первоначально информер, выводящий на Глагне материал, выглядел так:
<table border="0">
<tr><td class="infTitle">
<a href="$ENTRY_URL$"> <b><u>$AUTHOR_NAME$</u> :: </b></a>
<a href="$ENTRY_URL$"><b>$TITLE$</a> :: <span title="Comments"> ($READS$/$COMMENTS_NUM$) </b> </span>
</td></tr>
<tr><td class="infMessage2"><a href="$ENTRY_URL$">$MESSAGE$</a>
</td></tr>
</table>

То есть, представлял из себя таблицу, в свою очередь вписанную в предназначенную для неё ячейку на Глагне. В таком виде таблица расползается как ей будет угодно под давлением размера размещенного в ней материала. А теперь делаем такой фокус - заключаем таблицу в контейнер:
/*задаем параметры */
<style type="text/css">
.overflow-hidden3 {
overflow: hidden; /* обрезаем лишнее:*/
height: 150px; /* по высоте */
width: 330px /* по ширине */
}
</style>

<div class="overflow-hidden3"> /* применяем стиль к таблице */

<table border="0">
<tr><td class="infTitle">
<a href="$ENTRY_URL$"> <b><u>$AUTHOR_NAME$</u> :: </b></a>
<a href="$ENTRY_URL$"><b>$TITLE$</a> :: <span title="Comments"> ($READS$/$COMMENTS_NUM$) </b> </span>
</td></tr>
<tr><td class="infMessage2"><a href="$ENTRY_URL$">$MESSAGE$</a>
</td></tr>
</table>

</div>

Готово. Теперь наша Глагне будет иметь всегда одинаковый вид и размер, в чем вы можете убедиться, несколько раз перезагрузив её. Содержимое информеров будет меняться, лишнее в них будет обрезаться ныне, присно и вовеки веков. В принципе можно было бы использовать тэг overflow и с другими параметрами, например чтобы при обрезании содержимого прявлялся скролл, можно внести изменения прямо в таблицу CSS, но мне и этого достаточно, а вы дерзайте, коль оно вам надо...

***Нечаянно подумал: "А нафига мне в информерах таблицы то?"

Взял и заменил таблицы на контейнеры. Стало симпатичненько так:

<div class="infTitle">
<a href="$ENTRY_URL$"> <b><u>$AUTHOR_NAME$</u> :: </b></a>
<a href="$ENTRY_URL$"><b>$TITLE$</a> :: <span title="Comments"> ($READS$/$COMMENTS_NUM$) </b> </span>
</div>
<div class="infMessage2"><a href="$ENTRY_URL$">$MESSAGE$</a>
</div>

А было вона как громоздко:

<table border="0">
<tr><td class="infTitle">
<a href="$ENTRY_URL$"> <b><u>$AUTHOR_NAME$</u> :: </b></a>
<a href="$ENTRY_URL$"><b>$TITLE$</a> :: <span title="Comments"> ($READS$/$COMMENTS_NUM$) </b> </span>
</td></tr>
<tr><td class="infMessage2"><a href="$ENTRY_URL$">$MESSAGE$</a>
</td></tr>
</table>

Но это уже другая история...

0
5

5 комментарий

0 Чугункин
В 20:11, 02 Апр 2011 оставил(а) комментарий:
сматри сам.. каверов панапишут, и песдецц рисурсу.
0 ПлохишЪ
В 16:00, 02 Апр 2011 оставил(а) комментарий:
Не сцы, вот поисковики проиндексируют через пару дней и тогда попрет помаленьку
0 Чугункин
В 14:34, 02 Апр 2011 оставил(а) комментарий:
чота целивая аудиторея откликаеца слаба. 7 всево. а где паклонницы, кидающее плюшевых мишег, лифчеки и стринги на сцэну?
0 ПлохишЪ
В 13:55, 02 Апр 2011 оставил(а) комментарий:
Это модерновая стихо-проза
0 Чугункин
В 13:44, 02 Апр 2011 оставил(а) комментарий:
рифма: NAME$..........NUM$
в первай малайскай хокку - гиниальна!
но признаца чесно, я нихуя нипонял(