2010-12-29 4 views
0

у меня есть проблемы с «положением» некоторого кода:Css фон/фон положение проблема

может кто-нибудь помочь мне найти правильное решение, чтобы показать графику в правой и левой стороны, и «содержание» в середине без «белого переполнения»?

Скриншот: http://i.stack.imgur.com/1qfeb.jpg

Источник из file.html

<div id="toggler-1"> 
<div class="box-2"> 
    <div class="left left-img"> 
    </div> 
<div class="left content"> 
    <p>simple text example ...</p> 
</div> 
<div class="right right-img"> 
</div> 
<div class="clear"> 
</div> 
</div> 
</div> 

Источник из CSS:

.content .main .box .box-2{height:100%;width:100%;background:#FFF} 
.content .main .box .box-2 .left-img{background:url("../images/content-box-left-left.gif");background-repeat:repeat-y;width:14px;height:100%} 
.content .main .box .box-2 .right-img{background:url("../images/content-box-right-right.gif");background-repeat:repeat-y;width:14px;height:100%} 
.content .main .box .box-2 .content{text-align:left;color:#000000;vertical-align:top} 
+0

Вы хотите, чтобы устранить белый фон от центра, является то, что правильно? Итак, за «Простым текстовым примером» должен быть серый фоновый рисунок? Извините, не совсем понятно, что вы подразумеваете под «без« белого переполнения »?» – JakeParis

ответ

0

#wrapper { margin: 0 auto; ширина: 922px; }

#leftcolumn { { дисплей: встроенный; цвет: # 333; margin: 10px; прокладка: 0px; ширина: 195px; float: слева; }

#content { { float: слева; цвет: # 333; margin: 10px 13px; прокладка: 0px; ширина: 460px; дисплей: встроенный; позиция: относительная; }

#rightcolumn { { дисплей: встроенный; позиция: относительная; цвет: # 333; margin: 10px 10px 10px 0px; прокладка: 0px; ширина: 195px; поплавок: правый; }

И HTML для этого КСС как

<div id="wrapper"> 

     <div id="leftcolumn"> 



     </div> 
     <div id="content"> 

     </div> 
     <div id="rightcolumn"> 



     </div> 
    </div> 

</body> 

Это лучшая практика, чтобы обернуть все суб DIV в одной внешней обертки DIV как DIV в этом случае.

0

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

.content .main .box .box-2{ 
    height:100%; 
    width:100%; 
    background:#FFF; 
} 

.content .main .box .box-2 .left-img{ 
    background-color: transparent; 
    background:url("../images/content-box-left-left.gif"); 
    background-repeat:repeat-y; 
    width:14px; 
    height:100%; 
} 

.content .main .box .box-2 .right-img{ 
    background-color: transparent; 
    background:url("../images/content-box-right-right.gif"); 
    background-repeat:repeat-y; 
    width:14px; 
    height:100%; 
} 

.content .main .box .box-2 .content{ 
    text-align:left; 
    color:#000000; 
    vertical-align:top; 
} 
+0

hello Sohnee, проблема все еще там, поэтому прозрачный тег не имеет никакого значения :( – spotlr

+0

Это сложно решить, поскольку у меня нет двух ваших изображений ... любой шанс вы можете поместить их где-нибудь, чтобы я мог проверить их использование ? – Fenton

0

У меня есть решение - для заинтересованных людей здесь:

<div id="toggler-1"> 
<div class="lo"> 
    <div class="ro"> 
    <div class="inhalt"> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p> 
    </div> 
    </div> 
</div> 
</div> 

и CSS:

.content .main .box .ro {background:url(../images/content-box-right-right.gif) top right repeat-y;} 
.content .main .box .lo {background:url(../images/content-box-left-left.gif) top left repeat-y;} 
.content .main .box .inhalt {margin:0;padding:2.5em 2.5em 3.5em 2.5em;} 
.content .main .box .inhalt p {margin:0;padding:0;} 
Смежные вопросы