Главная » Статьи » НАУКА И ТЕХНИКА

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

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

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

Категория: НАУКА И ТЕХНИКА | Добавил: ПлохишЪ (02.Апр.2011) | Автор: ПлохишЪ
Просмотров: 1580 | Комментарии: 5 | Рейтинг: 0.0/0
Всего комментариев: 5
1 Чугункин   (02.Апр.2011 13:44)
рифма: NAME$..........NUM$
в первай малайскай хокку - гиниальна!
но признаца чесно, я нихуя нипонял(

2 ПлохишЪ   (02.Апр.2011 13:55)
Это модерновая стихо-проза

3 Чугункин   (02.Апр.2011 14:34)
чота целивая аудиторея откликаеца слаба. 7 всево. а где паклонницы, кидающее плюшевых мишег, лифчеки и стринги на сцэну?

4 ПлохишЪ   (02.Апр.2011 16:00)
Не сцы, вот поисковики проиндексируют через пару дней и тогда попрет помаленьку

5 Чугункин   (02.Апр.2011 20:11)
сматри сам.. каверов панапишут, и песдецц рисурсу.

Имя *:
Email *:
Код *: