помогите с CSS на границе изображения

Question

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

html

<div id="text">
 <div class="tl"></div><div class="tm"></div><div class="tr"></div>  
 <div class="left"></div><div class="content"></div><div class="right"></div>
 <div class="bl"></div><div class="bm"></div><div class="br"></div>
</div>

css

  .tl {  

      background: url(corner1.png) no-repeat;  
      float: left;  
      height: 56px;
      width: 55px
      }  

  .tm {  
      width: 352px;  
      height: 59px;  
      background: url(top.png) repeat-x;
      float: left;  
      }  

  .tr {  

      background: url(corner2.png) no-repeat;  
      float: left;  
      height: 56px;
      width: 55px
      }  

  .content {  
      padding: 0 5px;  
      width: 360px;  
     float: left 
      }  

  .bl {    
      background: url(corner4.png) no-repeat;  
      float: left;  
      height: 56px;
      width: 55px
      }  

  .bm {  
      width: 352px;  
      height: 58px;   
      background: url(bottom.png) repeat-x;
      float: left;  
      }  

  .br {  
      background: url(corner3.png) no-repeat;  
      float: left;  
      height: 56px;
      width: 55px
      }  

 .left {background: url(left.png) repeat-y; width: 58px; height: 100%}
 .right {background: url(right.png) repeat-y; width: 58px; float: left; height: 100%}

Answer 1

Я выглядел не очень усердно, но кое-что заметил, что должно помочь вам приблизиться к решению:

у вас .left нет атрибута float, и я думаю, что он должен плавать: left.

Еще одна вещь, которую вы должны сделать в tr, вы должны поставить ясность: правильно, так что вы гарантированы, что следующий div находится ниже него.

Вы должны сделать то же самое и для .right Div.

Проверьте свойство clear css.

Кроме того, приведите свои высоты в соответствие. tl, tm и tr имеют разную высоту. В целях устранения неполадок вы должны сделать их одинаковыми.

Answer 2

Я не вижу разницы.

<div id="text">
    <div class="tl"></div><div class="tm"></div><div class="tr"></div>  
    <div class="left"></div><div class="content"></div><div class="right"></div>
    <div class="bl"></div><div class="bm"></div><div class="br"></div>
</div>

против

<table cellpadding="0" cellspacing="0">
    <tr><td class="tl"></td><td class="tm"></td><td class="tr"></td></tr>
    <tr><td class="left"></td><td class="content"></td><td class="right"></td></tr>
    <tr><td class="bl"></td><td class="bm"></td><td class="br"></td></tr>
</table>

Если вы собираетесь злоупотреблять тегами, используйте те, которые работают.

Вы также можете использовать ...

<style type="text/css">
.tl {background:url('tl.GIF') no-repeat left top;}
.tr {background:url('tr.GIF') no-repeat right top;}
.bl {background:url('bl.GIF') no-repeat left bottom;}
.br {background:url('br.GIF') no-repeat right bottom;}
.t {background:url('t.GIF') repeat-x left top;}
.b {background:url('b.GIF') repeat-x left bottom;}
.l {background:url('l.GIF') repeat-y left top;}
.r {background:url('r.GIF') repeat-y right top;}
</style>

<div class="t">
<div class="b">
<div class="l">
<div class="r">
<div class="tl">
<div class="tr">
<div class="bl">
<div class="br">
   content
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Вам не нужно быть таким многословным. Я получил хорошие результаты только с DIV-файлами .lt и .br с большими изображениями.

Answer 3

Я бы предложил избегать поплавков и вместо этого использовать абсолютное позиционирование. Так что-то вроде ...

#text{position:relative;padding:60px}
.tl,.tm,.tr,.bl,.bm,.br,.left,.right{position:absolute}
.tl{top:0;left:0}

... и так далее до ...

.br(right:0;bottom:0}