Footer che si mangia il contenuto

**alex.zeta** · 24-04-2007, 19:17

Ciao a tutti.

Ho provato e riprovato... ma senza successo. Credo ci sia qualcosa che non capisco:
ho il problema del footer, che si mangia il contenuto della pagina. Ho effettuato ricerche sul forum, provando soluzioni suggerite, ma nulla:

Provo a spiegarmi:
La pagina è:
http://www.wowline.it/fotogallery2.asp

Il css:

codice:

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	background-image: url(imagesnew/sfondo.jpg);
	background-repeat: repeat-y;
	background-position: center;
	font: small Verdana, Arial, sans-serif;
	background-color: #99CCFF;
}

#container {
	width: 770px;
	margin: 0 auto;
	position: relative;
	min-height: 100%;
	height: auto !important;
	height: 100%;
}

#footer {
	padding: 0;
	height: 44px;
	background-color: #fff;
	border-top: 1px solid #555;
	position: absolute;
	bottom: 0;
	clear: both;
	width: 100%;
}
.chiudifloat {
	clear: both;
  	height: 0;
	font-size: 0;    /* questo serve solo per IE6 */
}

L'html (sintetizzato):

codice:

<html>
...
<head>
...
</head>
<body>

<div id="container">
   
   <div id="masthead">
      (header con i pulsanti)
   </div>

   <div id="titolopagina">
      (titolo in grassetto)
   </div>

   <div id="fotogallery">
      (tabella con contenuto della pagina)
   </div>
   
   <br class="chiudifloat">
   
   <div id="footer">
   </div>

</div>

</body>
</html>

Se clicco l'album "compagnia della moto" si nota come il footer sia troppo in alto, tanto da "mangiare" le ultime foto.
Allora, provo ad inserire nella definizione del container un padding-bottom: 66px, tanto per permettere al footer di non coprire il contenuto, ma si manifesta un nuovo problema:
sulla pagina http://www.wowline.it/fotogallery2.asp, ad esempio, il contenuto della pagina non riempie la finestra e il footer si sposta troppo in basso, subito dopo il bordo inferiore della finestra, lasciando un spazio vuoto tra il contenuto e il footer stesso.

Spero di trovare qualche buon'anima con un pò di pazienza...e soprattutto spero di essere stato chiaro.

Ciao e grazie.
Alex - PD

**serialkiller** · 25-04-2007, 09:13

togli position:absolute dal footer

**alex.zeta** · 25-04-2007, 09:44

Originariamente inviato da serialkiller
togli position:absolute dal footer

Grazie per la risposta...

Ho provato, ma in questo modo il footer si spinge in alto e non resta più attaccato al fondo..

Per capirci, il risultato che intendo raggiungere è http://html.it/guide/esempi/layout_css/esempio15b.html, ovvero: il footer resta sotto, ma se stringo la finestra si alza fino ad arrivare al contenuto.

Nel mio caso però (utilizzando le direttive di html.it) sto footer malefico mi nasconde parte della pagina e non riesco proprio a capire come risolvere.

Ciao!

**serialkiller** · 25-04-2007, 09:54

Io con Firebug ho tolto position:absolute e le immagini si vedono tutte, non saprei.

**alex.zeta** · 25-04-2007, 10:00

Ho modificato il css come da tue istruzioni.. se provi a vedere ora sulla pagina con poco contenuto (links) il footer non sta più in basso..

Alex

**serialkiller** · 25-04-2007, 10:04

ah tu usi explorer, capito...

allora metti il footer fuori dal div principale "container", e aggiustalo dandogli la larghezza giusta e centralo alla pagina.

**alex.zeta** · 25-04-2007, 11:21

no, uso ff.. infatti con ff ho risolto secondo le tue indicazioni.

Ho inserito il footer fuori dal container.
Ho impostato x il container un margin-bottom negativo, in maniera che il footer sia visibile sulla finestra, ma il problema con ie6 rimane: il footer copre parte del contenuto...

Alex...

**serialkiller** · 25-04-2007, 11:36

In FF non serve mettere il foter fuori dal container, basta levare position:absolute;

Se metti il footer fuori dal container e dai margin-bottom negativo è normale si sovrapponga.

**alex.zeta** · 25-04-2007, 11:50

Serialkiller, prima di tutto grazie per il tuo aiuto e la pazienza..

Comincio ad avere un po di confusione in testa..

Il footer ora è dentro il container e la sua position è relative:

codice:

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	background-image: url(imagesnew/sfondo.jpg);
	background-repeat: repeat-y;
	background-position: center;
	font: small Verdana, Arial, sans-serif;
	background-color: #99CCFF;
}

#container {
	width: 770px;
	margin: 0 auto;
	position: relative;
	min-height: 100%;
	height: auto !important;
	height: 100%;
}

#footer {
	width: 770px;
	height: 44px;
	background-color: #fff;
	border-top: 1px solid #555;
	position: relative;
	margin: 0 auto;
}

In questo modo, però, il footer non è + a fondo pagina, ma si appiccica alla fine del contenuto, sia con ie che con ff. (vedi links e fotogallery).

Ci deve essere un punto in cui sbaglio qualcosa.

**serialkiller** · 25-04-2007, 12:07

Premesso che io i posizionamenti assoluti o relativi non li uso mai, per mille motivi, non capisco a cosa servano nel caso specifico, comunque...

Al momento non ho il tempo di scaricarmi la pagina e fare le dovute prove, ma, se hai un head un content e un footer, non la vedo difficile la cosa.

il br "chiudifloat" non serve a nulla se il footer ha clear:both

fai una prova banale..

se vuoi utilizzare il div container:

codice:

<div id="container">

<div id="head">...</div>

<div id="content">...</div>

<div id="footer">...</div>

</div>

gia messi così, senza nessun accorgimento devono stare uno sotto l'altro, se usi position o flottaggi, devi ripulire il footer con clear:both e lui si colloca sotto a content, non ci piove.

Così com'è, è normale che si comporti così, il footer è sotto al div content e quindi si accoda alla fine di quest'ultimo, se fosse fuori da container, si accoderebbe a container.

Fai delle prove, poi se non hai fretta, appena posso ci guardo con più calma, intanto posta i tui risultati.

Discussione: Footer che si mangia il contenuto

Strumenti discussione

Ricerca discussione

Visualizza

Footer che si mangia il contenuto

Permessi di invio