forzare il footer in fondo alla pagina

**tasso85** · 05-08-2011, 22:29

Salve a tutti,

sono abbastanza nuovo all'utilizzo dei CSS, e sto trovando notevoli problemi nel posizionare il footer in fondo alla pagina del sito che sto realizzando.

Ho provato a seguire le indicazioni che si trovano QUI ma il solo risultato ottenuto è che il footer è sparito dalla pagina...

Ecco il CSS attuale:

codice:

/* Stili di elementi precisi */
h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
}

th {
	font-weight: bold;
	text-align: center;
}

table td, table th {
	padding: 2px;
	vertical-align: middle;
}

strong {
	font-weight: bold;
}

em {
	font-style: italic;
}

body {
/*	width: 980px;*/
/*	margin: 0px auto;*/
/*	position: absolute;*/
/*	left: 20px;*/
/*	right: 20px;*/
	margin: 0px;
	padding: 0px;
	height: 100%;
/*	min-height: 100%;*/
/*	min-height: 600px;*/
	font-family: "Times New Roman", Times, serif;
/*	font-family: Arial, "DejaVu Sans", "Liberation Sans", Freesans, sans-serif;*/
/*	font-size: 12px;*/
	background-color: #CCCCCC;
}

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

#content {
	position: absolute;
	top: 105px;
	left: 205px;
	right: 5px;
/*	height: 500px;*/
/*	border: 1px solid green;*/
/*	font-size: 15px;*/
}

#header {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	clear: both;
	height: 100px;
/*	display: table;*/
/*	border: 1px solid red;*/
	text-align: center;
	font-family: "Lucida Handwriting", Times, serif;
	color: violet;
}

/*#header h1 {
	display: table-cell;
	vertical-align: middle;
	font-size: 30px;
}

#header h2 {
	display: table-cell;
	vertical-align: middle;
	font-size: 20px;
}*/

#footer {
	position: absolute;
	bottom: 0px;
/*	left: 0px;*/
	width: 100%;
/*	clear: both;*/
	height: 100px;
/*	border: 1px solid blue;*/
	text-align: center;
	font-size: 12px;
}

#left {
	position: absolute;
	top: 105px;
	left: 0px;
	width: 200px;
	height: 500px;
/*	border: 1px solid orange;*/
	font-size: 12px;
}

#mainmenu {
/*	position: absolute;*/
	width: 100%;
}

#mainmenu > li {
/*	float: left;*/
/*	width: 85%;*/
	list-style-type: none;
	margin-left: 0px;
/*	display: table;*/
}

#mainmenu > li > a {
	width: 95%;
	display: block;
	height: 35px;
	line-height: 35px;
	text-align: center;
	text-decoration: none;
	background-color: pink;
	color: black;
/*	font-weight: bold;*/
	font-size: 21px;
	font-family: "Monotype Corsiva", Times, serif;
}

#mainmenu > li > a:hover {
	background-color: violet;
	color: white;
}

la miriade di commenti è dovuta ai vari tentativi che sto facendo... ogni aiuto sarà apprezzato!

**0-c00l** · 05-08-2011, 22:36

Perchè metti tutto in position absolute? Per mettere gli elementi al centro della pagina basta usare margin: auto.. Comunque se posti l' html possiamo capirci un po' di piu'

**tasso85** · 05-08-2011, 23:24

uso il position: absolute in modo da posizionare gli elementi nell'esatto punto della pagina che vorrei io

nella fattispecie, la pagina ha questa struttura (sintesi)

codice:

<body>
  <div id="header"></div>
  <div id="left"></div>
  <div id="content"></div>
  <div id="footer"></div>
</body>

l'header deve prendere chiaramente tutta la parte alta, il div LEFT si posiziona a sinistra, subito sotto l'header ed è largo 200px, tutto il resto dello spazio alla sua destra deve essere occupato dal content che deve essere a circa 5px dal div LEFT, infine il footer andrebbe in fondo.

Ho provato a mettere e togliere un ulteriore livello di contenitore, tipo:

codice:

<body>
  <div id="container">
    <div id="header"></div>
    <div id="left"></div>
    <div id="content"></div>
    <div id="footer"></div>
  </div>
</body>

ma la cosa non ha aiutato molto... e poi, dopotutto, non si può applicare direttamente lo stile del container al body il quale, alla fin fine, E' il container?

