Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

brcontainer

Rodape fixo no fim da pagina

Por , em Desenvolvimento frontend

Recommended Posts

brcontainer    16

brcontainer
Postado

Materia: http://conteudo.imasters.com.br/9065/r...a-pagina-7.html

 

exemplo por maujor:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Rodape fixo no fim da página</title>
<style type="text/css" media="all">
 html, body {height:100%;} /**/
body {
	margin:0; 
	padding:0;
	background:#ddd;
	color:#666;
	font:75%/1.4 Verdana, Arial, Helvetica, sans-serif;
	text-align:center;
	}
#tudo { 
	width:760px;
	 position:relative;  /*Contexto de posicionamento */
	background:#fff url(bg-auxiliar.gif) repeat-y right;
	margin:0 auto;
	text-align:left;
	min-height:100%;/**/
	border:dotted #999;
	border-width:0 1px;
	}
 * html #tudo {height: 100%;}/**/
#conteudo {padding-bottom:30px;}/**/

#topo {
	background:#cfc;
	width:760px;
	height:100px;
	border-bottom:1px dotted #999;
	text-align:center;
	padding-top:1px;
	}
#principal {
	width:510px;
	padding-left:20px;
	float:left;
	padding-top:10px;
	text-align:justify;
	}
#auxiliar {
	width:200px;
	float:right;
	padding-top:10px;
	}

#rodape {
	background:#b0f1b0;
	width:760px;
	height:20px;
	position: absolute;
	bottom: 0; /**/ 
	border:dotted #999;
	border-width: 1px 0;
	text-align:center;
	}
#rodape p {
	margin:0;
	font-weight:bold;
	color:#060;
	}
ul {
	width:190px;
	margin:0;
	padding:0;
	list-style:none;
	}
ul li {margin:1px 0; }
ul li a, ul li a:visited {
	height:1%;
	font:12px Arial, Helvetica, sans-serif;
	display:block;
	background:#060;
	color:#fff;
	text-decoration:none;
	padding:2px 10px;
	}
ul li a:hover {
	background:#9f9;
	color:#060;
	}
h1, h2, h4 { 	
	font:bold 22px Arial, Helvetica, sans-serif;
	color:#060;
	}
h4 {font-size:16px;}
.clear {clear:both;}
</style>
</head>
<body>
<div id="tudo">
<div id="conteudo">
<div id="topo">
  <h1>Topo</h1>
</div>

<div id="principal">
  <h2>Coluna principal</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eleifend, purus quis laoreet faucibus, ante augue malesuada mi, id rhoncus augue lorem eget elit. Ut sollicitudin sodales purus. Phasellus libero felis, blandit nec, commodo ut, imperdiet ut, nibh. Suspendisse potenti. Donec ullamcorper cursus dolor. Duis vitae ipsum.</p>
<p>Maecenas dapibus hendrerit diam. Morbi varius, massa id pretium accumsan, nunc lorem congue libero, ut euismod metus libero id nulla. Duis posuere odio sed velit vulputate venenatis. Suspendisse et dui ac metus auctor fringilla. Curabitur interdum augue a pede.</p>
  
</div> <!-- Fim da div#principal -->

<div id="auxiliar">
<h4>Coluna auxiliar</h4>
<ul id="nav">

<li><a href="rodape-fixo-no-fim-da-pagina-1.html">Layout — demo-1</a></li>
<li><a href="rodape-fixo-no-fim-da-pagina-2.html">Layout — demo-2</a></li>
<li><a href="rodape-fixo-no-fim-da-pagina-3.html">Layout — demo-3</a></li>
<li><a href="rodape-fixo-no-fim-da-pagina-4.html">Layout — demo-4</a></li>
<li><a href="rodape-fixo-no-fim-da-pagina-5.html">Layout — demo-5</a></li>

<li><a href="rodape-fixo-no-fim-da-pagina-7.html">Layout final menor</a></li>
<li><a href="rodape-fixo-no-fim-da-pagina-6.html">Layout final maior</a></li>
</ul>

</div> <!-- Fim da div#auxiliar -->

<div class="clear"></div>

</div> <!-- Fim da div#conteudo -->
<div id="rodape">
  <p>Rodapé</p>

</div>
</div> <!-- Fim da div#tudo -->
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aprendiz CSS    3

Aprendiz CSS
Postado

Poderia sim...

 

porem um com informa que são duas colunas e um informando que é uma coluna só!

 

abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito