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

    • violin101
      Javascript - Calcular Valores Monetário em Tempo Real
      Por violin101
      Caros amigos, saudações.

      Estou com uma dúvida, referente cálculo de valores em tempo real.

      Tenho uma rotina, que faz o cálculo, o problema é mostrar o resultado.

      Quero mostrar o RESULTADO assim: 0,00  ou  0.00

      Abaixo posto o código.
      jQuery('input').on('keyup',function(){ //Remover ponto e trocar a virgula por ponto var m = document.getElementById("pgRest").value; while (m.indexOf(".") >= 0) { m = m.replace(".", ""); } m = m.replace(",","."); //Remover ponto e trocar a virgula por ponto var j = document.getElementById("pgDsct").value; while (j.indexOf(".") >= 0) { j = j.replace(".", ""); } j = j.replace(",","."); m = parseFloat(jQuery('#pgRest').val() != '' ? jQuery('#pgRest').val() : 0); j = parseFloat(jQuery('#pgDsct').val() != '' ? jQuery('#pgDsct').val() : 0); //Mostra o Resultado em Tempo Real jQuery('#pgTroco').val(m - j); <<=== aqui estou errando })  
       
      Grato,
       
      Cesar
       
       
    • violin101
      [Resolvido] JavaScript - Exibir logo dentro da Tabela html
      Por violin101
      Caro amigos, saudações.

      Tenho uma tabela escrita em JS que funciona corretamente.
       
      Minha dúvida:
      - como devo fazer para quando a Tabela HTML estiver vazia, exibir o LOGO da Empresa ?

      Abaixo posto o script:
      document.addEventListener( 'keydown', evt => { if (!evt.ctrlKey || evt.key !== 'i' ) return;// Não é Ctrl+A, portanto interrompemos o script evt.preventDefault(); //Chama a Função Calcular Qtde X Valor Venda calcvda(); var idProdutos = document.getElementById("idProdutos").value; var descricao = document.getElementById("descricao").value; var prd_unid = document.getElementById("prd_unid").value; var estoque_atual = document.getElementById("estoque_atual").value; var qtde = document.getElementById("qtde").value; var vlrunit = document.getElementById("vlrunit").value; var vlrtotals = document.getElementById("vlrtotal").value; var vlrtotal = vlrtotals.toLocaleString('pt-br', {minimumFractionDigits: 2}); if(validarConsumo(estoque_atual)){ //Chama a Modal com Alerta. $("#modal_qtdemaior").modal(); } else { if(qtde == "" || vlrunit == "" || vlrtotal == ""){ //Chama a Modal com Alerta. $("#modal_quantidade").modal(); } else { //Monta a Tabela com os Itens html = "<tr style='font-size:13px;'>"; html += "<td width='10%' height='10' style='text-align:center;'>"+ "<input type='hidden' name='id_prds[]' value='"+idProdutos+"'>"+idProdutos+"</td>"; html += "<td width='47%' height='10'>"+ "<input type='hidden' name='descricao[]' value='"+descricao+"'>"+descricao+ "<input type='hidden' name='esp[]' value='"+prd_unid+"'> - ESP:"+prd_unid+ "<input type='hidden' name='estoq[]' value='"+estoque_atual+"'></td>"; html += "<td width='10%' height='10' style='text-align:center;'>"+ "<input type='hidden' name='qtde[]' value='"+qtde+"'>"+qtde+"</td>"; html += "<td width='12%' height='10' style='text-align:right;'>"+ "<input type='hidden' name='vlrunit[]' value='"+vlrunit+"'>"+vlrunit+"</td>"; html += "<td width='14%' height='10' style='text-align:right;'>"+ "<input type='hidden' name='vlrtotal[]' value='"+vlrtotal+"'>"+vlrtotal+"</td>"; html += "<td width='12%' height='10' style='text-align:center;'>"+ "<button type='button' class='btn btn-uvas btn-remove-produto' style='margin-right:1%; padding:1px 3px; font-size:12px;' title='Remover Item da Lista'>"+ "<span class='fa fa-minus' style='font-size:12px;'></span></button></td>"; html += "</tr>"; $("#tbventas tbody").append(html); //Função para Somar os Itens do Lançamento somar(); $("#idProdutos").val(null); $("#descricao").val(null); $("#prd_unid").val(null); $("#qtde").val(null); $("#vlrunit").val(null); $("#vlrtotal").val(null); $("#idProdutos").focus(); //Se INCLUIR NOVO produto - Limpa a Forma de Pagamento $("#pgSoma").val(null); $("#pgRest").val(null); $("#pgDsct").val(null); $("#pgTroco").val(null); $("#tbpagar tbody").empty(); }//Fim do IF-qtde }//Fim do Validar Consumo });//Fim da Função btn-agregar  
      Grato,

      Cesar
       
    • 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
×

Informação importante

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

  Aceito