Ciao a tutti, la necessità è quella di creare un passepartout con i css.

Mi spiego meglio:
Ho un div contenente un menù (il div è classificato come leftbar)
sotto questo menù devo inserire una immagine con al centro un cerchio trasparente all'interno del quale in base alla pagina caricata verrà mostrato un logo

Quindi ho pensato di creare un ulteriore div con position:absolute contentente l'istruzione per richiamare i logo per la pagina visitata e un div sovrapposto con position:relative contentente l'immagine del cerchio trasparente (naturalmente l'immagine è quadrata, ma ho fatto il bordo dello stesso colore del livello contentente il cerchio).
Per esigenze estetiche l'immagine del cerchio vuoto (passepartout) è centrata orizzontalmente nella leftbar.
Il tutto funziona benissimo, il problema è che il logo non si centra e quindi il passepartout funziona, ma solo in una parte.

Se può servire vi mando anche una anteprima comunque il codice nel css è questo:
codice:
#leftbar {
	width:17%;
	float:left;
	position:relative;
}

#logo {
    width:133px;
    height:108px;
    position:absolute;
}

#maschera {
    width:133px;
    height:108px;
    position:relative;
}
mentre quello nell'html è questo:
codice:
<div id="leftcol" >
  <ul>
    <li class="first">Home[*]varie voci con link tutte in li[/list]
  <div id="logo">Qui ci deve essere l'immagine logo centrata nel passepartout</div>
  <div id="maschera">[img]images/passepartout.png[/img]</div>
</div>
Grazie a tutti