Последние новости Новое в технологиях   
    
Сайт переведён на версию html/web 2.0. Старую версию сайта вы можете посмотреть здесь.
1. При использовании нестандартных шрифтов указывать в названии слоя обозначение (например sifr), а ...
    
     Динамический div на png   
     
Поиск: только в текущем разделе
D'QUAD IT GROUP
Технологии :: D'QUAD Style / Верстка HTML/XHTML / 

Динамический div на png


Очень часто в современном дизайне приходится делать прозрачный динамический блок с закруглёнными уголками. Выкладываю решение для себя, кому понравится – юзайте.


У меня получилось 7 блоков, 4 уголка (№ 1, № 3, № 5, № 7), 2 горизонтальных полоски (№ 2, № 6) и 1 центральный блок с контентом (№ 4).Нам понадобится 4 png файла размера, скажем 5x5 и 1 файл 1x1.


Теперь генерим структуру блоков, раза со 2го у меня получился такой вариант.

  1. <!-- blue cont --> <div class="blue_cont">          <!-- уголки -->             <div class="corn lt png"></div>          <div class="corn rt png"></div>          <div class="corn lb png"></div>          <div class="corn rb png"></div>          <!-- верхняя кромка -->          <div class="top_blue png"></div>          <div class="blue_text png">                   <div class="text"> Dynamic text<a href="#">123</a> </div>           </div>          <!-- нижняя кромка -->          <div class="bottom_blue png"></div> </div> <!--/ blue cont -->

К этому добавляем css:

  1. /* BLUE CONT */ .blue_cont{    position:relative;    width:765px;    /*background:url("/img/inc_page/bg_blue_1x1.png");*/ } .corn {    position:absolute;    width:5px;    height:5px;    line-height:0px;    font-size:0px; } .lt {    background:url("/img/inc_page/lt_blue_5x5.png");    left:0px; } .rt {    background:url("/img/inc_page/rt_blue_5x5.png");    right:0px;    _right:-1px; } .rb {    background:url("/img/inc_page/rb_blue_5x5.png");    right:0px;    bottom:0px;    _bottom:-1px;    _right:-1px; } .lb {    background:url("/img/inc_page/lb_blue_5x5.png");    left:0px;    bottom:0px;    _bottom:-1px; } .top_blue {    background:url("/img/inc_page/bg_blue_1x1.png");    height:5px;    position:relative;    margin-left:5px;    margin-right:5px;    line-height:0px;    font-size:0px; } .bottom_blue {    background:url("/img/inc_page/bg_blue_1x1.png");    height:5px;    position:relative;    margin-left:5px;    margin-right:5px;    line-height:0px;    font-size:0px; } .blue_text { background:url("/img/inc_page/bg_blue_1x1.png");} .text {padding:20px;} /* end BLUE CONT */

Теперь прокомментируем:

у нас имеется основной контейнер, внутри которого будем позиционировать обрамление. Уголки позиционируются абсолютно и приклеиваются к углам основного конейнера. Следует добавить, что для ie6 будет появляться 1 лишний px (снизу и справа), для него делаем отрицательный отступ _right:-1px;_bottom:-1px;, при этом понимаем, что высота контейнера зависит от выстоы .blue_text и определяется для ie6 также хаком _height:expression(this.clientHeight + "px"); (это необходимо для того, чтобы наш png смог растянуться по методу scale через заплатку “filter” от microsoft).


Для 2х горизонтальных полосок делается также полная заливка, складываем их внутрь основного контейнера и делам отступы на ширину уголка, в моём случае на 5пкс. Не забываем также хакнуть ie6 на line-height & font-size. Сами полоски находятся в обычном потоке и сдвигать их никуда не нужно более.


И последнее – добавляем внутренний блок .text {padding:20px;}, чтобы не завис браузер ie6 при определении высоты через expression (другим браузерам это не требуется).


Вы заметили, что у нас получился динамический по высоте блок с прозрачным обрамлением. Высоту в 765px я указал намеренно, потому что мне нужен был именно такой блок, но вы можете легко убрать это ограничение, тогда ваш блок вытянется по доступной ему области, однако не забудьте добавить хак для ie6, потому что наши уголки начнут неправильно определять параметр left.


В этой статье я не разбираю как хакаются png блоки в ie6, у меня просто прописан для них класс png, на этапе подключения css для ie6 все элементы перебираются и для них идёт простановка filter png, мой файл вы можете скачать здесь.