22 replies to this topic

[Maykel Esser]

Olá Pessoas!

Algo sinistro acontece com meu painel de controle... pensei em colocar o rodapé no final da página sempre... logo fui procurar diversos tutoriais... tentei umas 5 alternativas... entre elas a mais funcional parece ser a do Maujor... porém, quando aplico no meu código, parece que algo está anulando isso... e eu não sei o que é... alguem pode me dar uma dica?

Vou postar o CSS todo para tentar analisar se alguma propriedade está anulando... a parte que faz o rodapé é a últma... só correr pro final do código...

@charset "utf-8";/* Reset */	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;}	body { line-height: 1;}	ol, ul { list-style: none;}	blockquote, q {	quotes: none;}	:focus { outline: 0;}	ins { text-decoration: none;}	del { text-decoration: line-through;}/* Definições gerais */	body { background:url(../../imagens/bg-painel.jpg) repeat-x #FFF; font-family:Arial, Helvetica, sans-serif; }	#wrapper { width:100%; }/* Classes comuns */	.left { float:left; }	.right { float:right; }	.clear { clear:both; font-size:1px; }	.carregando { top:0; right:0; position:absolute; }/* Header */	#header { height:85px; clear:both; }	#header #logo { margin:13px 0 0 20px; float:left; }	#header #logo h1 a { display:block; text-indent:-99999px; width:83px; height:48px; background:url(../../imagens/logo.png) no-repeat; }	#header #menu-header { float:right; margin-top:23px; }	#header #menu-header ul li { float:left; margin:0 20px 0 0; }	#header #menu-header ul li a { color:#CCC; text-decoration:none; font-size:12px; }	#header #menu-header ul li a:hover { color:#FFF; }	#header #menu-header #menuConta { background:url(../../imagens/icone-usuario.png) no-repeat; padding-left:35px; height:30px; line-height:30px; }	#header #menu-header #menuLogout { background:url(../../imagens/icone-logout.png) no-repeat; padding-left:35px; height:30px; line-height:30px; }	#header #menu-header ul li a.primeiro { background:url(../../imagens/bg-linha.jpg) repeat-y right top; padding-right:20px;}	/* Menu */    /* Estilos */        #menu { margin-top:8px; height:42px; background:url(../../imagens/bgMenu.jpg); width:100%; min-width:1024px; }        #menu ul { font-size:11px; margin-top:6px; }        #menu ul ul { left:0; top:29px; background:#FFF url(../../imagens/bg-drop.jpg) repeat-x top; padding:5px; border:1px solid #e7e7e7; }        #menu ul ul ul { left:125px; top:-5px; background:#FFF url(../../imagens/bg-drop.jpg) repeat-x top; }        #menu li { text-align:center; }        #menu li a { text-decoration:none; color:#FFF; width:98px; height:29px; line-height:29px; background:url(../../imagens/menu-hover.png) top no-repeat; }        #menu li a:hover, #menu a.ativo { color:#444; background:url(../../imagens/menu.png) top no-repeat; }        #menu li li a { color:#444; background:url(../../imagens/bullet-1.gif) 8px center no-repeat; height:20px; line-height:20px; width:105px; text-align:left; padding-left:20px; } /* Retira o background herdado e insere a seta */        #menu li li a:hover { background:#444 url(../../imagens/bullet-1.gif) 8px center no-repeat; color:#FFF; } /* Retira o background herdado e insere a seta */    /* Configs drop-down (Não alterar) */    		    #menu { position:absolute; }	    #menu ul ul a{ overflow:visible; }	    #nav a{ display:block; }	    #nav, #nav ul{ margin:0; padding:0; }	    #nav li{ float:left; position:relative; }	    #nav ul { position:absolute; display:none; }	    #nav ul ul{ top:auto; }	    #nav li ul a{ height:auto; float:left; }	    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{ display:none; }	    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{ display:block; }/* Conteúdo */	#conteudo { clear:both; margin-top:50px; padding:30px; }	#conteudo h2 { font-size:18px; letter-spacing:-1px; font-weight:bold; color:#999; margin-bottom:10px; }	#conteudo p { font-size:13px; color:#666; margin-bottom:10px; }	#conteudo p a { color:#367; border-bottom:1px dashed #999; text-decoration:none; font-weight:bold; }	#conteudo p a:hover { color:#26B; }		/* Box de filtros */		    #conteudo #filtros { padding:5px; background:#111; font-size:11px; margin-bottom:5px; color:#FFF; }	    #conteudo #filtros label { font-weight:bold; padding-left:7px; }	    #conteudo #filtros label.primeiro { padding-left:0; }	    #conteudo #filtros input[type=text], #conteudo #filtros select { margin-right:7px; font-size:11px; border:none; }	    #conteudo #filtros input[type=submit] { background:#8AB; border:none; font-size:11px; color:#FFF; cursor:pointer; }	    #conteudo #filtros input[type=submit]:hover { background:#26B; }		/* Mensagens em destaque */		    #conteudo p.avisoExpiracao { width:98%; padding:8px; background:#FFF; -moz-border-radius:0.4em; -khtml-border-radius:0.4em; color:#C00; }	    #conteudo p.detalheCampo { margin-left:210px; font-size:10px; }		/* Tabelas de consulta */				#conteudo #resultadosConsulta table { width:100%; margin:0; padding:0; border:none; }		#conteudo #resultadosConsulta table tr { margin:0; padding:0; border:none; }		#conteudo #resultadosConsulta table td { padding:3px; font-size:12px; }		#conteudo #resultadosConsulta .titulo { background:#444; color:#FFF; font-size:12px; font-weight:bold; text-align:left; }		#conteudo #resultadosConsulta .titulo a { color:#FFF; }		#conteudo #resultadosConsulta .titulo a:hover { color:#CCC; }		#conteudo #resultadosConsulta .linha-1 { background:#F6F6F6; }		#conteudo #resultadosConsulta .linha-2 { background:#ECECEC; }		#conteudo #resultadosConsulta .linha-1:hover, #conteudo #resultadosConsulta .linha-2:hover { background:#8da7b1; }			/* Ícones */			#conteudo #resultadosConsulta .visualizar { width:16px; height:16px; background:url(../../imagens/icone-visualizar.png) no-repeat; display:block; text-indent:-99999px; }		#conteudo #resultadosConsulta .inativo { width:16px; height:16px; background:url(../../imagens/icone-inativo.png) no-repeat; display:block; text-indent:-99999px; }		#conteudo #resultadosConsulta .ativo { width:16px; height:16px; background:url(../../imagens/icone-ativo.png) no-repeat; display:block; text-indent:-99999px; }		#conteudo #resultadosConsulta .editar { width:16px; height:16px; background:url(../../imagens/icone-editar.png) no-repeat; display:block; text-indent:-99999px; }		#conteudo #resultadosConsulta .delete { width:16px; height:16px; background:url(../../imagens/icone-delete.png) no-repeat; display:block; text-indent:-99999px; }		#conteudo #resultadosConsulta .editar-inativo { width:16px; height:16px; background:url(../../imagens/icone-editar-desativado.png) no-repeat; display:block; text-indent:-99999px; }		#conteudo #resultadosConsulta .delete-inativo { width:16px; height:16px; background:url(../../imagens/icone-delete-desativado.png) no-repeat; display:block; text-indent:-99999px; }		#conteudo #resultadosConsulta .restaurar { width:16px; height:16px; background:url(../../imagens/icone-restaurar.png) no-repeat; display:block; text-indent:-99999px; }	/* Paginação */			#conteudo .paginacao { text-align:right; }		#conteudo .paginacao a { padding:2px; font-size:12px; text-decoration:none; background:#8AB; color:#FFF; border:1px solid #8AB; }		#conteudo .paginacao a:hover { background:#26B; }		#conteudo .paginacao span { padding:2px; font-size:12px; border:solid 1px #26B; color:#26B; background:#FFF; }			/* Formularios */		    #formularios legend { font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; color:#999; margin-bottom:10px; }	    #formularios span { float:left; font-size:12px; font-weight:bold; line-height:22px; margin-bottom:2px; }		#formularios label { width:210px; float:left; font-size:12px; font-weight:bold; line-height:22px; margin-bottom:2px; }		#formularios input, #formularios select, #formularios textarea { float:left; margin-right:5px; margin-bottom:2px; }		#formularios input[type=text], #formularios input[type=password] { padding:2px; border:1px solid #c2c2c2; -moz-border-radius:0.4em; -khtml-border-radius:0.4em; }		#formularios select, #formularios textarea { border:1px solid #c2c2c2; font-family:Arial, Helvetica, sans-serif; font-size:12px; -moz-border-radius:0.4em; -khtml-border-radius:0.4em; padding:2px; }		#formularios option { border-bottom:1px dashed #CCC; }		#formularios .validacao { color:#FFF; font-size:12px; padding:0 5px; font-weight:bold; line-height:22px; background:#F00; float:left; }		#formularios br { clear:both; }		#formularios input[type=submit], #formularios input[type=button] { -moz-border-radius:0.4em; -khtml-border-radius:0.4em; background:#8AB; color:#FFF; border:none; padding:3px; cursor:pointer; }		#formularios input[type=submit]:hover, #formularios input[type=button]:hover { background:#26B; }		#formularios fieldset { border:1px dashed #CCC; padding:10px; }		#formularios legend { margin-top:7px; padding:3px; }				/* Form login */		#formularios fieldset.loginBox { width:300px; height:220px; background:#FFF; left:50%; position:relative; margin-left:-150px; margin-top:-70px; padding:15px; }		#formularios fieldset.loginBox label { width:70px; }		#formularios fieldset.loginBox legend { display:none; }		#formularios fieldset.loginBox .margin { margin-bottom:30px; }		#formularios fieldset.loginBox .aviso { margin-top:8px; color:#B01; background:#FEE; padding:3px; line-height:13px; }				/* Form login (Alterar senha na primeira) */		#formularios fieldset.loginBox label.confirmar { width:110px; }		/* Rodapé */	#rodape { height:50px; clear:both; font-size:11px; color:#555; border-top:1px dashed #CCC; line-height:50px; }	#rodape a { color:#555; }	/* Janela Modal */    body.modal { background:#FFF url(../../imagens/modal/bgModal.jpg) repeat-x; padding:20px; }    .modal h1 { font-size:22px; letter-spacing:-1px; color:#C02; border-bottom:1px dashed #666; padding-bottom:15px; margin-bottom:10px; }    .modal fieldset { border:1px dashed #CCC; padding:10px; margin-bottom:10px; }    .modal legend { font-size:15px; font-weight:bold; color:#C00; }    .modal p { font-size:12px; line-height:17px; }    .modal ul { margin-top:8px; }    .modal ul li { line-height:17px; font-size:12px; background:url(../../imagens/bullet-1.gif) no-repeat left center; padding-left:15px; }	/* Fixar rodapé sempre no fim da página, sem passar por cima do conteúdo */    html, body { height:100%; }    #wrapper { min-height:100%;	}    * html #wrapper { height:100%; /* hack para IE6 que trata height como min-height */ }    #wrapper { position: relative; }    #rodape { position:absolute; bottom:0; }    #conteudo {	padding-bottom: 100px; }

A estrutura do código é básica...

<div id="wrapper">    <div id="header"></div>    <div id="menu"></div>    <div id="conteudo"></div>    <div id="rodape"></div></div>

Está renderizando assim:

http://img230.images...7389/rodape.jpg

[Kahor]

Se voce quer fixar o rodape em baixo nao é:

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

e sim

#rodape { position:fixed; bottom:0; }

Mas assim ele fica em cima do conteudo, e isso voce nao quer.

Aqui tá o link do rodape do maujor, nao funciona no Opera, somente no IE e FF
http://www.maujor.co...o-da-janela.php

E, analisando previamente o codigo, voce colocou o position: relative no #wrapper, sendo que o rodape fica dentro dele, tente jogar o #rodape fora dessa div, pois no maujor é:

<div id="conteudo"> 
</div> ~> aqui vai o relative

<div id="rodape">
</div> ~> aqui vai o absolute, bottom: 0

Espero ter ajudado.

[Maykel Esser]

Oi Kahor

[codebox]<body">
<div id="tudo">

<div id="topo"></div>

<div id="conteudo">
...aqui entra(m) a(s) coluna(s) do layout.
</div> <!-- Fim div#conteudo -->

<div id="rodape"></div>

</div> <!-- Fim div#tudo -->
</body>
</html>[/codebox]

Essa é a estrutura sugerida pelo maujor... igual a minha :S com o rodapé dentro da div que engloba tudo (no caso, a #tudo, ou a #wrapper)

[Kahor]

Hum é verdade..

Tenta jogar um div antes de fechar o #conteudo, dando um clear: both

<div id="wrapper">
	<div id="header"></div>
	<div id="menu"></div>
	<div id="conteudo">

	<div id="clear"></div> {clear: both;}

	</div>
	<div id="rodape"></div>
</div>

Se nao der certo, tentao acrescentar mais uma div somente para o que está entre o topo e o rodapé:

<div id="wrapper">
	<div id="header"></div>
	 
	<div id="novaDiv">
		<div id="menu"></div>
		<div id="conteudo"></div>
	</div>

	<div id="rodape"></div>
</div>

Tenta ae


Edit:
Voce colocou clear: both na div #conteudo e na #rodape, tira e cria um div para isso.. No do maujor nao tem.. e na conteudo coloca float: left;

Edição feita por: Kahor, 01/10/2009, 17:10.

[Maykel Esser]

para que serve o float left alí no conteúdo? Não faz sentido, sendo que é apenas uma coluna...
vou tentar criar a div para colocar entre o conteúdo e rodapé com a clear... porém acho que não vai funcionar, já que a propriedade clear:both no rodapé já está fazendo isso!

Não funcionou o esquema da div com clear

[Édipo Costa Rebouças]

Dê uma olhada nesse post na parte do css, vc não precisa do js dele eu acho:
http://forum.wmonlin...&...st&p=969420

[Kahor]

Peguei o seu code e salvei aqui e está correto o que voce fez, olha só:





A unica coisa que fiz foi colocar os texto e jogar um bg na div #conteudo..

Rodei no Opera, FF e IE8 e tá certo.

[Maykel Esser]

aff, pq aqui não funciona?!

aí que está, não sei se alguma parte do resto do código está conflitando...
tentei tirar o reset, manteve a mesma coisa...

aí fui tentar o exemplo do Édipo, não deu em nada também... ficou a mesma coisa :S

tentei assim (coloquei no final do documento CSS):

[codebox] #conteudo, #wrapper, body, html { height:100%; }
#wrapper { overflow: auto; }
#conteudo { overflow: hidden; }
[/codebox]

[Kahor]

Mais provavél que seja outro code que está em conflito mesmo, pois o esqueleto pelo que te mostrei tá certo.

Dá um Ctrl+F e procura por floats, clear, até heights, para ver se tem alguma coisa que voce colocou e nao viu.

Voce usa Linux né?

Voce ja fez um teste, usando o primeiro code que voce postou? Foi ssio que eu fiz e deu certo.

Edição feita por: Kahor, 06/10/2009, 09:42.

[Maykel Esser]

uso Windows mesmo, Kahor...
quando eu uso o primeiro código, o treco não cola, e pior, fica por cima do conteúdo...


http://www.gpaprospe...clientes/teste/

coloquei online pra ver!

4 tentativas, rs

/* Tentativa 1 - Dica do Édipo    #conteudo, #wrapper, body, html { height:100%; }    #wrapper { overflow: auto; }    #conteudo { overflow: hidden; }*/        /* Tentativa 2 - Maujor    html, body { height:100%; }    #wrapper { min-height:100%; }    * html #wrapper { height:100%; }    #wrapper { position: relative; }    #rodape { position:absolute; bottom:0; }    #conteudo { padding-bottom: 100px; }*/        /* Tentativa 3 - Blog Webstandarts    * { margin:0; padding:0; z-index:1; }    html, body { height:100%; }    #wrapper { position:relative; min-height:100%; }    * html #wrapper { height:100%; }    #conteudo { padding-bottom:50px; }    #rodape { position: absolute; bottom:0; left:0; }*/        /* Tentativa 4 - CSS no lanche     html, body, #wrapper { height: 100%; }    body > #wrapper { height:auto; min-height:100%; }    #conteudo { padding-bottom: 50px; }    #rodape { position:relative; margin-top:-50px; }*/

e nada

[Kahor]

É mesmo nao funfa aqui.

Vou baixar e ver o code, alguma interferencia tá ocorrendo.

Bom eu baxei, no IE8 deu certo, no Opera e FF nao.

eu modifiquei e aparentemente deu certo, entao veja ai, é simples.

O antigo

(...)
		</div>
		<!-- Fim do Corpo -->
  
<div id="rodape">
	<p class="left">Copyright 2009 ® Todos os direitos reservados</p>
	<p class="right"><a href="http://www.gpaprospera.com.br/" target="_blank">Sistema desenvolvido por GPA'prospera</a></p>
</div>

	</div>

O novo:

...
			</div>
		<!-- Fim do Corpo -->
		

	</div>
	
<div id="rodape">
	<p class="left">Copyright 2009 ® Todos os direitos reservados</p>
	<p class="right"><a href="http://www.gpaprospera.com.br/" target="_blank">Sistema desenvolvido por GPA'prospera</a></p>
</div>

Bom, voce deixou a div #rodape dentro da #conteudo, e ai como a conteudo tem uma height, a rodape nao desce, ai voce desce a div rodape depois da </div> que aparecer.

Aqui deu certo, veja ai.

PS: Firebug forever! ^^

Deu certo?

Deu certo?

Edição feita por: Kahor, 06/10/2009, 10:23.

[Maykel Esser]

Fala Kahor, valeu a força até agora!

Eu não deixei a div #rodape dentro de #conteudo... ela está depois de conteúdo, mas dentro da div #wrapper!

Mas vou tentar aqui!


EDIT: Tentei colocar a div rodapé fora... deu certo, colou lá em baixo... mas está passando por cima do conteúdo! Nao deveria, não é?! quando a página é maior do que a tela, ele não acompanha :S

[Kahor]

Voce de ter colocado overflow: hidden?

Se sim tira.

EDIT: Nao colocou, vou ver aqui e ja respondo.

Edição feita por: Kahor, 07/10/2009, 14:26.

[Maykel Esser]

tá osso! Não tem jeito, rsrsrs

[Kahor]

Mano, desisto.

Mal, mas quebrei a cabeça e até agora nada. Apaguei, criei, fiz quase tudo de novo no CSS e nada. A unica coisa que posso falar, é que ele tá sobreposto em cima de qualquer coisa, nao sei pq.