Sono di fretta e non ho guardato attentamente il codice, ma da quello che hai detto di voler ottenere, la soluzione dovrebbe essere semplice.
1. Nella regola di stile del box content, aggiungi position: relative.
2. Nel codice XHTML della pagina scrivi il div che vuoi che sostituisca (o meglio si sovrapponga al content) dentro il div content. Es.:
codice:
<div id="content">
.....contenuti content.......
<div id="content-nascosto" style="display: none;">
......contenuti content-nascosto.....
</div>
</div>
E' importante che la dichiarazione display: none la scrivi come uno stile in linea (nell'attributo style del box content-nascosto) perché è l'unico modo per cambiarla "al volo" con JavaScript (sei costretto a usare JavaScript se vuoi pilotare l'apparizione del div nascosto da un menu).
3. Nella regola di stile per il box content-nascosto imposti:
codice:
width: 100%;
height: 100%;
postion: absolute;
top: 0;
left: 0;
Ricorda che devi avere le dimensioni del box content definite per poter impostare width e height del box content-nascosto a 100%. Così facendo, il box content-nascosto "copre" esattamente il box content quando appare. Di default, un elemento position: absolute ha sempre uno z-index superiore a quello di un elemento statico, quindi il tuo div content-nascosto sarà automaticamente più "alto" rispetto al div content, che è quello che ti interessa (indipendentemente da dove è scritto fisicamente il div content-nascosto nel codice).
4. Per finire, al link del menu che deve far comparire (e se vuoi, anche scomparire) il div quando cliccato, assegni una funzione JavaScript in questo modo:
La funzione JavaScript (che dovrai inserire nella sezione head della pagina o in un file js a parte) è fatta così:
codice:
function showhidebox(boxid) {
if (document.getElementById(boxid).style.display=="") {
document.getElementById(boxid).style.display = "none";
}
else {
document.getElementById(boxid).style.display = "";
}
}
Cliccando sul link quando il box content-nascosto non è visibile, la funzione lo rende visibile, mentre se il box è già visibile, lo nasconde.
Visibility si limita a nascondere visivamente un elemento, ma tale elemento è comunque presente nella pagina e quindi continua a influenzarne il layout. Display invece, non serve a nascondere un elemento ma ne modifica il comportamento. Impostando display: none non si nasconde solo un elemento, ma lo si "elimina" fisicamente dal codice interpretato dal browser (è come se non esistesse). Nel nostro caso era indifferente usare visibility o display, perché il box nascosto è comunque posizionato in modo assoluto e quindi è estratto dal normale flusso del documento, non influenzandone il layout. Tuttavia ho preferito usare la proprietà display al posto di visibility...preferenze personali. 
Spero di esserti stato utile
Rispondi quotando
