Jump to content

Archived

This topic is now archived and is closed to further replies.

psychookama

Espaçameto desnecessário no footer da pagina

Recommended Posts

Olá, sou novo na area de desenvolvimento, e estou no momento desenvolvendo um site institucional.

depois de tudo feito me deparo com um espaço enorme no footer da pagina, não consigo encontrar o erro ou solução.

agradeço quem puder ajudar!

 

HTML

 

 

 

<html>
<head>
<title>Suplemercado Fit</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href='http://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
<!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-panels.min.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel-noscript.css" />
<link rel="stylesheet" href="css/style.css" />
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
<!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->
</head>
<body class="homepage">
<!-- Header -->
<div id="header">
<div class="container">

<!-- Logo -->
<div id="logo">
<img src="images/logo.png" alt="" />
</div>

<!-- Nav -->
<nav id="nav">
<ul>
<li class="active"><a href="index.html">Início</a></li>
<li><a href="1threecolumn.html">Quem Somos</a></li>
<li><a href="1twocolumn1.html">Contato</a></li>
</ul>
</nav>
</div>
</div>
<!-- Header -->

<!-- Main -->
<div id="main">
<div class="container">
<header>
<h2>Feedback</h2>
</header>
<div class="row">
<div class="3u">
<section>
<a href="#" class="image full"><img src="images/pics01.png" alt="" /></a>
<p>de bruiks on te teibol.</p>
<a href="#" class="button">leia Mais</a>
</section>
</div>
<div class="3u">
<section>
<a href="#" class="image full"><img src="images/pics11.png" alt="" /></a>
<p>Conheça nosso Blog Saúde e Mundo Fitness, tudo sobre Esportes, Saúde e Bem-Estar.</p>
<a href="#" class="button">Leia Mais</a>
</section>
</div>
<div class="3u">
<section>
<a href="#" class="image full"><img src="images/pics12.png" alt="" /></a>
<p>NATAL SOLIDÁRIO,
Venha nos visitar e nos ajudar a trazer o verdadeiro espírito do natal!.</p>
<a href="#" class="button">Leia Mais</a>
</section>
</div>
<div class="3u">
<section>
<a href="#" class="image full"><img src="images/pics13.png" alt="" /></a>
<p>O SupleMercado entra com tudo no Black November, serão duas semanas com diversas promoções e descontos!</p>
<a href="#" class="button">Leia Mais</a>
</section>
</div>
</div>
<div class="divider"> </div>
<div class="row">

<!-- Content -->
<div class="8u skel-cell-important">
<section id="content">
<header>
<h2>QUEM SOMOS</h2>
<span class="byline">Suplemercado Fit, satisfação em vender mais barato!</span>
</header>
<p><a href="#" class="image full"><img src="images/pics02.jpg" alt=""></a></p>
<p>o <strong>Suplemercado Fit</strong> Inova no ramo de suplementação com a satisfação de vender mais barato sendo o 1º Supermercado de suplementos no Brasil! Nossa principal meta é tornar o suplemento mais acessível a todos, promovendo, assim qualidade de vida e melhoria da performance com o melhor custo benefício e qualidade.
<a href="https://www.facebook.com/SupleMercadoFit/?fref=ts">Facebook</a>.</p>
<a href="1threecolumn.html" class="button">Leia Mais</a>
</section>
</div>
<!-- /Content -->

