Ir para conteúdo

dougtop

Members
  • Total de itens

    28
  • Registro em

  • Última visita

  • Dias vencidos

    2

dougtop venceu o dia em Fevereiro 19

Teve o conteúdo mais curtido

Reputação

7 Regular

1 Seguidor

Sobre dougtop

  • Data de Nascimento 23-08-1990

Informações Pessoais

  • Sexo
    Masculino
  • Localização
    Rio de Janeiro
  1. After Content não aparece corretamente em DIV criada com JS

    Assim como o @Maujor, eu também não consegui simular o seu código, mas vou sugerir uma outra forma de fazer esse box e pode ser que isso resolva seu problema: <div class="box"></div> No css: .box{ border: 2px solid #52B3D9; width: 200px; height: 150px; position: relative; margin: 20px; } .box:before { content: ""; position: absolute; top: 10px; left: -15px; border-top: 10px solid transparent; border-right: 15px solid #52B3D9; border-bottom: 10px solid transparent; } Aí quando você tiver criando a div via js, é só cria-la com essa class ".box". Isso irá garantir que o estilo funcione como desejado! (eu espero rs) Abraços, Doug.
  2. Página distorce ao remover bordas

    Cara, tem um site muito bom mesmo que ensina css focado à criação de layout e ele fala sobre a propriedade position: http://pt-br.learnlayout.com/position.html Se você clicar na home do site, vai ver que ele tem 19 páginas explicando as técnicas de criação com css! Vale muito à pena ver todas elas! Abraço
  3. Página distorce ao remover bordas

    Se você me permite, tenho uma sugestão de melhoria para o seu cabeçalho. Ao invés de usar os elementos flutuantes, use a propriedade float mesmo para organizar o layout. Deixe a propriedade position (absolute/relative) apenas para quando não tiver outro jeito (minha opinião). Dessa forma eu mudaria no seu css: nav#menu ul { /* list-style: none; */ float: right; margin-top: 50px; /* position: absolute; */ /* top: 34px; */ /* right: 0px; */ } header#cabecalho { /* position: relative; */ border: 1px solid red; height: 137px; width: 940px; margin: 0px auto; } Abraços!
  4. Página distorce ao remover bordas

    Sim, faz sentido! Pode colocar o texto! Testei aqui e funcionou de boa com o conteúdo dentro do h1 do logo.
  5. Página distorce ao remover bordas

    Eu fiz a seguinte alteração no seu código html <!-- Antes: <h1>Polo 360 - My Kind of Business Blog</h1> <nav id="menu"> <h1>Menu Principal</h1> Depois: --> <h1 class="logo"></h1> <nav id="menu"> <h1></h1> <!-- essa tag pode até ser retirada --> Removi o conteúdo dos H1 já que você não está precisando mostra-los e criei uma class "logo" para que seu estilo do logo fique desvinculado do estilo do h1. No arquivo css também houve modificação: h1.logo { background: url(../_imagens/logo.png) no-repeat; height: 76px; width: 300px; text-indent: 9999px; overflow: hidden; white-space: nowrap; border: 1px solid red; margin-top: 35px; float: left; } h1{ /* aqui entra qualquer estilo que você queira aplica à futuros H1 */ } Pronto, agora se você tirar as bordas, nada de "estranho" acontecerá. Aproveita e coloca no topo do arquivo css a instrução de reset para evitar problemas com margins, padding e outras propriedades que o navegador estiliza por padrão. É só colar esse código: *{ margin:0; padding:0; border:0; list-style:none; box-sizing:border-box } Abraços!
  6. Criar responsivo pra um site já feito

    Pra mim é um prazer compartilhar informações e só de ter o ser feedback já me senti bonificado! Penso que outras pessoas poderão encontrar esse post e serem ajudadas também em algum outro momento! Qualquer dúvida que você tiver durante seus estudos, conte com a gente! Abraços, Doug.
  7. Criar responsivo pra um site já feito

    Sim! Na verdade, se o projeto contempla versão mobile, o ideal é que você vá desenvolvendo desde o início pensando e testando de forma responsiva. Se o seu projeto tem como foco o acesso de celulares e tablets, te convido a ir mais além, e procurar por Mobile First, um conceito muito falado ultimamente devido à importância que os dispositivos móveis ganharam em nossa vida. A ideia é que comecemos a desenvolver e planejar projetos web, desde um pequeno site até um grande sistema, primeiramente para dispositivos móveis e somente depois para desktops. Na prática você vai precisar fazer 3 coisas: 1 - Desenvolver com o Device Toobar do inspetor do navegador sempre ativo; 2 - Mudar a estrutura do seu css. Observe o exemplo que dei no meu comentário anterior e como ficaria pensando Mobile First: Obs: estou usando apenas um breakpoint abaixo para encurtar o código de exemplo. /* Estilos aplicados visando a largura abaixo de 480 pixels (Resolução de celulares) */ .content{ width: 100%; height: 300px; background-color: #4aa } input[type="text"]{ margin: 10px; width: 50px; } /* Estilos aplicados visando a larguras acima de 480 pixels (Resolução de tablet/desktop) */ @media screen and (min-width: 481px) { .content{ background-color: #473 } input[type="text"]{ width: 200px; } } Viu a diferença? Ocorre a inversão do código. Agora, quem é tratado como exceção, usando a técnica de medias queries são os meus estilos do visual tablet/desktop; 3 - Pensar e estruturar o layout de forma responsiva. Esse é o mais difícil, pois requer que seu planejamento visual já trabalhe com elementos que facilmente consigam se adaptar às trocas dos breakpoints. por exemplo: Ao invés de eu criar colunas com 400px de largura, porque eu não crio colunas com 320px e facilito meu trabalho, já que a largura mínima de um dispositivo é essa. Entende? É necessário pensar assim para diversas partes do layout e elementos. Criar esboços (mockups) pode diminuir seu retrabalho nesse quesito e ao longo do tempo você vai se acostumando a pensar de forma responsiva. Faça uma busca rápida no youtube e em blogs sobre "Responsividade", "Media Queries", "Mobile First". Existe bastante conteúdo na web e tenho certeza que não será difícil implementar depois do estudo. Boa sorte e bons estudos.
  8. menu

    Javascript não é muito minha praia, mas eu resolveria com ele mesmo. No css: div.info{ max-width:240px; /* height:0px; */ display: none; overflow: hidden; -webkit-transition: height 1s; background-color:#FFF; padding-left:10px; } /* div.tete:hover div.info{ height:auto; } */ E no javascript: window.onload = function() { const abas = document.querySelectorAll('.tete'); abas.forEach(function(el){ el.addEventListener('click', controlaAcordion, false); }); }; function controlaAcordion(e) { const conteudoAbas = document.querySelectorAll('.info'); conteudoAbas.forEach(function(el){ el.style.display = 'none'; }); this.querySelector('.info').style.display = 'block'; e.preventDefault(); } Implementa e testa para ver se funciona direitinho! Abraços
  9. Ajuda para inserir um código de hifens no css

    Mesmo assim, tenta usar essas propriedade e testa, pois acabei de ver no Can I use e está dizendo que essa propriedade é suportada em plataformas Android: "Only supported on Android & Mac platforms (and only the "auto" value) for now..." Se não funcionar tenta o Hyphenator.js e poste o resultado aqui por favor. Abraços!
  10. Criar responsivo pra um site já feito

    Não, você pode adaptar todo site já desenvolvido. É um pouco mais trabalhoso do que se você tivesse planejado desde o inicio, mas dá sim! Você precisará usar as medias queries para começar o trabalho de responsividade. Media Queries é uma técnica usada para criar um ponto de mudança de visual (breakpoint). Com os comandos das medias queries, é possível fazer que um site mude o seu visual, se tornando adaptado para diferentes resoluções. Leia sobre elas aqui https://developer.mozilla.org/pt-BR/docs/Web/Guide/CSS/CSS_Media_queries Eu costumo trabalhar com 2 breakpoints (que geram 3 visualizações diferentes): "celular" - 320px à 479px "tablet" - 480px à 959px "desktop" - 960px ao infinito Mas não existe uma regra, você precisa entender o que satisfaz o seu site! Aqui tem um exemplo prático da responsividade aplicada: https://jsfiddle.net/dougtop/ofwwfbbx/15/ Não esqueça de redimensionar seu navegador para testar! Existe, mas eu não vejo necessidade de identificar o dispositivo, a não ser que seu site tenha alguma funcionalidade ou motivo especifico para isso. Só de você criar os breakpoints com as medias queries já servirá para qualquer tipo de dispositivo e até redimensionamento da janela do navegador. Existem várias, eu uso o própria ferramenta de inspeção do navegador, nela dá para simular as resoluções e os dispositivos. Basta clicar com o botão direito do mouse, clicar em "inspecionar elemento" e clicar no botão com um ícone de celular (Toogle device toobar), isso pode mudar de um navegador para o outro, mas é tranquilo de achar. Aí abrirá algo tipo a imagem abaixo: Quando eu faço o orçamento já contemplo a responsividade, pois hoje não faz mais sentido um site que não atenda as necessidades mobile (com raras exceções). Eu costumo embutir no orçamento de 25% à 30% a mais do valor do projeto. Espero ter ajudado! Abraços
  11. Ajuda para inserir um código de hifens no css

    Bom dia Rodrigo, Pelo que entendi você precisa hifenizar automaticamente o texto via css. Tenho duas notícias para você, uma boa e uma ruim. A boa é que existe sim uma propriedade css que faça isso: -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; A notícia ruim (e até inusitada) é que ela funciona bem no FF e IE, mas no chrome ela não está funcionando (pelo menos na minha versão não) Nesse link aqui você consegue saber mais sobre a compatibilidade e até mesmo testar a propriedade abrindo essa página nos diversos navegadores: https://css-tricks.com/almanac/properties/h/hyphenate/ Como no seu caso é um app e ele deverá rodar sobre o motor webkit, creio que você terá que partir para a solução js mesmo. no link acima eles falam sobre o Hyphenator.js. Vou dar uma procurada para ver se acho alguma outra solução melhor, mas esse js deve resolver por hora. Abraços!
  12. Mouse focus

    Existem algumas formas de fazer isso, a que eu indico é você cancelar o evento submit do formulário via javascript e trabalhar com Ajax para submeter o formulário, dessa forma, sua página não dará refresh e você não perderá a aba que estiver no momento. Em compensação, terá que limpar os campos (caso seu projeto contemple isso) via javascript também. Sugiro que importe a biblioteca jQuery para facilitar sua vida. Nesse link explica como fazer o submit via Ajax: http://wbruno.com.br/ajax/enviar-formulario-para-php-sem-refresh-jquery-ajax/ Abraços!
  13. Mouse focus

    Cara eu dei uma olhada aqui e funcionou trocando os css que nem eu indiquei no post acima. Troca as suas classes panel e p_active para ficarem assim: .Painel { position: absolute; width: 974px; height: 500px; margin-top: -500px; margin-left: 106px; display: none; } .P_Active { display: block; } Dessa forma funcionou para mim. Porque o erro era uma div que estava por cima, quando eu trabalho com display none e block, isso não acontece.
  14. Mouse focus

    Não sei se foi na hora de colar o código, mas percebi que sua declaração de comentários está gerando um erro. Eu corrigi isso e voltei com os CSSs referentes à busca. E o que eu acho que irá de fato corrigir o seu problema é trocar as propriedades: visibility: hidden; opacity: 0; por: display: none; E onde está: visibility: visible; opacity: 1; trocar por: display: block; Fiz as alterações citadas acima em https://jsfiddle.net/dougtop/6u6z5t7a/22/ Mas não consegui testar porque não tenho acesso aos seus arquivos js. Testa com essas alterações que eu fiz e me fale se funcionou por favor. Abraços!
  15. Mouse focus

    A partir do 12º input você não consegue mais clicar com o mouse na caixa de texto para ela ficar com o cursor piscando? É isso? Se for é até mais estranho do que parece, talvez tenha alguma div por cima, algo impedindo o clique...teria que ver com a ferramenta de inspeção do navegador.
×

Informação importante

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

Este projeto é mantido e patrocinado pelas empresas:
Hospedado por: