Posionar footer.

Cazanova · Julho 16, 2006

Como posso colocar o footer no footer, sem javascript?

No Firefox funciona que é uma beleza mas no IE ele não posiciona correto.

[left]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 	<html>		<head> 			<title>CSS Layout</title> 			<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>			<style type="text/css"> 				html, body {					margin: 0;					padding: 0;					height: 100%;				}				body {					font: normal 12px "Trebuchet MS",Verdana,sans-serif; 				} 				/* LAYOUT */ 				#container { 					background-color: red; /* ALARME VISUAL DE ERRO DE ARREDONDAMENTO */ 					min-height: 100%;					min-width: 620px; /* LARGURA MÍNIMA NO VIEWPORT */ 					position: relative;					_position: none;				} 				#header { 					width: 100%; 					padding: 10px 0; 					text-align: center; 					color: #666; 					background: #f0fff4; 				} 				/* COLUNAS C/ALTURAS IGUAIS */ 				#wrapper { 					overflow: hidden;					padding-bottom: 50px;				} 				#content, #wrapside1, #side1, #wrapside2, #side2 { 					padding-bottom: 1001em; 					margin-bottom: -1000em 					/* padding-bottom efetivo = padding bottom + margin-bottom = 1em */ 				} 				#content, #side1, #side2 { 					padding-top: 1em; 				} 				#wrapside1 { 					float: left; 					width: 50%; 					margin-left: -385px; 				} 				#side1 { 					margin-left: 385px; 					/*background: #eef; */				} 				#content { 					float: left; 					width: 770px; 					background-color: #ffc; 				} 				#wrapside2 { 					float: right; 					/*width: 49.5%;*/ /* CORREÇÃO DE ERRO DE ARREDONDAMENTO */ 					width: 50%; 					margin-left: -385px; 				} 				#side2 { 					margin-left: 385px; 					/*background: #cfc; */				} 				#footer { 					clear: both; 					width: 100%; 					color: #fff; 					background: #f90;					bottom: 0px;					position: absolute;					height: 50px;				} 			</style>			<!--[if lte IE 6]> 				<style> 					#content, #wrapside1, #side1, #wrapside2, #side2 { 						padding-bottom: 1000.5em; 					} 				</style>			<![endif]--> 		</head> 	<body>		<div id="container"> 			<div id="header"> 				<h1>Layout Fluido 3 Colunas c/Alturas Iguais + Coluna Central c/Largura Fixa</h1> 			</div> 			<div id="wrapper"> 				<div id="wrapside1"> 					<div id="side1"> 						<h2>Líquida - primeiro no fonte</h2> 						<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p> 					</div> 				</div> 				<div id="content"> 					<h2>Fixa - segunda na fonte</h2> 					<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 					<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 					<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 					<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 					<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 					<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 					<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 					<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 					<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 					<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>					<p>ÚLTIMA LINHA</p>				</div> 				<div id="wrapside2"> 					<div id="side2"> 						<h2>Líquida - terceira na fonte</h2> 						<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> 					</div>				</div>			</div> 			<div id="footer"> 				<p><span>HTML 4.01 Strict e XHTML.</span>Testado no <strong>Opera 9</strong>, <strong>Firefox</strong> e <strong>MSIE 6</strong>.</p> 			</div>		</div> 	</body> </html>[/left]

Maujor · Julho 16, 2006

Faça as seguintes alterações nas CSS:

#footer {

clear: both;

width: 100%;

color: #fff;

background: #f90;

bottom: 0px;

position: absolute;

height: 50px;

}

--------------------------------------------------------------------------

#wrapside2 {

float: right;

width: 50%;

width: 49.5%;

margin-left: -385px;

}

pa_bruno · Julho 17, 2006

naum eh possivel... ng lê o q a gente escreve naum? aff... <_< sem codigos pelo amor d deus...

Entrar

Arquivado

Posionar footer.

Recommended Posts

Cazanova 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Maujor 144

Compartilhar este post

Link para o post

Compartilhar em outros sites

pa_bruno 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Variável dentro dentro do strtotime

Carregamento preloading

Consulta SQL dentro de outra consulta

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante