Резиновые бока-фон - Страница 2

KidsKilla · 03.07.2008, 19:03

насколько я понял, нужно чтобы спарва-слева был фон с травой, но при сужении эта трава уходила за края экрана. (а не под блок с контентом)

Liox · 03.07.2008, 19:24

Всё нашёл решение. Причём довольно смешное.

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
</head>
<style type="text/css">
body{
background:url('back.png') repeat-x;
}
*{
margin:0;
padding:0;
}
.box1{
width:100%;
height:100%;
background: url('smoke1.png') top left no-repeat ;
}
.box2{
width:100%;
height:100%;
background: url('smoke2.png') top right no-repeat;
}
.main{
margin:auto;
width:1000px;
background:url('liox2.jpg') no-repeat; 
height:1280px;
}
</style>
<body>
<div class="box1">
<div class="box2">
<div class="main"></div>
</div>
</div>
</div>
</body>
</html>

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

Liox · 03.07.2008, 19:51

Да . Странно я написал это, когда вашего сообщения ещё небыло. А тут такой глюк получился. Вобщем да вы рассуждаете верно.

Mnilionic · 03.07.2008, 22:37

Цитата:

Сообщение от KidsKilla

насколько я понял, нужно чтобы спарва-слева был фон с травой, но при сужении эта трава уходила за края экрана. (а не под блок с контентом)

В моих броузерах трава уходит за края экрана, как и в образце: http://www.liox.ru/div/

убирание под контент делается гораздо проще.

Liox · 03.07.2008, 22:59

Mnilionic:
На вашем примере трава стоит на одном месте. На заданном растоянии, а не прилегает к краям браузера. Ну посмотрите вы наконец пример на ссылке в начале темы, побалуйтесь с размерами экрана. И увидите что надо.

Mnilionic · 03.07.2008, 23:13

в маем примере:
1 - ширина блока контента резиновая (не меньше 600 и не больше 828)
2 - при сужении окна броузера до минимальной ширины в 600 трава уходит за края экрана
3 - при раскрытии окна на 1680*1050 сайт страница растягивается только до 1000px (вместе с травой)

я, конечно дурака свалял, а) что расширил функцианальность и б) что вообще стал помогать. Но так как я уже и под ИЕ подогнал примерчик забирай:

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head xmlns="http://www.w3.org/1999/xhtml">
<style type="text/css">
.box1{
    overflow: hidden;
    min-width: 600px;
}
.box2{
    margin:0 auto;
    max-width: 828px;
}
.outter_1{
    padding-left:86px; margin-left:-86px;
    background: transparent url(http://liox.ru/div/images/backleft3.gif) repeat-y 0 0;
}
.outter_2{
    padding-right:86px; margin-right: -86px;
    background: transparent url(http://liox.ru/div/images/backright3.gif) repeat-y right 0;
}
.main{
    background: silver;
    text-align: center;
}
</style>

<!--[if lte IE 6.5]>
<style type="text/css">
.box1{
    width: expression(  parentNode.offsetWidth < 601 ? "600px": "auto" );
}
.box2{
    width: expression(  parentNode.offsetWidth > 827 ? "828px": "auto" );
}
.outter_1, .outter_2{ zoom: 1; position: relative;}
</style>
<![endif]-->

</head>
<body>

<div class="box1">
<div class="box2">
<div class="outter_1">
<div class="outter_2">
	<div class="main">Hellow world!</div>
</div>
</div>
</div>
</div>

</body>
</html>

Опера 9.5, Лиса 2, ИЕ 6, Сафари 1,3

Liox · 04.07.2008, 00:00

Огромное спасибо. Такую проблемку я бы долго пытался подогнать к вашему варианту. Смешно конечно, то что делаеться таблице с тремя ячейками, в слоях делается через петлю правой ноги над головой...
А у вас талант

. И ничего не зря, очень своевременная и нужная помощь

Mnilionic · 04.07.2008, 00:53

да, таблицей было бы проще.
А вот прижать графику к краям окна не получается.

KidsKilla · 04.07.2008, 01:47

браво =)

Mnilionic · 04.07.2008, 01:48

получилось (если таблицами вообще не прёт можно так):

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head xmlns="http://www.w3.org/1999/xhtml">
<style type="text/css">
*{margin:0; padding:0}
html, body{
    width:100%; height:100%;
    background: #999999;
}
#decor1{
    background: url(http://liox.ru/div/images/backleft3.gif) repeat-y right 0;
    height: 100%; position: absolute; top:0; left:0;
}
#decor2{
    background: url(http://liox.ru/div/images/backright3.gif) repeat-y left 0;
    height: 100%; position: absolute; top:0; right:0;
}
.main{
    width: 600px;
    margin: 0 auto;
    background: silver;
    text-align: center;
}
</style>
<script type="text/javascript">
    var content_width = 600; // ширина контента
    var decor_width = 86; // ширина картинки

    window.onload = init_decors;
    var decor1, decor2;
    function init_decors(){
        decor1 = document.getElementById('decor1');
        decor2 = document.getElementById('decor2');
        window.onresize = decors;
        decors();
    }
    function decors(){
        var d = document.body.clientWidth - content_width;
        var w = 0;
        if( d > 0){
            w = Math.floor (d / 2);
            if( w > decor_width) w = decor_width;
        }

        decor1.style.width = w + 'px';
        decor2.style.width = w + 'px';
    }
</script>
</head>
<body>


<div class="main">Hellow world!</div>
<div id="decor1"></div>
<div id="decor2"></div>


</body>
</html>