простой макет для графической границы в CSS? как остановить смещение границы графики? - PullRequest
Новая
       18

простой макет для графической границы в CSS? как остановить смещение границы графики?

0 голосов
/ 23 января 2010

CSS не является моей сильной стороной! Я пытаюсь найти учебник или что-то, что даст мне заранее подготовленное расположение div и css, если у меня есть повторяющиеся изображения сверху, слева, снизу, справа и углами. Я чувствую, что подхожу достаточно близко, но потом что-то ужасно ломается. Я не хочу использовать новую реализацию CSS3.

edit: Извините за неясность. Я просто хочу использовать изображение в качестве границы. У меня есть графика для верхнего, верхнего, нижнего левого, нижнего правого и повторяющегося левого и правого и верхнего и нижнего рисунков. Я думал, что HTML-таблицы устарели, поэтому я держался от них подальше, но у меня все еще есть проблемы с выравниванием границы правильно. У меня либо будут небольшие промежутки между ними, и / или я не могу заставить границу повторяться только каждые X пикселей, поэтому угловая графика совпадает с верхней / нижней и левой / правой графикой.

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

<div id="box">

        <div id="tl"><div id="tr"><div id="top"></div></div></div>
        <div id="left"><div id="right"><div id="content">
            test text
        </div>
        </div></div>
        <div id="bl"><div id="br"><div id="bottom"></div></div></div>
</div>

мой css: 

#top {background: url(top.png) repeat-x; width:79%}
#bottom {background: url(bottom.png) repeat-x;height:58px;width:auto;margin-left:auto;margin-right:auto;width:79%;}
#left {background: url(left.png)  repeat-y}
#right {background: url(right.png) repeat-y 100% 100%}
#bl {background: url(corner4.png) 0 100% no-repeat;height:55px;margin-left:-6px;}
#br {background: url(corner3.png) 100% 100% no-repeat;height:55px;}
#tl {background: url(corner1.png) 0 0 no-repeat;height:55px;}
#tr {background: url(corner2.png) 100% 0 no-repeat;height:55px; }

1 Ответ

0 голосов
/ 23 января 2010

Хорошо ... понял. Ну, а ваш контейнер имеет фиксированную ширину? Если да ....

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

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

  • Создайте горизонтальное фоновое изображение (высотой 1 пиксель), которое распространяется на весь контейнер, и используйте CSS repeat-y. Это дает вам стороны для любой высоты контейнера.

... В итоге вы получите что-то вроде: 

<div with background image>
   <top image>
       <your content>
   <bottom image>
</div>
...