Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Mupthon

Espaco branco entre as divs

Por , em Desenvolvimento frontend

Recommended Posts

Mupthon    0

Mupthon
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Mupthon    0

Mupthon
Postado
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:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Augusto A.S    0

Augusto A.S
Postado

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...

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend

  • Conteúdo Similar

    • Rafael_Ferreira
      Não consigo carregar imagem do captcha no meu formulário
      Por Rafael_Ferreira
      Não consigo carregar a imagem do captcha do meu formulário. Foi testado com o xampp e easyphp. Também não carregou a imagem de outros captcha. 
       
       
    • luiz monteiro
      Evitar que o navegador limpe os campos de input quando a guia perde o foco
      Por luiz monteiro
      Olá.
      Estou atualizando meu conhecimento com Front-End e me deparei com o seguinte problema.
      Criei um sistema para fazer o upload de imagens e alguns campos text.
      Algo bem simples para depois começar a estudar javascript para mostrar a miniatura....
      Mas quando saio do navegador Chrome ou da aba por mais de 3 minutos, ao retornar o navegador as vezes atualiza ou nem chega atualizar mas limpa os campos.
      Estou usando um Smart Motorola com Android, mas um amigo testou no iPhone e acontece a mesma coisa.
      Gostaria de saber se há como usar javascript para evitar isso?
      Agradeço desde já.

      <!DOCTYPE html>
      <html>
      <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <title>Uploader</title>
      </head>
      <body>
          <form action="?" method="post" enctype="multipart/form-data">
              <br><br>
              <div>selecione a imagem 1</div>
              <input type="file" name="foto1" accept="image/*">
              <br><br>
              <input type="text" name="nome_imagem1">
              
              <br><br>
              <input type="file" name="foto2" accept="image/*">
              <br><br>
              <input type="text" name="nome_imagem2">
              
              <br><br>

              <input type="file" name="foto3" accept="image/*">
              <br><br>
              <input type="text" name="nome_imagem3">
              
              <br><br>
              <input type="submit" value="Enviar">
              <br><br>
          </form>
      <?php
      if ($_SERVER['REQUEST_METHOD'] == 'POST')
      {
          vardump ($_FILES);
      }
      ?>
      </body>
      </html>
       
       
       
    • daemon
      gerar sitemap.xml
      Por daemon
      Tenho um site com mais de 50.000 notícias, queria gerar um sitemap.xml.

      Existe algo gratuito ? O site foi desenvolvido do zero.
    • daemon
      gerar sitemap.xml
      Por daemon
      Tenho um site com mais de 50.000 notícias, queria gerar um sitemap.xml.

      Existe algo gratuito ? O site foi desenvolvido do zero.
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito