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 daviassumpcao
      Estou buscando uma orientação ou referência para desenvolver algo similar ao formulário dessa página do iPhone https://www.apple.com/shop/buy-iphone/iphone-se ... quando selecionamos alguma opção, a div que contém o formulário centralizar na página e rola feito um carrossel. Estou completamente perdido com essa demanda que recebi... agradeço antecipadamente a todos que derem uma força. Abraço
    • By lucasseribeiro
      Bons dias, fórum!
       
      Procurei uma área específica para o JavaFX e não encontrei... Estou aprendendo a usar essa biblioteca, está ficando interessante, se assemelha às tecnologias web com as quais tenho muita familiaridade pois uso há anos. Mas o CSS do JavaFX é diferente daquele do consórcio W3, e não estou encontrando material para entender esse -fx-CSS... A referência CSS da Oracle (https://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html) é obscura e não contém as infos que preciso, apesar de esclarecer muitas coisas... Passa uma impressão de que eles não querem que todos saibam!
      Por exemplo: ao estilizar uma menu-bar, mudei seu background, alterei a cor da fonte dos menus, mas eles ficaram colados uns nos outros, e eu não entendi como escolher a propriedade CSS adequada do FX para controlar a distância dos menus. Pude usar um padding, mas ao executar, quando abrimos um menu, os outros ainda são empurrados pois ainda que suas inscrições estejam separadas, os botões do menu ainda estão colados. O tutoriais não abordam o CSS do FX em profundidade, focam-se nos objetivos dos projetos e suas abordagens...
      Rsrs, podia ter no W3Schools... Alguém pode me ajudar com isso???
       
      Grato desde já!
       
      Lucas Ribeiro
    • By Alberto Nascimento
      Como faço que consiga colocar parágrafos no campo tipo "text" do formulário?
          <input name="Text1" style="width: 528px; height: 223px" type="text" /></form>
      Se eu pressiono ENTER automaticamente envia o formulário
      Como então consigo digitar ao preencher o formulário da forma abaixo?
       
    • By Sapinn
      Estou com dificuldade para chamar um arquivo CSS usando a configuração de um arquivo php. O bootstrap também não surte efeito na paginas
       
      Vejam só
      Config.php
       
      <?php define('APP_NOME','Projeto GIBI'); define('URL','http://localhost/bora_php');  
       
      index.php
       
      <?php include './../app/configuracao.php'; include './../app/Libraries/Rota.php'; include './../app/Libraries/Controller.php'; ?> <!DOCTYPE html> <html lang="pt-br"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <link rel="stylesheet" href="<?=URL?>/public/css/estilos.css">     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" >         <title><?= APP_NOME?></title> </head> <body>     <?php         $rotas = new Rota();     ?>     <script src="https://code.jquery.com/jquery-3.5.1.min.js" ></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" ></script> <script src="<?=URL?>/public/css/script.js" ></script> </body> </html> estilo.css
      html{     background-color: red; }  
      Estou tentando seguir a padronização MVC(que por sinal eu tenho certa dificuldade), então não consigo achar onde estou errando
×

Important Information

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