problema per centrare sito

[asevenx]

Ciao a tutti, ho un problema per centrare la struttura di un sito. Riporto il link.
http://testsitifederico.altervista.org/sas/

La struttura della pagina è così definita:

<div id="container">

        <div id="barframe">...</div>
	
        <div id="banner"><div class="banner-logo"></div></div>
        
        <div id="menu"><?php include("include/menu.php");?></div>
    	
        <div id="main"><?php include("include/main.php");?></div>

   	<div id="insights"><?php include("include/insights.php");?></div>
 
	<div id="footers"><?php include("include/footers.php");?></div>
			
	<div id="reservate">- <a class="mail" href="...">Area Riservata</a> -</div>
        
    </div>

Mentre il css è:

body{
}

#container{
	margin:0 auto;
	max-width:1270px;	
}

#barframe{
	background-image:url(../images/a/menu-color.png);
	width:100%;
	max-width:1260px; /* -10 */
	font-size: normal 13px;
	font-family:"Open Sans";
	color: #e2e2e2;
	height: 35px;
	line-height: 35px;
	padding-left:10px;
	border-bottom:1px solid #575e64;
}

#banner {
	background-image:url(../images/a/banner-complete.png);
	background-repeat: no-repeat;
	height:149px;
	width:100%;
	max-width:1280px;
	display:block;
}

#main {
	background-image:url(../images/a/main-wall.png);
	height:300px;
	width:100%;
	max-width:1280px;
	display:block;
}

#mini {
	background-image:url(../images/a/main-miniwall.png);
	height:189px;
	width:100%;
	max-width:1280px;
	display:block;
}

#insights{
	background-image:url(../images/a/insights-color.png);
	width:100%;
	max-width:1280px;	
	border-top:2px solid #474747;	
}

#footers{
	background-image:url(../images/a/footers-color.png);
	width:100%;
	max-width:1280px;
	height:100%;
	font-family:"Open Sans";
	color:#e2e2e2;
	padding:18px 0px 13px 0px;
	text-align:center;
	border-top:2px solid #474747;
}

#reservate{
	background-image:url(../images/a/insights-color.png);
	width:100%;	
	max-width:1280px;
	height:100%;	
	min-height:50px;	
	font-family:"Open Sans";
	color:#e2e2e2;
	padding:10px 0px 0px 0px;
	text-align:center;
}

/* pagine */

#page{
	background-image:url(../images/a/page-color.png);
	background-repeat:repeat-x;
	background-color:#e2e2e2;
	font-family:"Open Sans";
	color:#474747;	
	width:100%;
	max-width:1280px;
	padding:20px 0 20px 0;
	text-align:left;		
}

Dove può essere il problema? grazie a tutti

 

[Max 1]

A colpo d'occhio mi sembra che il problema lo dia la regola max-width, inquanto se la finestra è meno di 1280px, si centra mentre se la finestra è più grande resta a sinistra perchè manca la regola margin:0 auto;.

Poi il meno è troppo largo non tutti usano una finestra a tutto schermo come il sottoscritto, pertanto il menu risulta troppo largo

 

[StratoKyke]

Per quello che ho visto l'unico problema è nel footer non centrato ti basta aggiungere in #footers e #reservate la digitura margin: auto;

 

[Max 1]

Per quello che ho visto l'unico problema è nel footer non centrato ti basta aggiungere in #footers e #reservate la digitura margin: auto;

E io cosa ho detto? :mavieni::mavieni::mavieni:

Anche la regola max-width è inutile e crea problemi:mavieni:

 

[Noè Murr]

ciao, guarda a mio avviso hanno ragione Max1 e StratoKyle, ma se proprio vuoi tenere la regola max-width ti consiglio di impostarla uguale su tutti i vari div, per esempio la barra di navigazione in alto c'è l'hai a 1270 px mentre tutto il resto a 1280.. inoltre dovresti come hanno gia detto aggiungere la regola dei margini, io l'ho controllata solo in firefox perchè li ho gli strumenti per modificare il CSS senza dover scaricare praticamente tutte le pagine del sito, ed inserendo la stessa larghezza a tutti i vari componenti e la regola Margin:auto mi sembra che sia perfetto.

P.S. come saprai il sito funziona solo per computer, sui telefoni o su finestre di dimensioni ridotte non funziona molto bene.

 

[WottaFacca]

1) Ti consiglio di togliere quella parte bianca che separa il corpo del sito dal bordo della finestra, ovviamente parlo per gusto personale, è orribile, spero non te la prenda con me

2) Dovresti "stringere" il logo, in modo da evitare lo scroll orizzontale della pagina

3) Prova a lavorare con le grandezze in percentuale, ti aiuta molto ad impostare "bene" il sito

Spero di esserti stato d'aiuto