ciao a tutti,
probabilmente è una cosa molto semplice, ma non ho trovato niente in rete che potesse indicarmi come muovermi in questa situazione. Devo realizzare una struttura con due immagini di sfondo che vanno a incastrarsi con la parte centrale, dove si svilupperà l'intero sito. Sono riuscita a posizionare con 2 div le immagini in questione però non riesco ad "attaccarle" al div centrale.
Ecco il mio risultato:
come potete vedere resta un notevole spazio tra la l'ombra dell'immagine, che dovrebbe appunto affiancarsi alla parte centrale, e il div in bianco.
Questo problema succede per entrambe le parti.
Ho creato il css in questo modo:
/* CSS Document */
body{
margin:0;
color:#232323;
padding-top: 0px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
background-color: #000000;
background-attachment: scroll;
}
.inner_middle {
background-attachment: scroll;
background-image: url(images/inner_middle.jpg);
background-repeat: repeat-y;
background-position: center center;
margin: 0px;
padding: 0px;
float: left;
width: 100%;
height: auto;
}
.left-column{
float: left;
height: 496px;
width: 233px;
padding-top: 0px;
padding-left: 0px;
background-image: url(graphics/bkg-left.jpg);
background-repeat: no-repeat;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
position:relative;
}
.right-column{
float: right;
height: 496px;
width: 233px;
padding-top: 0px;
padding-right: 0px;
background-image: url(graphics/bkg-right.jpg);
background-repeat: no-repeat;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
position:relative;
}
#main{
width:1024px;
height:765px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
font-family: Georgia;
font-size: 11px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #908b51;
text-decoration: none;
float: none;
padding: 0px;
background-image: url(images/body_main_image.jpg);
background-repeat: no-repeat;
background-position: right;
background-color: #FFFFFF;
position:relative;
}
e nella pagina html ho:
<body>
<div class="inner_middle">
<div class="left-column"></div>
<div class="right-column"></div>
<div id="main">------------------------</div>
</div>
</body>
come posso risolvere questo problema?
Vi ringrazio per l'aiuto
elisa