Creare div windowsLike. Problemi barra titolo.

[pictor]

Sto cercando di creare un div che assomigli sommariamente ad una finestra di Windows.

<div id="layer<%=Indice%>1" class="layer">
  <span class="titleBox">Documenti:</span>
  [img]<%=dirImg&[/img]" alt="Chiudi" title="Chiudi" onclick="document.getElementById('layer<%=indice%>1').style.display='none';" />
  

</p>
  -----
  Stampa dinamica dei contenuti
  -----
</div>

Vorrei che lo span prenda tutta la larghezza possibile e che l'immagine di chiusura stia in alto a destra (distanziamento top:1px, right:1px).

Purtroppo, come al solito, qualche problema ci deve sempre essere

- Anche con Width:100% lo span si ostina a prendere solo lo spazio occupato dal suo contenuto.
- L'immagine (alta 12px), se inserita nello span è troppo alta rispetto al testo e mi fa staccare lo span dal bordo superiore del div principale. Mentre se la metto position:relative con top:1px e right:1px non si posiziona lì ma mi va solo un pò più a destra (ma ben distaccato dal bordo destro del div!)

Ecco un'immagine con l'immagine fuori dallo span, posizionata relativamente:


Qua un pò di codice CSS :

 .layer {
		padding-top:0;
		margin: 0;
		
		top: -20px;
		POSITION:relative; 
		float:right; 
		display:none;
				
		border: 1px solid #76676A;
		border-top-color: #C7D7E4;
		border-bottom-color: #615C59;
		border-left-color: #99B0C2;
		
		right:0; 
		background: #D6D3CE;}
 
 .layer span {top:0px; background: #516DAE; border: 1px solid red; height: 14px; font-weight:bold ; padding:0; margin: 0; color:white;}

 .layer .btnClose {position:relative; top:1px; right:1px; width:12px; height: 12px; margin:0; padding: 0;}

Mi sapete dare una mano? Mi potete anche stravolgere il Css.... basta che sia posizionato correttamente!

Questo vorrei che fosse, più o meno, il risultato finale:


Vi ringrazio molto

[pictor]

Un aiutino?

Avete bisogno di altri elementi?

Mi sapete dare una mano?

[Leilond]

Gli span sono elementi inline e gli elementi inline non possono avere una width
Puoi farlo solo con elementi block-level (div, p ecc) o trasfromando lo span in block-level con "display:block"

Ora ci do unso sgurado approfondito

[Leilond]

prova questo css

    .layer {
        padding: 0px;
        margin: 0px;
        width: 300px;
        border: 1px solid #76676A;
        border-top-color: #C7D7E4;
        border-bottom-color: #615C59;
        border-left-color: #99B0C2;
        background: #D6D3CE;
        }
 
 .layer span {
 background: #516DAE; 
 border: 1px solid red; 
 height: 20px; 
 font-weight:bold ; 
 padding:0; 
 margin: 0; 
 color:white;
 float: left;
 }

 .btnClose {width:12px; height: 12px; margin:0px; padding: 0px; float:right}
 .layer p {clear:left} 

Ma attento, potrebbe andare in conflitto con altre cose che hai nella pagina.... se usato con l'html che hai postato tu, senza nient'altro, dovrebbe andare (cambia ovviamente le width e height)