[Resolvido] Rodape fixo com diferentes layouts

brcontainer · Agosto 5, 2009

Fazia tempo que não postava nada, então resolvi trazer alguns layouts feitos por mim, baseados no trabalho do Maujor.

Porem tem algumas diferenças no CSS que quem analizar irá perceber.

Ps.:Obrigado a todos do imasters que indiretamente colaboraram.

Duvidas:

*O que é RODAPE FIXO?

Bem o rodape fixo é um rodape do layout que sempre fica na parte de baixo da tela do navegador mesmo que redmimnsione ele continua lá, porem se ele possuir conteudo o sulficiente ele amplia e fica um layout normal.

*Para que serve isso então:

Serve para seu layout não ficar esquisito em resoluções grandes, pois ele acompanha o tamanho da tela do navegador na VERTICAL.

Layout Fixo(normal) com duas colunas:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="pt-br">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>HTML valido</title>
<style type="text/css" media="all">
/**
* CSS por Silverfox
* pagina: http://forum.imasters.com.br/index.php?/user/38899-silverfox/
* Criado em 5/07/2009
**/
*{
margin:0;
padding:0;
list-style-type:none;
}

/*Cria o efeito do rodape fixo*/
html,body{
height:100%;
}
#layout{
height:auto!important;
height:100%;/*Internet explorer 6-*/
min-height:100%;/*Firefox e complacentes*/
}
#layout,#rodape{
width:800px;
margin:0 auto;/*Centraliza o layout*/
}
#layout{
background:#f00;
}
#b{
/*Faz com que o conteudo do site não fique por baixo do rodape*/
clear:both;
visibility:hidden;/*Oculta*/
height:100px;/*Altura do rodape*/
}
#rodape{
height:100px;/*Altura do rodape*/
background:#fc0;
margin-top: -100px;/*Altura do rodape*/
}
/*termina o efeito do rodape fixo*/

#logo{
background:#c0c0c1;
height:140px;
}

#nav{
float:left;
width:140px;
padding:5px 0;
}

#nav ul{
margin:0 5px;
border:5px #fff solid;
}

#nav ul li a{
margin:1px;
display:block;
padding:2px;
background:#c1d21d;
height:20px;
}

#nav ul li a:hover{
background:#fc0;
}

#conteudo{
margin: 0 0 0 140px;
padding: 5px;
}
</style>
</head>
<body>
<div id="layout">
<div id="logo">Titulo do seu site</div>
<div id="nav">
<ul>
	<li><a href="#">link</a></li>
	<li><a href="#">link</a></li>
	<li><a href="#">link</a></li>
	<li><a href="#">link</a></li>
	<li><a href="#">link</a></li>
	<li><a href="#">link</a></li>
	<li><a href="#">link</a></li>
</ul>
</div>

<div id="conteudo">
<p>Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo</p>
<p>Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo</p>
<p>Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo</p>
</div>

<div id="b"></div>
</div>
<div id="rodape">
	<p>Rodape</p>
</div>
</body>
</html>

Layout Liquido duas colunas:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="pt-br">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>HTML valido</title>
<style type="text/css">
/**
* CSS por Silverfox
* pagina: http://forum.imasters.com.br/index.php?/user/38899-silverfox/
* Criado em 5/07/2009
**/
*{
margin:0;
padding:0;
list-style-type:none;
}

/*Cria o efeito do rodape fixo*/
html,body{
height:100%;/*100% para paginas STRICT*/
}
#layout{
height:auto!important;
height:100%;/*Internet explorer 6-*/
min-width:700px;/*Firefox e complacentes*/
min-height:100%;/*Firefox e complacentes*/
}
#layout{
background:#f00;
}
#b{
/*Faz com que o conteudo do site não fique por baixo do rodape*/
clear:both;
visibility:hidden;/*Oculta*/
height:110px;/*Altura do rodape*/
}
#rodape{
height:100px;/*Altura do rodape*/
background:#fc0;
margin-top: -100px;/*Altura do rodape*/
}
/*termina o efeito do rodape fixo*/

#logo{
background:#c0c0c1;
height:140px;
}

#usuarios{
float:left;
width:140px;
padding:5px 0;
}

#usuarios ul{
margin:0 5px;
border:5px #fff solid;
}

#usuarios ul li a{
margin:1px;
display:block;
padding:2px;
background:#c1d21d;
height:20px;
}

#usuarios ul li a:hover{
background:#fc0;
}

#conteudo{
margin: 0 0 0 140px;
padding: 5px;
}
</style>
</head>
<body>
<div id="layout">
<div id="logo">Titulo do seu site</div>
<div id="usuarios">
<ul>
	<li><a href="#">link</a></li>
	<li><a href="#">link</a></li>
	<li><a href="#">link</a></li>
	<li><a href="#">link</a></li>
	<li><a href="#">link</a></li>
	<li><a href="#">link</a></li>
	<li><a href="#">link</a></li>
</ul>
</div>

<div id="conteudo">
<p>Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo</p>
<p>Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo</p>
<p>Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo</p>
<p>Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo</p>
<p>Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo</p>
<p>Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo</p>
<p>Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo</p>
<p>Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo</p>
<p>Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo</p>
<p>Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo Conteudo</p>
</div>

<div id="b"></div>
</div>
<div id="rodape">
	<p>Rodape</p>
</div>
</body>
</html>

Layout liquido com faux columns SEM IMAGENS

e finalmente o melhor de todos, inclusive eu estarei usando em um sistema de CHAT que eu fiz(eu usava javascript para simular mas agora não necessito mais):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>
<title>Colunas com height igual, sem imagens</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/**
* CSS por Silverfox
* pagina: http://forum.imasters.com.br/index.php?/user/38899-silverfox/
* Criado em 5/07/2009
**/
* { /* css reset básico, usando o seletor global */
	margin: 0;
	padding: 0;
}

/*Começa rodape fixo*/
html,body{
height:100%;
}
#tudo {
	margin: 0 auto;
	overflow: hidden;
	height:auto!important;
	height:100%;/*Internet explorer 6-*/
	min-width:700px;/*Firefox e complacentes*/
	min-height:100%;/*Firefox e complacentes*/
}

#b{
/*Faz com que o conteudo do site não fique por baixo do rodape*/
clear:both;
visibility:hidden;/*Oculta*/
height:80px;/*Altura do rodape*/
}
#rodape{
position:absolute;
width:100%;
height:80px;/*Altura do rodape*/
background:#fc0;
margin-top: -80px;/*Altura do rodape*/
}
/*Termina rodape fixo*/


/*Colunas do mesmo tamanho*/
#colunaUm,
#colunaDois,
#colunaTres {
	width: 200px;
	padding-bottom: 1000em;
	margin-bottom: -999.5em;
}
/*Colunas do mesmo tamanho*/

#colunaUm {
	float: left;
	background-color: #ff0;
}
#colunaDois {
	float: right;
	background-color: #f0f;
}
#colunaTres {
	width: auto;
	margin-left:200px;
	margin-right:200px;
	background-color: #f00;
}

#logo{
background:#c0c0c1;
height:140px;
}

</style>
</head>
<body>
<div id="tudo">
	<div id="logo"></div>
	<div id="colunaUm">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
		Duis est quam, accumsan non, placerat in, vulputate eu, neque. 
		Nunc diam. Morbi quis massa vel felis sodales fringilla. 
		Sed eleifend pellentesque nisl. Morbi lectus nibh, fermentum vel, 
		euismod ac, condimentum et, dui. Quisque enim odio, viverra aliquet, 
		dignissim vel, dictum a, nulla. Aliquam in leo. 
		Quisque et arcu id lorem auctor cursus. Aenean egestas magna a purus. 
		Integer egestas. Donec porta luctus nibh.</p>
	</div>

	<div id="colunaDois">
		<p>Nulla facilisi. Nulla in metus vitae dui feugiat cursus. 
		Integer feugiat. In hac habitasse platea dictumst. 
		Sed fermentum blandit ligula. Mauris porta. Duis blandit. 
		Vivamus dignissim commodo arcu. Phasellus sodales cursus mi. 
		Fusce scelerisque sollicitudin sem. Praesent libero. 
		Suspendisse sit amet orci sit amet ligula facilisis dictum. 
		Aenean vitae sem. Ut lacinia enim iaculis sem. 
		Suspendisse lorem nibh, rutrum suscipit, scelerisque at, feugiat et, massa.</p>
	</div>

	<div id="colunaTres">
		<p>Suspendisse est dolor, tempor vitae, fringilla nec, 
		lacinia laoreet, tortor. Praesent varius felis in orci. 
		Quisque tempor quam vel ipsum. Sed feugiat gravida mi. 
		Cras ligula. Ut ac orci in magna egestas mollis. </p>
		<p>Suspendisse est dolor, tempor vitae, fringilla nec, 
		lacinia laoreet, tortor. Praesent varius felis in orci. 
		Quisque tempor quam vel ipsum. Sed feugiat gravida mi. 
		Cras ligula. Ut ac orci in magna egestas mollis. </p>
		<div id="b">Div oculta para equivaler a distancia do RODAPE com o resto do layout</div>
	</div>
</div>
<div id="rodape">
	<p>Rodape</p>
</div>
</body>
</html>

Referencias:

http://www.maujor.com/tutorial/rodape/rodape-fixo-no-fim-da-pagina-7.html

http://forum.imasters.com.br/index.php?/topic/309442-solucao-para-faux-columns-sem-usar-imagens/