Layout con coordinate assolute.

**AVRstudio** · 01-06-2005, 20:13

Salve gente

Mi sto avvicinando in questi giorni per la prima volta all'utilizzo combinato di DIV e CSS per adottare finalmente uno stile di realizzazione di pagine table-less, solo che ho un problemino.

Non riesco a posizionare centrati i layer della pagina, come vorrei.

Ho letto anche le guide (molto esaustive tra l'altro) di HTML.it ma non riesco a capire dove sbaglio. Premetto che ho provato, prima di giungere alla soluzione che posto di seguito, anche a creare un layer container, ma riuscivo a centrare solo l'header.

Questo il mio CSS attualmente:

codice:

body	 	
			{
			background-image: url(img/background.gif);
			background-attachment: fixed;
			
			margin-bottom: 10px;
			
			font-family: Verdana, Arial, Helvetica, sans-serif;
			font-size: 11px;
			color: #000000;
			}

div
			{
			border-width: 1px;
			border-style: solid;
			border-color: #000000;
			}

div#header
			{
			background-image: url(img/testata.jpg);
			background-color: #FFFFFF;

			position: absolute;
			top: 10px;
			left: 10px;
			overflow: hidden;
			
			width: 700px;
			height: 80px;
			}

div#navbar
			{
			background-color: #FFFFFF;
			text-align: center;

			width: 150px;
			height: 710px;
			
			position: absolute;
			top: 95px;
			left: 10px;
			}

div#content
			{
			background-color: #FFFFFF;

			width: 545px;
			height: 710px;
			
			position: absolute;
			top: 95px;
			left: 165px;
			overflow: auto;
			}

div#footer
			{
			background-image: url(img/testata.jpg);
			background-color:#181F5C;

			position: absolute;
			top: 810px;
			left: 10px;
			overflow: hidden;
			
			width: 700px;
			height: 20px;
			}

Qualcuno saprebbe spiegarmi, possibilmente passo passo, come arrivare centrare il tutto, mantenendo gli stessi allineamenti?

Grazie mille, anticipatamente! ^_^

**Dave-Z** · 01-06-2005, 21:22

l'idea del contenitore è valida, creane uno così

codice:

#contenitore{
 width: quantovuoitu;
 margin: 0 auto;
}

..e sbatti tutto dentro li, altrimenti puoi sempre dare il margin auto, elemento per elemento...

**AVRstudio** · 01-06-2005, 21:43

Ahem.. ti ringrazio, ma anche inserendo il livello "contenitore" paro paro nel codice attuale non risolvo il problema ç_ç

**Dave-Z** · 01-06-2005, 21:49

magari se posti tutto il codice o un link alla pagina è meglio...

**AVRstudio** · 01-06-2005, 22:24

Mi pare giusto

Ecco, questa è la pagina, il CSS è quello di prima, in più ci sono sono le due classi del testo.

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=iso-8859-1" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Documento senza Titolo</title>
</head>

<body>

<div id="header"></div>

<div id="navbar">Barra di Navigazione</div>

<div id="content">
	<p class="testo">
	asdasdasdasdasd
	</p>
</div>

<div id="footer"><p class="footer">Footer della pagina.</p></div>

</body>
</html>

**Dave-Z** · 02-06-2005, 12:55

devi inserire tutti i div nel div content (al quale applichi il margin auto)

Discussione: Layout con coordinate assolute.

Strumenti discussione

Ricerca discussione

Visualizza

Layout con coordinate assolute.

Permessi di invio