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

Тема в разделе "Веб-дизайн", создана пользователем 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.126
    Симпатии:
    668
    изобрази визуально, какую рамку ты хочешь. А то по коду непонятно ничего
     
  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.126
    Симпатии:
    668
    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.126
    Симпатии:
    668
    не понял. Я тебе сделал слой с относительными позициями шириной 800 пикселей. В него хоть чего можно помещать. Ты спрашивал как лучше сделать углы. Я тебе написал самый простой вариант. Про однопиксельные картинки тоже нифига не понял.
    Что тебе машает вырезать вот такой уголок?
    http://i29.tinypic.com/rlko48.jpg

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

    rafic

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

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.126
    Симпатии:
    668
    ну тогда такая конструкция
    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 нравится это.
Статус темы:
Закрыта.