Ir para conteúdo
Fórum Script Brasil
  • 0

div rodape em cima do conteudo


mulequim

Pergunta

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

Mas o rodape ta me quebrando a cabeça.... já 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!!

Link para o comentário
Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

  • 0

Ola tudo bem amigo.

Você tem dois pequenos problemas no seu codigo.

1- Primeiro você esqueceu de fechar a div do "conteudo".

2- Você esta usando "position: absolute;" na "div#rodape"

vou colocar o codigo aqui e ai você ve se o codigo esta como você quer.

* {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;
}
<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>
Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,8k
×
×
  • Criar Novo...