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

    • violin101
      Javascript - Passar Parâmetros para uma Função.
      Por violin101
      Caros amigos, saudações.

      Estou com uma pequena dúvida se é possível ser realizado.

      Preciso passar 2 IDs para o Sistema executar a função, estou utilizando desta forma e gostaria de saber como faço via JS para passar os parâmetro que preciso.

      Observação:
      Dentro da TABELA utilizei 2 Forms, para passar os IDS que preciso, funcionou conforme código abaixo.
      <div class="card-body"> <table id="tab_clie" class="table table-bordered table-hover"> <thead> <tr> <th style="text-align:center; width:10%;">Pedido Nº</th> <th style="text-align:center; width:10%;">Data Pedido</th> <th style="text-align:center; width:32%;">Fornecedor</th> <th style="text-align:center; width:10%;">Status</th> <th style="text-align:center; width:5%;">Ação</th> </tr> </thead> <tbody> <?php foreach ($results as $r) { $dta_ped = date(('d/m/Y'), strtotime($r->dataPedido)); switch ($r->pd_status) { case '1': $status = '&nbsp;&nbsp;Aberto&nbsp;&nbsp;'; $txt = '#FFFFFF'; //Cor: Branco $cor = '#000000'; //Cor: Preta break; case '2': $status = 'Atendido Total'; $txt = '#FFFFFF'; //Cor: Branco $cor = '#086108'; //Cor: Verde break; case '3': $status = 'Atendido Parcial'; $txt = '#000000'; //Cor: Branco $cor = '#FEA118'; //Cor: Amarelo break; default: $status = 'Cancelado'; $txt = '#FFFFFF'; //Cor: Branco $cor = '#D20101'; //Cor: Vermelho break; } echo '<tr>'; echo '<td width="10%" height="10" style="text-align:center;">'.$r->pd_numero.'</td>'; echo '<td width="10%" height="10" style="text-align:center;">'.$dta_ped.'</td>'; echo '<td width="32%" height="10" style="text-align:left;">'.$r->nome.'</td>'; echo '<td width="10%" height="10" style="text-align:left;"><span class="badge" style="color:'.$txt.'; background-color:'.$cor.'; border-color:'.$cor.'">'.$status.'</span></td>'; echo '<td width="5%" style="text-align:center;">'; ?> <div class="row"> <?php if($this->permission->checkPermission($this->session->userdata('permissao'), 'vPedido')){ ?> <form action="<?= base_url() ?>compras/pedidos/visualizar" method="POST" > <input type="hidden" name="idPedido" value="<?php echo $r->idPedidos; ?>"> <input type="hidden" name="nrPedido" value="<?php echo $r->pd_numero; ?>"> <button class="btn btn-warning" title="Visualizar" style="margin-left:50%; padding: 1px 3px;"><i class="fa fa-search icon-white"></i></button> </form> <?php } if($this->permission->checkPermission($this->session->userdata('permissao'), 'ePedido')){ ?> <form action="<?= base_url() ?>compras/pedidos/editar" method="POST" > <input type="hidden" name="idPedido" value="<?php echo $r->idPedidos; ?>"> <input type="hidden" name="nrPedido" value="<?php echo $r->pd_numero; ?>"> <button class="btn btn-primary" title="Editar" style="margin-left:50%; padding: 1px 3px;"><i class="fa fa-edit icon-white"></i></button> </form> <?php } ?> </div> <?php echo '</td>'; echo '</tr>'; } ?> </tbody> </table> </div>
      Grato,

      Cesar.
    • belann
      editor quill configuração
      Por belann
      Olá!
       
      Estou usando o editor quill em uma página html, sem fazer a instalação com npm, mas usando as api´s via internet com http, no entanto não consigo fazer a tecla enter funcionar para mudança de linha, tentei essa configuração abaixo, mas não funcionou.
       
      modules: {       syntax: true,       toolbar: '#toolbar-container',       keyboard: {         bindings: {           enter: {             key: 13,             handler: function(range, context) {                       quill.formatLine(range.index, range.length, { 'align': '' });             }           }  
       
    • violin101
      JAVASCRIPT - Comparar Data Digitada com Data Atual
      Por violin101
      Caros amigos, saudações.
       
      Gostaria de poder tirar uma dúvida com os amigos.
       
      Como faço uma função para Comparar a Data Digitada pelo o Usuário com a Data Atual ?

      Data Digitada:  01/09/2024
       
      Exemplo:
      25/09/2024 é menor que DATA Atual  ====> mensagem: informe uma data válida.
      25/09/2024 é igual DATA Atual ===> o sistema libera os INPUT's.
       
      Como faço uma comparação com a Data Atual, para não Deixar Gravar Data retroativa a data Atual.
       
      Grato,
       
      Cesar
    • Rafael Castelhano
      Adiciona entrada em dicionario por variavel
      Por Rafael Castelhano
      Olá, quero preencher um dict dinamicamente onde a chave é uma string multidimencional no dict, ex:
      var dict = {} var path = 'a.b.c' dict[path] = 55 // isso faz dict ficar desta forma {'a.b.c': 55} // mais quero que fique assim {a: {b: {c: 55}}} Como consigo alterar desta forma? 
    • violin101
      Javascript - Arredondar Valor para cima
      Por violin101
      Caros amigos, saudações.
       
      Estou com um problema de cálculo que não estou conseguindo resolver.
       
      Tenho uma rotina em Javascript que faz o seguinte cálculo qtde x vrUnit = total.
       
      qtde   x  vrUnit    =    total
      1,23   x  1,00       =    1,23    << até aqui tudo bem.
       
      o problema seria fazer o arredondamento para cima para impedir de fazer este cálculo:
      0,01 x 0,01 = 0,0001
       
      para digitar o valor estou utilizando esta função:
       
      /*Esta função quando o usuário digitar o valor aparece * 1,23 */ function formataDigitacao(i) { //Adiciona os dados para a másrcara var decimais = 2; var separador_milhar = '.'; var separador_decimal = ','; var decimais_ele = Math.pow(10, decimais); var thousand_separator = '$1'+separador_milhar; var v = i.value.replace(/\D/g,''); v = (v/decimais_ele).toFixed(decimais) + ''; var splits = v.split("."); var p_parte = splits[0].toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, thousand_separator); (typeof splits[1] === "undefined") ? i.value = p_parte : i.value = p_parte+separador_decimal+splits[1]; } /*Esta função faz a multiplicação entre Valor Unitário X Quantidade *faz a multiplicação correta */ function calcProd(){ //Obter valor digitado do produto var prod_qtde = document.getElementById("qtde").value; //Remover ponto e trocar a virgula por ponto while (prod_qtde.indexOf(".") >= 0) { prod_qtde = prod_qtde.replace(".", ""); } prod_qtde = prod_qtde.replace(",","."); //Obter valor digitado do produto var valor_unit = document.getElementById("vlrunit").value; //Remover ponto e trocar a virgula por ponto while (valor_unit.indexOf(".") >= 0) { valor_unit = valor_unit.replace(".", ""); } valor_unit = valor_unit.replace(",","."); //Calcula o Valor do Desconto if (valor_unit > 0 && prod_qtde > 0) { calc_total_produto = (parseFloat(valor_unit) * parseFloat(prod_qtde)); var numero = calc_total_produto.toFixed(2).split('.'); //<<== aqui faço o arredondamento das casas decimais de 1,234 p/ 1,23 numero[0] = numero[0].split(/(?=(?:...)*$)/).join('.'); document.getElementById("vlrtotal").value = numero.join(','); } else { if (valor_unit > 0) { document.getElementById("vlrtotal").value = document.getElementById("vlrunit").value; } else { document.getElementById("vlrtotal").value = "0,00"; } } } Grato,
       
      Cesar
×

Informação importante

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

  Aceito