CSS - Conteúdo passa por debaixo do Rodapé

eric123 · 21 de agosto de 2013

Olá pessoal, estou tendo um problema no layout q estou montando.

Estou fazendo um site onde tem as seguintes DIVs:

GERAL

'-TOPO

'-BANNER

'-CONTEUDO

'-RODAPE

Estas quatro DIVs ficam dentro da DIV "GERAL". O q acontece é que as informações da minha DIV "CONTEUDO" está passando por debaixo da minha DIV "RODAPE", o que nao é certo.

O que eu quero é exatamente fazer com que o "RODAPE" esteja sempre abaixo de "CONTEUDO", sendo assim o "RODAPE" acompanhará a extensão de "CONTEUDO".

Mog.Lucas · 21 de agosto de 2013

Poste o CSS das divs para que possamos ajudar.

PS: Basta configurar a rodapé (por "fora" da conteúdo, mesmo) com top negativo e limitar o tamanho da conteúdo.

eric123 · 21 de agosto de 2013

@Mog.Lucas

Acabei de solucionar o problema.

Retirei o rodapé do "GERAL" e coloquei por fora.

Depois atribui as seguintes configurações para CONTEUDO e RODAPE, respectivamente:

[B][I]#Conteudo[/I][/B]{width:980px; background-color:#FFF; margin:0 auto; [B]padding-bottom: 158px[/B]}

[B][I]#Rodape1[/I][/B]{float:left; width:100%; height:158px; [B]position: relative[/B]; background-image:url(imagens/back_rodape1.jpg); [B]margin-top:-158px[/B]; clear:both}

Desta forma nao acontece mais do conteúdo passar direto, embaixo do RODAPE.

No FF e no Chrome, mesmo não havendo nada na div CONTEUDO, ela se estende até o final do browser, nao deixando nada vazio embaixo (rodapé sempre no final). porém no IE ele fica recolhido, e nao estende o CONTEUDO até chegar no fim no browser.

Consegue me dizer como solucionar isso para o IE? Apesar de q nao é um problemão assim...

Mog.Lucas · 21 de agosto de 2013

Experimente adicionar:

display: block;

ou

display: inline-block;

Na div conteudo.

Qual versão do IE você está testando?

eric123 · 21 de agosto de 2013

Não funcionou com os parametros que me passou.

Estou usando o IE 9

jessicald · 26 de agosto de 2013

cria uma div <div style=" clear:both ;"></div>

entre o rodapé e o conteúdo. Talvez funcione.

Acabei de ver que você colocou uma margem superior negativa. Isso fará com que ela suba da div de cima mesmo. Tira isso e coloca esse outra div que eu falei e vê se da certo.

Mog.Lucas · 26 de agosto de 2013

O top precisa ser negativo, não o margin-top. Bem observado pela jessicald.

eric123 · 26 de agosto de 2013

Fiz varios testes e não solucionou. Inserindo o clear: both entre Conteudo e Rodape nao acontece nada (lembrando que nenhuma das duas Divs estão atribuidas com style float)

E retirando o margin-top negativo, no FF e Chrome o radapé ficara sempre 158px abaixo do browser. No IE nao muda nada (incluindo a nova div com clear both)

obs.: Existe uma DIV chama GERAL, onde contem divs chamas TOPO, BANNER e CONTEUDO. Depois, abaixo da div GERAL, está a div RODAPE.

Portanto nao mudou nada

jessicald · 26 de agosto de 2013

A sua div conteúdo está com altura ou altura mínima definida?

Passa, por favor, a parte do html e do css para que possamos dar uma olhada em como está agora.

Mog.Lucas · 26 de agosto de 2013

Experimente utilizar o seguinte header:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

E teste novamente

eric123 · 26 de agosto de 2013

MogLucas, nao deu com o header. Mas é estranho, ao inserir o meta, salvar e atualizar a pagina no IE ele permanece da mesma forma, mas quando tiro o meta, salvo e atualizo novamente, ele fica da forma q eu gostaria q ficasse, porém se eu abrir outra aba ou fechar e abrir o IE novamente, ele volta a ficar como era antes, recolhido. porque será?

Segue abaixo codificação simplificada

HTML

<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<title>Computos</title>

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

</head>

<body>

<div id="Base">

<div id="topo1"></div>

<div id="Banner"></div>

<div id="Conteudo"></div>

</div>

<div style="clear:both"></div> //Nova div inserida entre Conteudo e Rodape

<div id="rodape1"></div>

</body>

Style

body{background-image:url(imagens/back_geral.jpg); margin:0 auto; padding:0; text-align:center; height: 100%; font-family:Arial, Helvetica, sans-serif}

#Base{ background-image:url(imagens/back_base.png);background-repeat: repeat-y; background-position:center; margin:0 auto; text-align:center; min-height: 100%}

#topo1{background-image:url(imagens/back_topo.jpg); height:127px; margin: 0 0 0}

#Conteudo{width:980px; margin:0 auto; padding-bottom:158px; height:auto; background: #FFF repeat-y 0 0}

#rodape1{float:left; width:100%; height:158px; position: relative; background-image:url(imagens/back_rodape1.jpg); margin-top:-158px}

jessicald · 26 de agosto de 2013

Ó


#Base{ background-image:url(imagens/back_base.png);background-repeat: repeat-y; background-position:center; margin:0 auto; text-align:center; [B]min-height[/B]: 100%}

Deveria ser min-height, assim não aceita o comando corretamente.

O que está acontecendo é que o mozilla e o chrome estão lendo esse comando que está errado como certo e daí colocam o seu rodapé pra baixo dos 100% da tela. E o ie simplesmente não o interpreta e por isso ele fica em cima, já que o conteúdo não tem altura.

Eu tiraria esse float left do rodape, colocaria position como absolute e bottom como 0, já que você quer alinha-lo no "pé" e não no topo e tem que tirar esse margin-top negativo também.

eric123 · 26 de agosto de 2013

jessica, fiz conforme pedido.

Houve sim melhoras no IE, o rodapé ficou fixo no final do browser. porém agora o conteúdo ficou interrompido. Abaixo tem um print de como está.

Obs.: A sombra nas laterias está definido como background na div GERAL, que tem min-height: 100%

jessicald · 27 de agosto de 2013

Certo, como falei anteriormente você tem que trocar o min-height por min-height, esse primeiro não existe.

Agora o que temos é que acertar o layout para a resolução base.

Você deve ver certinho qual é a altura mínima para que ele fique nessa resolução e colocar na div CONTEUDO.

Ou então desafixar o rodapé do "pé" e fixa-lo no fim da div conteudo. Eu não o desafixaria, mas aí vai de acordo com a sua necessidade.

eric123 · 27 de agosto de 2013

Jessica, na verdade está "MIN-height", só escrevi errado aqui.

Após as modificações que você me passou, fiz teste na div CONTEUDO incrementando conteúdos na mesma, para ver o que acontece, e por incrível que pareça o conteúdo apresentado passa direto por debaixo da div RODAPE. porém se eu coloco na div RODAPE "position: relative" ou 'static', nao acontece de passar por debaixo, o rodape fica sempre abaixo do conteúdo (acompanha), mas quando está sem nada na div CONTEUDO, o rodapé recolhe todo (nao ficando ou estendendo ate o final do browser). Que entre as duas formas, esta seria a menos ruim, já que o conteúdo nao ultrapassa abaixo do rodapé.

Espero que tenha entendido o que eu quis passar.

Veja o style:

body{background-image:url(imagens/back_geral.jpg); margin:0 auto; padding:0; text-align:center; font-family:Arial, Helvetica, sans-serif}

#Base{ background-image:url(imagens/back_base.png);background-repeat: repeat-y; background-position:center; text-align:center; min-height: 100%}

#Banner{width:980px; height:310px; margin:0 auto; background: url(imagens/back_banner.jpg) no-repeat 0 0; padding-top:10px; padding-bottom:10px}

#Conteudo{width:980px; margin:0 auto; padding-bottom: 20px; background: #FFF repeat-y 0 0}

#rodape1{width:100%; height:158px; background-image:url(imagens/back_rodape1.jpg); bottom:0; position: relative}

O html, continua da mesma forma. (Detalhe, estou realizando a pagina em extensão PHP, pois vou precisar utilizar um 'include()'

jessicald · 27 de agosto de 2013

Fiquei na dúvida se o conteúdo da div conteúdo ultrapassava a div e entrava em baixo do rodapé, ou se a div conteúdo expandia e ficava em baixo do rodapé. Mas vamos lá.

1ª situação (conteúdo da div conteúdo ultrapassava a div e entra em baixo do rodapé): Quando eu te falei aquilo da <div style="clear:both"></div> fiz confusão. Você tem que colocar ela entre o os "lalalalal" da div conteúdo e o </div> dela ou seja:

<div id="conteudo">
lalalalalal
<div style="clear:both;"></div>
</div>

Quando você faz isso, você força a div conteúdo a seguir o tamanho do que está dentro dela.

2ª situação (div conteúdo expande e ficava em baixo do rodapé): Você precisa colocar o rodapé dentro da div base pois assim eles ficam no mesmo grau hierárquico. Quando temos as divs no mesmo grau hierárquico podemos usar o z-index. O Z-index é uma propriedade tri-dimensional, então você pode indicar a camada que ele estará. Por exemplo, colocando a div conteúdo com z-index = 1 e a div rodapé com z-index=2 a div rodapé ficará em cima da conteúdo. Acho que isso só funciona com position absolute, mas não tenho certeza.

Por outro lado essa seria uma solução paliativa, pois não ficaria certinho o seu layout, mas da pra gente ver um outro resultado.

Mog.Lucas · 27 de agosto de 2013

Prezados, nosso corretor ortográfico muda automaticamente palavras digitadas incorretamente. Sendo assim, o "min-height" é mudado para "min-height". Vou passar para a Administração verificar a respeito disso.

eric123 · 27 de agosto de 2013

JESSICA, por incrível que pareça, não ocorreu diferença apos o uso dos dois métodos. O que acontece é que o conteúdo da div CONTEUDO ultrapassa o rodapé, se é por baixo ou por cima acredito que nao nos interessa, ja que o objetico é fazer com o RODAPE aparece toda vez no final do browser e o conteudo fique sempre acima do mesmo.

O que percebi, na div RODAPE, é que se eu deixar o "position: absolute" e retirar o "bottom:0" o rodapé mantém-se sempre abaixo do conteúdo da div CONTEUDO (nao ultrapassa e sim acompanha). Mas como eu disse no post anterior, quando nao há nada, o rodapé recolhe por completo. Quero q ele faça exatamente isto, porém quando nao houver nada de conteudo, ele expanda até o final.

Obs.: Pus o rodape dentro da div BASE, junto com as outras divs.

eric123 · 27 de agosto de 2013

Segue abaixo codigo do STYLE de como ta.

 body{background-image:url(imagens/back_geral.jpg); margin:0px; text-align:center; font-family:Arial, Helvetica, sans-serif; width:100%; height:100%}  
#Base{ background-image:url(imagens/back_base.png);background-repeat: repeat-y; background-position:center; text-align:center} 
#topo1{background-image:url(imagens/back_topo.jpg); height:127px; margin: 0 0 0}  #Banner{width:980px; height:310px; margin:0 auto; background: url(imagens/back_banner.jpg) no-repeat 0 0; padding-top:10px; padding-bottom:10px; } 
#Conteudo{width:980px; margin:0 auto; padding-bottom: 20px; background: #FFF repeat-y 0 0; z-index:1; margin-top:-40px}
#rodape_pai{width:100%; height:158px; background-image:url(imagens/back_rodape1.jpg); padding:0px; position:relative}

jessicald · 28 de agosto de 2013

Eric, se o problema é o texto que está no conteúdo o <div style="clear:both;"> deveria resolver. Desde que estivesse depois do texto e antes do fechamento da div conteúdo.

Quando você coloca position relative no rodapé ele não obedece ao comando bottom, por isso é importante mante-lo como absolute e com o bottom.

Coloque conteúdo a fim de ultrapassar a div, tire print e coloque aqui por favor. Assim como a parte do html da div conteúdo.

Estou começando a ficar sem opções para te ajudar haha.

eric123 · 28 de agosto de 2013

(print conforme o html e style)


body{background-image:url(imagens/back_geral.jpg); margin:0px; text-align:center; font-family:Arial, Helvetica, sans-serif; width:100%; }
Base{ background-image:url(imagens/back_base.png);background-repeat: repeat-y; background-position:center; text-align:center}
topo{background-image:url(imagens/back_topo.jpg); height:127px; margin: 0 0 0}
Banner{width:980px; height:310px; margin:0 auto; background: url(imagens/back_banner.jpg) no-repeat 0 0; padding-top:10px; padding-bottom:10px; }
Conteudo{width:980px; margin:0 auto; padding-bottom: 20px; background: FFF repeat-y 0 0; margin-top:-40px} 
rodape_pai{width:100%; height:158px; background-image:url(imagens/back_rodape1.jpg); padding:0px; position:absolute; bottom:0px}

<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<title>Computos</title>

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

<body>
<div id="Base">
   <div id="topo"></div>
   <div id="Banner"></div>
   <div id="Conteudo">
      <br>aaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaa(...)
      <div style="clear:both"></div>//testei em outros lugares
   </div>
   <div id="rodape_pai"></div>
</div>
</body> 
</html>

jessicald · 28 de agosto de 2013

Ufa, resolvido, Seguinte:

Você vai continuar com o position absolute e o bottom 0, mas na div Base você vai colocar position relative e na conteudo um padding-bottom igual ou superior ao height do rodape.

Fiz aqui e funcionou.

Meu css:


html body{height:100%}
    body{background-image:url(imagens/back_geral.jpg); margin:0px; text-align:center; font-family:Arial, Helvetica, sans-serif; width:100%;border:1px solid;display:block; }
    #Base{ background-image:url(imagens/back_base.png);background-repeat: repeat-y; background-position:center; text-align:center;border:1px solid;display:block;
           min-height:100%;
           position:relative;
           }
    #topo{background-image:url(imagens/back_topo.jpg); height:127px; margin: 0 0 0;border:1px solid;display:block;}
    #Banner{width:980px; height:310px; margin:0 auto; background: url(imagens/back_banner.jpg) no-repeat 0 0; padding-top:10px; padding-bottom:10px;border:1px solid;display:block; }
    #Conteudo{width:980px; margin:0 auto; padding-bottom: 20px; background: #888; margin-top:-40px;border:1px solid;display:block;padding-bottom:170px;} 
    #rodape_pai{width:100%; height:158px; background:#000; padding:0px; position:absolute; bottom:0px;border:1px solid;display:block;}

Troquei os backgrounds porque não tinha as imageins e coloquei bordas para que eu pudesse ver as divs, é só colocar do seu jeito.

Ah, tem que por 100% no body e no html, e na div base min-heigth:100%

eric123 · 28 de agosto de 2013

É realmente, foi resolvido, mas por partes rsrs

Conseguimos colocar a div rodape em absolute e com bottom 0 sem que o conteudo invada o mesmo. Mas agora ha um problema, veja no print e atente para o que escrevi.

Aah sim, agora sim. Vi seu edit agora.

Bom, funcionou mesmo. Mas como sempre o IE nos trouxe dor de cabeça, no IE fica como a imagem acima! O que fazer?

Será que é algum head?