Jump to content
Mupthon

Espaco branco entre as divs

Recommended Posts

Olá, boa tarde a todos.
Queria uma ajuda estou desenvolvendo um site para uma barbearia (meu tcc) e estou enfrentando um problema, minhas divs tem espaços brancos entre elas, aqui o codigo:

HTML

Spoiler

 

<!doctype html>

<html>

<head>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

        <!--jquery da google para rodar os scripts-->

        <link rel="stylesheet" type="text/css" href="css/estilo.css">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>LM</title>

    

                

</head>

 

<body>

    <!--criando o Menu bar-->

<div class="wrapper">

<nav>

    <div class="logo"><font face="Lumberjack"><center>L&M Barbearia</center> </font></div>

    <img src="ur" alt="">

    <ul>

        <li><a href="#home">Home</a></li>

        <li><a href="#">Produtos</a></li>

        <li><a href="#servicos">Servicos</a></li>

        <li><a href="#historia">Historia</a></li>

        <li><a href="#formulario">Fale Conosco</a></li>

    </ul>

    </nav>

    <div id="home"></div>

    <section class="sec1"></section>

    <section class="content"><p>Lorem Ipsum é simplesmente uma simulação de texto da indústria

        tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor

        desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de

        tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a

        editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou

        na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum,

        e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica

        como Aldus PageMaker.Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e

        de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma

        bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não

        só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado.

        Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente

        quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.</p>

    </section>

    </div>  

    <script type="text/javascript">

        //menu preto quando rola o site

        $(window).on("scroll", function() {

            if($(window).scrollTop()) {

                $('nav').addClass('black');

            }

        

            else {

                $('nav').removeClass('black');

            }

        })

        

        //script para rolagem suave com ancora em div

        var $doc = $('html, body');

        $('a').click(function() {

        $doc.animate({

         scrollTop: $( $.attr(this, 'href') ).offset().top

        }, 500);

        return false;

        });

        </script>

        

    

     <div id="servicos">

        <p>

            <img src="teste.png" width="1339" height="500">

        </p>

        </div>

        <!--criacao do serviços-->


 

        <!--criando o formulario-->

        <div id="historia"><p>

            <img src="historialm.png" width="1339" height="500">

        </p></div>

        <div id="formulario">

            <form name="form" action="" method="POST" >

                 <h2><font face="Lumberjack">Fale Conosco</font></h2>

                 <p class="nome">

                     <input type="text" name="nome" placeholder="Nome" required="required">

                 </p>

                 <p class="email">

                     <input type="email" name="email" placeholder="Email" required="required">

 

                 </p>

 

                 <p class="assunto">

                     <input type="assunto" name="assunto" placeholder="Assunto" required="required">

 

                 </p>

                 <p class="mensagem">

                    <textarea name"mensagem" placeholder="Mensagem"> </textarea>

 

                 </p>

                 <p class="enviar">

                     <input type="submit" name="enviar" value="Enviar">

                 </p>

            </form>

            

        </div>

        <div id="mapa">

            <p>

                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3675.878763330844!2d-43.467833285478896!3d-22.88093654270053!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9bdfeb5d9d57ad%3A0xf168e26d9efa7959!2sL+%26+M+Barbearia!5e0!3m2!1spt-BR!2sbr!4v1533766022158"

                    width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

            </p>

        </div>

<!--termina aqui-->

        

        

        

        

    <!--div id="box1">

    <center><font color="#FFFFFF"><h3>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.</h3></font></center>

</div>

<div id="box2">

    <h1>Julio</h1>

</div-->

 

</body>

</html>

 

 

CSS:

 

Spoiler

 

