Jump to content
Sign in to follow this  
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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By Arthur Ritter
      Olá a todos do fórum, sou novo aqui.
       
      Então, comecei recentemente a estudar sobre HTML e em um dos exercícios que estou fazendo é criar type=radio para cartões (Visa, Master). E pelo que estou aprendendo, o type=radio cria um botão de escolha única, não sendo permitido mais de uma escolha, mas não é o que esta acontendo. Segue abaixo o código:
       
      <html>
      <head>
      <title>Campo Senha</title>
      </head>
      <body>
      <form action="email@email.com" method="get">
      <p><font face="Calibri">Nome: <input type=text name="Nome" size="25" maxlenght="50"></p>
      <p>Nº do Cartão de credito <input type=text name="cartao" size="16"></p>
      <p>Senha: <input type=password name="senha" size="6"></p>
      <p>Selecione a bandeira do cartão de crédito:<br>
      <input type=radio name="visa" checked>Visa<br>
      <input type=radio name="master">Mastercard<br>
      </font></p>
      </form>
      </body>
      </html>
       
       
       
      Desde já agradeço a todos pela ajuda.

    • By proflupin
      Estou com a seguinte dificuldade, possuo um <a> que busca uma id numa tabela do banco de dados, conforme abaixo:
       
      <a href="self_service.php?id=<?php echo $row_produto['id_categoria_chamado']?>" class="btn btn-primary"data-toggle="collapse" data-target="#subcategoria" aria-expanded="false" aria-controls="collapseExample">Visitar</a> A consulta é realizada, pois vejo que um novo link é mostrado no rodapé da página:

       
      Esta página self_service.php mostrada acima, é minha página principal, onde tudo é trabalhado. Se por exemplo eu mudar para outro arquivo php, teste.php por exemplo, uma nova página é aberta e consigo exibir os resultados normalmente.
       
      O problema é: quero abrir este ID na mesma página, dentro de um collapse. Exemplo:
       
      Cliquei em visitar na categoria Totvs...
       
       
      Um collapse abre-se logo abaixo:

       
      O que não consigo fazer é resgatar o ID passado pelo botão VISITAR em meu collapse, se eu tenter o $_GET['id'], não vai retornar nenhum valor, pois a URL não muda quando trabalhamos com collapse.
    • By lamorim1904
      Caros, boa tarde!
       
      Primeiramente me desculpem se estou abrindo tópico repetido ou de maneira errada, procurei aqui no fórum mas talvez a forma que estou procurando ou a minha falta de conhecimento sobre a área não está me permitindo encontrar a solução.
      Não entendo quase NADA de programação e estou realizando um projeto que me cobra um pouco neste sentido, vou tentar explicar:
       
      Estou criando um hotspot inteligente onde o próprio cliente se cadastra, ele preenche um formulário e posterior a isso eu libero a conexão dele.
      O meu problema está depois que ele cria o seu cadastro, as informações vão para meu banco de dados mas nao retornam ao cliente, portanto a conexão não é liberada.
       
      Eu encontrei uma solução mas não estou conseguindo usa-la da maneira que gostaria, após usuário se cadastrar, eu direciono ele para a pagina de login e senha e caso ele digite os dados que ele acabou de preencher, a conexão é liberada. 
       
      Eu gostaria de automatizar esse processo, identificar a variavel X que eu usei para escrever no meu banco de dados e inseri-la no campo de usuario e senha e se possivel submeter a informação para o usuario nem ver essa tela de login e senha. Sabem me dizer se tem como?
       
      Para ficar mais claro, vou postar os codigos;
       
      <NESTE PONTO O CLIENTE JA PREENCHEU O CADASTRO E EU USO AS VARIAVEIS PARA ESCREVER NO MEU BANCO DE DADOS>
      <EU GOSTARIA DE USAR A VARIAVEL $MOBILE COMO USUARIO E SENHA NA PARTE DE JAVA ABAIXO>

      $sql = "INSERT INTO radcheck (UserName, Attribute, op, Value) VALUES ";
      $sql .= "('$MOBILE', 'Cleartext-Password', ':=', '$MOBILE')";
      mysqli_query($strcon,$sql) or die("Erro ao tentar cadastrar registro");

      $sql = "INSERT INTO radreply (UserName, Attribute, op, Value) VALUES ";
      $sql .= "('$MOBILE', 'Mikrotik-Rate-Limit', ':=', '512k/1024k')";
      mysqli_query($strcon,$sql) or die("Erro ao tentar cadastrar registro");
      mysqli_close($strcon);
      echo "Cliente cadastrado com sucesso!";
      ?>
      <html>
      <head><title>...</title></head>
      <body>
      $(if chap-id)
      <noscript>
      <center><b>JavaScript required. Enable JavaScript to continue.</b></center>
      </noscript>
      $(endif)
      <center>If you are not redirected in a few seconds, click 'continue' below<br>
      <form name="redirect" action="http://201.82.110.3/mkloginteste2.php" method="post">
      <input type="hidden" name="mac" value="$(mac)">
      <input type="hidden" name="ip" value="$(ip)">
      <input type="hidden" name="username" value="$MOBILE">
      <input type="hidden" name="link-login" value="$(link-login)">
      <input type="hidden" name="link-orig" value="$(link-orig)">
      <input type="hidden" name="error" value="$(error)">
      <input type="hidden" name="chap-id" value="$(chap-id)">
      <input type="hidden" name="chap-challenge" value="$(chap-challenge)">
      <input type="hidden" name="link-login-only" value="$(link-login-only)">
      <input type="hidden" name="link-orig-esc" value="$(link-orig-esc)">
      <input type="hidden" name="mac-esc" value="$(mac-esc)">
      <input type="submit" value="continue">
      </form>
      <script language="JavaScript">
      <!--
         document.redirect.submit();
      //-->
      </script></center>
      </body>
      </html>
    • By yuseirender
      Olá, sou novo aqui e preciso de ajuda, criei uma index aqui e localmente fica tudo certo, porem quando vou tentar normalmente em outro pc fica alguns itens fora de foco
       
      local:

      teste:

       
      codigo fonte:
       
×

Important Information

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