Вертикальная полоса по сторонам сайта - PullRequest
Новая
       0

Вертикальная полоса по сторонам сайта

2 голосов
/ 10 января 2010

Я делаю сайт, и мне бы хотелось, чтобы стороны имели изображение, которое повторяется на Y. Вроде как этот сайт. http://www.solutionkaizen.com/html/boutique.php Я просто не уверен, как сделать для него div. Для CSS я думаю, что это в основном установка bg div для моего изображения и повторение Y. Спасибо

Я знаю, как сделать часть CSS, но как бы я сделал div, который охватывает все восемь сайта? Спасибо

но как этот div работает для обеих сторон: 

<    page content   >
<                   >
<                   >
<                   >
<                   >

Это также отличный пример. http://www.ecodetox.ca/

Ответы [ 4 ]

1 голос
/ 10 января 2010 
<style type="text/css">
<!--
body {
    background-color: #FFFFFF;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-image: url(background.jpg);
}

div#main {
    background-color: #fff;
    margin-left:12%;
    margin-right:12%;
}
-->
</style>
</head>

<body>
<div id=main>Hello World!</div>
</body>
</html>

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

0 голосов
/ 10 января 2010

Чтобы наилучшим образом добиться того, что эти сайты делают с CSS, я бы сказал следующее:

CSS: 

    body
    {
        background: White url("vertical-fading-bk.png") repeat-x;
    }

    #container 
    {
        width: 800px;
        background-color: White;
    }

    .side-fade
    {
        width: 10px;
    }

    #left
    {
        float: left;
        background: #ececec url("left-soft-fade.png") no-repeat;
    }

    #middle
    {
        width: 780px;   /* (.side-fade * 2) - #container */
        background-color: White
    }

    #right
    {
        float: right;
        background: #ececec url("right-soft-fade.png") no-repeat;
    }

HTML: 

<body>

    <div id="container">
        <div id="right" class="side-fade">
            <!-- Note how #right comes first. -->
        </div>
        <div id="left" class="side-fade">
            <!-- Then #left. -->
        </div>
        <div id="middle">
            Main body content here...
        </div>

    </div>

</body>
0 голосов
/ 10 января 2010

если вы видите их код, они используют действительно, действительно высокое изображение в качестве фона, и они установили его в качестве фона всего тела ...

их изображение: http://www.solutionkaizen.com/images/background.jpg (вы можете увеличить его, если оно масштабируется до размера браузера) ..

0 голосов
/ 10 января 2010 
#div {
  background-image: url('bg.png');
  background-repeat: repeat-y; 
  background-color: #fff;
}

<div id="div">Greetings!</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...