0

Não estou conseguindo posicionar o meu footer, além de que ele esta acompanhando o meu widget. como posso posicionar ele corretamente?

códigos abaixo:

body {
                    margin: 0;
                    padding: 0;
                    font-family: helvetica;
                    font-size: 12px;
                }
                
                .topo {
                    height: 30px;
                    background-color: #303030;
                }
                
                .topoint {
                    width: 100%;
                    max-width: 1040px;
                    height: 30px;
                    margin: auto;
                }
                
                .topoleft {
                    width: 50%;
                    height: 30px;
                    float: left;
                }
                
                .toporight {
                    width: 50%;
                    height: 28px;
                    float: right;
                    text-align: right;
                    margin-top: 2px;
                }
                
                .topoleft ul {
                    margin: 0;
                    padding: 0;
                    list-style: none;
                }
                
                .topoleft li {
                    float: left;
                    height: 30px;
                    line-height: 30px;
                    margin-left: 8px;
                    margin-right: 8px;
                }
                
                .topoleft li a {
                    text-decoration: none;
                    color: #FFF;
                }
                
                .topoleft li .ativo {
                    color: blue;
                }
                
                .topobusca {
                    width: 110px;
                    height: 26px;
                    outline: 0;
                }
                
                .toporight a {
                    float: right;
                }
                
                .toporight input {
                    float: right;
                }
                
                .toporight img {
                    margin-right: 4px;
                }
                
                .topo2 {
                    height: 95px;
                }
                
                .topo2int {
                    width: 100%;
                    max-width: 1040px;
                    height: 95px;
                    margin: auto;
                }
                
                .logo {
                    width: 230px;
                    height: 65px;
                    float: left;
                    margin-top: 30px;
                }
                
                .topo2 .banner {
                    width: 650px;
                    height: 80px;
                    float: right;
                    margin-top: 7px;
                    background-color: #ff0000;
                    font-size: 40px;
                    color: #fff;
                    line-height: 80px;
                    text-align: center;
                    font-family: Helvetica;
                }
                
                .menu {
                    height: 40px;
                    background-color: #ff0000;
                }
                
                .menuint {
                    width: 100%;
                    max-width: 1040px;
                    height: 40px;
                    margin: auto;
                }
                
                .menu ul {
                    margin: 0;
                    padding: 0;
                    list-style: none;
                    position: absolute;
                }
                
                .menu li {
                    float: left;
                    height: 40px;
                    line-height: 40px;
                    padding-left: 8px;
                    padding-right: 8px;
                }
                
                .menu li:hover .submenu {
                    display: block;
                }
                
                .menu a {
                    color: #fff;
                    text-decoration: none;
                }
                
                .submenu {
                    width: 140px;
                    position: absolute;
                    background-color: #ff0000;
                    display: none;
                }
                
                .submenuitem {
                    width: 140px;
                    height: 30px;
                    line-height: 30px;
                    padding-left: 10px;
                }
                
                .submenuitem:hover {
                    background-color: #ff5555;
                    width: 130px;
                }
                
                .ultimasnoticias {
                    height: 40px;
                }
                
                .ultimasnoticiasint {
                    width: 100%;
                    max-width: 1040px;
                    height: 40px;
                    margin: auto;
                }
                
                .ultnoticiasarea {
                    height: 28px;
                    background-color: #fff;
                    border: 1px solid #ccc;
                    margin-top: 10px;
                    border-radius: 2px;
                }
                
                .ultnoticiastitulo {
                    background-color: #ff0000;
                    color: #fff;
                    height: 28px;
                    line-height: 28px;
                    display: inline-block;
                    padding-left: 10px;
                    padding-right: 10px;
                    border-top-left-radius: 2px;
                    border-bottom-left-radius: 2px;
                    font-size: 16px;
                }
                
                .ultnoticiasnoticia {
                    color: #000;
                    height: 28px;
                    line-height: 28px;
                    display: inline-block;
                    padding-left: 10px;
                    border-top-right-radius: 2px;
                    border-bottom-right-radius: 2px;
                }
                
                .containerint {
                    width: 100%;
                    max-width: 1040px;
                    margin: auto;
                }
                
                .leftside {
                    width: 750px;
                    float: left;
                }
                
                .rightside {
                    width: 278px;
                    min-height: 300px;
                    float: right;
                    margin-left: 12px;
                }
                
                .widget {
                    border: 1px solid #ccc;
                    background-color: #fff;
                    margin-bottom: 10px;
                    border-radius: 2px;
                }
                
                .widget_titulo {
                    height: 30px;
                    line-height: 30px;
                    background-color: #ddd;
                    border-bottom: 1px solid #ccc;
                    padding-left: 5px;
                    font-size: 14px;
                }
                
                .widget_conteudo {
                    text-align: center;
                    padding-top: 5px;
                    padding-bottom: 5px;
                }
                
                .noticia_item {
                    font-size: 14px;
                    margin: 0px 10px;
                    padding: 10px 0px;
                    text-align: left;
                    border-bottom: 1px solid #ccc;
                }
                
                .noticia_item a {
                    text-decoration: none;
                    color: #000;
                }
                
                .slideshow {
                    height: 335px;
                    overflow: hidden;
                    margin-bottom: 20px;
                }
                
                .slideshow_area {
                    width: 10000px;
                    height: 335px;
                    transition: all 1s;
                }
                
                .slide {
                    height: 335px;
                    float: left;
                    background-repeat: no-repeat;
                    background-position: center;
                    background-size: cover;
                }
                
                .slide img {
                    height: 335px;
                    width: 750px;
                }
                
                .slideinfo {
                    position: relative;
                    top: -70px;
                    height: 70px;
                    background-image: url('../images/slideshow_bg.png');
                    background-size: auto 70px;
                    z-index: 10000;
                }
                
                .slideinfo_titulo {
                    font-size: 20px;
                    color: #fff;
                    padding-top: 20px;
                    margin-left: 20px;
                }
                
                .slideinfo_subtitulo {
                    font-size: 13px;
                    margin-left: 20px;
                    color: #fff;
                }
                
                .bolls {
                    position: absolute;
                    width: 200px;
                    height: 15px;
                    margin-left: 10px;
                    padding-top: 10px;
                }
                
                .boll {
                    width: 15px;
                    height: 15px;
                    float: left;
                    margin-right: 5px;
                    cursor: pointer;
                    background-color: #d0d1cc;
                    border-radius: 10px;
                }
                
                .noticiaarea1 {
                    width: 420px;
                    height: 420px;
                    float: left;
                }
                
                .noticiaitem1 {
                    height: 220px;
                }
                
                .noticia_image {
                    width: 390px;
                    height: 220px;
                    float: left;
                    padding: 3px;
                    border: 1px solid #ccc;
                    margin-top: 4px;
                    margin-left: 15px;
                }
                
                .texto_descritivo {
                    font-size: 30px;
                    width: 390px;
                    text-align: left;
                    margin-left: 15px;
                }
                
                .texto_subdescritivo {
                    color: #ccc;
                    font-size: 12px;
                    text-align: left;
                    margin-left: 15px;
                }
                
                .noticiaarea2 {
                    width: 310px;
                    height: 420px;
                    float: right;
                }
                
                .clear {
                    clear: both;
                }
                
                .noticiaitem {
                    text-align: left;
                    height: 88px;
                    margin-bottom: 14px;
                }
                
                .noticia_img {
                    width: 80px;
                    height: 80px;
                    border: 1px solid #ccc;
                    padding: 3px;
                    margin-top: 4px;
                    float: left;
                }
                
                .noticiatitulo {
                    float: left;
                    margin-left: 5px;
                    margin-top: 4px;
                    font-size: 16px;
                    width: 216px;
                }
                
                .noticiainfo {
                    float: left;
                    margin-left: 5px;
                    margin-top: 4px;
                    color: #999;
                    width: 216px;
                }
                
                .footer {
                    height: 50px;
                }
                
                .footerint {
                    width: 100%;
                    max-width: 1040px;
                    height: 50px;
                    margin: auto;
                    background-color: #ff0000;
                }
