Резиновая рамка п каям сайта.

chillout · May 22, 2011

Приветствую!

Подскажите пожалуйста, никак не соображу...

Как сделать резиновую рамку по краям сайта, которая будет растягиваться на 100% по ширине и высоте вместе с контентом?

Разрезанные рамки в архиве - http://dl.dropbox.com/u/16468356/images.rar

Edited May 22, 2011 by chillout

Gaspode · May 22, 2011

Если под старые браузеры подстраиваться, то несколько обёрток, каждая - со своим куском фона.

Если на старые браузеры начхать, то множественный фон

chillout · May 22, 2011

Если под старые браузеры подстраиваться, то несколько обёрток, каждая - со своим куском фона.

можно по подробнее?

Если на старые браузеры начхать, то множественный фон

Ну если опираться на эту таблицу: http://www.findmebyip.com/litmus/ ,то уж слишком новое это, хотя конечно задачу облегчает значительно )

Gaspode · May 22, 2011

можно по подробнее?

Схематично:

<div class="border top-left">
   <div class="border top-right">
      <div class="border bottom-right">
         <div class="border bottom-left">
             <div id="content"></div>
         </div>
      </div>
   </div>
</div>

div.border { height: 100%; width: 100%;}
div.top-left { background: url('top-left-corner.gif') no-repeat top left; }
div.top-right { background: url('top-right-corner.gif') no-repeat top right; }
/* и т.д. */

то уж слишком новое это

Да не сказал бы. Но дело ваше.

Edited May 22, 2011 by Gaspode

psywalker · May 22, 2011

можно по подробнее?

Схематично:

<div class="border top-left">
   <div class="border top-right">
      <div class="border bottom-right">
         <div class="border bottom-left">
             <div id="content"></div>
         </div>
      </div>
   </div>
</div>

div.border { height: 100%; width: 100%;}
div.top-left { background: url('top-left-corner.gif') no-repeat top left; }
div.top-right { background: url('top-right-corner.gif') no-repeat top right; }
/* и т.д. */

то уж слишком новое это

Да не сказал бы. Но дело ваше.

Дружище, а как этот код заставит тянуться рамку, даже в отсутствии контента?

Gaspode · May 22, 2011

Хмъ... никак, тут ты прав :facepalmxd:

Не надо вкладывать, надо либо на одном уровне их писать и позиционировать (fixed либо absolute). Некрасивый код получицо, правда.

Temiks · May 22, 2011


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css" >
        html, body {
            height: 100%;
            margin: 0;
        }
        table {
            table-layout: fixed;
            width: 100%;
            height: 100%;
            border-collapse: collapse;
            padding: 0;
            margin: 0;
        }
        table td {
            padding: 0;
            border: 1px solid black;
        }
        .left-top, .left-down, .right-top, .right-down, .left, .right {
            height: 30px;
            width: 30px;
            background: red;
        }
        .left, .right {
            background: lavender;
            height: 100%;
        }
    </style>
  </head>
  <body>
      <table>
          <tr>
              <td class="left-top" >

              </td>
              <td class="center-top" >

              </td>
              <td class="right-top" >

              </td>
          </tr>
          <tr>
              <td class="left" >

              </td>
              <td class="center" >

              </td>
              <td class="right" >

              </td>
          </tr>
          <tr>
              <td class="left-down" >

              </td>
              <td class="center-down" >

              </td>
              <td class="right-down" >

              </td>
          </tr>
      </table>
  </body>
</html>

chillout · May 22, 2011


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css" >
        html, body {
            height: 100%;
            margin: 0;
        }
        table {
            table-layout: fixed;
            width: 100%;
            height: 100%;
            border-collapse: collapse;
            padding: 0;
            margin: 0;
        }
        table td {
            padding: 0;
            border: 1px solid black;
        }
        .left-top, .left-down, .right-top, .right-down, .left, .right {
            height: 30px;
            width: 30px;
            background: red;
        }
        .left, .right {
            background: lavender;
            height: 100%;
        }
    </style>
  </head>
  <body>
      <table>
          <tr>
              <td class="left-top" >

              </td>
              <td class="center-top" >

              </td>
              <td class="right-top" >

              </td>
          </tr>
          <tr>
              <td class="left" >

              </td>
              <td class="center" >

              </td>
              <td class="right" >

              </td>
          </tr>
          <tr>
              <td class="left-down" >

              </td>
              <td class="center-down" >

              </td>
              <td class="right-down" >

              </td>
          </tr>
      </table>
  </body>
</html>

Спасибо Temiks, как раз вот в голову пришла идея, а почему бы не сделать таблицей, совсем про неё забыл )

Sign In

Резиновая рамка п каям сайта.

Question

chillout

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

Gaspode

Link to comment

Share on other sites

chillout

Link to comment

Share on other sites

Gaspode

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Gaspode

Link to comment

Share on other sites

Temiks

Link to comment

Share on other sites

chillout

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information