div rodape em cima do conteudo

[Marcos Oliveira 2]

Ola pessoal estou fazendo um modelo para um site simples meu mesmo.

Mas o rodape ta me quebrando a cabeça.... ja tentei de tudo mas ele sempre fica em cima das outras divs. vejam e se puderem me mostrem uma solução.

De ante mão obrigado!!

Olha as divs:

<div id="topo">
<div id="img_topo">
<img src="imagens/dom.gif" width="100px" height="110px"/>
</div>
<div id="txt_topo">
<h1>Base Aérea de Brasília</h1><br />
<h2>Sexto Esquadrão de Transporte Aéreo</h2><br />
<h3>Seção de Informática</h3>
</div>
</div>

<div id="geral_conteudo">
<div id="menu">
</div>
<div id="conteudo">
<div>
<div id="clear"></div>
</div>

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

 

Vejam agora o css:

* {margin: 0px; padding:0px;}
div#topo{
margin:0px auto;
width:800px;
height:150px;
border:#009 1px solid;
text-align:center;
background-color:#93FF93;
}
div#img_topo{
width:110px;
height:120px;
border:#009 0px solid;
margin: 5px 0px 0px 5px;
text-align:center;
float:left;
}
div#txt_topo{
width:650px;
height:120px;
border:#009 0px solid;
margin: 10px 0px 0px 5px;
text-align:center;
float:left;
}
div#txt_topo h1 {
font-family:Verdana, Geneva, sans-serif;
font-size:20px;
text-transform:uppercase;
font-weight:bold;
font:Verdana, Geneva, sans-serif;
}
div#txt_topo h2 {
font-family:Verdana, Geneva, sans-serif;
font-size:16px;
text-transform:uppercase;
font:Verdana, Geneva, sans-serif;
}
div#txt_topo h3 {
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
text-transform:uppercase;
text-decoration:underline;
font:Verdana, Geneva, sans-serif;
}

div#geral_conteudo{
margin:0px auto;
width:800px;
height:450px;
border:#F00 1px solid;
text-align:center;
margin-top: 5px;
}
div#menu{
width:790px;
height:40px;
border:#F00 1px solid;
margin:5px 5px 5px 5px;
text-align:center;
background-color:#006;
margin-top: 5px;

/* sup dir inf esq*/
}
div#conteudo{
width:790px;
height:390px;
border:#90F 1px solid;
margin: 5px 0px 0px 5px;
text-align:center;
background-color:#93FF93;


}
div#clear { clear:both; }

div#rodape{
position:absolute;
margin: 0px auto;
width:800px;
height:85px;
border:#FF0 1px solid;
text-align:center;
margin-bottom: 5px;
margin-top:5px;
margin-bottom:5px;
}

 

VAleu pessoal conto com a ajuda de vocês!!

[reebr 94]

O problema está no HTML em dois lugares:

 

1 - Não se usa 'px', somente o valor mesmo.

<img src="imagens/dom.gif" width="100px" height="110px"/>   

 

2 - Você abriu uma div e não fechou.

<div id="geral_conteudo">
    <div id="menu">
    </div>
    <div id="conteudo">
    <div> <!-- DIV SEM FECHAR -->
    <div id="clear"></div>
</div>

 

<div id="topo">
    <div id="img_topo">
        <img src="imagens/dom.gif" alt = "" width="100" height="110">   
    </div>
    <div id="txt_topo">
        <h1>Base Aérea de Brasília</h1><br />
        <h2>Sexto Esquadrão de Transporte Aéreo</h2><br />
        <h3>Seção de Informática</h3>
    </div>    
</div>

<div id="geral_conteudo">
    <div id="menu">
    </div>
    <div id="conteudo">
    <div>
        <div id="clear"></div>
        </div>
        <div id="rodape">
            <h1> rodape</h1>
        </div>
    </div>
</div>

 

EDIT:

CSS:

div#rodape{
    width:820px;
    height:85px;
    text-align:center;
    position: absolute;
    bottom: 0; left: 20%;
    border: 1px solid #000;
}

