Centrare #banner

**lorenzos** · 07-05-2005, 23:43

Ciao, mi rivolgo a tutti gli esperti (mi viene in mente pierofix

) di css per un'impaginazione non tabellare.
Innanzitutto lo ammetto, mi avete convinto e ci sto impazzendo da questa mattina.

Non riesco principalmente a fare 2 cose:
1 centrare un div che ho chiamato #banner.
Ho provato ad assegnare questo valore

codice:

#banner {
	position:absolute;
	left:20%;
	height: 80px;
	width: 700px;
	background-color: #FFFFCC;
	border: thin solid #FFFFFF;
	overflow: visible;
	right: 20%;
}

Ma non lo mette centrato orizzontalmente a qualsiasi risoluzione.
Se invece di assoluto lo imposto relativo peggiora solo la situazione...
Poi vorrei inserire sotto il banner una specie di menù e quindo vorrei nidificarlo, ma questo nuovo div (#pulsanti non viene visualizzato).

Potete darmi una mano? Anche consigliandomi una buona guida, qualsiasi cosa, anche perchè sono molto deciso....
Grazie a tutti...

**var** · 08-05-2005, 01:08

prova con una lettura qui.

ciao

**Shores** · 08-05-2005, 02:12

Originariamente inviato da lorenzos
Ciao, mi rivolgo a tutti gli esperti (mi viene in mente pierofix

) di css per un'impaginazione non tabellare.
Innanzitutto lo ammetto, mi avete convinto e ci sto impazzendo da questa mattina.

Non riesco principalmente a fare 2 cose:
1 centrare un div che ho chiamato #banner.
Ho provato ad assegnare questo valore

codice:

#banner {
	position:absolute;
	left:20%;
	height: 80px;
	width: 700px;
	background-color: #FFFFCC;
	border: thin solid #FFFFFF;
	overflow: visible;
	right: 20%;
}

Ma non lo mette centrato orizzontalmente a qualsiasi risoluzione.
Se invece di assoluto lo imposto relativo peggiora solo la situazione...
Poi vorrei inserire sotto il banner una specie di menù e quindo vorrei nidificarlo, ma questo nuovo div (#pulsanti non viene visualizzato).

Potete darmi una mano? Anche consigliandomi una buona guida, qualsiasi cosa, anche perchè sono molto deciso....
Grazie a tutti...

Beh, prima di tutto non usare position per nulla, non ne hai bisogno; poi assicurati che l'oggetto che contiene #banner sia largo come la pagina, e poi dai a #banner margin-left:auto;margin-right:auto; ...

Ciao!

**lorenzos** · 08-05-2005, 09:37

Ma io non lo voglio largo come la pagina. Vorrei fare una cosa tipo: http://www.csszengarden.com/?cssfile...164.css&page=0...

P.S. Il priomo tread non risolve il mio problema...

**lorenzos** · 08-05-2005, 10:18

Può essere la soluzione inserire <div aligne="center"> non nel css ,a nel body?

**Shores** · 08-05-2005, 11:32

Originariamente inviato da lorenzos
Ma io non lo voglio largo come la pagina. Vorrei fare una cosa tipo: http://www.csszengarden.com/?cssfile...164.css&page=0...

P.S. Il priomo tread non risolve il mio problema...

No, non hai letto bene: ciò che CONTIENE la tua div che vuoi centrare nella pagina deve essere largo come la pagina, la div che centri può essere larga come vuoi tu...

Prima usi i CSS e poi vuoi usare <div align=center" che è l'esatto opposto, ovvero un attributo di un tag? :rollo:

Poi comunque, se non ci dai un link alla pagina, è difficile che noi si possa anche solo capire il secondo problema...

**lorenzos** · 08-05-2005, 11:47

Il fatto è che sto lavorando in locale...

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" />
<title>Documento senza titolo</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
</script>
<style type="text/css">
<!--
body {
	background-color: #EBEBEB;
}
-->
</style></head>

<body onload="MM_preloadImages('home2.gif')">
<div id="banner">[img]int.jpg[/img]
  <div id="menù"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('prova1','','home2.gif',1)"><div align="center"></div>
    </a>[img]home1.gif[/img][img]contatti1.gif[/img][img]dove1.gif[/img][img]insegnanti1.gif[/img][img]iscrizione1.gif[/img][img]prezzi1.gif[/img][img]stage1.gif[/img]</div>
</div>
<div id="testo">Stage Teatro Al Castello 

  -

 Bla bla bla
   

    bla bla.</p>
  


bla bla bla.

  </p>
</div>
</body>
</html>

Questo è il codice della pagina.
Questo il css esterno che contiene gli ID

codice:

body{
text-align:center;
}
#banner {
	position:absolute;
	height: 80px;
	width: 700px;
	background-color: #EBEBEB;
	overflow: visible;
	text-align: center;
	visibility: visible;
	border: medium solid #FFFFFF;
}
#menù {
	position: absolute;
	width: 100%;
	background-color: #EBEBEB;
	height: 35px;
	left: 0px;
	top: 81px;
	right: 0px;
	border: medium solid #FFFFFF;
}
#testo {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 15px;
	position: relative;
	top: 117px;
	width: 700px;
	line-height: 20px;
	color: #000000;
	background-color: #FFFFFF;
	border: medium solid #FFFFFF;
}

