Ir para conteúdo

POWERED BY:

Arquivado

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

Andreatti

[Resolvido] Como colocar um rodapé no final da pagina.

Por , em Desenvolvimento frontend

Recommended Posts

Andreatti    0

Andreatti
Postado

Bom galera eu estou querendo criar um rodape(aquele que ficam links como: creditos, direitos reservados e tals) para uma pagina teste que estou fazendo.

A minha intenção é deixar a margin-bottom sempre colado ao final da pagina, nao importando o tamanho desta.

 

Aqui segue o codigo:

 

<!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=utf-8" />
<title>Site de Aprendezado - by Andreatti</title>
</head>
<style type="text/css">
body {
	margin: 0;
	padding: 0;
	background: #666;
	color: #000;
}

#corpo_pagina {
	border-left: 3px #000 solid;
	border-right: 3px #000 solid;
	width: 760px;
	padding: 10px;
	margin: auto;
	background: #CCC;
	text-align: justify;
}

h1 {
	color: #000;
	font: Georgia, "Times New Roman", Times, serif;
}

p {
	margin-left: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
	color: #333;
	font: Georgia, "Times New Roman", Times, serif;
}

#rodape {
	background: #CCC;
	width: 760px;
	margin-left: auto;
	margin-top: 10px;
	margin-right: auto;
	border-left: 3px solid #000;
	border-right: 3px solid #000;
	text-align: right;
	padding: 10px;
}


	
	
</style>

<body>
		<div id= "corpo_pagina">
    	<h1><hr >Primeiro teste com a pagina.</h1><hr />
   		<p>Estou começando a estudar HTML no meu curso Tecnico em Informatica e estou praticando um pouco com o Dreamweaver. Parece ate legal e facil mais não é!
    	<p>Quer tentar você tambem?
    	<p><center><img src="Picapau.jpg" border="1" width="242" height="320" /></center>        
		</div>
        <div id= "rodape">
        Developed by Andreatti.   xD
        </div>
</body>
</html>

Do jeito que esta neste codigo, ela esta ficando no final, porem ela so esta no final graças a imagem que fez a div "corpo_pagina" crescer. Eu queria manter esta div no tamanho vertical da tela do leitor. Como assim?

Por exemplo: Vamos supor que na pagina esteje escrito:

Pagina em construção!

 

Somente isso. Fazendo do jeito que eu fiz ela ficaria uma div pequena. Eu queria faze-la ocupar toda a area vertical da tela do leitor(tamanho minimo). E depois disso, iria fica um pedaço aparecendo o fundo, e depois o rodape(coladissimo no final da pagina).

 

Mais ou menos como nessa imagem que eu desenhie para voces poderem entender:

http://img96.imageshack.us/img96/1418/imagemcui.png

 

Deu pra entender???

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Veja:

 

http://maujor.com/tutorial/rodape-embaixo-da-janela.php

Compartilhar este post

Link para o post
Compartilhar em outros sites

Andreatti    0

Andreatti
Postado

Bom nao foi bem do jieto que eu queria. Mais pelo menos ja sei como deixar o rodape colado no final da pagnia idependente do conteudo.

Isso me gerou outra duvida besta que eu nao consegui resolver. Como faço para deixar o texto posicionado no centro ? Nao quero como se fosse centralizado.

Imagine uma celula de uma tabela. Quero o texto centralizado no sentido top e bottom.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Evandro Oliveira    331

Evandro Oliveira
Postado

Bom nao foi bem do jieto que eu queria. Mais pelo menos ja sei como deixar o rodape colado no final da pagnia idependente do conteudo.

Isso me gerou outra duvida besta que eu nao consegui resolver. Como faço para deixar o texto posicionado no centro ? Nao quero como se fosse centralizado.

Imagine uma celula de uma tabela. Quero o texto centralizado no sentido top e bottom.

 

 

vertical align ainda é um mito para as CSS

 

se for uma única linha, utilize a propriedade line-height

se forem várias, você pode pegar a altura por Javascript e posicioná-la com a margem superior = (altura / 2) * -1

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

valor middle para a propriedade vertical-align

 

http://www.brunodulcetti.com/blog/2007/01/17/vertical-align-no-css-como-quando-e-por-que-usar.html

http://www.maujor.com/blog/2006/07/17/propriedade-vertical-align/

 

é necessário entender completamente as propriedades, se você ficar apenas testando valores e atributos, não chegará a lugar nenhum.

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