<!-- Sidebar -->
<div id="sidebar" class="4u">
<section>
<header>
<h2>Veja tambem</h2>
</header>
<ul class="default">
<li><a href="http://suplemercadofit.com.br/blog/dicas-de-como-aumentar-a-massa-muscular/">DICAS DE COMO AUMENTAR A MASSA MUSCULAR</a></li>
<li><a href="http://suplemercadofit.com.br/blog/como-voltar-aos-treinos-apos-longo-periodo-parado/">COMO VOLTAR AOS TREINOS APÓS LONGO PERÍODO PARADO</a></li>
<li><a href="http://suplemercadofit.com.br/blog/oleo-de-coco-seu-aliado-para-perder-peso/">ÓLEO DE COCO, SEU ALIADO PARA PERDER PESO</a></li>
<li><a href="http://suplemercadofit.com.br/blog/a-vantagem-da-proteina-da-carne/">O PORQUE USAR A PROTEÍNA DA CARNE</a></li>
<li><a href="http://suplemercadofit.com.br/blog/pre-treino-o-suplemento-para-ganhar-definicao/">PRÉ TREINO, O SUPLEMENTO PARA GANHO DE VOLUME MUSCULAR</a></li>
<li><a href="http://suplemercadofit.com.br/blog/como-aumentar-a-vascularizacao-na-musculacao/">DICAS PARA AUMENTAR A VASCULARIZAÇÃO</a></li>
</ul>
</section>
</div>
<!-- Sidebar -->

</div>

</div>
</div>
<!-- Main -->
<!-- Footer -->
<div id="footer">
<div class="container">
<div class="row">
<div class="3u"></div>
<div class="6u">
<section>

<div align="middle" >
<div class="container">
<header>
<h2>CENTRAL DE ATENDIMENTO</h2>
</header>


<p>
<telefone> <img src="images/telefone.png" alt="" />
</telefone>

<h10>TELEFONE:</br></h10>
<h11>(11) 4930-4831<h11/>
</p>
<p>
<email> <img src="images/email.png" alt="" />
</email>

<h12>EMAIL:</br></h12>
<h13>contato@suplemercadofit.com.br</h13>
</p>
<p>
<relogio> <img src="images/relogio.png" alt="" />
</relogio>

<h14>HORÁRIO DE ATENDIMENTO:</br></h14>
<h15>Segunda a Sexta das 8h às 20h, Sábados e Feriados das 9h</br><h16>às 20h.</h16></h15></p>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
<!-- Footer -->

<!-- Copyright -->
<div id="copyright">
<div class="container">
© 2016 Suplemercado Fit • Todos os direitos reservados. Proibida reprodução total ou parcial.
Rua Leonardo Locosselli, 04 • São Bernardo do campo/SP • CEP 09771-180
</div>
</div>
</body>
</html>

 

 

CSS

 

 

