Как лучше сверстать?

Статус
В этой теме нельзя размещать новые ответы.
rafic

rafic

Местный житель
Регистрация
14 Май 2008
Сообщения
477
Реакции
24
Приветствую. Подскажите как лучше сверстать свободную рамку которая будет изменять свои размеры в зависимости от контента.
Мой вариант:
PHP: 
<table class="onetable" cellpadding="0" cellspacing="0"> 
  <tbody> 
    <tr> 
      <td><div class="onetable-top-l"></div></td> 
      <td><div class="onetable-top-c"></div></td> 
      <td><div class="onetable-top-r"></div></td> 
    </tr> 
    <tr> 
      <td><div class="onetable-center-l"></div></td> 
      <td class="onetable-center-c"> 
Content 
      </td> 
      <td><div class="onetable-center-r"></div></td> 
    </tr> 
    <tr> 
      <td><div class="onetable-bottom-l"></div></td> 
      <td><div class="onetable-bottom-c"></div></td> 
      <td><div class="onetable-bottom-r"></div></td> 
    </tr> 
  </tbody> 
</table>
PHP: 
.onetable{width: 800px; border:0px;position: relative;} 
.onetable-top-l{height: 20px; width: 20px; background:url(images/admin/table-top-left.jpg); background-repeat: no-prepeat;} 
.onetable-top-c{height: 20px; width:100%; background:url(images/admin/table-top-center.jpg); background-repeat: prepeat-x;} 
.onetable-top-r{height: 20px; width: 20px; background:url(images/admin/table-top-right.jpg); background-repeat: no-prepeat;} 
.onetable-center-l{height: 100%; width: 20px; background:url(images/admin/table-center-left.jpg); background-repeat: no-prepeat;} 
.onetable-center-c{height: 100%; width: 100%; background:#fff; vertical-align: top;} 
.onetable-center-r{height: 100%; width: 20px; background:url(images/admin/table-center-right.jpg); background-repeat: no-prepeat;} 
.onetable-bottom-l{height: 20px; width: 20px; background:url(images/admin/table-bottom-left.jpg); background-repeat: no-prepeat;} 
.onetable-bottom-c{height: 20px; width:100%; background:url(images/admin/table-bottom-center.jpg); background-repeat: repeat-x;} 
.onetable-bottom-r{height: 20px; width: 20px; background:url(images/admin/table-bottom-right.jpg); background-repeat: no-prepeat;}
Но в Opere нет левого края, а в Chrome нет правого и левого краев. В ИЕ 8 нормально все, что творится в ИЕ 7 не смотрел, но думаю что тоже нормально. ИЕ 6 не интересует.
Поправьте меня в чем я не прав, укажите на ошибки, подскажите как лучше?:bc:
 
изобрази визуально, какую рамку ты хочешь. А то по коду непонятно ничего
 
вот :) где то такое меня интересует...
 

Вложения

  • Макет.jpg
    Макет.jpg
    41,5 KB · Просмотры: 6
HTML: 
<div class="mainsquare">
<div class="stl"><!-- --></div>
<div class="str"><!-- --></div>
<div class="sbl"><!-- --></div>
<div class="sbr"><!-- --></div>
</div>
HTML: 
.mainsquare {
width:800px;
border:6px solid #000;
position:relative;
}
.stl {
width:10px; 
height:10px; 
background:url(images/stl.gif) no-repeat;
position:absolute;
top:-6px;
left:-6px;
}
.str {
width:10px; 
height:10px; 
background:url(images/str.gif) no-repeat;
position:absolute;
top:-6px;
right:-6px;
}
.sbl {
width:10px; 
height:10px; 
background:url(images/sbl.gif) no-repeat;
position:absolute;
bottom:-6px;
left:-6px;
}
.sbr {
width:10px; 
height:10px; 
background:url(images/sbr.gif) no-repeat;
position:absolute;
bottom:-6px;
right:-6px;
}
 
Это я так понял только уголки, но на рисунке показаны и грани рамки которые тоже будут заполняться картинками высотой 1px и нужной мне ширины. Рамка показана схематически, и в середине ее будт контент.
 
не понял. Я тебе сделал слой с относительными позициями шириной 800 пикселей. В него хоть чего можно помещать. Ты спрашивал как лучше сделать углы. Я тебе написал самый простой вариант. Про однопиксельные картинки тоже нифига не понял.
Что тебе машает вырезать вот такой уголок?
Для просмотра ссылки Войди или Зарегистрируйся

Или легкие пути не для нашего народа? Надо нахерачить 100 строк таблиц, заместо 10 строк со слоями ...
 
Это просто схема разобрано рамки по частям... и ее схематическое изображение. Ты мне дал только углы... а мне нужно чтобы и грани и углы были в картинках. Углы будут неподвижны, а вот грани будут замещаться картинками. Что-то на подобии такого:
.top{
background: url(urlimage.png)repeat-x;
width:20px;
}
.float{
background: url(urlimage.png)repeat-x;
width:20px;
}
.left{
background: url(urlimage.png)repeat-y;
width:20px;
}
.right{
background: url(urlimage.png)repeat-y;
width:20px;
}
Нажмите для раскрытия...
Думаю стилями я понятно описал, что мне нужно. Вот только я не знаю как это реализовать в этом куске кода
<div class="mainsquare">
<div class="stl"><!-- --></div>
<div class="str"><!-- --></div>
<div class="sbl"><!-- --></div>
<div class="sbr"><!-- --></div>
</div>
Нажмите для раскрытия...
 
ну тогда такая конструкция
HTML: 
<div class="mainsquare">
<div class="stt"><div class="sbb"><div class="sll"><div class="srr"><div class="stl"><div class="str"><div class="sbl"><div class="sbr">
</div></div></div></div></div></div></div></div>
</div>

PHP: 
.mainsquare {
width:800px;
}
.stt {
background:url(images/stt.gif) repeat-x top;
}
.sbb {
background:url(images/sbb.gif) repeat-x bottom;
}
.sll {
background:url(images/sll.gif) repeat-y left;
}
.srr {
background:url(images/srr.gif) repeat-y right;
}
.stl {
background:url(images/stl.gif) no-repeat left top;
}
.str {
background:url(images/str.gif) no-repeat right top;
}
.sbl {
background:url(images/sbl.gif) no-repeat left bottom;
}
.sbr {
background:url(images/sbr.gif) no-repeat right bottom;
}
 
HTML: 
<table cellpadding="0" cellspacing="0">  
  <tbody>  
    <tr>
      <td width="10px"></td> - (левый угол) 
      <td (задаём БГ картинки 1-на пиксельную)></td>  
      <td width="10px"></td> - (правый угол) 
    </tr>  
    <tr>  
      <td></td>
      <td>"Content"</td>  
      <td></td>
   </tr>  
    <tr>  
      <td width="10px"></td> - (левый угол) 
      <td (задаём БГ картинки 1-на пиксельную)></td>  
      <td width="10px"></td> - (правый угол) 
    </tr>  
  </tbody>  
</table>
В итоге получаем полность резиновый блок , с закругенными краями
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху