Закругленные углы. DIV

Написано Июль 16, 2008

Итак, недавно довелось немного верстать. Научился делать несколько вещей. В частности div’ы с закругленными углами.

Есть задача:

  • Сделать бокс с закругленными углами с текстом

Что дано:

  • Картинки углов с non-transparent background
  • Размер бокса (т.е. самого дива
  • Отступ текста от границ бокса

Конечно, задача максимально упрощена, но для самого просто уровня сойдет, и работает эта штука во всех браузерах. Решение:В CSS записываем классы для всех дивов. Углов 4, следовательно 4 класса: левый-верхний, правый-верхний, левый-нижний, правый-нижний угол соответственно.
.instructions_l_t {
background:url(../images/common/left_top_instr.gif) left top no-repeat #f1f6eb;
width: 535px;
height: 100%;
}

.instructions_r_t {
background:url(../images/common/right_top_instr.gif) right top no-repeat;
margin: 0 0 0 0px;
height: 100%;
}

.instructions_l_b {
background:url(../images/common/right_bottom_instr.gif) right bottom no-repeat;
margin: 0 0 0 0px;
height: 100%;
}

.instructions_r_b {
background:url(../images/common/left_bottom_instr.gif) left bottom no-repeat;
margin: 0 0 0 0px;
height: 100%;
}

Вот класс для вложенного текста:
.instructions_content {
color: #316012;
font-size: 12px;
height: 100%;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 15px;
padding_right: 15px;
line-height: 14px;
border: 0px;
}

А это сами дивы со всей своей структурой:

   
 <div class="instructions_l_t">
                    <div class="instructions_r_t">
                       <div class="instructions_l_b">
                          <div class="instructions_r_b">
                              <div class="instructions_content">
                                 Some text
                              </div>
                             </div>
                         </div>
                        </div>
         </div>

Может это и извращенство, но работает отменно! :)

Рубрика программинг


10 Комментариев

  1. Slaver | Июль 16, 2008

    Код (pre, code) на сайте оформлен очень неудобно!

  2. Gep | Июль 16, 2008

    Знаю, я уже писал об этом. Пока что-то переделывать руки не доходят. :)

  3. Phoebus | Июль 19, 2008

    Есть более адекватный, и главное кроссбраузерный способ, без идиотских картинок углов: http://bolknote.ru/2008/07/18/~1786

  4. Phoebus | Июль 19, 2008

    Я смотрю, тебя на работе совсем низкосортной работой завалили?

  5. Gep | Июль 20, 2008

    Ага, я теперь человек-оркестр, верстальщика нет. Делаю всё)

  6. Триня | Сентябрь 21, 2008

    Что-то мне расхотелось идти в скэнд на собеседование) Еще тестовое задание делать заставят…)

  7. Gep | Сентябрь 21, 2008

    Тестовое задание тут не причем. :) На тестовом задании смотрят как ты умеешь код писать, структуру приложения.
    А идти на собеседование можно и надо, люди там хорошие и условия такие же. :)

  8. onebaks | Февраль 26, 2009

    height 100% не очень хорошее решение

  9. takuan | Июнь 8, 2010

    посмотрите как тут сделано
    http://www.css3.info/border-radius-apple-vs-mozilla/
    http://border-radius.narod.ru/
    безо всяких лишних контейнеров

  10. Gep | Июнь 8, 2010

    Превосходно!

    Но это уже HTML 5.

Комментарий: