HTML / CSS мозаичная граница (слева, снизу, справа) - PullRequest
Новая
       38

HTML / CSS мозаичная граница (слева, снизу, справа)

1 голос
/ 23 сентября 2011

Как создать границы из изображений в CSS / HTML без использования CSS3?

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

Я пытался построить контейнеры div вокруг моего контейнера содержимого, но я не мог понять, как установить свойства ...

Это даже лучший способ?

Ответы [ 2 ]

2 голосов
/ 23 сентября 2011

Используйте следующую структуру HTML: (пояснение ниже) 

<div class="container">

    <div class="left"></div>
    <div class="right"></div>
    <div class="bot"></div>

</div>

И следующий CSS: 

.container {
    position:   relative;
    padding:    5px; // size of your border images
}

.container .left {
    position:   absolute;
    left:       0;
    top:        0;
    background: url(border_left.jpg) repeat-y;
    width:      5px;
    height:     100%;
}

.container .right {
    position:   absolute;
    right:      0;
    top:        0;
    background: url(border_right.jpg) repeat-y;
    width:      5px;
    height:     100%;
}

.container .bot {
    position:   absolute;
    left:       0;
    bottom:     0;
    background: url(border_bot.jpg) repeat-x;
    width:      100%;
    height:     5px;
}

В основном то, что вы здесь делаете, это:

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

Этот jsFiddle иллюстрирует то, что я объясняю здесь, используя цвета фона вместо изображений.

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

0 голосов
/ 23 сентября 2011

Я бы посоветовал добавить в контейнер bg, повторяя внизу, заполнение снизу, сделать его относительным и использовать: after и: before отложить в сторону границ :) Извините, сейчас нет времени писать код: (

...