div centrati

**mgs** · 02-09-2007, 14:36

ho provato e riprovato..ma nulla.
vi allego anche una foto così capite il mio "problema".

vorrei centrare tre o piu div all'interno di un'altro..

**Hero_089** · 02-09-2007, 15:38

per esperienza personale devi racchiudere i tre div che vuoi centrare in un div al quale dare la seguente proprietà:

codice:

margin:0 auto;

se qualcuno ha altre soluzioni sono bene accette

**mgs** · 02-09-2007, 17:20

ecco ho preparato un'esempio con css integrato:

link

vorrei centrare i box "menu":
se alla classe box assegno l'attributo float: left; si piazzano a sinistra e si allineano.
se non imposto l'attributo si mettono centralmente ma si inolonnano giustamente..

:rollo:

**Dartfira** · 03-09-2007, 01:02

Devi mettere i box menu dentro un div. A questo div devi dare margin: 0 auto;. Mentre invece poi devi creare un altro div che contiene sia i box che il div che hai creato ora e dargli tex-aling: center; (colpa di ie cacca).

**gabip87** · 03-09-2007, 01:08

il menù non è una serie di div, ma va scritto cosi':

codice:

   <ul>[*]  item1  [*]  item2  [*]  item3  [/list]

**Hero_089** · 03-09-2007, 01:16

forse ho spiegato male la mia idea, ma con questo esempio dovrebbe essere chiaro: prendendo la tua pagina di esempio ho aggiunto alcune semplici cose.

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>
<style type="text/css">
<!--
.box {
	margin: 5px;
	padding: 5px;
	float: left;
	width: 75px;
	border: 1px solid #333333;
	background-color: #F9F8FA;
	text-align: center;
}
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
}
#main {
	width: 500px;
	margin-right: auto;
	margin-left: auto;
}
#main #header {
	background-color: #F5F4F7;
	height: 80px;
	margin-bottom: 5px;
	border: 1px solid #333333;
}
#main #footer {
	clear: left;
	background-color: #EBE9ED;
	padding: 5px;
	margin-top: 5px;
	border: 1px solid #333333;
}

#main #contenitore {
	margin: 0px;
	padding: 10px;
	border: 1px solid #CC3300;
}
#main #contenitore #space {
	clear: left;
}

/*stile aggiunto*/
#hidden{
    
	width:291px;
    margin:0 auto;
    padding:0;
}

-->
</style>
</head>

<body>
<div id="main">
	<div id="header">"header"</div>
		<div id="contenitore">
                       
                        <div id="hidden"> 
				<div class="box" id="div_1">menu</div>
				<div class="box" id="div_2">menu</div>
				<div class="box" id="div_3">menu</div>
			</div>
  		</div>
  	<div id="footer">"Footer"</div>
</div>

</body>
</html>

**mgs** · 03-09-2007, 11:21

/*stile aggiunto*/
#hidden{

width:291px;
margin:0 auto;
padding:0;
}

ma con questo si assegna una larghezza al div (291) quindi con 4 o più div mi va a capo, mentre dovrenbbero disporsi in linea fino ad occupare la larghezza del monitor dell'utente..

**Hero_089** · 03-09-2007, 20:22

Originariamente inviato da mgs
/*stile aggiunto*/
#hidden{

width:291px;
margin:0 auto;
padding:0;
}

ma con questo si assegna una larghezza al div (291) quindi con 4 o più div mi va a capo, mentre dovrenbbero disporsi in linea fino ad occupare la larghezza del monitor dell'utente..

questo è un piccolo neo, ma ovviabile con la modifica del parametro width. Purtroppo in questo caso c'è il float che non fa rispettare le normali proprietà dei div (cioè che prendono le dimesioni in proporzione al contenuto).

Questo è un aggiustamento che ho pensato io ed ho applicato quando ne ho avuto bisogno, se poi esiste una maniera meno macchinosa anche io sono in attesa di scoprirla

**mgs** · 03-09-2007, 21:18

risolto:

spulciatevi il codice...^^

link

grazie

**gabip87** · 03-09-2007, 21:31

Originariamente inviato da mgs
spulciatevi il codice...^^

link

associa la classe space all'ul, invece di ripeterla n volte per il tag[*].
inoltre, evita di usare formattazioni miste (inline e css):
· non tutti i browser si comportano nella stesa maniera:
· se devi fare un update dovrai andare a modificare n pagine;
· fra 5 mesi non capirai più niente se hai le formattazioni sparse da tutte le parti.

Discussione: div centrati

Strumenti discussione

Ricerca discussione

Visualizza

div centrati

Permessi di invio