Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Верстка углов


Автор: roskov 17.2.2009, 21:13
user posted image

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

user posted image

Была сразу идея сделать таблицу с тремя TR и много TD, куда вставить нарезки краев... И, в принципе, должно пойти. Но вот второй рисунок говорит о том, что придётся сделать куда сложнее таблицу, чтобы выполнялось условие, когда картинка заезжает за макс. линию бордера.

Но может есть какой-нибудь другой способ верстки круглых краев?

И ещё момент. Если это все-таки делать таблицами, как расположить так таблицу, чтобы справа текст обрамлял ее. Только ли align="left"? Может есть какие-нибудь подводные камни?

Автор: bars80080 17.2.2009, 21:58
Цитата(roskov @  17.2.2009,  20:13 Найти цитируемый пост)
 Причем, очень важно чтобы край картинки заходил за уровень окончания углов (см. другую картинку).

не вижу, чтобы картинка на обоих рисуках заходила за края. обман зрения
если всё же надо, и таблицами, то выход очевиден - использовать таблицу не 3*3 а 5*5
метод проще - слоями. восемь слоёв - каждый внутри следующего (хотя можно и разбросать). картинка внутри всех. в каждом слое свой background, четыре угла и четыре стороны

Автор: Violator 17.2.2009, 22:00
4 вложенных дива

Код

.tl {
  float:left;
  background:/*тут цвет вашего фона*/ url(/*левый верхний угол*/) no-repeat 0 0;
}
.tr {
  background:url(/*правый верхний угол*/) no-repeat right 0;
}
.bl {
  background:url(/*левый нижний угол*/) no-repeat 0 bottom;
}
.br {
  background:url(/*правый нижний угол*/) no-repeat right bottom;
  padding:5px 5px 15px;
}


Код

<div class="tl">
  <div class="tr">
    <div class="bl">
      <div class="br">
         <!-- тут рисунок -->
      </div>
    </div>
  </div>
</div>

Автор: roskov 18.2.2009, 12:02
Violator, спасибо огромное smile Ваш вариант прекрасно работает во всех браузерах и его легко редактировать )

Автор: roskov 18.2.2009, 12:19
Извиняюсь, но появилась проблема - если я убираю float: left, то див расплывается на всю ширину, которая возможна для него. Дело в том, что этот float: left организовывает обтекание текста и есть моменты, когда он мне совсем не нужен и я хочу, чтобы текст не обтекал этот DIV.

Автор: Violator 18.2.2009, 13:05
roskov, 
по умолчанию див будет растягиваться на 100%, задайте ему width в таком случае

Автор: roskov 18.2.2009, 13:41
К сожалению, не все так просто :(
Прикрепляю просто пример где все ведет себя не лучшим образом (

На картинке так:

user posted image

Т.е. если почему-то картинка правильно опускается под абзац, а вот див стремится в следующей строке абзаца. Почему так? (

В архиве исходник...

Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.img_tl {
  float:left;
  background:#dddddd url(images/corn01.gif) no-repeat 0 0;
  margin-right: 40px;
}
.img_tr {
  background:url(images/corn02.gif) no-repeat right 0;
}
.img_bl {
  background:url(images/corn03.gif) no-repeat 0 bottom;
}
.img_br {
  background:url(images/corn04.gif) no-repeat right bottom;
  padding: 9px 9px 15px 9px;
}
</style>
</head>
<body>
<p>Основной текст может быть илллюстрирован малой иллюстрацией, как это показано на данном примере. Блок с изображением всегда выровнен по левому краю. Размер блока - не более 270 px, высота не более 470 px,  цвет плашки - #dddddd,  размер полей - 9 pt. Под илллюстрацией может быть расположена поясняющая подпись  гарнитурой Tahoma, кегль 25 pt, цвет - #000000.</p>

<p>Основной текст может быть так же проиилюстрирован большой иллюстрацией, размещенной под даным параграфом. Иллюстрация оформляется аналогичено малой, но имеет ширину -580 px , и при минимальном разрешении экрана занимает 100% колонки , как это показано на примере ниже.</p>
<div class="img_tl" style="width: 270px;">
  <div class="img_tr">
    <div class="img_bl">
      <div class="img_br">
         <img src="images/temp02.gif" /><br/>
         Description of image
      </div>
    </div>
  </div>
</div>

<p>Основной текст может быть так же проиилюстрирован большой иллюстрацией, размещенной под даным параграфом. Иллюстрация оформляется аналогичено малой, но имеет ширину -580 px , и при минимальном разрешении экрана занимает 100% колонки , как это показано на примере ниже.</p>

                <div class="img_tl" style="float: none; width: 580px;">
                  <div class="img_tr">
                    <div class="img_bl">
                      <div class="img_br">
                         <img src="images/temp03.gif" /><br/>
                         Description of image
                      </div>
                    </div>
                  </div>
                </div>
</body>

Автор: Violator 18.2.2009, 14:01
roskov, 
потому что верхний блок с рисунком у вас плавающий (используется float), добавьте перед вторым блоком строку
Код

<br style="clear: both;" />

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)