[Resolvido] Div Rodapé com Z-INDEX

[guislip 0]

Opa galera, tudo na paz?

 

estou com um probleminha, estou criando uma estrutura de um site, e preciso manter o rodapé(DIV) sempre lá em baixo, independente do tamanho do conteúdo, se ele vai ter 1000px de altura ou se ele vai ter 5000px de altura, preciso manter sempre o DIV lá em baixo, mas lembrando que estou trabalhando com Z-INDEX, eu procurei algumas soluções aqui mesmo no IMASTER, procurei já no google, fiz tudo que pediram, mas sempre ele fica como se estivesse fixo mas o conteúdo vai até lá em baixo de tudo.

para entender melhor o que estou falando segue o trecho em CSS,

#rod{
   width: 100%;
   height: 200px;
   right: 0px;
   z-index: 4;
   position: absolute;
   bottom: 0; 
   border: thin ridge red;
   background-color: #007777;
   }

PS: o div com o conteúdo, está com z-index"3".

 

o que devo fazer? não fica em baixo nem a pau.

abraços

[Odirlei Borgert 4]

Coloca o position do #rod como fixed...

 

Abraço,

[guislip 0]

até entendi o que você quer dizer, mas não é o position fixed, que ai toda vez que eu fizer a rolagem da página ele vai ser manter ali em baixo.

na verdade estou um pouco confuso na hora de explicar o que eu realmente quero, independente do conteúdo da págino o div tem que estar no fim da página, embaixo de todos os itens da página, sempre se manter como o ultimo div do site, mas ele acaba ficando parecido com o fixed, quando abro a página, mas ela não está no final do conteúdo, segue o link com a estrutura da página que montei para vocês visualizarem melhor o erro.

http://www.guislip.com.br/tst/

 

o rodapé, ele tem que estar lá em baixo depois daquele div comprido do CONTEÚDO, mas ele está aparecendo ali por cima.

PS: já troquei o z-index do rodapé, deixei o mesmo do conteúdo e não funcionou mesmo assim.

[Odirlei Borgert 4]

Olá guislip,

 

Ai eu acho que você não precisa flutuar o elemento...

Vou tentar explicar aqui...

 

Infelizmente tem que usar tabelas, só com divs não vai rolar...

 

no CSS:

<style>
body {
	border: 0;
	padding: 0;
	margin: 0;
}
body, table, html {
	height: 100%;
}
table {
	width: 100%;
}
.rodape {
	height: 80px;
	background-color: #0CF;
}
</style>

no HTML:

<table>
<tr>
	<td>topo</td>
</tr>
<tr>
	<td class="rodape">rodapé com altura fixa</td>
</tr>
</table>

 

Acho que é isso que você quer de resultado final...

 

 

Espero ter ajudado...

[No Rain 0]

Só com divs rola sim.

 

O problema está na posição absoluta do seu rodapé. Isso significa que o seu rodapé será 'gerado' no ponto inicial (ou em algum outro ponto especificado) do ultimo elemento de posição relativa. No caso, relativo ao body.

 

Você só precisa usar position relative para seu rodapé. E caso esteja usando algum elemento flutuante não esqueça de limpar o float.

 

#rod{
   width: 100%;
   height: 200px;
   z-index: 4; /* esta propriedade de define a posição z(profundidade) de um elemento. especificando se ela vai aparecer por cima ou por tras de um outro objeto na mesma posição. você não precisa desta propriedade */
   position: relative; /* inicialmente as divs possuem posição relativa, então não precisa dessa propriedade */
   clear: both;
   border: thin ridge red;
   background-color: #007777;
   }

[guislip 0]

Minha solução gostaria de ser resolvida em DIV mesmo, já seguindo as normas e o padrão da W3C, No rain, já usei o clear:both, position relative, mesmo assim não, vai, quando uso os 2, o meu rodapé fica sempre no topo da página.

segue novamente o link para visualização do layout

http://www.guislip.com.br/tst/

 

acredito que o clear:both, e o position:relative, funcione sem o Z-index, mas estou programando toda estrutura do site, para só encaixar as imagens depois para trabalhar. e vou precisar que seja com o Z-index, acredito que o rodapé não esteja ficando lá em baixo, por conta dos objetos estarem em camadas separadas. corrijam se eu estiver errado!

[William Bruno 1501]

Esqueça todos esses positions.

 

estruture teu layout sem usar nenhum valor de position.

apenas com float, margin e padding.

[guislip 0]

arranquei os position, realmente o rodapé foi para baixo, mas preciso estar trabalhando com o z-index e position, por que meus layouts são geralmente sobrepostos, trabalhando com porcentagem, e tentar fazer o site todo flutuante para caso de alguma modificação de lado, por exemplo este layout tem o explorer embaixo do conteúdo, conforme abre eu outra resolução ele vai abrindo parte do explorer. Mas agradesço muito sua resposta, foi muito útil, mas ainda assim não consegui resolver esse problema sem tirar o Z-INDEX e o POSITION.

 

Mas muito obrigado mesmo pela atenção William Bruno.

[William Bruno 1501]

Assim, poste o layout final para analisarmos, pois da forma que você usou positions, está completamente equivocada.

 

Ele existe, e deve ser usado, porém com cautela.

Mostre o layout para que digamos como você deve resolver.

[No Rain 0]

Gui, acredito que mesmo que a sua intenção é fazer layout flutuante a utilização do position absolute em todas as divs não está correta. Se o seu problema é que os seus layouts são sempre sobrepostos, a propriedade z-index irá te auxiliar nisso. Ainda não ví nada que confirme a necessidade dos positions absolutes.

 

Pensando numa 'gambiarra' para fazer o rodapé utilizando essa sua formatação faça o seguinte:

 

Coloque o rodapé dentro da div #cont, ao final dela. e para a div #rod declare bottom -220px (200 da altura do rodapé + 20 de margem).

 

<style type="text/css">
#rod {bottom:-220px; }
</style>

 

<body onload="rodape();">
 <div id="cab">
           cabecalho
       </div>
       <div id="bht">
           barra horizontal top
       </div>
       <div id="exp">
           Explorer
       </div>
       <div id="cont">
           conteudo<br>
           <p> </p>
           <p> </p>
           <p> </p>
           <p> </p>
           <p> </p>
           <p> </p>
           <p> </p>
           <p> </p>
           <p> </p>
           <p> </p>
           <p> </p>
           <p> </p>
           <p> </p>
           <p> </p>
           <p> </p>
           <p> </p>
           <p> </p>
           <p> </p>
           <p> </p>
           <p> </p>
           <p> </p>
           <p> </p>
           <p> </p>
           <p> </p>
           <p> </p>
           <p> </p>
           <p> </p>
           <p> </p>
           <p> </p>
           <p> </p>
           <p> </p>
           <p> </p>
           <p> </p>
           <p> </p>
           <p> </p>
           <p> </p>
           <p> </p>
                 <div id="rod">
           <h1>rodapé</h1>
       </div>  
       </div>
       <div id="prop">
           propaganda
       </div>
</body>

 

Lembrando que isso eu considero uma gambiarra das 'braba' e só funciona se nunca houver conteudo abaixo da div #cont.

[- KbeçãO - 0]

gabiarra?

isso é um assassinato ao layout...

nunca fassa isso..

:!: pelo amor de deus... :!:

[DogNew 0]

GuiSlip,

 

Te coloquei numa sinuca de bico (rsrs).

 

Não sei se já resolveu, mas vou postar aqui uma solução que desenvolvi (foi muito simples) para outros que passarem pelo que nós passamos.

 

Basta criar dois div pai e utilizar o position: relative com o z-index e margin-bottom com a altura do rodapé ou um pouco maior, a diferença, que foi tão óbvia (nada do que um banho pra refrescar a cuca. rsrs), coloca-se o rodapé dentro do div pai2. Pronto!

 

Complicado de se entender? Então vamos ao código:

 

(Observação: Limitei-me a dois div's, o conteúdo e o rodapé, deixando o rodapé acima do conteudo e notem que o pai2 está abaixo do conteúdo.)

 

Para ver o exemplo escroto que fiz, acesse esse link: Exemplo on-line

 

Index.html

 

<html>

   <head>
       <link href="layout.css" type="text/css" rel="stylesheet" />

   </head>

   <body>
       <div id="pai1">
           <div id="cont">
               <p>Inicio Conteudo</p>
               <p> </p>
               <p> </p>
               <p> </p>
               <p> </p>
               <p> </p>
               <p> </p>
               <p> </p>
               <p> </p>
               <p> </p>
               <p> </p>
               <p> </p>
               <p> </p>
               <p> </p>
               <p> </p>
               <p> </p>
               <p> </p>
               <p> </p>
               <p> </p>
               <p> </p>
               <p> </p>
               <p> </p>
               <p> </p>
               <p> </p>
               <p> </p>
               <p> </p>
               <p> </p>
               <p> </p>
               <p> </p>
               <p> </p>
               <p> </p>
               <p> </p>
               <p> </p>
               <p> </p>
               <p> </p>
               <p> </p>
               <p>Fim conteudo</p>

           </div>
       </div>
       <div id="pai2">
           <div id="rod">
               <img src="dognew.gif">
           </div>
       </div>
   </body>

</html>

 

 

css.css

 

 

body{
   margin: 0px;
   width: 100%;
   height: 100%;
   }

#pai1{
   background-color: green;
   }

#pai2{
   background-color: blue;
   }

#cont{
   width: 60%;
   z-index: 2;
   position: relative;
   top: 230px;
   left: 20%;
   background-image: url(Crystal_128_gimp.png);
   margin-bottom: 200px;
   }

#rod{
   width: 100%;
   height: 200px;
   z-index: 3;
   position: relative;
   bottom: 0px;
   text-align: center;
   background-image: url(transp.png);
   }

[guislip 0]

Agresço a todos que me ajudaram, e espero que esse tópico sirva de ajuda para muitos ai na NET.

agora está tudo beleza..

abraços galera.