Ir para conteúdo

POWERED BY:

Arquivado

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

MoRbId_AnGeL

Apanhando para posicionar footer

Por , em Desenvolvimento frontend

Recommended Posts

MoRbId_AnGeL    0

MoRbId_AnGeL
Postado

Galera, estou criando um layout que contém cabeçalho, três colunas e rodapé. Mas, infelizmente, não estou conseguindo posicionar corretamente o rodapé. O resto do layout está obedecendo corretamente minhas regras CSS mas o rodapé não.

 

O código-fonte da página é o seguinte:

 

<!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>	<title> Página sem Nome</title>	<meta http-equiv="pragma" content="no-cache" />	<meta http-equiv="Content-Type" content="text/html; charset=utf-unicode" />	<meta name="robots" content="ALL" />	<meta name="distribution" content="Global" />	<meta name="rating" content="General" />	<meta name="author" content="Daniel A. Tiecher" />	<meta name="language" content="pt-br" />	<meta name="doc-class" content="Completed" />	<meta name="doc-rights" content="Public" />	<link rel="shortcut icon" href="http://localhost/img/favicon.ico" />	<base href="" />	<link rel="stylesheet" type="text/css" href="style.css" /></head><body><div id="wrap">	<div id="header">		<p> Cabeçalho </p>	</div>	<div id="nav">		<p> Navegação Principal </p>	</div>	<div id="main">		<p> Conteúdo Principal  </p>	</div>	<div id="nav2">		<p> Navegação Secundária </p>	</div>	<div id="footer">		<p> Rodapé </p>	</div></div></body></html>

E esse é o CSS da página:

 

/* CSS do Layout */html, body, #wrap {  min-height: 100%;  width: 100%;  height: 100%;}  html>body, html>body #wrap {  height: auto;  }#wrap {  width: 750px;  margin: 0 auto;  text-align: left;  position: relative;  top: 0;}#header {  heigth: auto;  position: absolute;  background: blue;  width: 750px;  }#main {  top: 100px;  width: 450px;  position: absolute;  left: 150px;  background: green;  }#nav {  width: 150px;  position: absolute;  left: 0px;  top: 100px;  background: red;  }#nav2 {  width: 150px;  position: absolute;  right: 0px;  top: 100px;  background: yellow;  }#footer {  background: purple;  position: absolute;  bottom: 0;  }

Se vocês testarem, verão que ao invés do footer se posicionar embaixo do resto do conteúdo, ele está se posicionando acima do header.

 

Já tentei mudar o código inúmeras vezes mas o maldito rodapé nunca vai parar onde eu quero. Sem falar que já fiz o teste em mais de um browser (Opera, Firefox e IE/Win).

 

Alguma idéia?

Compartilhar este post

Link para o post
Compartilhar em outros sites

MoRbId_AnGeL    0

MoRbId_AnGeL
Postado

Ainda não havia lido este artigo, vou ler ele agora mesmo. Estou usando absolute nessas divs pois a div wrap que contém todas as outras usa position: relative. Fiz isso para centralizar meu layout visto que, para mim, um layout líquido não ficaria legal.Por acaso eu cometi algum erro? Não sei muita coisa de CSS, apenas o básico.Vou terminar de ler o artigo que você recomendou e se mesmo assim não conseguir eu apareço no tópico de novo.De qualquer forma, valeu!!! :D

Compartilhar este post

Link para o post
Compartilhar em outros sites

pa_bruno    0

pa_bruno
Postado

leia os artigos... vai ver q posicionar o site no centro eh bem mais fácil q fazer assim... ;)

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