Сложная ситуация CSS с центрированной страницей и двумя отдельными фонами слева и справа - PullRequest
Новая
       26

Сложная ситуация CSS с центрированной страницей и двумя отдельными фонами слева и справа

0 голосов
/ 19 января 2012

Прикрепленное изображение - это то, чего мы хотим достичь с помощью html / css. Основные моменты заключаются в том, что страница имеет центр в 960 пикселей, левый столбец занимает почти 1/3 этого, а правый - почти 2/3. Обе секции разделены темно-серой линией. Это просто сделать.

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

Я ищу чистое, независимое от браузера решение, а не хак, который работает в некоторых случаях, а в некоторых - нет. Кроме того, если вам нужна помощь, мы используем LessCSS (также работают CSS3-решения).

Ценю ваш вклад!

screenshot

1 Ответ

1 голос
/ 19 января 2012

Мне удалось сделать это, используя CSS и JS (используя jquery, но вы могли бы делать подобные вещи, используя чистый JS). Я установил влево / вправо, чтобы просто использовать разные цвета фона - не стесняйтесь использовать изображения.

CSS: 

body {
    margin: 0px;
}

#full {
    min-width: 960px;
    position: relative;
}

#dleft {
    min-width: 319px;
    background-color: darkGray;
    border-right: solid 3px gray;
    height: 200px;
    position: absolute;
    top: 0px;
    left: 0px
}

#dright {
    min-width: 638px;
    background-color: lightGray;
    height: 200px;
    position: absolute;
    top: 0px;
    right: 0px;
}

.left-content {
    float: right;
    border-top: solid 1px gray;
    border-bottom: solid 1px gray;
    width: 299px;
    padding: 10px;
    margin-top: 10px;
}

.right-content {
    float: left;
    border-top: solid 1px gray;
    border-bottom: solid 1px gray;
    width: 618px;
    padding: 10px;
    margin-top: 10px;
}

JS: 

function resizeDivs()
{
    var WIDM = 960;
    var WIDL = 319;
    var WIDR = 638;

    var ww = $(window).width();

    if(ww <= WIDM)
    {
        $('#full').width(WIDM);
        $('#dleft').width(WIDL);
        $('#dright').width(WIDR);
    }
    else
    {
        var pad = (ww - WIDM) / 2;
        $('#full').width(ww);
        $('#dleft').width(WIDL + pad);
        $('#dright').width(WIDR + pad);
    }               
}

$(document).ready(resizeDivs);
$(window).resize(resizeDivs);

И, наконец, HTML: 

<body>
    <div id="full">
        <div id='dleft'>
            <div class="left-content">
                Left Column
            </div>
        </div>
        <div id='dright'>
            <div class="right-content">
                Right Column
            </div>
        </div>
    </div>
</body>
...