body{

    margin: 0;

padding: 0;

        

    

    

        }

        

        nav {

            position:fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100px;

            padding: 10px 100px;

            box-sizing: border-box;

            transition: .3s;

                

        }

        

        nav.black {

            background: rgba(16, 16, 16);

            height: 100px;

            padding: 10px 100px;

            

            

        }

        nav .logo {

            padding: 0px 0px;

            height: 100px;

            width: 100px;

            float: left;

            font-size: 24px;

            transition: .3s;

            

    

        }

        

        nav.black .logo {

            color: #fff;

        }

        

        nav ul {

            list-style: none;

            float: right;

            margin: 0;

            padding: 0;

            display: flex;

            

        }

        nav ul li {

            list-style: none;

        }

        

        nav ul li a {

            line-height: 80px;

            color:#151515;

            padding: 12px 30px;

            text-decoration: none;

            text-transform: uppercase ;

            transition: .3s;

            

        }

        nav.black ul li a{

            color: #fff;

            

        }

        

        nav ul li a:focus {

            outline: none;

            

            

        }

        nav ul li a.active {

            background: #E2472F;

            color: #fff;

            border-radius: 6px;

            

        }

        

        section.sec1 {

            width: 100%;

            height: 100vh;

            background: url(intro_site.png) ;

            background-size: cover;

            background-position: center;

            

        }

        .content {

            margin-top: 80px;

        }

        .content p{

            widows: 900px;

            margin:30px auto;

            text-align: justify;

            font-size: 20px;

            line-height: 30px;

        }

 

        

    

        

        

    #box1{

        height:100vh;

            width: 100%;

        background-image: url(testeparallax.jpg);

        background-size: cover;

        background-attachment: fixed;

    display: table;

    }

    #box2{

        height:100vh;

            width: 100%;

        background-image: url(testeparallax1.jpg);

        background-size: cover;

        background-attachment: fixed;

        display: table;

    }

    h1{

        font-family: Consolas black;

        font-size: 50px;

        color:white;

        margin: 0px;

        text-align: center;

    }

    #servicos {

position:justify;

left:12px;

top:13px;

width:100%;

height:20px;

z-index:1;

     background:#ede6dc;

color: white;

     display: table ;

 

}

 

#teste {

 

position:justify;

left:12px;

top:13px;

width:100%;

height:20px;

z-index:1;

background:#a9a9a9;

color: white;

     display: table ;

 

}

 

#formulario {

 

    background:#9d8a7b ;

    

}

form{

    font-size: 16px ;

    background: #9d8a7b ;

    

    margin: 0 auto;

    padding: 0 10px 10px 10px;

    

    

}

h2 {

    color: #333;

}

 

input, textarea {

width: 470px ;

padding: 10px ;


 

}

.enviar input {

background: #212121 ;

height: 40px;

width: 150px;

font-weight: bold ;

border-radius: 5px;

border: 1px solid;

color: #fff;

cursor: pointer;


 

}

 

.enviar input:hover {

    background: #595353;

}

 

textarea{

    width: 470px;

    height: 120px;

    line-height: 20px;

}

 

#mapa {

    

background: #9d8a7b;

}

 

 

 

Aqui estao fotos do meu site e os espacos.
https://imgur.com/a/YU5xJK9
https://imgur.com/a/gUnamUZ
https://imgur.com/a/16brr75
https://imgur.com/a/KDgWCbf

Share this post


Link to post
Share on other sites
Em 22/09/2018 at 18:56, Augusto A.S disse:

Amigo, sugiro que tente zerar o atributo <img> border no CSS, assim:

 

img{

margin: 0px;

border: 0px;

padding: 0px;

} 

Nao funcionou :persevere:

Share this post


Link to post
Share on other sites

