Автор: Крис Койер
Перевод: Всеволод Козлов
Уверен, что у Вас хоть раз, но возникала потребность в создании растяжимого по вертикали постика. Высота этого постика должна изменяться в зависимости от объема контента, впечатываемого в него .
Реализуется эта затея совсем нетрудно!
Сперва я покажу Вам, как это будет выгядеть, когда будет готово:
Итак, как же добиться этого? На самом деле все предельно просто!
Ниже я привожу Вам фрагменты HTML и CSS-кодов, реализующих примеры, изображенные на скриншоте в самом начале статьи!
Фрагмент CSS-кода
div.expandable_note_box {
width: 210px;
min-height: 100px;
background-image: url("top.jpg");
background-position: top left;
background-repeat: no-repeat;
padding-top: 20px;
font-size: 80%;
}
div.expandable_note_box div.middle {
width: 210px;
background-image: url("middle.jpg");
background-position: center;
background-repeat: repeat-y;
}
div.expandable_note_box div.inside {
padding-left: 20px;
width: 167px;
}
Фрагмент HTML-кода
<div class="expandable_note_box">
<div class="middle">
<div class="inside">
<p>Hi Mom.</p>
</div>
<img src="bottom.jpg" alt="bottom" />
</div>
</div>
Ниже Вам ссылка на скачивание архива с проиллюстрированным выше примером. Также в архив приложен psd-файл.
Оригинал статьи: Expandable CSS “Note” Box
Смотрите также:
- Скрипт галереи
- Prestashop шаблоны
- Jquery скрипты
- Создание логотипа
- Текстуры
- Jquery всплывающие подсказки
- Jquery плагины
- Css reset
- Ускорение загрузки сайта
- Css прилепить футер
15 комментария(-ев)
Ну, ей Богу, Америку открыли!
Во-первых, можно реализовать проще и без .
Во-вторых, в IE7 нужно все-таки проверять отображение!
Slaver, ну так если можно проще, поделитесь со всеми!
ужасно…
три картинки, одна из которых введена с помощью IMG, а еще две — фонами блочных элементов…
мдя… web2.0…
проще — наверное можно…
но вот единообразие использования изображений — это уже НУЖНО.
верстай я подобный блок — все три картинки ввел бы в бэки с помощью CSS.
Ну, хотя бы так. Нифига не семантично, но хоть без отдельной картинки и везде отображается одинаково. С параграфами еще можно поиграться — сделать, чтобы их (не)наличие не влияло на отступы.
http://slaver.info/files/notebox/
Спасибо!!! Гдет, похожее уже видел))
Просто, но пример больно уж примитивный.
Оооооочень мне сегодня этот прием нужен был…
nicothin дело говорит, в бэк надо выводить, а то в осле мышу на картинку наведут, а там «дебилопанелька майкрософт» сохранить изображение, вывод на печать изображения и т.д.
background-image: url(«top.jpg»);
background-position: top left;
background-repeat: no-repeat;
Это мрак!!!
Хотя бы так уже писал =)))
background:url(«top.jpg») top left no-repeat;
min-height:100px; меня вооще улыбнуло =)))
В ие то непашет =)
Нада :
min-height:100px;
height:auto !important;
height:100px;
Постарайся невводить людей в заблуждение =)
Молодца!!! для новичков пойдет
проще будет выглядеть так
тут всякий отформатированный флейм.
можно и неотформатированный. это по желанию
ыть, код не вставился
.inside {width:278px;}
p{margin:0 10px 0 10px;}
#wrap{background-image: url(«cent.png»); background-repeat:repeat-y;}
Phosfluorescently reologies.
блин я поражаюсь настройкам блока, я уже 3дня пытаюсь научиться выкладывать тут кусок кода, фигня вечно выходит
Вот один из вареантов каким может быть цсс, в хтмл все это оформляется в 3 дива
.inside {width:278px;height:auto !important;height:100px;}
p{margin:0 10px 0 10px;}
.wrap{background-image: url(«cent.png»);background-repeat:repeat-y;}