Ir para o conteúdo

Criando Um Rodapé Abaixo Do Site


Criado por Marcos Oliveira, Jan 15 2012 23:24

1 resposta neste tópico
  • Por favor, faça o login para responder

#1 Marcos Oliveira

Marcos Oliveira
  • Marcos Oliveira
  • Colaborador
  • 2 Revisões
  • LocalizaçãoBrasil

Revisou 15 janeiro 2012 - 23:24

*
REVISÃO POPULAR!

Objetivo:
Criar um Rodapé Utilizando apenas conceitos básicos em HTML e CSS

Nível de Dificuldade:
Básico.

Pré-requisitos:
Conhecimento inicial sobre HTML e CSS.

Para criar um rodapé que deixa nosso site sempre bonitinho é simples:

Código HTML:

<html>
<head>

</head>

<body>
	<div class="tudo">
   		<div class="topo"></div>
		<div class="conteudo"></div>
   		<div class="rodape"></div>
	</div>
	
</body>
</html>

Código CSS:

<html>
<head>
<style type="text/css">
	body {
  		margin:0;
  		padding:0;
  		height:100%;
	}
	.tudo {
 		min-height:100%;
  		position:relative;
	}
	.topo {
		background:red;
		padding:40px;
	}
	.conteudo {
   		padding:10px;
   		padding-bottom:60px;
	}
	.rodape {
   		position:absolute;
   		bottom:0;
   		width:100%;
   		height:90px;
   		background:blue;
	}

</style>
</head>
<body>

</body>
</html>

E Para Concluir o HTML E CSS Juntos:

<html>
<head>
<style type="text/css">
body {
   margin:0;
   padding:0;
   height:100%;
}
.tudo {
   min-height:100%;
   position:relative;
}
.topo {
   background:red;
   padding:40px;
}
.conteudo {
   padding:10px;
   padding-bottom:60px;
}
.rodape {
   position:absolute;
   bottom:0;
   width:100%;
   height:90px;
   background:blue;
}

</style>
</head>
<body>

<div class="tudo">
   <div class="topo"></div>
   <div class="conteudo"></div>
   <div class="rodape"></div>
</div>
</body>

</html>

Fazendo tudo corretamente você verá o resultado, esta é considerada a maneira mais fácil de se fazer um rodapé. Espero que tenham gostado.

#2 Clube do PhP

Clube do PhP
  • Clube do PhP
  • Colaborador
  • 5 Revisões
  • LocalizaçãoPalmas - Pr - Brasil

Revisou 27 abril 2012 - 13:33

Belo post...

E bela divisão, esse e para os iniciantes e, facil de entender...

Estas de parabens amigo...
Queria alterar o mundo...
Mais não me deram o código-fonte!!!




1 usuário(s) está(ão) lendo este código

1 membro(s), 0 visitante(s) e 0 membros anônimo(s)