Css Hintergrund/background-position Problem

Question

ich ein Problem mit „Position“ haben von Code:

kann mir jemand helfen, eine richtige Lösung zu finden, die Grafik auf der rechten und linken Seite und der „Inhalt“ zeigen in der Mitte ohne den "weißen Überlauf"?

Screenshot: http://i.stack.imgur.com/1qfeb.jpg

Quelle von 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> 

Quelle von 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} 

Answer 1

#wrapper { margin: 0 auto; Breite: 922px; }

#leftcolumn { Anzeige: inline; Farbe: # 333; Rand: 10px; Auffüllen: 0px; Breite: 195px; Schwimmer: links; }

#content { float: links; Farbe: # 333; Rand: 10px 13px; Auffüllen: 0px; Breite: 460px; Anzeige: Inline; Position: relativ; }

#rightcolumn { Anzeige: inline; Position: relativ; Farbe: # 333; Rand: 10px 10px 10px 0px; Auffüllen: 0px; Breite: 195px; float: rechts; }

Und der HTML-Code für diese CSS ist wie

<div id="wrapper"> 

     <div id="leftcolumn"> 



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

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



     </div> 
    </div> 

</body> 

Es empfiehlt sich, Ihr alle Unter DIV in einer äußeren DIV wie Wrapper DIV in diesem Fall zu wickeln.

Answer 2

Haben Sie die Hintergrundfarbe transparent versucht Einstellung, um sicherzustellen, dass die Behälter aren erbt keinen weißen Hintergrund von einer anderen Regel ...

.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; 
} 

Answer 3

ich habe eine Lösung - für Interessenten hier:

<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> 

und die 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;}