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


В 20:11, 02 Апр 2011 оставил(а) комментарий:
В 16:00, 02 Апр 2011 оставил(а) комментарий:
В 14:34, 02 Апр 2011 оставил(а) комментарий:
В 13:55, 02 Апр 2011 оставил(а) комментарий:
В 13:44, 02 Апр 2011 оставил(а) комментарий:
в первай малайскай хокку - гиниальна!
но признаца чесно, я нихуя нипонял(