[Marcos Oliveira 2]

 

O problema está no HTML em dois lugares:

 

1 - Não se usa 'px', somente o valor mesmo.

<img src="imagens/dom.gif" width="100px" height="110px"/>   

 

2 - Você abriu uma div e não fechou.

<div id="geral_conteudo">
    <div id="menu">
    </div>
    <div id="conteudo">
    <div> <!-- DIV SEM FECHAR -->
    <div id="clear"></div>
</div>

 

<div id="topo">
    <div id="img_topo">
        <img src="imagens/dom.gif" alt = "" width="100" height="110">   
    </div>
    <div id="txt_topo">
        <h1>Base Aérea de Brasília</h1><br />
        <h2>Sexto Esquadrão de Transporte Aéreo</h2><br />
        <h3>Seção de Informática</h3>
    </div>    
</div>

<div id="geral_conteudo">
    <div id="menu">
    </div>
    <div id="conteudo">
    <div>
        <div id="clear"></div>
        </div>
        <div id="rodape">
            <h1> rodape</h1>
        </div>
    </div>
</div>

 

EDIT:

CSS:

div#rodape{
    width:820px;
    height:85px;
    text-align:center;
    position: absolute;
    bottom: 0; left: 20%;
    border: 1px solid #000;
}

 

 

Olá Amigo, beleza o problema era no html mesmo resolveu.

Mas esta acontecendo o seguinte:

Entre as divs topo, geral_conteudo e rodape, tem um espaço muito grande ja tentei diminuir a margim mas não da certo. até a do browser para o topo, a distancia entre essas divs, que são independentes e quase um dedo, teria como eu solucionar isso. Veja como ficou meu css:

 

* {margin: 0px; padding:0px;}

div#topo{

margin:0px auto;

width:800px;

height:150px;

border:#009 1px solid;

text-align:center;

background-color:#9DFFFF;

}

div#img_topo{

width:110px;

height:120px;

border:#009 0px solid;

margin: 5px 0px 0px 5px;

text-align:center;

float:left;

}

div#txt_topo{

width:650px;

height:120px;

border:#009 0px solid;

margin: 10px 0px 0px 5px;

text-align:center;

float:left;

}

div#txt_topo h1 {

font-family:Verdana, Geneva, sans-serif;

font-size:20px;

text-transform:uppercase;

font-weight:bold;

font:Verdana, Geneva, sans-serif;

}

div#txt_topo h2 {

font-family:Verdana, Geneva, sans-serif;

font-size:16px;

text-transform:uppercase;

font:Verdana, Geneva, sans-serif;

}

div#txt_topo h3 {

font-family:Verdana, Geneva, sans-serif;

font-size:14px;

text-transform:uppercase;

text-decoration:underline;

font:Verdana, Geneva, sans-serif;

}

div#geral_conteudo{

margin:0px auto;

width:800px;

height:450px;

border:#009 1px solid;

text-align:center;

margin-top: 5px;

background:#5CCEF3;

}

div#menu{

width:790px;

height:30px;

border:#009 1px solid;

margin:5px 5px 5px 5px;

text-align:center;

background-color:#006;

margin-top: 5px;

 

/* sup dir inf esq*/

}

div#conteudo{

width:790px;

height:390px;

border:#009 1px solid;

margin: 5px 0px 0px 5px;

text-align:center;

background-color:#9DFFFF;

 

 

}

div#clear { clear:both; }

div#rodape{

 

margin: 0px auto;

width:800px;

height:85px;

border:#009 1px solid;

text-align:center;

margin-bottom: 5px;

margin-top:5px;

margin-bottom:5px;

background-color:#9DFFFF;

}

div#rodape h3 {

margin-top:10px;

font-family:Verdana, Geneva, sans-serif;

font-size:14px;

text-transform:uppercase;

font:Verdana, Geneva, sans-serif;

font-weight:bold;

}

div#rodape h4 {

font-family:Verdana, Geneva, sans-serif;

font-size:12px;

text-transform:uppercase;

font:Verdana, Geneva, sans-serif;

font-weight:bold;

 

}