Div с изображениями границ

Question

Каков хороший способ настроить один контейнерный div с несколькими обрамляющими изображениями вокруг него (в моем случае только с левой, нижней и правой сторон)? У меня это по центру вверху страницы, перекрывая все остальное (как в этом диалоговом окне в стиле OSX).

Вот базовый макет:

Вот что я получил (могу ли я избежать статической ширины / высоты для контента?):

HTML:

<div class="contentbox">
    <div class="contentbox-wrapper" style="width: 400px">
        <div class="contentbox-mid" style="height: 200px">
            <div class="contentbox-w"></div>
            <div class="contentbox-content">
                Content Box Test
            </div>
            <div class="contentbox-e"></div>
        </div>
        <div class="contentbox-bottom">
            <div class="contentbox-sw"></div>
            <div class="contentbox-s"></div>
            <div class="contentbox-se"></div>
        </div>
    </div>
</div>

CSS:

.contentbox {
    width: 100%;
    position: fixed;
    z-index: 2;
}

.contentbox-wrapper {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.contentbox-mid {
    height: 100px;
}

.contentbox-w {
    width: 30px;
    height: 100%;
    background: transparent url("../../images/contentbox_w.png");
    float: left;
}

.contentbox-content {
    width: auto;
    height: 100%;
    background: #e8e8e8;
    float: left;
}

.contentbox-e {
    width: 30px;
    height: 100%;
    background: transparent url("../../images/contentbox_e.png");
    float: left;
}

.contentbox-bottom {
    width: 300px;
    height: 30px;
}

.contentbox-sw {
    width: 30px;
    height: 30px;
    background: transparent url("../../images/contentbox_sw.png");
    float: left;
}

.contentbox-s {
    height: 30px;
    background: transparent url("../../images/contentbox_s.png");
    margin-left: 30px;
    margin-right: 30px;
}

.contentbox-se {
    width: 30px;
    height: 30px;
    background: transparent url("../../images/contentbox_se.png");
    float: right;
    position: relative;
    bottom: 30px;
}

Answer 1

Вы можете добиться этого с немного меньшей разметкой, используя технику «раздвижных дверей». По сути, вы просто убедитесь, что изображения для каждого угла достаточно велики, чтобы они по-прежнему немного перекрывались, когда размер блока соответствует максимальному, который вы когда-либо ожидали. Смотрите этот пример для коробки с изображениями со всех четырех сторон:

<style>
div.box { float: left; }
div.tl { background: transparent url('topleft.gif') no-repeat top left; padding-top: 8px; padding-left: 8px; }
div.bl { background: transparent url('bottomleft.gif') no-repeat bottom left; height: 8px; padding-left: 8px; }
div.tr { background: transparent url('topright.gif') no-repeat top right; padding-right: 8px; }
div.br { background: transparent url('bottomright.gif') no-repeat bottom right; padding-right: 8px; }
</style>

<div class="box">
    <div class="tr">
        <div class="tl">
            Lorem ipsum dolor sit amet...
        </div>
    </div>    
    <div class="br">
        <div class="bl"></div>
    </div>
</div>

Для поля с изображениями только с трех сторон код будет еще проще, так как для прикрепления изображений к вам потребуется всего два элемента:

<style>
div.box { float: left; }
div.bl { background: transparent url('bottomleft.gif') no-repeat bottom left; padding-left: 8px; }
div.br { background: transparent url('bottomright.gif') no-repeat bottom right; padding-right: 8px; }
</style>

<div class="box">
    <div class="br">
        <div class="bl">
        Lorem ipsum dolor sit amet...
        </div>
    </div>
</div>

Эти примеры дадут вам растянутую коробку, которая может вырасти столько, сколько вы хотите, при условии, что размер изображений, содержащих углы и границы, достаточен. Также обратите внимание, что "padding", установленный для содержащихся div'ов, должен быть не меньше ширины / радиуса ваших изображений, хотя он может быть больше, если вы пожелаете. Удачного кодирования!

Answer 2

Хотя все это не рекомендуется (смешивая разметку и дизайн), часто не интегратор получает последнее слово. Тем не менее, вы все равно должны стараться содержать все в чистоте, насколько это возможно.

Ваша структура является практически единственным видом структуры, который вы можете использовать для своих целей, хотя, если ваша ширина статична (300 пикселей?), Я бы посоветовал вам сделать фон Div в виде одного большего изображения, повторенного по вертикали.

Тогда у вас будет своего рода нижний колонтитул в вашем div, где вы можете поместить два нижних угла и нижнее изображение в одно изображение. Вместо 5 делений внутри одного, у вас будет только один. Обратите внимание, что в более крупной среде это также означает, что пользователь может загружать еще 2 изображения параллельно (максимум 4 с одного хоста), что ускоряет общую загрузку страницы.

Это, очевидно, не работает, если ваша ширина относительно родителя или может измениться каким-либо образом.

---

РЕДАКТИРОВАТЬ: поскольку вы указали, что ширина является переменной, я не думаю, что есть более простой способ сделать это с точки зрения HTML.

Однако, если вы все еще хотите максимизировать скорость загрузки изображений, рассмотрите возможность использования спрайтов: изображения с восточной и западной сторон можно поместить в одно и то же увеличенное изображение: единственное, что вы изменяете, это положение фона:

background-position: 32px 0px; /* this should move the background to the right */

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

Надеюсь, это поможет.