<html>

<head>
    <title>Html Portal</title>
    <meta charset="utf-8">
    <meta id="viewport" name="viewport" content="width=device-width, user-scalable=no">
    <link rel="stylesheet" href="assets/css/style.css">
    <script type="text/javascript" src="assets/js/script.js"></script>
</head>

<body>
    <div class="topo">
        <div class="topoint">
            <div class="topoleft">
                <ul>
                    <li><a href="./" class="ativo"> Home<a/></li>
              <li><a href="Quem somos">Quem Somos<a/></li>
              <li><a href="Anuncie aqui">Anuncie Aqui<a/></li>
              <li><a href="Contato">Contato<a/></li>
          </ul>
       </div>
          <div class="toporight">
       	    <input type="image" border="0" src="assets/images/lupabranca.png" width="26" height="26" >
       	    <input type="text" name="busca" class="topobusca" placeholder="Busca..." >
            <a href=""><img src="assets/images/youtube.png" border="0" width="26" height="26" /></a>
                        <a href=""><img src="assets/images/twitter.png" border="0" width="26" height="26" /></a>
                        <a href=""><img src="assets/images/facebook.png" border="0" width="26" height="26" /></a>
                        <a href=""><img src="assets/images/googleplus.png" border="0" width="26" height="26" /></a>
                        <a href=""><img src="assets/images/rss.png" border="0" width="26" height="26" /></a>
            </div>
        </div>
    </div>
    <div class="topo2">
        <div class="topo2int">
            <div class="logo">
                <img src="assets/images/logo.jpg" border="0" width="230" />
            </div>
            <div class="banner">
                PUBLICIDADE 80 X 650
            </div>
        </div>
    </div>
    <div class="menu">
        <div class="menuint">
            <ul>
                <li><a href="./" class="ativo">Home<a/></li>
          <li><a href="./" >Economia<a/></li>
          <li>
            <a href="./" >Entretenimento<a/>
            <img src="assets/images/arrowdown.png" border="0" width="10"/>
              <div class="submenu">
                  <a href="./"><div class="submenuitem">submenu1</div></a>
                    <a href="./">
                        <div class="submenuitem">submenu2</div>
                    </a>
                    <a href="./">
                        <div class="submenuitem">submenu3</div>
                    </a>
                    <a href="./">
                        <div class="submenuitem">submenu4</div>
                    </a>
                    <a href="./">
                        <div class="submenuitem">submenu5</div>
                    </a>
        </div>
        </li>
        <li>
            <a href="./">Esportes<a/>
            <img src="assets/images/arrowdown.png" border="0" width="10">
              <div class="submenu">
                  <a href="./"><div class="submenuitem">submenu1</div></a>
            <a href="./">
                <div class="submenuitem">submenu2</div>
            </a>
            <a href="./">
                <div class="submenuitem">submenu3</div>
            </a>
    </div>
    </li>
    <li><a href="./">Geral<a/></li>
          <li>
            <a href="./" >Notícias<a/>
            <img src="assets/images/arrowdown.png" border="0" width="10">
              <div class="submenu">
                  <a href="./"><div class="submenuitem">submenu1</div></a>
        <a href="./">
            <div class="submenuitem">submenu2</div>
        </a>
        <a href="./">
            <div class="submenuitem">submenu3</div>
        </a>
        <a href="./">
            <div class="submenuitem">submenu4</div>
        </a>
        </div>
    </li>
    <li><a href="./">policia<a/></li>
          <li><a href="./" >Videos<a/></li>
       </ul>
    </div>
    </div>
       <div class="ultimasnoticias">
        <div class="ultimasnoticiasint">
          <div class="ultnoticiasarea">
             <div class="ultnoticiastitulo">ÚLTIMAS NOTÍCIAS</div>
             <div class="ultnoticiasnoticia">Alguma nótícia de algum texto que vai aparecer aqui...</div>
          </div>
    </div>
  </div>
      <div class="container">
        <div class="containerint">
            <div class="leftside">
                <div class="slideshow" id="slideshow">
                      <div class="bolls">
                          <div class="boll" onclick="mudarSlide(0)"></div>
                          <div class="boll" onclick="mudarSlide(1)"></div>
                          <div class="boll" onclick="mudarSlide(2)"></div>
                          <div class="boll" onclick="mudarSlide(3)"></div>
                      </div>
                     <div class="slideshow_area">
                        <a href="http://br.ufc.com/">
                        <div class="slide">
                             <img src="assets/images/ufc.jpg">
                            <div class="slideinfo">
                         <div class="slideinfo_titulo">Um tiulo de teste para esse slide</div>
                       <div class="slideinfo_subtitulo">Subtitulo de teste para esse slide</div>
                    </div>
                 </div>
                 </a>
        <a href="http://sicnoticias.sapo.pt/">
            <div class="slide">
                <img src="assets/images/jornal.jpg">
                <div class="slideinfo">
                    <div class="slideinfo_titulo">Um tiulo de teste para esse slide</div>
                    <div class="slideinfo_subtitulo">Subtitulo de teste para esse slide</div>
                </div>
            </div>
        </a>
        <a href="https://www.nfl.com/">
            <div class="slide">
                <img src="assets/images/nfl.jpg">
                <div class="slideinfo">
                    <div class="slideinfo_titulo">Um tiulo de teste para esse slide</div>
                    <div class="slideinfo_subtitulo">Subtitulo de teste para esse slide</div>
                </div>
            </div>
        </a>
        <a href="http://www.uefa.com/uefachampionsleague/index.html">
            <div class="slide">
                <img src="assets/images/champions.jpg">
                <div class="slideinfo">
                    <div class="slideinfo_titulo">Um tiulo de teste para esse slide</div>
                    <div class="slideinfo_subtitulo">Subtitulo de teste para esse slide</div>
                </div>
            </div>
        </a>
        </div>
        </div>
        <div class="widget">
            <div class="widget_titulo">NOTÍCIAS</div>
            <div class="widget_conteudo">
                <div class="noticiaarea1">
                    <div class="noticiaitem1">
                        <div class="noticia_image">
                            <img src="assets/images/quadrilha.jpg" border="0" width="390" height="220">
                        </div>
                        <div class="texto_descritivo">Algum texto descritivo que vai aparecer por aqui abaixo dessa iagem</div>
                        <div class="texto_subdescritivo"> 1250 likes 500 comentários</div>
                    </div>
                </div>
                <div class="noticiaarea2">
                    <div class="noticiaitem">
                        <div class="noticia_img">
                            <img src="assets/images/jogo.jpg" border="0" width="80" height="80">
                        </div>
                        <div class="noticiatitulo">Algum titulo qualquer</div>
                        <div class="noticiainfo">500 comentários</div>
                    </div>
                    <div class="noticiaitem">
                        <div class="noticia_img">
                            <img src="assets/images/rihanna.jpg" border="0" width="80" height="80">
                        </div>
                        <div class="noticiatitulo">Algum titulo qualquer</div>
                        <div class="noticiainfo">500 comentários</div>
                    </div>
                    <div class="noticiaitem">
                        <div class="noticia_img">
                            <img src="assets/images/vint Cerf.jpg" border="0" width="80" height="80">
                        </div>
                        <div class="noticiatitulo">Algum titulo qualquer</div>
                        <div class="noticiainfo">500 comentários</div>
                    </div>
                </div>
                <div style="clear: both;"></div>
            </div>
        </div>
        <div class="widget">
            <div class="widget_titulo">NOTÍCIAS RECENTES</div>
            <div class="widget_conteudo">
                <div class="noticiaarea1">
                    <div class="noticiaitem1">
                        <div class="noticia_image">
                            <img src="assets/images/empresa.jpg" border="0" width="390" height="220">
                        </div>
                        <div class="texto_descritivo">Algum texto descritivo que vai aparecer por aqui abaixo dessa iagem</div>
                        <div class="texto_subdescritivo"> 1250 likes 500 comentários</div>
                    </div>
                </div>
                <div class="noticiaarea2">
                    <div class="noticiaitem">
                        <div class="noticia_img">
                            <img src="assets/images/escritorio.jpg" border="0" width="80" height="80">
                        </div>
                        <div class="noticiatitulo">Algum titulo qualquer</div>
                        <div class="noticiainfo">500 comentários</div>
                    </div>
                    <div class="noticiaitem">
                        <div class="noticia_img">
                            <img src="assets/images/paisagem.jpg" border="0" width="80" height="80">
                        </div>
                        <div class="noticiatitulo">Algum titulo qualquer</div>
                        <div class="noticiainfo">500 comentários</div>
                    </div>
                    <div class="noticiaitem">
                        <div class="noticia_img">
                            <img src="assets/images/carro.jpg" border="0" width="80" height="80">
                        </div>
                        <div class="noticiatitulo">Algum titulo qualquer</div>
                        <div class="noticiainfo">500 comentários</div>
                    </div>
                </div>
                <div style="clear: both;"></div>
            </div>
        </div>
        <footer>
            <div class="footer"></div>
            <div class="footerint"></div>
        </footer>
        </div>
        <div class="rightside">
            <div class="widget">
                <div class="widget_titulo">SOCIAL</div>
                <div class="widget_conteudo">
                    <a href=""><img src="assets/images/rss.png" border="0" width="26" height="26" /></a>
                    <a href=""><img src="assets/images/googleplus.png" border="0" width="26" height="26" /></a>
                    <a href=""><img src="assets/images/facebook.png" border="0" width="26" height="26" /></a>
                    <a href=""><img src="assets/images/twitter.png" border="0" width="26" height="26" /></a>
                    <a href=""><img src="assets/images/youtube.png" border="0" width="26" height="26" /></a>
                </div>
            </div>
            <div class="widget">
                <div class="widget_titulo">ULTIMAS NOTÍCIAS</div>
                <div class="widget_conteudo">
                    <div class="noticia_item">
                        <a href="./">Alguma notícia de algum site que vai
                         aparecer nesta parte do portal para exemplificar.<a/>
                      </div>
                         <div class="noticia_item">
                         <a href="./">Alguma notícia de algum site que vai
                         aparecer nesta parte do portal para exemplificar.<a/>
                      </div>
                       <div class="noticia_item">
                         <a href="./">Alguma notícia de algum site que vai
                         aparecer nesta parte do portal para exemplificar.<a/>
                      </div>
                       <div class="noticia_item">
                         <a href="./">Alguma notícia de algum site que vai
                         aparecer nesta parte do portal para exemplificar.<a/>
                      </div>
                       <div class="noticia_item">
                         <a href="./">Alguma notícia de algum site que vai
                         aparecer nesta parte do portal para exemplificar.<a/>
                      </div>
                  </div>
             </div>
                <div class="widget">
                   <div class="widget_titulo">PUBLICIDADADE</div>
                  <div class="widget_conteudo">
                      <img src="assets/images/girl.jpg" border="0" width="275" >
                  </div>
             </div>
             <div class="widget">
                   <div class="widget_titulo">ENCONTRE-NOS NO FACEBOOK</div>
                  <div class="widget_conteudo">
                    <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Ffacebook&tabs&width=275&height=121&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="275" height="121" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
                </div>
             </div>
          </div>
        </div>
      </div>
