Ir para conteúdo

POWERED BY:

Arquivado

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

japalfalfa

posicionar div no rodapé

Por , em Desenvolvimento frontend

Recommended Posts

japalfalfa    1

japalfalfa
Postado

boa noite gente :)

 

peguei como exemplo um tutorial do maujor ( http://www.maujor.com/tutorial/rodape-embaixo-da-janela.php ) e adaptei para o website que estou desenvolvendo...

 

o que eu queria era inserir uma div posicionada sempre no rodapé da página... então ele funciona porém quando redimensiono a janela (ou quando abro em uma configuração de 800x600) o rodapé não fica abaixo do conteúdo, nem muda de lugar... é como se ele não "atualizasse" (deu pra entender isso?! :P )

 

segue o código:

 

CSS

 

html, body {
	height: 100%;
	}
* html #tudo {
	height: 100%; /* hack para IE6 hq trata height como min-height */
	}
* {
	margin: 0;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	color: #000000;
}
/* Div's */
#tudo {
	margin: 0 auto;
	position: relative;
	min-height: 100%;
}
#conteudo {
	width: 780px;
	margin: 0 auto;
	margin-top: -100px;
	padding-bottom: 60px;
}
#topo {
	width: 100%;
	background-image: url(../imagens/fundo_topo.jpg);
	background-repeat: repeat-x;
	height: 100px;
}
#logo {
	margin-left: 0;
	background-image: url(../imagens/logo.png);
	background-repeat: no-repeat;
	width: 220px;
	height: 120px;
}
#menu {
	width: 540px;
	height: 50px;
	margin-top: -90px;
	margin-left: 240px;
	float: left;
}
#relacionado {
	width: 220px;
	height: 480px;
	margin-top: 5px;
	margin-left: 0;
	float: left;
}
#flash {
	width: 540px;
	height: 500px;
	margin-top: -20px;
	margin-left: 20px;
	float: left;
}
#rodape {
	width: 100%;
	background-image: url(../imagens/fundo_rodape.jpg);
	background-repeat: repeat-x;
	height: 50px;
	position: absolute;
	bottom: 0;
	text-align: center;
}

/* Classes */
.clear { 
	clear: both;
}

e o HTML

<body>
<div id="tudo">
	<div id="topo"></div>
	<div id="conteudo">
		<div id="logo"></div>
		<div id="menu"></div>
			<div id="relacionado"></div>
		<div id="flash"></div>
		<div class="clear"></div>
	</div>
	<div id="rodape"></div>
</div>
</body>

obs: removi o conteúdo das divs pra ficar mais fácil de entender a estrutura

 

alguém sabe o que pode ser?

 

desde já obrigado pela ajuda que sempre recebo aqui!

 

edit: acabei de perceber que ele não muda a posição, ele se posiciona no rodapé da página e mesmo que tenha conteúdo ele não altera, o conteúdo passa por baixo (ou por cima) dele...

Compartilhar este post

Link para o post
Compartilhar em outros sites

XauDH    0

XauDH
Postado 

#rodape {
	width: 100%;
	background-image: url(../imagens/fundo_rodape.jpg);
	background-repeat: repeat-x;
	height: 50px;
	position: absolute;
	bottom: 0;
	text-align: center;
}

Então, a div não "desce" por que está com position:absolute.

É só retirar essa linha. Caso você tenha outro problema com posicionamento por tirar essa linha posta de novo aqui.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Édipo Costa Rebouças    0

Édipo Costa Rebouças
Postado

para usar com position dá, mas o problema é que tem bug no ie6...

 

então você teria que adicionar um js, por exemplo, no resize da janela para setar denovo o div na largura certa:

 

 

 

 

<script type="text/javascript">
window.onresize = function(){
document.getElementById('rodape').style.bottom = "0";
}
</script>

Compartilhar este post

Link para o post
Compartilhar em outros sites

pslucasps    2

pslucasps
Postado

@japalfalfa:

 

1º Defina background-color ou bordas para poder visualizar sua estrutra, não tem como ter uma noção básica sem saber onde estão os elementos.

 

2º Aqui está aparecendo corretamente. Tentei nas resoluções 1024x768 e 800x600 tanto IE7 quanto Firefox. Pelo que você falou quer que mesmo que o conteúdo não seja suficiente pra empurar o rodapé que ele fique na parte de baixo da tela. Eu adicionei conteudo e também funcionou. Em que navegadores você testou ai? Explique melhor seu problema tambem.

 

3º O rodapé só não acompanha o conteudo se não adicionar uma div com clear both após o conteudo, coisa que você fez (de acordo com o tutorial do maujor).

 

 

Então, a div não "desce" por que está com position:absolute.

É só retirar essa linha. Caso você tenha outro problema com posicionamento por tirar essa linha posta de novo aqui.

O Position absolute é utilizado justamente pra deixar a div na parte de baixo da tela. Eu fiz aqui o tutorial seguindo certinho os passos e funcionou corretamente. Das duas uma ou ele não está fazendo corretamente ou não explicou o problema corretamente, pois aqui ao redimencionar a página o rodapé sempre fica em baixo do conteudo e em baixo da tela. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

para usar com position dá, mas o problema é que tem bug no ie6...

então você teria que adicionar um js, por exemplo, no resize da janela para setar denovo o div na largura certa:

<script type="text/javascript">
window.onresize = function(){
document.getElementById('rodape').style.bottom = "0";
}
</script>
Na verdade o tutorial se for seguido corretamente dá suporte ao IE6. Eu fiz aqui conforme é mostrado e funcionou. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

japalfalfa    1

japalfalfa
Postado

então gente,

agradeço em muito a todos pelas respostas

acredito que o problema estava no conteúdo das divs... alguma tag aberta ou algo do gênero...

não alterei a estrutura e refiz todo o conteúdo (apaguei tudo de dentro das divs e refiz) e agora está funcionando... (provavelmente ficou alguma div aberta ou algo assim)

aliás: funcionando no ff e no ie7+

no ie6- fica tudo desconfigurad =/

aproveito para peguntar: alguém sabe pq? =/

 

Abração

Compartilhar este post

Link para o post
Compartilhar em outros sites

japalfalfa    1

japalfalfa
Postado

E aí beleza?

acho que tudo fica desconfigurado no ie6- rs todas as divs não ficam corretamente posicionadas... e o rodapé não estica até o fim da página caso esta seja redimensionada...

a div conteúdo tem 780px porém no ie6- fica bem maior (?)

a centralização tb não funciona no ie6-

grrrr

 

segue o css

 

html, body {height:100%;} 
body {
	margin:0; 
	padding:0;
	text-align:center;
	}
* html #tudo {height: 100%;}
* {
	margin: 0;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	color: #000000;
	}
h1 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 15px;
	color: #055A2D;
	font-weight:bold;
	text-align: left;	
}
h2 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #055A2D;
	font-weight:bold;
	text-align: left;
}

/* Div's */
#tudo {
	margin: 0 auto;
	position: relative;
	min-height: 100%;
	width: 100%;
}
#conteudo {
	width: 780px;
	margin: 0 auto;
	margin-top: -100px;
	padding-bottom: 0px;
	position: relative;
	
}
#topo {
	width: 100%;
	background: none;
	height: 100px;
	background-image: url(../imagens/fundo_topo.jpg);
	background-repeat: repeat-x;
}
#logo {
	margin-left: 0;
	background-image: url(../imagens/logo.png);
	background-repeat: no-repeat;
	width: 220px;
	height: 120px;
}
#menu {
	width: 540px;
	height: 50px;
	margin-top: -90px;
	margin-left: 240px;
	float: left;
}
#relacionado {
	width: 210px;
	height: 480px;
	margin-top: 5px;
	margin-left: 0;
	float: left;
	padding-left: 5px;
	padding-top: 5px;
}
#flash {
	width: 540px;
	height: 500px;
	margin-top: -20px;
	margin-left: 10px;
	float: left;
}
#rodape {
	width: 100%;
	background-image: url(../imagens/fundo_rodape.jpg);
	background-repeat: repeat-x;
	height: 50px;
	position: absolute;
	bottom: 0;
	text-align: center;
}

/* Classes */
.texto {
	margin-left: 0;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	text-align: left;
}
.textorodape {
	padding-top: 15px;
	font-size: 12px;
}
.clear { 
	clear: both;
}

/* Links */

a:link {
	text-decoration: none;
	color: #063;
}
a:visited {
	text-decoration: none;
	color: #063;
}
a:hover {
	text-decoration: underline; 
	color: #0C3;
}
a:active {
	text-decoration: none;
}

HTML

<!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></title>
	<link href="css/geral.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="js/swfobject.js"></script>
	<script type="text/javascript">swfobject.registerObject("imagens", "9.0.0", "flash/destaques.swf");</script>
	<!--[if lte IE 6]>
	  <script src="js/DD_belatedPNG_0.0.7a.js" type="text/javascript"></script>
	  <script type="text/javascript">DD_belatedPNG.fix('#logo');</script>
	  <![endif]-->
</head>
<body>
<div id="topo"></div>
<div id="tudo">
		<div id="conteudo">
		<div id="logo"></div>
		<div id="menu"></div>
		<div id="relacionado">
			<h2>Últimas Notícias:</h2><br />
		</div>
		<div id="flash">
			<p class="geral"><h1>Destaques:</h1><br />
			<object id="imagens" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="520" height="300">
			<param name="movie" value="flash/destaques.swf" />
			<param name="wmode" value="transparent" />
			<!--[if !IE]>-->
			<object type="application/x-shockwave-flash" data="flash/destaques.swf" width="520" height="300">
			<param name="wmode" value="transparent" />
			<!--<![endif]-->
			<div>
			<h1>Por favor, atualize o seu flash player ou habilite a execução de controles Activex</h1>
			<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p></div>
			<!--[if !IE]>-->
			</object>
			<!--<![endif]-->
			</object>
			</p>
		</div>
		<div class="clear"></div>
	</div>
	<div id="rodape">
		<p class="textorodape">fone email endereço contato</p>
	</div>
</div>
</body>
</html>

aiaiaiaiai =/ hehehe

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

hehehe Estou sem as imagens e sem Internet Explorer. Se puder postar um link.

 

Qual é o erro? Margem dupla? De uma pesquisada no Google sobre "margem dupla IE6", pois alguns de seus elementos estão com esse "problema".

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

japalfalfa    1

japalfalfa
Postado

ah sim, este erro eu percebi renderizando ali no browsershot mas deixei para resolver depois dos problemas de posicionamento =/

ta loco desenvolver para web é só problema heuheue =/

será q isso influencia no posicionamento?

Compartilhar este post

Link para o post
Compartilhar em outros sites

japalfalfa    1

japalfalfa
Postado

e aew thiago valeu pela ajuda até agora!!!

 

então:

 

resolvi todos os problemas de posicionamento menos um:

o tutorial do maujor para posicionar o rodapé embaixo da página limita a div tudo com uma largura em pixels e eu preciso em porcentagem

quando coloco porcentagem ele redimensiona tudo... o rodapé no ie6 posiciona-se no rodapé mesmo mas fica na metade da página em diante...

e a página "estica" (no ie e no ff) para além dos limites... mesmo fazendo tudo igualzinho...

 

o código é o mesmo que o último que eu postei.

 

alguém sabe o que pode ser?

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