fond Css/problème background-position

Question

j'ai un problème avec « position » de certains code:

quelqu'un peut me aider à trouver une solution correcte pour montrer les graphiques à droite et à gauche et le « contenu » au milieu sans le "débordement blanc"?

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

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

Source de 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 { marge: 0 auto; largeur: 922px; }

#leftcolumn { affichage: en ligne; couleur: # 333; marge: 10px; rembourrage: 0px; largeur: 195px; flotteur: gauche; }

#content { float: left; couleur: # 333; marge: 10px 13px; rembourrage: 0px; largeur: 460px; affichage: en ligne; position: relative; }

#rightcolumn { affichage: en ligne; position: relative; couleur: # 333; marge: 10px 10px 10px 0px; rembourrage: 0px; largeur: 195px; flotteur: droit; }

Et le code HTML pour cette css est comme

<div id="wrapper"> 

     <div id="leftcolumn"> 



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

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



     </div> 
    </div> 

</body> 

Il est préférable d'envelopper votre tout sous DIV dans un DIV extérieur comme emballage DIV dans ce cas.

Answer 2

Avez-vous essayé de la transparence à la couleur de fond, pour faire en sorte que les conteneurs Aren N'héritant pas d'un fond blanc d'une autre règle ...

.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

i ont une solution - pour les personnes intéressées ici:

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

et le 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;}