sticky footer

**Nemesis_us** · 30-06-2011, 17:29

Ciao ragazzi, ho un problemino con lo sticky footer di Rayan Fait http://ryanfait.com/sticky-footer/

Ho provato in tutti i modi a spingere il footer che ho all'interno del <div> ma niente da fare.

Prima di tutto il codice XHTML 1.0 Strict

codice:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it" dir="ltr">
	<head>
		<title>Luca - Home - Italiano</title>
		<link href="style.css" type="text/css" rel="stylesheet" />
	</head>
	<body>
		<div id="all">
			<div class="wrapper">
				<div id="content_all">
					<div id="header">
						<h1><span>Luca</span></h1>	
						<div id="language_bar">
							<ul>
								[*]<span>ITALIANO</span>
								[*]|
								[*]DEUTSCH
							<ul>
						</div>
					</div>
					<div id="content">	
						<div id="menu">
							<ul>
								[*]<span>HOME</span>
								[*]NOVITÀ
								[*]STAFF
								[*]CHI SIAMO
								[*]HAUTE
								[*]CONTANTO
							<ul>
							<div id="half_line">
								<span>-</span>
							</div>
						</div>
						<div id="content_text">
							<h2>Home</h2>
							

test</p>
						</div>
					</div>
				</div>
				<div class="push"></div>
			</div>
			<div class="footer">
				

test</p>
			</div>
		</div>
	</body>
</html>

con il rispettivo CSS

codice:

@CHARSET "ISO-8859-1";

body {
	background-image: url(images/bg.gif);
	background-repeat: repeat;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 100%;
	padding: 0;
	margin: 0;
}

#header{
	background-color: black;
	margin: 0;
	border-top: 1px solid black;
	padding: 0;
}

#header h1{
	background-image: url(images/logo.jpg);
	background-repeat: no-repeat;
	height: 156px;
	width: 359px;
	margin: 0;
}

#header h1 span{
	font-size: 1px;
	visibility: hidden;
}

#language_bar ul{
	color: white;
	list-style: none;
	text-align: right;
	padding-right: 5px;
	padding-bottom: 2px;
}

#language_bar ul li{
	display: inline;
	font-size: 10px;
}

#language_bar ul li span{
	text-decoration: underline;
}

#language_bar ul li a{
	color: white;
	text-decoration: none;
}

#language_bar ul li a:hover{
	text-decoration: underline;
}

#content_all{
	padding: 0;
	margin: 0;
	position: absolute;
	right: 50%;
	margin-right: -475px;
	margin-top: 15px;
	width:950px;
	background-color: white;
	min-height: 650px;
}

#menu{
	font-size: 13px;
	font-weight: bold;
}

#menu ul{
	list-style: none;
	text-align: center;
}

#menu ul li{
	display: inline;
	margin-right: 40px;
}

#menu ul li span{
	text-decoration: underline;
}

#menu ul li a{
	text-decoration: none;
	color: black;
}

#menu ul li a:hover{
	text-decoration: underline;
}

#half_line{
	border-bottom: 1px solid black;
	margin-right: 90px;
}

#half_line span{
	font-size: 1px;
	visibility: hidden;
}


/* --- TEST STICKY FOOTER --- */


* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
clear: both;
}

Come si vede dall'immagine che ho allegato il <div> di colore bianco che é al centro della finestra, non mi allunga e si incolla al bordo della pagina.

Un ultima osservazione: ho evidenziato nell'immagine la scritta TEST che sarebbe il footer, e viene collocato in alto a sinistra della pagina.

Scusate per il post infinito :P ma non sapevo cosa poteva servire.

Grazie mille e a presto

**ResianTaxidrive** · 01-07-2011, 13:48

il problema è che a #content_all hai dato position:absolute. Togliendo quello il footer va in basso.

**Nemesis_us** · 01-07-2011, 18:17

Ho provato a togliere a [COLOR= RED]#content_all[/COLOR] il [COLOR= RED]position:absolute[/COLOR] e torna sotto il footer ma comunque non spinge sul fondo.
Purtroppo se elimino il [COLOR= RED]position[/COLOR] non mi rimane più perfettamente al centro della pagina il contenuto

Grazie per l'aiuto

**ResianTaxidrive** · 04-07-2011, 13:12

guarda per centrare un oggetto in orizzontale non si usa il position:absolute.
Si fa invece un margin:0 auto.

Cosa intendi per non spinge sul fondo?

**Nemesis_us** · 06-07-2011, 17:02

Ciao, scusa se ti rispondo solo adesso....

Grazie per il consiglio del CSS per centrare gli oggetti in orizzontale

mi aveva insegnato il mio ex prof.. che per centrare il sito si doveva aprire 2 <div> e poi giocare con il position absolute e relative -.- senza contare che dovevi inserire dopo la metà del sito -50%

Quando adesso scopro che per una banalità del genere basta mettere margin: 0 auto;

Comunque in parte ora ho risolto, il footer rimane incollato sulla parte bassa del browser, ma quello che mi interessava a me é che il contenuto del sito (che é centrato da un <div> con un colore diverso dal background esterno) veniva ridimensionato e la sua altezza diventava grande quanto é la pagina del browser.

Scusa per il casino

Grazie ancora

**Nemesis_us** · 06-07-2011, 22:17

Ecco come non detto

dopo una giornata in piscina mi é arrivata la soluzione :P

Per fare quello che volevo bastava dare la width e il background-color al tag <div class="wrapper">

ovviamente mi hai illuminato sulla questione per centrare un oggetto in orizzontale

e risparmiare codice inutile sulla compilazione

Grazie ancora e a presto

**ResianTaxidrive** · 13-07-2011, 19:33

Beh diciamo che con il margin:0 auto funziona solo la centratura orizzontale. Per centrare anche verticalmente un div allora le cose si complicano ed è forse per quella situazione che il tuo prof aveva introdotto più contenitori e i posizionamenti.

Discussione: sticky footer

Strumenti discussione

Ricerca discussione

Visualizza

sticky footer

Permessi di invio