problem i con margin

**Athair** · 02-12-2010, 17:39

Salve a tutti, ho ripreso ad usare i css da poco e mi sono cimentato nel realizzare qualcosa di abbastanza semplice.
Tuttavia ho un piccolo problema con i margini, ho provaro a cercare ma non ho trovato risposte alla mia domanda.

vi posto il codice di prova

codice:

<body>
	<div id="top_bar">
    	<div id="menu">questa è la barra menu</div>
    </div>
    
	<div id="container">
    	contenuto
    </div>
    
</body>

codice:

body{
	background-color:#333;
	margin: 0px;
	padding: 0px; 
}
	
#container {
	background-color:#CCC;
	color:#333;
	height: 1200px;
	width:800px;
	margin: 7px auto;
	border: 2px solid #000;

	
}

#top_bar{
	width: auto;
	height: 40px;
	background-color:#000;
	color:#999;
	border-bottom: 1px solid #999;
}
#menu{
	width: 800px;
	height: auto;
	background:#900;
	border: 1px solid #FFF;
	margin-left: auto;         // per centrare orizzontalmente: FUNZIONA
	margin-right: auto;
	margin-top: auto;         // per centrare verticalmente: NON FUNZIONA
	margin-bottom: auto;
}

in pratica vorrei centrare il blocco div id="menu" all'interno di div id="top_bar".
grazie a margin-left: auto; e margin-right: auto; riesco a centrarlo orizzontalmente, ma non riesco invece a centrarlo verticalmente.

probabilmente è una cavolata assurda ma cosa sbaglio?
Grazie anticipatamente a chi risponderà!

**Prill** · 02-12-2010, 19:22

Ciao Athair, una soluzione più semplice potrebbe essere assegnare un padding-top e bottom eguali al tuo div che conterrà il menu che risulterebbe così centrato (ricalcolando poi l'altezza del top_bar o omettendola)

**Athair** · 02-12-2010, 21:07

ti ringrazio per la risposta! infatti nel frattempo così avevo risolto

ma perché c'è questo problema?
risolvere con padding spesso può essere una buona soluzione, ma diventa un problema nel caso in cui ci sia bisogno di creare una struttura dinamica.
C'è quindi qualche altra soluzione?

**Prill** · 02-12-2010, 21:51

sono soluzioni che richiedono in qualche caso codice di marcatura in più o fogli di stili diversi per Explorer. Questa una pagina con degli esempi. E' possibile centrare verticalmente sia elementi di dimensioni note sia elementi di cui non si conoscono le dimensioni.
Guarda anche quiqui scorrendo tutta la pagina e aprendo i link, la soluzione è applicata alla pagina ma può essere applicata anche a un div annidato in un altro

**Athair** · 03-12-2010, 00:52

ci lavorerò un po su! Sicuramente saranno utili, grazie mille

Ho dato un'occhiata ai vari topic in cui già si discuteva di questo problema e da quel che ho capito non c'è ancora una soluzione "definitiva" (correggetemi se sbaglio)

vorrei realizzare la barra superiore simile a quella di questo sito/blog, qualche consiglio a tal proposito?

Discussione: problem i con margin

Strumenti discussione

Ricerca discussione

Visualizza

problem i con margin

Permessi di invio