Footer centrato

**a.felix** · 01-04-2009, 09:33

Ciao!
ho un problemino con un footer ....devo centrarlo sulla pagina e ovviamente attaccarlo alla base..
ma non ci riesco, l' ho messo al 100% di larghezza e poi ho centrato lo sfondo (per me e' uguale), ma su IE mi da' problemi e me lo visualizza non centrato

CSS

codice:

html, body{
width: 100%;
height: 100%;
max-height: 100%;
margin: 0;
padding: 0;
text-align:center;
font: 12px 'Lucida Grande', Geneva, Arial, Verdana, sans-serif; 
color: #999;
}

#MyBody{
background: url('../Img/Bacgk_1.gif') #000000 no-repeat fixed center top ; 
}

#main{
width: 840px; 
height: 93%;
min-height:93%;
margin: 10px auto;
border: 1px solid #fff;
background:transparent url('../Img/transbg.png') repeat;
z-index:1;
}

#footer {
	width: 100%;
	height: 37px;
	position:absolute;
	margin-left:auto;
	margin-right:auto;
	background: no-repeat url(../Img/Footer.png) center;
	bottom: 0px;
	z-index:9997;
	font-family:"Myriad Pro", "Courier New", Courier ;
	font-size: 11px;
	text-align:center;
	color:#FFF;
	padding-top:40px;
	overflow: hidden;
}

HTML

codice:

<body id="MyBody">
<div id="footer">Testo</div>
<div id="globalheader">
	<ul id="globalnav">
                <li id="gn-Home">Home
		<li id="gn-Giocatori">Giocatori
		<li id="gn-Servizi">Servizi
		<li id="gn-News">News
		<li id="gn-Newsletters">Newsletters
		<li id="gn-Contatti">Contatti
	[/list]
</div>
<div id="main">
[img]Img/Logo.png[/img]
</div>
</body>

**emnlmn** · 01-04-2009, 09:52

Ciao.
La prima cosa che non capisco è il motivo per il quale hai inserito il footer in quella posizione

. Probabilmente hai la tua buona motivazione

.
Ora non ho tempo di testare il codice ma la prima cosa che mi verrebbe da provare per risolvere il problema e' modificare la dichiarazione background nella regola del footer in questo modo:

codice:

  background: no-repeat url(../Img/Footer.png) 50% 0;

fammi sapere se per caso funziona

.

**a.felix** · 01-04-2009, 10:29

no non funge

cmq grazie
ho messo il footer nelle prime righe della pagina perche' e' l'unica parte dove ce' un po' di testo sulla home e volevo che lo spider del motore di ricerca lo leggesse prima...

so matto :berto: ?

**emnlmn** · 01-04-2009, 10:45

Ho provato velocemente il codice.
Potendolo testare solo con firefox 3.08 e ie7 non so se il tuo problema sia relativo anche (e sopratutto) a ie6. In ogni caso con la correzione che ti avevo indicato lo sfondo risulta centrato in ie7...

**a.felix** · 01-04-2009, 11:21

bho a me risulta attaccato a dx

**a.felix** · 01-04-2009, 11:26

ho messo la pagina On-Line

**emnlmn** · 01-04-2009, 12:23

Si effettivamente hai ragione... provando in locale avevo un risultato diverso.

Comunque, se desideri mantenere quel tipo di layout con il footer in alto, e quindi usare il posizionamento assoluto, potresti fare una cosa del genere

codice:

#footer {
	width: 884px;
	height: 37px;
	margin-left:-442px;
	padding-top:40px;
	position:absolute;
	bottom: 0px;
	left:50%;	
	z-index:9997;
	font-family:"Myriad Pro", "Courier New", Courier ;
	font-size: 11px;
	text-align:center;
	overflow: hidden;
	background: no-repeat url(../Img/Footer.png) left top;
	color:#FFF;
}

Piccolo dettaglio, l'immagine e' larga 883px, ma siccome è dispari non potevo impostare il margine negativo corretto al box, quindi dovresti ricrearla un pixel più larga.
Se saltano fuori altri problemi dillo

**a.felix** · 01-04-2009, 12:47

pefetto veramente molto gentile!!!

se posso...vedi il main? ho fatto la porcata di metterlo al 90%....e con il fatto che sotto ha il footer sopra non da' problemi ..ma secondo te quale era il modo corretto?
se lo imposto al 100% ovviamente poi ho un overlow pari alla dimenzione del menu..
ho provato a fare qualcosa tipo 100% - altezza del menu...ma credo funzioni solo nei miei sogni :berto:

Discussione: Footer centrato

Strumenti discussione

Ricerca discussione

Visualizza

Footer centrato

Permessi di invio