</body>
</html>

6
  • 2
    Poste seu CSS também.
    – LeAndrade
    Commented 16/05/2018 às 15:28
  • Staphan, não entendi o seu problema com o Footer. O que vc quer com ele? Ele já está na basa da página... Só não está ocupando a largura toda da janela, mas já parece posicionado no lugar correto não??
    – hugocsl
    Commented 16/05/2018 às 18:02
  • @hugocsl pelo código que ele colocou, realmente, o footer está no local certo, só não está aparecendo pro usuário
    – mutlei
    Commented 16/05/2018 às 18:03
  • @mutlei não está aparecendo pq só tem duas divs vazias dentro... Mas não entendo qual é o "problema de posicionamento" que ele se refere.
    – hugocsl
    Commented 16/05/2018 às 18:05
  • Eu acabei me expressando mal. O verdadeiro problema é o ffoter não estar ocupando a tela toda!
    – user111919
    Commented 16/05/2018 às 18:53

1 Resposta 1

0

Caso a situação seja apenas o footer pegar toda a tela, pode adicionar o css abaixo e ver se resolve:

footer{
    background-color: green;
    width: 100%;
    height: 20px;
    position: fixed;
    bottom: 0;
    left: 0;
}

Você deve fazer log-in para responder a esta pergunta.