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

Тема в разделе "Веб-дизайн", создана пользователем rafic, 9 сен 2009.

Статус темы:
Закрыта.
Модераторы: zek24
  1. 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{width800pxborder:0px;positionrelative;} 
    .
    onetable-top-l{height20pxwidth20pxbackground:url(images/admin/table-top-left.jpg); background-repeatno-prepeat;} 
    .
    onetable-top-c{height20pxwidth:100%; background:url(images/admin/table-top-center.jpg); background-repeatprepeat-x;} 
    .
    onetable-top-r{height20pxwidth20pxbackground:url(images/admin/table-top-right.jpg); background-repeatno-prepeat;} 
    .
    onetable-center-l{height100%; width20pxbackground:url(images/admin/table-center-left.jpg); background-repeatno-prepeat;} 
    .
    onetable-center-c{height100%; width100%; background:#fff; vertical-align: top;} 
    .onetable-center-r{height100%; width20pxbackground:url(images/admin/table-center-right.jpg); background-repeatno-prepeat;} 
    .
    onetable-bottom-l{height20pxwidth20pxbackground:url(images/admin/table-bottom-left.jpg); background-repeatno-prepeat;} 
    .
    onetable-bottom-c{height20pxwidth:100%; background:url(images/admin/table-bottom-center.jpg); background-repeatrepeat-x;} 
    .
    onetable-bottom-r{height20pxwidth20pxbackground:url(images/admin/table-bottom-right.jpg); background-repeatno-prepeat;} 
    Но в Opere нет левого края, а в Chrome нет правого и левого краев. В ИЕ 8 нормально все, что творится в ИЕ 7 не смотрел, но думаю что тоже нормально. ИЕ 6 не интересует.
    Поправьте меня в чем я не прав, укажите на ошибки, подскажите как лучше?:bc:
     
  2. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.137
    Симпатии:
    670
    изобрази визуально, какую рамку ты хочешь. А то по коду непонятно ничего
     
  3. rafic

    rafic

    Регистр.:
    14 май 2008
    Сообщения:
    477
    Симпатии:
    24
    вот :) где то такое меня интересует...
     

    Вложения:

    • Макет.jpg
      Макет.jpg
      Размер файла:
      41,5 КБ
      Просмотров:
      6
  4. comua

    comua Постоялец

    Регистр.:
    26 фев 2008
    Сообщения:
    110
    Симпатии:
    31
    rafic нравится это.
  5. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.137
    Симпатии:
    670
    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;
    }
     
  6. rafic

    rafic

    Регистр.:
    14 май 2008
    Сообщения:
    477
    Симпатии:
    24
    Это я так понял только уголки, но на рисунке показаны и грани рамки которые тоже будут заполняться картинками высотой 1px и нужной мне ширины. Рамка показана схематически, и в середине ее будт контент.
     
  7. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.137
    Симпатии:
    670
    не понял. Я тебе сделал слой с относительными позициями шириной 800 пикселей. В него хоть чего можно помещать. Ты спрашивал как лучше сделать углы. Я тебе написал самый простой вариант. Про однопиксельные картинки тоже нифига не понял.
    Что тебе машает вырезать вот такой уголок?
    Перейти по ссылке

    Или легкие пути не для нашего народа? Надо нахерачить 100 строк таблиц, заместо 10 строк со слоями ...
     
  8. rafic

    rafic

    Регистр.:
    14 май 2008
    Сообщения:
    477
    Симпатии:
    24
    Это просто схема разобрано рамки по частям... и ее схематическое изображение. Ты мне дал только углы... а мне нужно чтобы и грани и углы были в картинках. Углы будут неподвижны, а вот грани будут замещаться картинками. Что-то на подобии такого:
    Думаю стилями я понятно описал, что мне нужно. Вот только я не знаю как это реализовать в этом куске кода
     
  9. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.137
    Симпатии:
    670
    ну тогда такая конструкция
    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.gifrepeat-x top;
    }
    .
    sbb {
    background:url(images/sbb.gifrepeat-x bottom;
    }
    .
    sll {
    background:url(images/sll.gifrepeat-y left;
    }
    .
    srr {
    background:url(images/srr.gifrepeat-y right;
    }
    .
    stl {
    background:url(images/stl.gifno-repeat left top;
    }
    .
    str {
    background:url(images/str.gifno-repeat right top;
    }
    .
    sbl {
    background:url(images/sbl.gifno-repeat left bottom;
    }
    .
    sbr {
    background:url(images/sbr.gifno-repeat right bottom;
    }
     
    rafic нравится это.
  10. iROD

    iROD Писатель

    Регистр.:
    7 сен 2009
    Сообщения:
    5
    Симпатии:
    1
    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>
    В итоге получаем полность резиновый блок , с закругенными краями
     
    rafic нравится это.
Статус темы:
Закрыта.