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

Discussione: sticky footer

Strumenti discussione

Ricerca discussione

Visualizza

Hybrid View

sticky footer

Permessi di invio