Tente fazer o seguinte: abra a página via localhost e dá um F12. Ai você dá um Ctrl + shift + C e clica em cima do bloco que está com essa borda, e observe o quadro na parte 'styles'. Veja se tem alguma propriedade que esteja com valor, como border, padding, etc.. e tente zerar eles. Pode ser alguma div dentro de outra...

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

  • Similar Content

    • By violin101
      Caros amigos, saudações...
       
      Estou com uma pequena dúvida para apresentar ao usuário uma Mensagem de ERRO após consulta de CEP.
       
      Quando o usuário digita um CEP válido o sistema demonstra em uma TABELA os valores respectivos de FRETE de acordo com os CEP.
      -----[ até aqui tudo bem ]-----
       
      Meu problema é quando o usuário digita um CEP não válido. Nesta parte gostaria de Limpar a Tabela e mostrar uma TBODY de mensagem.
       
      <div class="col-md-12" id="divCity" style="display:none; margin-top:5px; margin-left:-23px;"> <div class="col-md-12"> <div class="input-group"> <label for="cidadeUf" class="lblCitys">Cidade:</label> <input type="text" name="cidadeUf" id="cidadeUf" class="form-control" style="margin-top:-17px; background:#ffffff; border: 0 solid #ffffff;" disabled /> </div> </div> <br/> <div class="col-md-12" style="margin-top:-10px; margin-left:10px;"> <div class="table-responsive"> <table class="table tableList" id="tborden"> <thead> <tr> <th colspan="3" style="text-align:left;">Prazo de Entrega para:</th> </tr> </thead> <tbody> <tr class="message"> <td colspan="3" class="text-center">O CEP informado não foi encontrado.</td> </tr> </tbody> </table> </div> </div> <div class="col-md-12" style="margin-top:-10px; margin-left:10px;"> <span class="infprz"> <i class='fa fa-caret-right'></i>&nbsp; Os prazos de Entrega e para Retirar na Loja, iniciam-se no 1º dia útil após a data da confirmação do pagamento. </span> </div> </div>  
       
      O JavaScript está assim:
       
      //Função para Buscar Cidade e Estado Via CEPs. $(function(){ $("#btn_consulta").click(function(){ var cep = $('#cepOrg').val(); if (cep == '') { alert('Informe o CEP antes de continuar'); document.getElementById("divCity").style.display = "none"; $('#cepOrg').focus(); return false; } //Muda o Status do Button $('#btn_consulta').html('Aguarde...'); $.ajax({ url: "<?php echo base_url();?>site/produtos/consulta", type: "POST", dataType:"json", data:{cep: cep}, success:function(data){ if (data.hasOwnProperty('erro')) { /* * Caso o usuário digita um CEP não válido o sistema apresenta um ALERT. * nessa parte gostaria de mostrar a LINHA criada na Tabela anteriormente */ alert('CEP não encontrado'); document.getElementById("divCity").style.display = "none"; $('#cepOrg').val(''); $('#cidadeUf').val(''); $('#cepOrg').focus(); $('#btn_consulta').html('Consultar'); return false; } else { //Exibe os Dados Recebidos $('#cidadeUf').val(data.localidade+'/'+data.uf); //Chama a Função para Exibir a DIV oculta statusDIV(); //Chama a Função Monta Tabela, passando a Variável de Busca montaTable(cep); //Muda o Status do Button $('#btn_consulta').html('Consultar'); } } });//Fim - ajax CEP });//Fim - function button });//Fim - 1º.function function montaTable(cep){ $.ajax({ url: "<?php echo base_url();?>site/produtos/getByCep", type: "POST", dataType:"json", data:{ cep: cep}, success:function(data){ //Remove Mensagem da Tabela $("#tborden tbody tr.message").remove(); var lin = ""; for (var i = 0; i < data.length; i++) { lin += "<tr>"; lin += "<td width='30%' style='text-align:left; font-size:16px;'>" + data[i].cepRegiao + "</td>"; lin += "<td width='21%' style='text-align:left; font-size:16px;'>" + data[i].frtEntreg + "</td>"; if (data[i].vlrFrete != null && data[i].vlrFrete != 0) { lin += "<td width='20%' style='text-align:right; font-size:16px; font-weight:bold; color:#19198F;'>" + mskVlr(data[i].vlrFrete) + "</td>"; } else { lin += "<td width='20%' style='text-align:right; font-size:16px; font-weight:bold; color:#137A13;'>Frete Grátis</td>"; } lin += "</tr>"; } //Atualiza a Tabela $("#tborden tbody").empty(); //Adiciona os Itens a Tabela $("#tborden tbody").append(lin); } });//Fim - ajax Valor Frete }  
       
      Como consigo executar essa mensagem ?
       
      Grato,
       
      Cesar
    • By betezek
      Prezados,
      tenho uma div abaixo:
      eu gostaria de centralizar o nome dentro da imagem. o problema é que ela não centraliza, começa left e eu já tentei todos os comandos.
      eu preciso que ela já centralize no espaço!!!
      VOU USAR UM INPUT PARA DIGITAR O TEXTO!
       
       
       
      <BODY>
      <style>

      .divLeft {
          width: 140;
          height: 100px;
          float: center;
          position: relative;
      }
      #spaceText {
          padding-right: 110px;
      }
      #photo {
          width: 320px;
          height: 300px;
      }
      .textDiv{
         position: absolute;
         
         text-align: center;
      font-family:Arial;
        color: #000000;
        font-size: 9px;
        font-weight: NORMAL;
        left: 22px;
        top: 250px;
         
        
      }
      </style>
      </head>
      <body>

      <div class="divLeft">
          <img id="photo" src="imagens/jumba.png">
          <div class="textDiv">
              <h2><i id="spaceText" class="fas fa-search"></i>CENTRALIZAR</h2>
          </div>
      </div>
      </BODY>
    • By Felper
      É possível fazer uma imagem .png mover-se por uma tela de Canvas (esquerda, direita, cima, baixo)? Poderiam mostrar um exemplo caso seja possível. É que estou tentando fazer um jogo, onde o jogador se move em um labirinto. O jogador seria uma imagem. Agradeço desde já!
×

Important Information

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