Rodapé

[Tsubaru 1]

Galera, já faz tempo que ando tentando descobrir uma solução pra isso, mas tá difícil.

 

Exemplo, vejam o rodapé do fórum.

Dependendo da página a barra de rolagem está imensa, mas e se não tiver conteúdo o suficiente pra ter barra de rolagem?

 

Estou fazendo um fórum e preciso que o rodapé seja um rodapé.

 

A solução que sempre usei foi criar uma tabela com 2 linhas, onde a tabela tem 100% tanto de altura quanto de largura, e a célula inferior tem valign bottom.

Na célula de cima fica todo o site, na de baixo, só o rodapé.

 

Assim:

 

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" valign="top">
 <tr>
	<td height="50%">

	conteudo

	</td>
 </tr>
 <tr>
	<td width="50%" valign="bottom">

	rodape

	</td>
 </tr>
</table>

Por mais que eu coloque os margins no css do body, a tabela sempre fica com espaçamento.

 

Tem alguma solução pra alinhar uma div na base do browser?

 

Imagens

 

Rodapé não se comportando como rodapé

 

Com o table

 

Outra coisa, ali onde aparece o status, usei uma table dentro de uma div, para separar os dados.

Acredito que exista uma forma mais "tableless" de dividir uma div.

Ou tenho que sair colocando div dentro de div?

[brcontainer 16]

tem algum link "online" da sua página ?

abraço ;)

[Tsubaru 1]

tem algum link "online" da sua página ?

abraço ;)

não, tô no easyphp. http://forum.imasters.com.br/public/style_emoticons/default/closedeyes.gif

[xavrim 0]

Opa.. beleza..

 

Pelo que entendi você está querendo q seu rodapé fique sempre na base do navegador.

 

Tente isso:

 

código css

 

#rodape{
position:absolute;
left:0px;
bottom:0px;
}

 

Crie uma div na sua página com a ID rodape.

 

Até

 

Qualquer coisa e só postar!

[Tsubaru 1]

Opa.. beleza..

 

Pelo que entendi você está querendo q seu rodapé fique sempre na base do navegador.

 

Tente isso:

 

código css

 

#rodape{

position:absolute;

left:0px;

bottom:0px;

}

 

 

Crie uma div na sua página com a ID rodape.

 

Até

 

Qualquer coisa e só postar!

Não deu certo não, o absolute faz o rodape sumir :blink:

 

Meu código é esse:

 

#rodape {
	padding: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;	
	margin-bottom: 0px;
	background-image: url(img/logo_bg.jpg);
	border-left: 2px solid #000;
	border-right: 2px solid #000;
	width: 95%;
	top: 100%;
	height: 82px;
}

[donato 0]

olá, deixa eu entender. você quer que o rodapé fique fixo ou que acompanhe o conteúdo?

[WillianAndrade 0]

seu código

 

#rodape {
	padding: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;	
	margin-bottom: 0px;
	background-image: url(img/logo_bg.jpg);
	border-left: 2px solid #000;
	border-right: 2px solid #000;
	width: 95%;
	top: 100%;
	height: 82px;
}

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

 

tente assim:

#rodape {
	width: 95%;
	height: 82px;
	background-image: url(img/logo_bg.jpg) no-repeat top left;
	border-left: 2px solid #000;
	border-right: 2px solid #000;
	clear:both;
}

 

 

 

 

dicas:

 

quando você declarar uma propriedade com valor ZERO, não precisa utilizar nenhuma unidade de medida (px, em, %....)

 

os lances que você fez com margin e padding, você pode aplicar no BODY, ex:

 

body {
	padding:0;
	margin:0;
}

ou até em um seletor universal (*), ex:

 

* {
	padding:0;
	margin:0;
}

 

 

as margens left e right, se você utilizou 'auto' para centralizar, existe outra de forma de fazer isso, pesquise sobre

 

acho que é isso, volte aqui pra falar se deu certo ou não.

 

 

seu código está com tabelas, não sei ao certo se o clear:both funcionará

pq ele limpa todos os lados do rodapé de elementos FLOAT

 

mas tente ai

 

 

abraço

[Tsubaru 1]

Não deu certo, William.

A imagem de fundo sumiu, ele deixou de ser centralizado e ainda continuou lá no meio da página, agarrado ao último div.

 

Acho que não tem jeito não, só na tabela mesmo.

[brcontainer 16]

faça assim:

 

#rodape {
	position:absolute;
	padding: 0px;
	margin: 0px;
	background-image: url(img/logo_bg.jpg);
	border-left: 2px solid #000;
	border-right: 2px solid #000;
	width: 95%;
	bottom: 0px;
	height: 82px;
}

[donato 0]

Coloque como o silver falou mas com position fixed

 

 

 

#rodape {
	position:fixed;
	padding: 0px;
	margin: 0px;
	background-image: url(img/logo_bg.jpg);
	border-left: 2px solid #000;
	border-right: 2px solid #000;
	width: 95%;
	bottom: 0px;
	height: 82px;
}

[brcontainer 16]

Donato FIXED não funciona no IE6 só no 7, FF, opera, etc

;)

[Paulo de Tarso F. M. 24]

Para fazer o position: fixed funcionar no IE6, veja este material do #INSIDE#:

 

Position: fixed; que tal?

 

Eu mesmo já utilizei esta solução e funciona... http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif