Suporte » Plugins » Problema com CSS

  • Fala galera beleza?

    primeiro site com o WordPress e estou tendo alguns problemas:

    O meu rodapé nao fica no fim da pagina!

    Eu nao coloquei ele dentro de outras div’s pelo falo de ele ter 100% de largura, e o corpo do site ter 1000px, logo se eu colocasse ia ficar tudo com 100%…

    ele nao ta dentro de nenhuma div “pai” mas está logo abaixo a div de conteudo, e eu não sei como fazer pra deixar ele sempro lá em baixo independente se o conteudo for muito ou pouco!

    Se puderem me ajudar eu agradeço!!!!

    segue o código CSS:

    *{
    margin:0;
    padding:0;
    
    }
    body{
    background:url(imagens/flowers.jpg) no-repeat;
    background-attachment:fixed;
    text-align:center;
    overflow:auto;
    }
    /* ***************************____TOPO____*************************** */
    #topo{
    background:url(imagens/bgTopo.jpg) repeat-x;
    height:217px;
    width:100%;
    text-align:left;
    }
    #grupo-topo{
    width:1000px;
    height:217px;
    margin:0 auto;
    
    }
    #logo{
    float:left;
    margin-top:10px;
    background:url(imagens/logoreq.png) no-repeat;
    width:426px;
    height:177px;
    }
    #menu{
    float:right;
    width:500px;
    height:50px;
    margin-top:166px;
    }
    #menu ul{
    list-style:none;
    }
    #menu ul li{
    display:inline;
    font-family:Oxygen;
    }
    #menu ul li a{
    color:#000;
    font-size:22px;
    margin-right:10px;
    text-decoration:none;
    }
    #menu ul li a:hover{
    text-decoration:underline;
    color:#000;
    font-size:22px;
    margin-right:10px;
    }
    
    /* ***************************____FIM TOPO____*************************** */
    
    /* ***************************____CONTEUDO____*************************** */
    #conteudo{
    width:1000px;
    background:#fff;
    border:1px solid #000;
    min-height:100%;
    margin:0 auto;
    margin-top:5px;
    margin-bottom:5px;
    text-align:left;
    }
    #slideshow{
    background:#a1a1a1;
    border:1px solid #000;
    width:900px;
    height:230px;
    margin:0 auto;
    margin-top:5px;
    }
    #conteudo-destaque{
    width:830px;
    height:400px;
    margin:0 auto;
    margin-top:5px;
    margin-bottom:6px;
    background:#Fc3;
    }
    #destaque-esquerdo{
    width:320px;
    height:400px;
    float:left;
    border:1px solid #000;
    background:#d3c;
    }
    #destaque-direito{
    width:500px;
    height:400px;
    float:right;
    border:1px solid #000;
    background:#d3c;
    }
    #texto{
    width:990px;
    height:auto;
    background:#fff;
    border:1px solid #000;
    margin:0 auto;
    margin-bottom:5px;
    }
    /* ***************************____FIM CONTEUDO____*************************** */
    
    /* ***************************____RODAPE____*************************** */
    #rodape{
    width:100%;
    height:192px;
    background:url(imagens/bgRodape.jpg);
    border-top:1px solid #000;
    clear:both;
    bottom:0;
    postion:absolute;
    }
    #box-rodape{
    width:1000px;
    height:191px;
    margin:0 auto;
    
    }
    #box-credito{
    width:700px;
    height:35px;
    margin:0 auto;
    margin-top:20px;
    }
    #box-credito p{
    color: #D9D900;
    font-size:22px;
    font-family:Oxygen;
    }
    #box-credito p a{
    text-decoration:none;
    color:#fff;
    }
    #box-credito p a:hover{
    color:#26FFFF;
    }
    /* ***************************____FIM RODAPE____*************************** */
Visualizando 1 resposta (de um total de 1)
  • Beleza, Matheus e por ai ?

    Então para que a rodapé desça e fique no seu lugar você deve fazer o seguinte.
    Criar um id no seu css para uma div de limpeza

    #clearfix{clear:both;}

    Criar uma div com esse id

    <div id="clearfix">
    </div>

    Após isso voce deve por esse div antes da abertura do seu footer para que ele identifique que existe uma div acima dele.

    Exemplo

    <div id="conteudo"></div><!--Conteudo-->
        <div id="clearfix"></div><!--Clear-->
     <div id="footer">
         <div id="footer-content">
         <p>conteudo do Footer</p>
    </div><!--FooterConteudo-->
    </div><!--Footer-->

    Espero ter ajudado.

    Dica crie seu css de forma inline, para que ocupe menos espaço. Em sites grande quanto menor o volume de dados dos arquivos masi rapido o site carrega.

Visualizando 1 resposta (de um total de 1)
  • O tópico ‘Problema com CSS’ está fechado para novas respostas.