Centrare un layout fatto con i div

**Tubinga** · 16-07-2009, 09:01

Ciao, mi sto cimentando con qualche prova di impaginazione DIV.
Uso Dreamweaver CS3.
Mentre stavo notando che è relativamente facile organizzare i vari div ed assegnare loro diversi stili e caratteristiche, è venuto fuori un problema: non so come fare affinchè tutto il contenuto impaginato risulti centrato rispetto alla pagina del browser.
Ho realizzato un esempio di pagina ... secondo voi quale variabile dovrei cambiare per riuscire a risolvere la cosa?

Questo è il link al file > http://rapidshare.com/files/256362198/untitled.html

Questo il codice

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>prova</title>
<style type="text/css">
<!--
body{
	text-align:center;
	margin:0;
	padding:0;
	background-color: #003366;
	margin-right:auto;
	margin-left:auto;	
}

#alfa {
	position:absolute;
	width:200px;
	height:115px;
	z-index:1;
	left: 451px;
	top: 483px;
	background-color: #990066;
}
#beta {
	position:absolute;
	width:200px;
	height:115px;
	z-index:2;
	left: 451px;
	top: 124px;
	background-color: #0099CC;
}
#gamma {
	position:absolute;
	width:200px;
	height:115px;
	z-index:3;
	left: 451px;
	top: 364px;
	background-color: #99FF99;
}
#delta {
	position:absolute;
	width:200px;
	height:115px;
	z-index:4;
	left: 451px;
	top: 244px;
	background-color: #996699;
}
-->
</style>
</head>

<body>
<div id="alfa">testo di prova 3</div>
<div id="beta">testo di prova 2</div>
<div id="gamma">testo di prova 1</div>
<div id="delta">testo di prova 4</div>
</body>
</html>

Grazie per l'help,
T.

**LùcazStrict** · 16-07-2009, 09:06

non devono essere con posizionamento assoluto, ma con margin:auto;

**Tubinga** · 16-07-2009, 09:14

Ciao, se applico

codice:

position:auto;

al posto di

codice:

position:absolute;

i quattro div si allineano tutti a sinistra e perdono le loro coordinate ....

**LùcazStrict** · 16-07-2009, 09:52

ma no, leva position, e aggiungi soltanto margin:auto!!

PS
in una struttura simile direi che è utile aggiungere un container

**Tubinga** · 16-07-2009, 10:18

Se levo position:absolute ed aggiungo solo margin:auto, il div si centra rispetto alla larghezza della pagina ma perde gli attributi di posizione che gli avevo assegnato...

Prima il layout era così

Poi impostando margin:auto ed eliminando position:absolute al solo div BETA succede questo

Cosa intendi per "container"? ...

Discussione: Centrare un layout fatto con i div

Strumenti discussione

Ricerca discussione

Visualizza

Centrare un layout fatto con i div

Permessi di invio