Ir para conteúdo

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

    • ILR master
      Abrir url na mesma janela
      Por ILR master
      Pessoal, pergunta bem simples. Abaixo tenho o seguinte código:
       
      <script>
      function alerta()
      {
        if (window.confirm("Você realmente quer sair?")) {
          window.open("sair.html");
      }
      }
      </script>
       
      Funciona perfeitamente, só que está abrindo em outra janela e quero que abra na mesma janela.
       
      Alguém pode me ajudar?
    • Giovanird
      Atualizar pagina PHP que esta dentro de uma div
      Por Giovanird
      Olá a todos!
      Tenho uma pagina que possui uma DIV onde coloquei uma pagina PHP.
      Uso a função setInterval para atualizar a pagina inclusa dentro da DIV.
      O problema é que ao acessar o site , a DIV só me mostra a pagina inclusa somente quando completo o primeiro minuto.
      Preciso que a pagina inclusa já inicie carregada
       
      Meu código JavaScript e a DIV com a pagina PHP
       
      <script> function atualiza(){ var url = 'direita.php'; $.get(url, function(dataReturn) { $('#direita').html(dataReturn); }); } setInterval("atualiza()",60000); </script> <div> <span id="direita"></span> </div>  
    • Thiago Duarte
      Drag and Drop para arrastar imagem
      Por Thiago Duarte
      Oi, gostaria de arrastar imagem e ao soltar formar bloco html, meu bloco de html ficaria com nome, content-1.html, content-2.html, etc
       
      Alguem pode me ajudar?
    • juliosonic
      Menu Navbar CSS Bootstrap
      Por juliosonic
      Boa noite..
      Estou desenvolvendo um site de https://www.maithunatantra.com.br/ e estou com um duvida sobre o menu de navegação da versão mobile.
      O menu que tem o dropdown "Terapeutas" e "Terapias" quando clico em cima ele expande como deve ser, mas quando clico denovo para recolher os submenus
      nao acontece nada.. segue o trecho do codigo do menu..
      <div class="collapse navbar-collapse" id="navbarsExample09">             <ul class="navbar-nav ml-auto">               <li class="nav-item  active"><a class="nav-link" href="index.html">Home</a></li>               <li class="nav-item  active"><a class="nav-link" href="about-us.html">Quem Somos</a></li>               <li class="nav-item dropdown1">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapeutas</a>                     <ul class="dropdown-menu">                         <li><a class="dropdown-item" href="terapeuta-julio-cezar.html">Julio Cezar</a></li>                         <li><a class="dropdown-item" href="terapeuta-pamela-priscila.html">Pamela Priscila</a></li>                     </ul>                                    </li>               <li class="nav-item dropdown">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapias</a>                     <ul class="dropdown-menu" aria-labelledby="dropdown01">                         <li><a class="dropdown-item" href="o-que-e-reiki.html">O que é Reiki</a></li>                         <li><a class="dropdown-item" href="beneficios-reiki.html">Benefícios do Reiki</a></li>                         <li><a class="dropdown-item" href="principios-reiki.html">Princípios do Reiki</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Reiki em Animais</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Estudos Sobre Reiki</a></li>                         <li><a class="dropdown-item" href="terapia-massagem-tantrica.html">Terapia Tântrica</a></li>                     </ul>               </li>               <li class="nav-item  active"><a class="nav-link" href="blog.html">Blog</a></li>                <li class="nav-item"><a class="nav-link" href="contato.html">Contato</a></li>             </ul>         </div>  
      Massagem Tantrica em Curitiba
      Tantra Curitiba
      Massagem Tântrica
      Tantra
      Julio Darshan

      Obrigado
      Att
      Julio Cezar
       
       
       
×

Informação importante

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

  Aceito