Ir para conteúdo

POWERED BY:

Arquivado

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

Peter.Lopes

Footer não acompanha div de conteúdo do site

Por , em Desenvolvimento frontend

Recommended Posts

Peter.Lopes    0

Peter.Lopes
Postado

Olá membros do Imasters, meu problema é basico mas esta me dando dor de cabeça...

o problema é que o rodapé(footer) não acompanha o site. O site tem um conteúdo pequeno porem tem um menu interno que se expande

aumentando assim a altura da div conteúdo, e a div todapé não esta acompanhando essa mudança

 

basicamente meu site é assim

.
.
.
<body>
<div id="tudo">
<div id="topo">
.
.
.
</div>

<div id="conteudo">
.
.
.
</div>
<div id="rodape">
.
.
.
</div>
</div>
</body>

 

e a css

html, body {height:100%;} 
body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label{
margin:0px;
padding:0px;
}

body{
margin-top:0px;
font-family: verdana, sans-serif;
color:#103f41 ;
font-size:12px;
background-color:#FFF;
background-image:url(img/fundotopo.png);
background-position:top;
background-repeat: repeat-x;
}


ul{
height:25px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

ul li.naviMenu {

display:inline-block;
float:left;
height:25px;
list-style-type:none;
overflow:hidden;
}

ul li a, ul li a:hover, 
ul li a:visited{
text-decoration:none;
}

.normalMenu, .normalMenu:visited,
.hoverMenu, .hoverMenu:visited,
.selectedMenu,.selectedMenu:visited {
outline:none;
padding:5px 10px;
display:block;
}

.hoverMenu,.hoverMenu:visited,
.selectedMenu,.selectedMenu:visited {
margin-top:-25px;
background:url(img/grey_bg.gif) repeat-x #eeeeee;
color:#444444;
}

.selectedMenu,.selectedMenu:visited {
margin:0;
}

.normalMenu, .normalMenu:visited{
color:white;

}

#tudo {
margin: 0 auto;
padding: 0xp;
width: 800px;
overflow: hidden;
min-height: 100%
position: relative;
}

* html #tudo {
height: 100%; /* hack para IE6 que trata height como min-height */
}

#topo {
width: 800px;
height: 180px;
margin: 0px;
padding: 0px;
}

#conteudo {
width:800px;
height:100%;
overflow:hidden;
}

#cxmenu{
width:800px;
background-image:url(img/fundomenu2.png);
position:relative;
top:-22px;
}

#menucontainer {
width: 450px;
margin: 0 auto;
}


#logo{
width: 352px;
margin: 0 auto;
}

#goto1{
padding: 0px;
margin:10px;
width: 200px;
}

#goto2{
padding:0px;
margin:10px;
width: 200px;
}

#goto3{
padding:0px;
margin:10px;
width: 200px;
}


#nav ul{
text-align:center;
}

#nav li{
text-align: left;
list-style: none; 
margin: 0;
}

#nav a{
font: 9px verdana, sans-serif;
text-decoration: none;
color:#0078ff;
}

#nav a:hover{
font: 9px verdana, sans-serif;
text-decoration: none;
color:#bae7fb;
}


#rodape{
width:800px;
height: 170px;
background-color: #000;
border-top:3px solid #00F;
position: absolute;
bottom: 0;
}

#rodabase{
width:800;
margin:0px;
}

#rodabase ul{
text-align:center;
}

#rodabase li{
text-align: left;
list-style: none; 
margin: 0;
}

#rodabase a{
font: 9px verdana, sans-serif;
text-decoration: none;
color:#0078ff;
}

#rodabase a:hover{
font: 9px verdana, sans-serif;
text-decoration: none;
color:#bae7fb;
}

#rodacolesq{
width:400px;
float: left;
margin:0;
}

#rodacoldir{
width:400px;
float: right;
margin:0;
}

#rodamenu {
float: left;
margin:0;
width: 200px;
background:#;
}

#rodaintitucional {
float: right;
margin:0;
width: 200px;
background:#;
}

#rodaservicos {
float: left;
margin:0;
width: 200px;
background:#;
}

#rodacontatos {
float: right;
margin:0;
width: 200px;
background:#;
}

h1 {
margin:0px 0px 0px 0px;
padding:20px 0px 0px 0px;
padding-left:10px;
font:18px verdana, sans-serif;
color:#004986;
font-weight:bold;
}

h2 {
font:14px verdana, sans-serif;
color:#004986;
font-weight:bold;
padding-top:8px;
margin:0px 0px 0px 0px;
}

p.rdap{
font: 9px verdana, sans-serif ; 
text-align: center;
}

.clear {clear:both;}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Peter.Lopes    0

Peter.Lopes
Postado

Olá Kraken.

 

Eu fiz conforme o tutorial do Maujor

 

Ele pede pra inserir o absolute no rodape. 

#tudo {
position: relative;
...
}

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

 

 

 

E o position absolute é o que mantem o rodapé no final do pagina pois o conteúdo do site é pequeno, só que tem um menu expansivo no meios do site entende

 

Kraken obrigado pela luz rsrsrsr

problema resolvido

 

retireo o {posição : absoluto ; bottom : 0 ;} do #rodape e também retirei a div do #rodapé da div #tudo

ficando assim

.
.
.
<body>
<div id="tudo">
<div id="topo">
.
.
.
</div>

<div id="conteudo">
.
.
.
</div>
</div>
<div id="rodape">
.
.
.
</div>
</body>

 

e na css só mudei o da div #conteudo overflow para visible

 

assim eu pude colocar o rodapé fixo no final da página

 

css

#conteudo {
width:800px;
height:550px;
overflow: visible;
}

#rodape{
width:100%;
height: 170px;
background-color: #000;
border-top:3px solid #00F;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

John B    0

John B
Postado

Olá Kraken.

 

Eu fiz conforme o tutorial do Maujor

 

Ele pede pra inserir o absolute no rodape. 

#tudo {
position: relative;
...
}

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

 

 

 

E o position absolute é o que mantem o rodapé no final do pagina pois o conteúdo do site é pequeno, só que tem um menu expansivo no meios do site entende

 

Kraken obrigado pela luz rsrsrsr

problema resolvido

 

retireo o {posição : absoluto ; bottom : 0 ;} do #rodape e também retirei a div do #rodapé da div #tudo

ficando assim

.
.
.
<body>
<div id="tudo">
<div id="topo">
.
.
.
</div>

<div id="conteudo">
.
.
.
</div>
</div>
<div id="rodape">
.
.
.
</div>
</body>

 

e na css só mudei o da div #conteudo overflow para visible

 

assim eu pude colocar o rodapé fixo no final da página

 

css

#conteudo {
width:800px;
height:550px;
overflow: visible;
}

#rodape{
width:100%;
height: 170px;
background-color: #000;
border-top:3px solid #00F;
}

 

Esse jeito tá certo, mas é melhor entender a raiz do problema... Se você colocar uma div com float left, e outra float right, e tentar colocar um rodapé embaixo não vai dar certo. Você vai precisar de um elemento com clear both entre o rodapé e as divs de cima

 

.clear{

width:1px;

height:1px;

clear:both;

overflow:hidden; /* Pra o IE, que não deixaria a div com height < 10px sem isso */

}

 

Você vai precisar muito disso, quando o conteúdo não acompanha uma div com height auto, quando o elemento não fica embaixo quando deveria, enfim...

 

Facilita demais a vida

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