Salve a tutti,
sto cercando di creare un layout molto minimale ma con la mia poca esperienza non riesco a posizionare tutto "come vorrei".

Il codice è il seguente:

codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
<!--

#pagina{
	width:100%;
	height:700px;
	z-index:1;
	background-color: #EACC26;
	clip: auto;
	min-height: 600px;
}
#naviga {
	width:100%;
	height:40%;
	z-index:1;
	background-color: #616362;
}
#corpo{
	width:100%;
	height:60%;
	z-index:1;
	bottom: inherit;
}
#apDiv1 {
	position:absolute;
	left:25px;
	top:24px;
	width:95%;
	height:80%;
	z-index:1;
	border-color: white;
	border-style:solid;
	border-width:1px;
}

-->
</style>
</head>

<body>
<div id="apDiv1">
  <center>
    Testo, testo, testo, testo, testo

  Testo, testo, testo, test...
  </center></div>
<div id="pagina">
<div id="naviga"></div>
<div id="corpo"></div>
</div>



</p>
</body>
</html>
Detto in pratica naviga e corpo, le strisce rispettivamente con sfondo grigio e giallo, dovrebbero appunto fungere solo da "sfondo della pagina". Non ci andrebbe scritto nulla dentro.

Lo spazio in cui invece andrò ad inserire gli elementi sarebbe l'elemento "apDiv1".

Ora, come posizionamento vorrei riuscire a fare che si ridimensioni tutto rispetto alla pagina, ovvero i due oggetti dello sfondo siano grandi quanto tutta la pagina, qualsiasi grandezza essa sia, e apDiv1 rimanga sempre un "rettangolo" centrato rispetto alla pagina.

Purtroppo non riesco a farlo, se gli do le grandezze in percentuale "sparisce" tutto (ho fatto diverse prove, questo è solo uno dei miei tanti "guazzabugli" ).

Vi ringrazio in anticipo per l'attenzione,
Neptune.