Ma sono certo che non sia giusto centrare tutto così...

**Shores** · 08-05-2005, 12:04

Se il tuo scopo è quello di centrare, come su zen garden, TUTTO il contenuto della pagina, devi procedere così:

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" />
		<title>Documento senza titolo</title>
		<link href="layout.css" rel="stylesheet" type="text/css" />
	</head>
	<body onload="MM_preloadImages('home2.gif')">
		<div id="corpo">
			<div id="banner">
				[img]int.jpg[/img]
			</div>
	  		<div id="menu">
	  			<div align="center"></div>
	  			[img]home1.gif[/img]
	  			[img]contatti1.gif[/img]
	  			[img]dove1.gif[/img]
	  			[img]insegnanti1.gif[/img]
	  			[img]iscrizione1.gif[/img]
	  			[img]prezzi1.gif[/img]
	  			[img]stage1.gif[/img]
	  		</div>
			<div id="testo">
				Stage Teatro Al Castello 

	  			-

	 			Bla bla bla
	   			

	    		bla bla.</p>
	  			


				bla bla bla.

	  			</p>
			</div>
		</div>
	</body>
</html>

Questo è il codice della pagina.
Questo il css esterno che contiene gli ID

codice:

body {
	margin:0;
	padding:0;
	width:100%
	background-color: #EBEBEB;
}
#corpo {
	width:700px;
	margin-left:auto;
	margin-right:auto;
}
#banner {
	background-color: #EBEBEB;
	border: medium solid #FFFFFF;
}
#menu {
	width:100%;
	background-color: #EBEBEB;
	height: 35px;
	border: medium solid #FFFFFF;
}
#testo {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 15px;
	width: 700px;
	line-height: 20px;
	color: #000000;
	background-color: #FFFFFF;
	border: medium solid #FFFFFF;
}

Nota anche che ho rimosso tutti i position:absolute e tutti i top e left, nonchè ho tolto la lettera accentata dal nome della div menu.

**lorenzos** · 08-05-2005, 12:13

Intanto grazie mille...

In sostanza corpo gestisce tutta la pagina, ma non riesco a capire il meccaniscmo anche se constato che funziona...

**lorenzos** · 08-05-2005, 12:15

Scusa, ancora una cosa...
Senza i valori position, come faccio a staccare dal bordo in alto la pagina di tot pixel?

Discussione: Centrare #banner

Strumenti discussione

Ricerca discussione

Visualizza

Centrare #banner

Re: Centrare #banner

Permessi di invio