/*********************************************************************************/
/* Basic */
/*********************************************************************************/
body
{
background: #090909;
}
body,input,textarea,select
{
font-family: 'Oxygen', sans-serif;
font-size: 13pt;
line-height: 2em;
}
h1,h2,h3,h4,h5,h6
{
font-weight: bold;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
{
color: inherit;
text-decoration: none;
}

/* Change this to whatever font weight/color pairing is most suitable */
strong, b
{
font-weight: bold;
color: #000000;
}

em, i
{
font-style: italic;
}
/* Don't forget to set this to something that matches the design */
a
{
color: #ff0000;
}

a:hover
{
text-decoration: none;
}
sub
{
position: relative;
top: 0.5em;
font-size: 0.8em;
}

sup
{
position: relative;
top: -0.5em;
font-size: 0.8em;
}

hr
{
border: 0;
border-top: solid 1px #ddd;
}

blockquote
{
border-left: solid 0.5em #ddd;
padding: 1em 0 1em 2em;
font-style: italic;
}

p, ul, ol, dl, table
{
margin-bottom: 1em;
}

logo
{

}
header
{
}

header h2
{
letter-spacing: -1px;
font-weight: 700;
}

header .byline
{
display: block;
text-transform: uppercase;
}

footer
{
margin-top: 1em;
}
br.clear
{
clear: both;
}

/* Buttons */

.button
{
position: relative;
display: inline-block;
margin-top: 2em;
padding: 0.8em 1.5em;
background: #1d1d1d;
border-radius: 6px;
text-decoration: none;
text-transform: uppercase;
font-size: 1em;
color: #FFF;
-moz-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
-webkit-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
-o-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
-ms-transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
transition: color 0.35s ease-in-out, background-color 0.35s ease-in-out;
cursor: pointer;
}
.button:hover
{
background: #141414;
color: #FFF !important;
}
/* Sections/Articles */

section,
article
{
margin-bottom: 3em;
}

section > :last-child,
article > :last-child
{
margin-bottom: 0;
}
section:last-child,
article:last-child
{
margin-bottom: 0;
}
.row > section,
.row > article
{
margin-bottom: 0;
}
/* Images */
.image
{
display: inline-block;
}

.image img
{
display: block;
width: 100%;
border-radius: 6px;
}
.image.featured
{
display: block;
width: 100%;
margin: 0 0 2em 0;
}

.image.full
{
display: block;
width: 100%;
margin: 0 0 2em 0;
}

.image.left
{
float: left;
margin: 0 2em 2em 0;
}

.image.centered
{
display: block;
margin: 0 0 2em 0;
}
.image.centered img
{
margin: 0 auto;
width: auto;
}
/* Lists */
ul.default
{
list-style: none;
margin: 0;
padding: 0;
}

ul.default li
{
padding: 0.50em 0em;
}

ul.style1
{
font-size: 0.90em;
}
ul.style1 li
{
padding: 0.80em 0em;
line-height: 1.8em;
}
ul.style1 li img
{
float: left;
margin-right: 1.50em;
border-radius: 6px;
}

ul.style1 .posted
{
display: block;
margin-top: 1em;
padding: 0.50em 0em;
}
/*********************************************************************************/
/* Header */
/*********************************************************************************/
#header
{
position: relative;
background: #ddd url(../images/header.jpg) no-repeat center;
background-size: cover;
}
#logo
{
}

#nav
{
}
#nav ul
{
margin: 0;
}

/*********************************************************************************/
/* Banner */
/*********************************************************************************/
#banner
{
position: relative;
background: #333;
color: #fff;
}
/*********************************************************************************/
/* Main */
/*********************************************************************************/
#main
{
position: relative;
background: #fff url(images/overlay.png) repeat;
}

.divider
{
overflow: hidden;
border-top: 1px solid #dbdbdb;
}
/*********************************************************************************/
/* Footer */
/*********************************************************************************/

#footer
{
position: relative;
background: #121212;
color: rgba(255,255,255,.4);
}

#footer header h2
{
color: #FFF;
}

/*********************************************************************************/
/* Copyright */
/*********************************************************************************/

#copyright
{
position: relative;
padding: 1em 0em;
text-align: center;
color: rgba(255,255,255,.2);
}

#copyright .container
{
}

#copyright a
{
text-decoration: none;
color: rgba(255,255,255,.3);
}

telefone {
position: relative; top: 1px; left: -230px;
margin-left: auto;
margin-right: auto;
display: block
}

h10 {
color: #ffffff;
text-align: center;
margin-left: auto;
margin-right: auto;
font-size:25px;
position: relative; top: -85px; left: -114px;
display: block;
}

h11 {
color: #ffffff;
margin-left: auto;
margin-right: auto;
text-align: center;
font-size:35px;
position: relative; top: -75px; left: -68px;
display: block;
}

email {
position: relative; top: -65px; left: -230px;
margin-left: auto;
margin-right: auto;
display: block
}

h12 {
color: #ffffff;
text-align: center;
margin-left: auto;
margin-right: auto;
font-size:25px;
position: relative; top: -143px; left: -135px;
display: block;
}

h13 {
color: #ffffff;
margin-left: auto;
margin-right: auto;
text-align: center;
font-size:20px;
position: relative; top: -135px; left: -20px;
display: block;
}

relogio {
position: relative; top: -128px; left: -230px;
margin-left: auto;
margin-right: auto;
display: block
}

h14 {
color: #ffffff;
text-align: center;
margin-left: auto;
margin-right: auto;
font-size:25px;
position: relative; top: -210px; left: -5px;
display: block;
}

h15 {
color: #ffffff;
margin-left: auto;
margin-right: auto;
text-align: center;
font-size:17px;
position: relative; top: -210px; left: 50px;
display: block;
}
h16 {
color: #ffffff;
margin-left: auto;
margin-right: auto;
text-align: center;
font-size:17px;
position: relative; top: 2px; left: -198px;
display: block;
}

 

 

 

Caso queiram dar uma olhada na foto do problema vou postar o link http://s1159.photobucket.com/user/miguel_campos3/media/erro_zpszwwpldhq.png.html

Share this post


Link to post
Share on other sites

Testei seu código no JSFiddle e a solução foi até bem simples.

 

Na sua id/classe Footer, adicione a seguinte propriedade:

height: 250px;

Pronto.

 

Olá Henrique, tive um problema no pc aqui, estou arrumando, e hoje já faço o teste do código, agradeço a ajuda!

Share this post


Link to post
Share on other sites

  • Similar Content

    • By Felper
      Estou criando um jogo de avançar casas e não estou conseguindo somar os valores sorteados pelo dado. Quero fazer assim:
      let somadado=0;
      let valorsorteado=5;
      somadado=5;
      valorsorteado=3;
      somadado=8;
      valorsorteado=2;
      somadado=10;
       
      Assim por diante. 
       
    • By leonardorafaeldev
      Boa noite pessoal estou com um problema que o icone do meu site não aparece no mobile segue uma foto do problema o meu codigo esta assim
       
      <!-- icones -->   <link href="icones/favicon.ico" rel="icon">   <link href="icones/favicon.ico" rel="shortcut icon">    <link rel="apple-touch-icon" sizes="57x57" href="icones/apple-icon-57x57.png">   <link rel="apple-touch-icon" sizes="60x60" href="icones/apple-icon-60x60.png">   <link rel="apple-touch-icon" sizes="72x72" href="icones/apple-icon-72x72.png">   <link rel="apple-touch-icon" sizes="76x76" href="icones/apple-icon-76x76.png">   <link rel="apple-touch-icon" sizes="114x114" href="icones/apple-icon-114x114.png">   <link rel="apple-touch-icon" sizes="120x120" href="icones/apple-icon-120x120.png">   <link rel="apple-touch-icon" sizes="144x144" href="icones/apple-icon-144x144.png">   <link rel="apple-touch-icon" sizes="152x152" href="icones/apple-icon-152x152.png">   <link rel="apple-touch-icon" sizes="180x180" href="icones/apple-icon-180x180.png">   <link rel="icon" type="image/png" sizes="192x192"  href="icones/android-icon-192x192.png" >   <link rel="icon" type="image/png" sizes="36x36" href="icones/android-icon-36x36.png">   <link rel="icon" type="image/png" sizes="48x48" href="icones/android-icon-48x48.png">   <link rel="icon" type="image/png" sizes="96x96" href="icones/android-icon-96x96.png">   <link rel="icon" type="image/png" sizes="144x144" href="icones/android-icon-144x144.png">   <link rel="icon" type="image/png" sizes="72x72" href="icones/android-icon-72x72.png">   <link rel="icon" type="image/png" sizes="32x32" href="icones/favicon-32x32.png">   <link rel="icon" type="image/png" sizes="96x96" href="icones/favicon-96x96.png">   <link rel="icon" type="image/png" sizes="16x16" href="icones/favicon-16x16.png">   <link rel="manifest" href="icones/manifest.json">   <meta name="msapplication-TileColor" content="#ffffff">   <meta name="msapplication-TileImage" content="icones/ms-icon-144x144.png">   <meta name="theme-color" content="#ffffff">   <meta charset="utf-8">   <meta content="width=device-width, initial-scale=1.0" name="viewport">
    • By Vanessa Andrade
      Bom dia Pessoal!
       Gostaria da ajuda de vocês, não tenho conhecimento aprofundado em html e css e a tray não quer me dar suporte para alteração desta fonte dizendo que é padrão.....
      Enfim a fonte está minuscula mal dá para entender o que está escrito, e não acho onde altero...
      https://www.lacee.com.br/loja/extra.php?loja=495949&amp;pagina=afiliados
       

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.