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 Carlos Web Soluções Web
      Olá pessoal !!
      Estou desenvolvendo um menu em CSS, e eu gostaria de colocá-lo no CSS Responsive:
       
      @media screen and (max-width: 800px) {
      }
       
      O link do menu de como está atual se encontra em:
      MENU Link

      e o que eu desejo alcançar é:
      MENU RESPONSIVE

      Por favor me ajudem.....abraço !!
    • By lordstarlight
      Olá galera,
       
      Tenho um código que abre uma janela modal clicando num botão .
      Como faço para adaptar esse código para abrir usando um <input type="image" ... ?
       
      Abraço !!!
      <script type="text/javascript"> $('#myModal').on('shown.bs.modal', function () { $('#myInput').trigger('focus') }) </script> <!-- Modal --> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Janela Modal</h4> </div> <div class="modal-body"> <p>Texto<br> Mais Texto<br> </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>  
    • By Ewfc2005
      Eu sou um programador amador, e ainda estou aprendendo programação, comecei um site, mas esqueci de faze-lo para ser responsivo, agora preciso de ajuda
      pois nao consigo deixa-lo responsivo
       

      Codigo HTML
       
      Codigo CSS

       
       
      Ele está mal feito, ainda tenho que arrumar muita coisa, se alguem conseguir me ajudar e dizer como ele pode ficar responsivo
      eu Agradeço.
    • By Baby01
      Prezados, bom dia.
       
      Gostaria de uma ajudar, sobre um script que estou criando. 
       
      Não estou conseguindo fazer a comparação entre data e horário, tipo assim : eu quero que quando o usuário faça um agendamento ex: data 15/07/2019 horário: 10h00 ás 12h00, não pode ter outro agendamento nessa data 15/07/2019 e nem entre esse horário 10h00 às 12h00.  Mais pode ter outro agendamento nessa data 15/07/2019, mais não no mesmo horário.
      Abaixo está meu script : 
       
       
       
      <!DOCTYPE html>
      <html>
      <head>
          <title>GESTÃO DE CASOS</title>
          <meta lang="pt-br" charset="utf-8">
          <link rel="icon" type="imagem/png" href="../gestao/img/logo.png" />
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <script type="text/javascript" src="../bootstrap/sweetalert/dist/sweetalert.js"></script>
      </head>
      <body>
      <?php
      if(!isset($_SESSION)) 
          { 
              session_start(); 
          } 
              date_default_timezone_set('America/Sao_Paulo');
              header('Content-type: text/html; charset=utf-8');
              
              if (isset($_POST["submit"])) {
              $hr_agendamento = ('H:i:s');
              $now = date('Y-m-d H:i:s');
              $planoID = $_POST["planoID"];        
              $pacienteID = $_POST["pacienteID"];
              $unidadeID = $_POST["unidadeID"];
              $dt_programada = $_POST["dt_programada"];
              $hr_inicial = $_POST["hr_inicial"];
              $hr_final = $_POST["hr_final"];
              $atendimentoID = $_POST["atendimentoID"];
              }
              
              $unidade = $_SESSION['unidade_referencia'];
              
              include ("../administracao/conn.php");
              
              $agenda = "SELECT a.hr_inicial, a.hr_final, DATE_FORMAT(  `dt_programada` ,  '%d/%m/%Y' ) AS  `data_formatada` , b.unidadeID, b.unidade_referencia
                          FROM tb_agenda a
                          INNER JOIN tb_unidade b ON a.unidadeID = b.unidadeID
                          WHERE b.unidade_referencia =  $unidade";
                  
                 /* nessa parte que não estou conseguindo fazer a comparação , consigo pegar a variável que o usuário digita, porém não estou conseguindo trazer do banco de dados*/        
              IF ( (["dt_programada"] == $_POST["dt_programada"]) && (["hr_inicial"] == $_POST["hr_inicial"]) && (["hr_final"] == $_POST["hr_final"])) {
                  echo "<script>    swal('ATENÇÃO','DATA E HORÁRIO JÁ CADASTRADO', 'warning').then(function() {window.location = '../plano/escolha_paciente_plano.php';});</script>";    
                  
              }
                  ELSE
                  {
                  
              $sql = "INSERT INTO tb_agenda (planoID, pacienteID, unidadeID, dt_programada, hr_inicial, hr_final, atendimentoID) values ('$planoID','$pacienteID', '$unidadeID', '$dt_programada', '$hr_inicial', '$hr_final', '$atendimentoID')";
              
              if (mysqli_query($connect, $sql)) 
              {
                  echo "<script>swal('BOM TRABALHO!', 'AGENDA CADASTRADA COM SUCESSO!', 'success').then(function() {window.location = '../plano/escolha_paciente_plano.php';});</script>";
                  $x = 'Agenda criada com sucesso';
                  include "../administracao/agenda_log.php";
              } 
              else 
              {
                  echo "<script>swal('INFELIZMENTE', 'NÃO FOI POSSÍVEL CADASTRAR A AGENDA', 'warning').then(function() {window.location = '../plano/escolha_paciente_plano.php';});</script>" . $sql . "<br>" . mysqli_error($connect);
                  $x = 'Não foi possível criar a agenda';
                  include "../administracao/agenda_log.php";
                  
                  }
              }
              
      ?>
      </body>
      </html>
×

Important Information

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