immagine nascosta

[Trx000]

Ho un problema, devo realizzare un "pannello" in cui ci sia un titolo, del testo ed un'immagine sulla destra(il testo sta intorno all'immagine)
-------------questo e' cio' che ho fatto:

<div id"prodotto1" class="prodotto">
<span class="totoloProdotto">PRODOTTO1</span>
<span class="immagine">[img]img/home_p2.jpg[/img]</span>
<span class="testo">mio testo mio testo mio testo mio testo mio testo mio testo mio testo mio testo mio testo mio testo mio testo mio testo mio testo mio testo mio testo mio testo mio testo mio testo mio testo mio testo mio testo mio testo </span>
</div>

----------CSS

.testo{
display: block;
background-image: url(img/sfuma_giallo_bianco.jpg);
background-repeat: repeat-y;
background-position: left;
border-top:1px solid #999999;
border-left:1px solid #999999;
margin-left: 20px;
line-height: 18px;
padding-left: 2px;
}
.prodotto{
position: relative;
width: auto;
height: auto;
margin: 5px;
display: inline;
}
.totoloProdotto {
font-size: 12px;
font-style: italic;
font-weight: bold;
border-top:1px solid #999999;
border-left:1px solid #999999;
display: inline;
margin: 5px;
}
.immagine{
float:right;
margin:2px;
}
--------------------
nonostante le migliaia di errori che troverete nel codice, cio' che mi preme risolvere e' questo: l'immagine sulla destra rimane in parte NASCOSTA dallo sfondo del testo!!!
Mi sapreste dire perche'?
grazie a chi mi dara' una mano

[floyd46]

ciao
prova con:
.immagine{
float:right;
margin:2px;
display:block;
}

[Trx000]

no, non cambia niente purtroppo

[floyd46]

hai la pagina in rete?
oppure posta 1 pò di codice inerente l'immagine ed il contenitore.

[Trx000]

questo e' il box che contiene quello che gia' ho postato(ah, l'immagine "sfuma_giallo_bianco.jpg", si insomma quella che mi copre l'altra immagine, e' larga 400px):

<div id="boxCentropag">
<div id"prodotto1" class="prodotto">
<span class="totoloProdotto">PRODOTTO1</span>
<span class="immagine">[img]img/home_p2.jpg[/img]</span>
<span class="testo">mio testo mio testo mio testo mio testo mio testo mio testo mio testo mio testo mio testo mio testo mio testo mio testo mio testo mio testo mio testo mio testo mio testo mio testo mio testo mio testo mio testo mio testo </span>
</div>
</div>

#boxCentroPag{
position:relative;
top:auto;
left:15%;
width: 450px;
height: auto;
z-index: 1;
text-align: left;
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
line-height: 2em;
}

[floyd46]

prova a scrivere questo codice:
<style type="text/css" media="screen">
html, body{
margin:0;
padding:0;
font-family:Verdana, sans-serif;
text-align:center;
}
#container{
width:398px;
border:1px solid #000;
text-align:left;
margin: 20px auto;
padding:0;
background-color:#e6e6e6;
}
#container p{
font-size:12px;
margin:5px;
text-align:justify;
}
#container h1{
font-size:20px;
color:maroon;
text-align:center;
}
img{
border:none;
margin:5px;
padding:0;
display:block;
float:right;
}
</style>

nel body scrivi:
<div id="container">
<h1>Titolo</h1>
[img]imm.gif[/img]


Lorem ipsum dolor sit amet, sic....</p>
</div>

non ho capito perchè tu, alla classe .testo, vai a dichiarare un background repeat; non sapendo come lo vuoi realizzare questo box, non puoi assegnare lo sfondo al contenitore?
ciao

[Trx000]

grazie, sei molto gentile.
Una cosa sola, se hai un minuto. Ho letto da qualche parte che e' un errore ripetere lo stesso box DIV all'interno di una stessa pagina, quindi se io volessi creare altri pannelli, uno sopra l'altro, come dovrei muovermi?
Grazie ancora.

[floyd46]

se ti riferisci a questo codice: #box, puoi averne solo 1 nella stessa pagina; l' ID deve essere unico; puoi risolvere creando una classe: .box{....};
le classi possono essere richiamate anche 1000 volte nella stessa pagina.
ciao