CSS Динамический левый / правый столбец Статическая ширина - PullRequest
Новая
       0

CSS Динамический левый / правый столбец Статическая ширина

0 голосов
/ 23 февраля 2011

Проблема в том, что у меня есть фон из двух частей. 

Background Image #1
Background Image Repeats (endlessly) #1
Background Image #2
Background Image Repeats (endlessly) #2

В css вы не можете создать фон, просто прикрепив к нему элементы, например: 

#leftColumn {
    background-image:url('http://i53.tinypic.com/2ezlb7n.png');
    background-repeat:no-repeat;
    background-position:right top;
    background-z-index:1;    

    background-image:url('repeat.png');  
    background-repeat:repeat-x;  
    background-z-index:0;
}

То, что я хочу, чтобы результат был: 

[ BACKGROUND LEFT ]
[ CONTENT ] 
[ BACKGROUND RIGHT ]

Содержание всегда должно быть 768 пикселей. Фон с обеих сторон должен показывать как можно больше.

Я не могу в это поверить, но я смог решить это сам. Это код, который сделал это возможным: 

<style type="text/css">
* {
    padding:0px;
    margin:0px;
}

html, body {
    width:100%;
    height:100%;
    background-color:#333333;
}

#leftColumn {
    background-image:url('http://i54.tinypic.com/aa83lw.png');  
    background-repeat:repeat-x;  
    display:none;   
}

#rightColumn {
    background-image:url('http://i52.tinypic.com/kcjdwi.png');  
    background-repeat:repeat-x; 
    display:none;   
}

#leftImage {
    background-image:url('http://i53.tinypic.com/2ezlb7n.png');
    background-repeat:no-repeat;
    background-position:right;
    width:100%;
    height:128px;
}

#rightImage {
    background-image:url('http://i56.tinypic.com/noh6on.png');
    background-repeat:no-repeat;
    width:100%;
    height:128px;
}

#content {
    width:768px;
    background-color:#666666;
}

@media only screen and (min-width:769px) {

    #leftColumn, #rightColumn {
        display:table-cell;
    }

}

</style>

<table width="100%" height="100%">
<tr>
    <td id="leftColumn" align="right"><div id="leftImage"></div></td>
    <td id="content">&nbsp;</td>
    <td id="rightColumn" align="left"><div id="rightImage"></div></td>
</tr>
</table>

Ответы [ 2 ]

2 голосов
/ 23 февраля 2011

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

HTML: 

<div id="wrapper">
    <div id="content">your center content goes here</div>
</div><!-- close wrapper -->

CSS: 

#wrapper {
    background: #FFF url(/images/widebackground) repeat-x center top;
}

#content {
    margin: 0 auto; /*centers div - change the 0 if you want a different top margin*/
    width: 768px;
}

Это будет повторять ваш фон по горизонтали. Это будет по центру в окне. Если ваше изображение достаточно широкое (4000 пикселей, может быть?), Вы вряд ли увидите его на любом дисплее без нескольких мониторов. Вы также можете установить цвет для любых областей, не покрытых вертикально или видимых через прозрачные области. Я установил это на #FFF, но вы можете выбрать свой цвет или пропустить его.

Вот jsfiddle , демонстрирующий то, что я предлагаю. Я изменил несколько вещей (цвета, размер контента), чтобы сделать его более заметным, но ключевые части все еще там.

0 голосов
/ 23 февраля 2011

Это будет сделано в ff, но не работает в Chrome, sarafi или IE.

Так что, вероятно, это не хорошо для вас! :) 

<html>
<head>

<style>
    body
    {
        display:table;
        width:100%;
        padding:0px;
        margin:0px;
    }
    .centre
    {
        display:table-cell;
        height:400px;
        width:768px;
        text-align:left;    
        margin:0px auto;
        position:relative;
        background-color:#FF0000;
    }
    .left
    {
        display:table-cell;
        background-color:#00FF00;
    }
    .right
    {
        display:table-cell;
        background-color:#0000FF;
    }
</style>

</head>
<body>
    <div class="left"></div>        
    <div class="centre">
        <p>This is the centre content</p>
    </div>
    <div class="right"></div>


</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...