**tasso85** · 08-08-2011, 13:34

Nessun suggerimento su come sistemare il footer? Pensate che il problema sia dovuto al fatto che quasi tutto è posizionato con "absolute"? E se sì, come si fa a togliere quella proprietà pur mantenendo integro l'aspetto della pagina come vorrei venisse visualizzata?

Grazie nuovamente a chi risponderà

**tasso85** · 10-08-2011, 13:59

Allora, alla fine ho risolto con il seguente CSS:

codice:

html {
	height: 100%;
}

body {
	font: 12px "Times New Roman", Times, serif;
	background-color: #CCCCCC;
	position: relative;
	min-height: 100%;
	margin-left: 30px;
	margin-right: 30px;
}

#left {
	float: left;
	margin-top: 10px;
	width: 200px;
}

#content {
	font-size: 14px;
	margin-top: 10px;
	margin-left: 210px;
	padding-bottom: 100px;
}

#header {
	width: 100%;
	clear: both;
	height: 100px;
	text-align: center;
	font-family: "Lucida Handwriting", "Times New Roman", Times, serif;
	color: violet;
}

#footer {
	position: absolute;
	bottom: 0px;
	width: 100%;
	clear: both;
	text-align: center;
}

e finalmente il footer sta dove deve stare, cioè in fondo alla pagina.

Però, vedendo che questo CSS funziona a dovere, o almeno così pare, mi viene spontanea una domanda: come mai in tutti gli esempi CSS che di solito si trovano in giro si tende ad usare sempre un <div id="container"> quando tutti gli stili che puoi applicare a questo div li puoi applicare anche al body, essendo questo il "container" per eccellenza?

Un grazie a chi saprà chiarirmi questo punto

**ResianTaxidrive** · 11-08-2011, 11:42

come realizzeresti il layout di html.it senza un container?

Inoltre, per tornare al tuo caso, hai visto cosa succede se il contenuto della tua pagina è più lungo di una schermata? o se la finestra del browser è più piccola (sia altezza che larghezza)?

**tasso85** · 11-08-2011, 13:39

Originariamente inviato da ResianTaxidrive
come realizzeresti il layout di html.it senza un container?

In che senso, scusa? Analizzando la pagina con firebug, vedo che qui c'è il container, ma quello che chiedevo io è appunto se non si può applicare lo stile assegnato al container direttamente al body, il quale dopotutto E' un container, no?

Originariamente inviato da ResianTaxidrive
Inoltre, per tornare al tuo caso, hai visto cosa succede se il contenuto della tua pagina è più lungo di una schermata? o se la finestra del browser è più piccola (sia altezza che larghezza)?

Provato a rimpicciolire la pagina in entrambe le dimensioni, il footer pare stare dove deve stare, ma magari farò altre prove

EDIT: correzione, se la colonna content è troppo corta, il footer si sovrappone alla colonna di sinistra, che ha float:left... però questo succede sia con il div container, sia senza... come si risolve questo problema? gli esempi qui su html.it e anche gli altri che ho provato, prevedono una colonna sola.

**ResianTaxidrive** · 11-08-2011, 13:41

il footer sta sì dove deve stare ma non hai notato che il testo ci va sopra?

**tasso85** · 11-08-2011, 13:45

Originariamente inviato da ResianTaxidrive
il footer sta sì dove deve stare ma non hai notato che il testo ci va sopra?

Avevo appena editato la mia risposta precedente, appunto

avevo fatto le prove solo con la colonna content più lunga della colonna di sinistra. Però, come ho detto, il problema si presenta sia con sia senza container

come lo si può risolvere?

EDIT: da notare che il testo che "va sopra" al footer è solo quello della colonna laterale, non quello della colonna content che si comporta correttamente

**ResianTaxidrive** · 11-08-2011, 14:08

ma il problema non è container sì container no. Il problema è che quando si da dei posizionamenti assoluti a degli oggetti bisogna sempre farlo con le pinze.

E vedo perchè tuo caso devi mettere un posizionamento assoluto al footer.
Al limite puoi usare la tecnica del sticky footer.

Discussione: forzare il footer in fondo alla pagina

Strumenti discussione

Ricerca discussione

Visualizza

forzare il footer in fondo alla pagina

Permessi di invio