0
I am unable to position my footer, besides that it is accompanying my widget. how can I position it correctly?
codes below:
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>
Post your CSS too.
– LeAndrade
Staphan, I don’t understand your problem with Footer. What do you want with him? He’s already at the bottom of the page... It’s just not occupying the entire width of the window, but it already seems to be positioned in the right place??
– hugocsl
@hugocsl by the code he put, really, the footer is in the right place, just not appearing to the user
– mutlei
@mutlei is not appearing pq only has two empty Divs inside... But I don’t understand what is the "positioning problem" he refers to.
– hugocsl
I ended up expressing myself badly. The real problem is the ffoter not being occupying the whole screen!
– user111919
Vc speaks in width or height ?
– wDrik