CSS

Контейнеры со скругленными углами и фиксированной шириной

меню  

      Реклама от Google  


      Реклама от Google  
      Поиск  

      Контейнеры со скругленными углами  

Для создания контейнера со скругленными углами и постоянной шириной нужны два изображения. Одно из них располагается в верхней части контейнера, а другое - в нижней. Предположим, нужно создать контейнер, показанный на рис.

Разметка контейнера может быть приблизительно такой:

   <div class="box">
     <h2>3аголовок</h2>
     <р>Содержимое</р>
   </div>

Изображения, необходимые для контейнера, показаны на рис. Изображение top.gif размещается вверху, a bottom.gif - внизу.

Файл top.gif нужно применить к элементу заголовка, a bottom.gif - к нижней части контейнера div. Поскольку в стиле контейнера задана сплошная заливка, тело контейнера можно создать, добавив цветной фон в дескриптор div.

   .box {
     width:418px;
     background: #0a82af url(graf/bottom.gif) no-repeat left bottom;
   }
   .box h2{
      background: url(graf/top.gif) no-repeat left top;
      padding: 10px 20px 0 20px;
    }

Содержимое не должно примыкать вплотную к границам контейнера, поэтому элементам, размещенным в контейнере div, нужно присвоить внутренние полоски.

   .box h2 {
     padding: 10рх 20px 0 20px;
    }
   .box p {
     padding: 0 20px 10рх 20px;
   }

Рассмотренная выше методика прекрасно подходит для создания простых контейнеров со сплошным цветом и без рамок, однако с помощью фоновых изображений можно создавать и более изысканные стили, например такие, как на рис.

Используется тот же подход, однако теперь вместо цветного фона в контейнере применяется повторяющееся фоновое изображение. Нижнее изогнутое изображение применяется к последнему элементу, в данном примере - к абзацу, последнему в контейнере.

   .box{
     width: 424px;
     background: url(images/tile.gif) repeat-y;
   }
   .box h2 {
     background: url(images/top.gif) no-repeat left top;
     padding-top: 20px;
   }
   .box p {
     background: url(images/buttorn aif) no-repeat left bottom;
     padding-bottom: 20px;
    }
   .box h2, .box p {
     padding-left: 20px;
     padding-right: 20px;
    }

   <div class="box">
     <h2>3аголовок</h2>
     <р>Содержимое</р>
   </div>

Полученный в результате этого контейнер показан на рис. Поскольку высота контейнеру не присвоена, при увеличении размеров текста он будет увеличиваться по вертикали.

На верх Печать Добавить в избранное Cделать стартовой

Сайт управляется системой uCoz