Jump to content

Search the Community

Showing results for tags 'css'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Q&A Desenvolvimento
    • Perguntas e respostas rápidas
  • Desenvolvimento e Banco de Dados
    • HTML e CSS
    • Java
    • Javascript
    • .NET
    • PHP
    • Python
    • Ruby
    • Mobile
    • Ambientes de Desenvolvimento
    • Arquitetura e Métodos Ágeis
    • Banco de Dados
    • DevOps
    • Desenvolvimento de Games
    • E-Commerce e Pagamentos Online
    • SEO e Otimizações
    • WordPress
    • Algoritmos & Outras Tecnologias
  • Design e Produto
    • Fotografia
    • Photoshop
    • Design de interfaces e UX
    • Edição/Produção de Vídeos
    • Marketing Online
    • Desenho, Ilustração e 3D
  • Entretenimento e uso pessoal
    • Geral
    • Segurança & Malwares
    • Gadgets e wearable
    • Softwares e Apps
    • Entretenimento

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Google+


Hangouts


Skype


Twitter


deviantART


Github


Flickr


LinkedIn


Pinterest


Facebook


Site Pessoal


Localização


Interesses

Found 1334 results

  1. Galera neste site aqui tem umas setas em um accordion, e eu gostaria de saber como faço para elas se movimentarem a cada clique. se alguem conseguir algum link com tutorial ou me passar algum script eu sou imensamente agradecido. estou usando o accordion padrão do bootstrap 4+ Clique neste: Exemplo
  2. teusinhorossi

    Ajuda com seta de rolamento da página

    Fala galera boa noite! Sou iniciante no HTML e CSS e tô aprendendo sozinho. Acontece que, to criando um site meu pra aprender e ver se consigo usar ele como um "curriculo". O problema é que agora que estou modelando ele para celular, a maldita barra do eixo y da tela não desaparece. Sei que talvez seja um erro bobo, mas estou há umas 3h e não consigo achar meu problema. Na primeira screenshot a tela, e na segunda o resto cinza que fica. O body do site está na cor cinza, mas quando começo a editar as coisas dentro do @media e tento mudar o tamanho dele por lá ou qualquer outra coisa não estou conseguindo... Desde já abraços e boa notie!
  3. Tommoraes

    Gerador de texto

    Pessoal preciso de ajudar! Queria implementar no meu site um gerador de texto, tipo ao clicar no botão "gerar" mostraria texto aleatórios. Como faço isso no HTML? Fiz uma imagem de exemplo.
  4. Mauricio Molina

    Chamar CSS e JS Menu e Tabela

    Ola, Podem me dar uma força, estou elaborando um dashord onde terá algumas funções, uma delas é chamar uma listagem de usuário no banco. Preciso chamar o css e js para o menu e a tabela. Sei que é fácil mas sinceramente me perdi, alguém pode dar uma força para chamar os arquivos. Seguem as imagem de como fica a página MENU: <link href="css/bootstrap.css" rel="stylesheet"> <link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet"> <link href="css/theme.css" rel="stylesheet"> <script src="js/ie-emulation-modes-warning.js"></script> Tabelas <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> Como chamo tudo junto sem um interferir no outro? No aguardo... Obrigado!
  5. Edson.Santos

    Projeto fotografia

    Olá amigos,me chamo Edson tenho 54 anos sou deficiente e estudante de desenvolvimento front-end e estou precisando de ajuda com CSS, no meu código tem uma div com duas divs internas cada uma contendo imagem e texto, as divs internas tem que ficar centralizadas na horizontal o que já está mas é ai que está o problema quando visualizado no celular as divs nao aparecem em coluna ou seja uma acima da outra em uma unica coluna se alguém puder me ajudar por favor desde já agradeço, abaixo tem o html e o css . ==========HTML========================= <div class="wrapper"> <div class="box"><img src="fotos/panama.jpg" alt="panama"><a href="paisagens.html"> Paisagens</a></div> <div class="box"><img src="fotos/tomy.jpg" alt="tomy"><a href="retratos.html"> Retratos</a></div> </div> ======================================== ==============CSS======================= .wrapper { width: 100vw; height: 100vh; background: #d5c75f; display: flex; flex-direction: row; justify-content: center; align-items: center; border:1px; } .wrapper a{ color:#000000; font-size:1.5em; } .box { max-width: 500px; margin: auto; background: #d5c75f; display:inline-block; } .box ,img{ } .box, img, a{ align-items: center; text-align:center; font-size:1.2em; }
  6. jkm4657k

    Gerador de Senhas

    Boa noite, gostaria de ajuda em um codigo que gerasse senhas, mas que estas nao se repetissem, tipo, 1,3,28... até no maximo o numero 55. Agradeço se puderem me ajudar
  7. Olá, todos! Esbarrei num problema com questões de programação linguagem HTML & CSS e busco por ajuda dos experts aqui. • SINOPSE DA QUESTÃO Montei no dreamweaver um anúncio de produto em HTML para um cliente, com a finalidade de ser exibido no site institucional da empresa e na loja virtual. Simplesmente exibindo nos navegadores, o HTML se comporta direitinho mas, dentro da PLATAFORMA TRAY (da loja virtual) e no site institucional do cliente o anúncio perde boa parte do layout fica quebrado, sem falar que o conteúdo não está se adequando (diminuindo e aumentando) na exibição mobile. Se tiverem a paciência de ler e me ajudar, ficarei agradecido! O tópico é extenso, mas sera bem explicado... Prometo! • MEU BACKGROUND EM PROGRAMAÇÃO HTML / CSS - Para referência. Estou aqui no FORUM iMASTERS porque, lááááá nas antigas, fiz um curso de HTML e desenvolvimento web (comprado na época em 4 CDs) do iMSTERS. Cheguei a criar alguns sites mas, como meu foco sempre foi mais na parte gráfica (sou artista gráfico ou, designer, como queiram) acabei abandonando os projetos de web. E isso já foi lá na época das tabelas, iframes e conteúdo em flash. Seja como for, tenho uma certa noção sobre tags, termos e códigos de programação. Reforçando: "alguma" noção! • DESENVOLVIMENTO DO TRABALHO Meu cliente - uma empresa importadora de projetores - solicitou o desenvolvendo de várias peças gráficas (embalagens, manuais, posts para redes sociais) No pacote, me solicitaram também arquivos promocionais em HTML pra deixar a LOJA VIRTUAL e o SITE INSTITUCIONAL mais atrativos, já que - como todos sabem, imagino - maioria das lojas virtuais tem um espaço pra fotos e um CAMPO DE TEXTO pra descrição destes produtos. Meu cliente quer que seus anúncios sejam em HTML, bem ilustrados e chamativos como anúncios de revista. Pois bem... Desenvolvi o layout e a arte foi aprovada. No momento de criar o arquivo HTML propriamente dito, eu sabia que precisaria me atualizar, afinal, usar "tabelas" está fora dos padrões. Saí a pesquisar. Li e assisti MUITA COISA (inclusive aqui dentro do Fórum iMasters) sobre DIV / HTML / CSS e, após entender a mecânica básica desses elementos, comecei a montar o HTML, simplesmente fatiando a arte criada (feita em Photoshop). Após alguns tropeços, consegui estruturar o HTML com base só em DIVs e CSS. Testei no INTERNET EXPLORER e no GOOGLE CHROME e o anúncio (HTML) abriu sem problemas. • OS PROBLEMAS Layout redondinho, fatiado e estruturado em HTML e rodando sem problemas nos navegadores mas. quando o cliente colocou os arquivos (HTML / IMAGENS / ESTILO CSS) no SITE INSTTITUCIONAL e na LOJA VIRTUAL (hospedada pela TRAY E-COMMERCE), o HTML se quebrou... De primeiro, eu havia enviado o HTML, a pasta com imagens e um arquivo CSS em separado, para inserção nos sites. Como houve os problemas, inseri o CSS direto no HTML mas, os problemas persistem... - No SITE INSTITUCIONAL a estrutura se manteve até certo ponto. Mas, o layout se quebrou em vários pontos e as partes em texto perderam a formatação e as características do texto puxadas via CSS... - Na LOJA VIRTUAL: Virou uma bagunça... Primeiro que o HTML só aparece num campo estreito (de uns 200 pixels) no miolo da página, com uma barra de rolagem própria. E as características de texto se perderam todas. - Em ambos os casos (site e loja) as versões MOBILE ficaram uma bagunça só! Os problemas de visualização se mantem e com o agravante de que o HTML não se ajustou (como eu esperava) ao tamanho da tela do celular. - Ajuste às resoluções de tela: Quando faço a análise do layout no GOOGLE CHROME (F12) o conteúdo se ajusta à tela... Este HTML não é pra ser responsivo... Apenas deve AMPLIAR e ENCOLHER de acordo com a resolução de tela do dispositivo do usuário. Pra ficar tipo, uma "responsividade" simulada... • DÚVIDAS 1) O que fazer para que o layout se mantenha, mesmo após inserido nos respectivos sites? 2) Qual o procedimento para que o AJUSTE ÁS RESOLUÇÕES DE TELA aconteça? 3) Quais os erros estou cometendo no código? • RESSALVAS Espero que não haja erros muito grotescos no código... Fui construindo o HTML aos poucos, seguindo alguns tutoriais, uma vez que nunca havia montado nada apenas com base em DIVs Criei um CSS pra cada linha de DIV porque, achei que deveria ser assim... Se houver uma maneira de simplificar isso, gostaria muito de saber. Para os próximos HTMLs que estou montando, estou procurando simplificar o design, mantendo os SLICES do mesmo tamanho, assim (imgino) poderei usar uma mesma classe CSS pra diferentes DIVs... Pra facilitar a construção do HTML lá na frente. • O CÓDIGO Segue o link da pasta com as imagens e o HTML: https://drive.google.com/open?id=1oxhbq48reTrxTE6iLo6J517ebfioXTNE Aqui vai o código: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=content-width, initial-scale=1.0" /> <title>BT835A - Betec Brasil ©</title> <style> body { font-family:"Tahoma, Verdana, Arial"; width:1140px; margin:auto; background-color:#FFF; } .titulos-azul { /* FORMATAÇÃO DE TEXTO */ font-family: Tahoma, Geneva, sans-serif; font-size:30pt; font-style:normal; font-weight:bold; font-variant:normal; text-align:center; letter-spacing:-2px; color:#296ba4; line-height:25px; } .titulos-branco { /* FORMATAÇÃO DE TEXTO */ font-family:Tahoma, Geneva, sans-serif; font-size:30pt; font-style:normal; font-weight:bold; line-height:25px; font-variant:normal; color: #FFFFFF; } .descricoes-titulos { /* FORMATAÇÃO DE TEXTO */ font-family:Tahoma, Geneva, sans-serif; font-size:15pt; font-style:normal; line-height:22px; font-weight:normal; font-variant:normal; text-transform:none; color:#868686; text-decoration:none; } .descricoes-cinza-claro { /* FORMATAÇÃO DE TEXTO */ font-family:Tahoma, Geneva, sans-serif; font-size:15pt; font-style:normal; line-height:22px; font-weight:normal; font-variant:normal; text-transform:none; color:#dcdcdc; text-decoration:none; } .subtitulos { /* FORMATAÇÃO DE TEXTO */ font-family:Tahoma, Geneva, sans-serif; font-size:14pt; font-style:normal; line-height:22px; font-weight:bold; font-variant:normal; text-transform:none; color:#868686; text-decoration:none; } .legenda-quadros-azul { /* FORMATAÇÃO DE TEXTO */ font-family: Tahoma, Geneva, sans-serif; font-size: 15pt; font-style: normal; line-height: 22px; font-weight: normal; font-variant: normal; text-transform: none; color: #296ba4; text-decoration: none; } .box-apps{ /* FORMATAÇÃO DIV DOS APLICATIVOS */ position:relative; float:left; width:1140px; height:290px; } #container { /* FORMATAÇÃO DIV PRINCIPAL */ position:absolute; width:100%; height:100%; background-color:#FFF; margin:auto; } #imgs-001{ /* FORMATAÇÃO LINHA COM IMAGENS */ position:relative; float:left; width:1140px; height:344px; margin:auto; } #imgs-002{ /* FORMATAÇÃO LINHA COM IMAGENS */ position:relative; float:left; width:1140px; height:226px; margin:auto; } #imgs-003{ /* FORMATAÇÃO LINHA COM IMAGENS */ position:relative; float:left; width:1140px; height:385px; margin:auto; } #imgs-004{ /* FORMATAÇÃO LINHA COM IMAGENS */ position:relative; float:left; width:1140px; height:423px; margin:auto; } #imgs-005{ /* FORMATAÇÃO LINHA COM IMAGENS */ position:relative; float:left; width:1140px; height:416px; margin:auto; } #imgs-006{ /* FORMATAÇÃO LINHA COM IMAGENS */ position:relative; float:left; width:1140px; height:182px; margin:auto; } #box-001{ /* TEXTO PROJETOR POTENTE */ position:relative; text-align:center; float:left; width:1060px; height:170px; padding-left:40px; padding-right:40px; padding-top:20px; padding-bottom:0px; background-color:#FFF; } #box-interno{ /* CAIXA GERAL COM TODOS OS APLICATIVOS */ position:relative; width:980px; height:290px; top:0px; left:50%; margin-left:-490px; background-color:#FFF } .app-mini-containers{ /* CAIXAS - IMAGENS DOS APLICATIVOS */ display:table; text-align:center; float:left; padding:5px; margin:5 auto; width:235px; height:280px; } #linha-caracteristicas{ /* BOX COM AS COLUNAS CARACTERÍSTICAS DO PROJETOR */ position:relative; width:1140px; height:558px; background-color:#FFF; float:left; margin:auto; margin-top:20px; } .box-menor-caracteristicas{ /* BOX COM AS COLUNAS CARACTERÍSTICAS DO PROJETOR */ position:relative; width:1075px; height:558px; top:0px; left:0; margin-left:-537px; margin:auto; } .coluna1{ /* COLUNA IMAGENS ESQUERDA */ position:relative; width:229px; height:558px; background-color:#FFF; float:left; } .coluna-miolo{ /* COLUNA IMAGEM MIOLO */ position:relative; width:617px; height:558px; background-color:#FFF; alignment-adjust:central; float:left; } .coluna2{ /* COLUNA IMAGENS DIREITA */ position:relative; width:229px; height:558px; background-color:#FFF; float:left; } #fundo-titulo-cinema{ /* FUNDO DA DIV BASE */ position:relative; width:1140px; height:110px; float:left; background-color:#FFF; z-index:1; } #barra-azul-escuro{ /* BARRA DE ACABAMENTO AZUL PARA ENCAIXE */ position:absolute; width:1140px; height:40px; bottom:0px; text-align:center; background-color:#1c3850; z-index:2; } #titulo-cinema{ /* FUNDO DO TEXTO */ position:absolute; width:850px; height:50px; top:50%; left:50%; margin-left:-425px; margin-top:-50px; padding-top:20px; text-align:center; background-color:#296ba4; z-index:3; } #imgs-cinema1{ /* FORMATAÇÃO LINHA COM IMAGENS */ position:relative; float:left; width:1140px; height:340px; margin:auto; } #imgs-cinema2{ /* FORMATAÇÃO LINHA COM IMAGENS */ position:relative; float:left; width:1140px; height:403px; margin:auto; } #box-max-desempenho{ /* TEXTO MAX DESEMPENHO */ position:relative; text-align:center; float:left; width:1060px; height:130px; padding-left:40px; padding-right:40px; padding-top:20px; padding-bottom:0px; background-color:#204668; } #imgs-keystone{ /* FORMATAÇÃO LINHA COM IMAGENS */ position:relative; float:left; width:1140px; height:440px; margin:auto; } #imgs-portatil-fixo1{ /* FORMATAÇÃO LINHA COM IMAGENS */ position:relative; float:left; width:1140px; height:447px; margin:auto; } #fundo-acesso-facil{ /* FUNDO DA DIV BASE */ position:relative; width:1140px; height:110px; float:left; background-color:#FFF; z-index:4; } #barra-azul-claro{ /* BARRA DE ACABAMENTO AZUL PARA ENCAIXE */ position:absolute; width:1140px; height:40px; bottom:0px; text-align:center; background-color:#d6e4ed; z-index:5; } #titulo-acesso-facil{ /* FUNDO DO TEXTO */ position:absolute; width:850px; height:50px; top:50%; left:50%; margin-left:-425px; margin-top:-50px; padding-top:20px; text-align:center; background-color:#296ba4; z-index:6; } #imgs-acesso-intuitivo1{ /* FORMATAÇÃO LINHA COM IMAGENS */ position:relative; float:left; width:1140px; height:552px; margin:auto; } #box-conectividade{ /* TEXTO AMPLA CONECTIVIDADE */ position:relative; text-align:center; float:left; width:1060px; height:130px; padding-left:40px; padding-right:40px; padding-top:20px; padding-bottom:0px; background-color:#FFF; } #imgs-conectividade1{ /* FORMATAÇÃO LINHA COM IMAGENS */ position:relative; float:left; width:1140px; height:368px; margin:auto; } #imgs-conectividade2{ /* FORMATAÇÃO LINHA COM IMAGENS */ position:relative; float:left; width:1140px; height:368px; margin:auto; } #box-qualidade{ /* TEXTO QUALIDADE E EFICIENCIA */ position:relative; text-align:center; float:left; width:1060px; height:125px; padding-left:40px; padding-right:40px; padding-top:20px; padding-bottom:0px; background-color:#eff5f8; } #imgs-qualidade{ /* FORMATAÇÃO LINHA COM IMAGENS */ position:relative; float:left; width:1140px; height:320px; margin:auto; background-color:#eff5f8; } #box-lamp-led{ /* TEXTO LAMPADAS LED */ position:relative; text-align:center; float:left; width:1060px; height:130px; padding-left:40px; padding-right:40px; padding-top:20px; padding-bottom:0px; background-color:#FFF; } #imgs-led{ /* FORMATAÇÃO LINHA COM IMAGENS */ position:relative; float:left; width:1120px; height:250px; margin-left:20px; background-color:#FFF; } #imgs-betec{ /* FORMATAÇÃO LINHA COM IMAGENS */ position:relative; float:left; width:1120px; height:480px; margin-left:20px; background-color:#FFF; </style> </head> <body> <div id="container"/> <div id="imgs-001"> <img src="images/html-betec-bt835a_01.jpg" width="570" height="344" style="float:left;"/> <img src="images/html-betec-bt835a_02.jpg" width="570" height="344" style="float:left;"/></div> <div id="imgs-002"> <img src="images/html-betec-bt835a_03.jpg" width="570" height="226" style="float:left;"/> <img src="images/html-betec-bt835a_04.jpg" width="570" height="226" style="float:left;"/></div> <div id="imgs-003"> <img src="images/html-betec-bt835a_05.jpg" width="570" height="385" style="float:left;"/> <img src="images/html-betec-bt835a_06.jpg" width="570" height="385" style="float:left;"/></div> <div id="imgs-004"> <img src="images/html-betec-bt835a_07.jpg" width="570" height="423" style="float:left;"/> <img src="images/html-betec-bt835a_08.jpg" width="570" height="423" style="float:left;"/></div> <div id="imgs-005"> <img src="images/html-betec-bt835a_09.jpg" width="570" height="416" style="float:left;"/> <img src="images/html-betec-bt835a_10.jpg" width="570" height="416" style="float:left;"/></div> <div id="imgs-006"> <img src="images/html-betec-bt835a_11.jpg" width="570" height="182" style="float:left;"/> <img src="images/html-betec-bt835a_12.jpg" width="570" height="182" style="float:left;"/></div> <div id="box-001"> <p><span class="titulos-azul">PROJETOR POTENTE... SISTEMA SMART!</span></p><p><span class="descricoes-titulos">Com <strong>1600 LÚMENS</strong> para projeção, o que torna o modelo BT835A ainda mais poderoso são as<br /><strong>FUNÇÕES SMART</strong> nativas! O WI-FI integrado permite que você se conecta à internet e tenha<br />acesso direto ao <strong>YOUTUBE, GOOGLE CHROME</strong> e <strong>NETFLIX</strong>, com os aplicativos já instalados!</span></p><p><span class="subtitulos">CONEXÃO WI-FI E OS MELHORES APLICATIVOS JÁ INSTALADOS!</span></p> </div><!--fecha box1 --> <div class="box-apps"> <div id="box-interno"> <div class="app-mini-containers"><img src="images/html-betec-bt835a_15.jpg" width="229" height="229"/> <span class="legenda-quadros-azul">Conexão rápida<br />e fácil</span></div> <div class="app-mini-containers"><img src="images/html-betec-bt835a_17.jpg" width="229" height="229"/><span class="legenda-quadros-azul">O melhor navegador<br />da internet</span></div> <div class="app-mini-containers"><img src="images/html-betec-bt835a_19.jpg" width="229" height="229"/><span class="legenda-quadros-azul">Séries e filmes para<br />seu cinema em casa</span></div> <div class="app-mini-containers"><img src="images/html-betec-bt835a_21.jpg" width="229" height="229"/><span class="legenda-quadros-azul">O maior conteúdo de<br />vídeos do mundo</span> </div><!--fecha box-interno --> </div><!--fecha box-apps --> <div id="linha-caracteristicas"> <div class="box-menor-caracteristicas"> <div class="coluna1"><img src="images/html-betec-bt835a_28.jpg" width="229" height="250"/><br /><br /><br /><br /><img src="images/html-betec-bt835a_30-04.jpg" width="229" height="250"/></div> <div class="coluna-miolo"><img src="images/html-betec-bt835a_28-02.jpg" width="617" height="558" style="float:left;"/></div> <div class="coluna2"><img src="images/html-betec-bt835a_30.jpg" width="229" height="250"/><br /><br /><br /><br /><img src="images/html-betec-bt835a_33.jpg" width="229" height="250"/></div><br /> </div><!--Fecha Div Box-Menor--> </div><!--Fecha Div Linha-Características--> <div id="fundo-titulo-cinema"> <div id="barra-azul-escuro"> <div class="titulos-branco" id="titulo-cinema">CINEMA NO TAMANHO CERTO</div> </div><!--Fecha Barra Azul Escuro--> </div><!--Fecha Titulo Cinema--> <div id="imgs-cinema1"> <img src="images/html-betec-bt835a_37.jpg" width="570" height="340" style="float:left;"/> <img src="images/html-betec-bt835a_38.jpg" width="570" height="340" style="float:left;"/></div> <div id="imgs-cinema2"> <img src="images/html-betec-bt835a_39.jpg" width="570" height="403" style="float:left;"/> <img src="images/html-betec-bt835a_40.jpg" width="570" height="403" style="float:left;"/></div> <div id="box-max-desempenho"> <p><span class="titulos-branco">OBTENHA O MÁXIMO DESEMPENHO</span></p><p><span class="descricoes-cinza-claro"><strong>PARA IMAGENS COM MÁXIMA NITIDEZ, UTILIZE O PROJETOR<br />EM AMBIENTES ESCUROS OU COM BAIXA LUMINOSIDADE!</strong></span></p> </div><!--fecha box Max desempenho --> <div id="imgs-keystone"> <img src="images/html-betec-bt835a_45.jpg" width="570" height="440" style="float:left;"/> <img src="images/html-betec-bt835a_46.jpg" width="570" height="440" style="float:left;"/></div> <div id="imgs-portatil-fixo1"> <img src="images/html-betec-bt835a_45a.jpg" width="570" height="447" style="float:left;"/> <img src="images/html-betec-bt835a_46a.jpg" width="570" height="447" style="float:left;"/></div> <div id="imgs-portatil-fixo2"> <img src="images/html-betec-bt835a_47.jpg" width="570" height="447" style="float:left;"/> <img src="images/html-betec-bt835a_48.jpg" width="570" height="447" style="float:left;"/></div> <div id="fundo-acesso-facil"> <div id="barra-azul-claro"> <div class="titulos-branco" id="titulo-acesso-facil">ACESSO FÁCIL E INTUITIVO</div> </div><!--Fecha Barra Azul Claro--> </div><!--Fecha Acesso Facil--> <div id="imgs-acesso-intuitivo1"> <img src="images/html-betec-bt835a_53.jpg" width="570" height="552" style="float:left;"/> <img src="images/html-betec-bt835a_54.jpg" width="570" height="552" style="float:left;"/> </div><!--Fecha imgs Acesso Intuitivo --> <div id="box-conectividade"> <p><span class="titulos-azul">AMPLA CONECTIVIDADE</span></p><p><span class="descricoes-titulos">Acesso direto a vários tipos de conexão de entrada, aliando praticidade e tecnologia.<br />Conexão de saída para sistema de som externo de alta fidelidade. Qualidade total para a sua projeção.</span></p> </div><!--fecha conectividade --> <div id="imgs-conectividade1"> <img src="images/html-betec-bt835a_56.jpg" width="570" height="369" style="float:left;"/> <img src="images/html-betec-bt835a_57.jpg" width="570" height="369" style="float:left;"/></div> <div id="imgs-conectividade2"> <img src="images/html-betec-bt835a_58.jpg" width="570" height="368" style="float:left;"/> <img src="images/html-betec-bt835a_59.jpg" width="570" height="368" style="float:left;"/></div> <div id="box-qualidade"> <p><span class="titulos-azul">QUALIDADE E EFICIÊNCIA</span></p><p><span class="descricoes-titulos">Projetado com cuidado e construído com componentes de alta qualidade, o projetor <strong>BT835A</strong><br />é uma combinação elegante da tecnologia de ponta com o ótimo desempenho.</span></p> </div><!--fecha conectividade --> <div id="imgs-qualidade"> <img src="images/html-betec-bt835a_58a.jpg" width="570" height="291" style="float:left;"/> <img src="images/html-betec-bt835a_59a.jpg" width="570" height="291" style="float:left;"/></div> <div id="box-lamp-led"> <p><span class="titulos-azul">PROJEÇÃO COM LÂMPADA LED</span></p><p><span class="descricoes-titulos">Lâmpadas LED são muito mais eficientes, duráveis e consomem muito menos energia.<br />Além disso, custam até 5 vezes menos que as lâmpadas de projetores comuns!</span></p> </div><!--fecha conectividade --> <div id="imgs-led"><img src="images/html-betec-bt835a_68.jpg" width="537" height="211" style="float:left;"/><img src="images/html-betec-bt835a_69.jpg" width="538" height="211" style="float:left;"/></div> <div id="imgs-betec"> <img src="images/html-betec-bt835a_72.jpg" width="549" height="437" style="float:left;"/> <img src="images/html-betec-bt835a_73.jpg" width="548" height="437" style="float:left;"/></div> </div><!--Fecha Div Container--> </body> </html> ______________________________ Espero não ter esquecido nada e... Se obtiver alguma resposta... Fico agradecido imensamente! Obrigado a todos, desde já!
  8. Tommoraes

    Ajuda com HTML

    Olá, estou com o seguinte problema: Conteúdo do meu site está cortando na metade da tela, tipo quando eu acrescento algo (imagem, video...) ele expandi para cima ao invés de ficar centralizado estático no meio do site. Eu sou novo com HTML, observe meu código e me diz o que posso fazer para deixa-lô normalizado. https://pastebin.com/raw/NuBS9jMa
  9. Xxdragon95xX

    Dificuldade com a <DIV>

    Olá pessoal, boa noite? Recentemente resolvi começar a estudar CSS, vendo alguns tutoriais e apostilas. Todavia que eu estou com muito dificuldade em colocar a cor de fundo na <DIV>. Já copiei códigos prontos e mesmo assim, parece que não tem resposta a página de style.css com a pagina cadastro.php, porém quando defino o estilo no div, ele funciona. Por exemplo: <div style="background-color=black"> (obs: apenas um exemplo, pois nesse caso preciso definir as dimensões tanto weigth e height ) Não quero utilizar esse método, quero fazer tudo no css. A plataforma que eu utilizo é o Brackets e Xaamp para testar a página. Estou com muita dor de cabeça, só para colocar a div preta. Para não ficar frustado, sempre lembro o que meu professor de python diz quando algo não funciona" Eu sou FEEEEEEEEELIZ, MUITOO FELIIIIIIIIIZ. Por favor pessoal, me ajude nessa parada, eu não sei se é o programa ou a programação. segue o script: <!DOCTYPE html><html> <meta > <head> <meta charset="utf-8"> <link rel="datasheet" href="style.css" type="text/css"> </head> <header> <nav> <ul> <li><a>Inicio</a></li> <li><a>Anúncie vagas</a></li> <li><a>Contato</a></li> </ul> </nav> </header> <body> <div id="tudo"> <nav> <ul> <li><a> Inicio</a></li> <li><a> vaga</a></li> <li><a> contato</a></li> </ul> </nav> </div> <fieldset> <legend> Cadastro de vaga</legend> <form method="post"> <label>Nome da empresa:</label><br> <input type="text" width:300px height:40px> <br><label>Titulo da vaga:</label><br> <input type="text" width:300px height:40px> <br><label> Descrição da vaga:</label><br> <input type="boxtext" width:300px height:40px> <br><label>Email da empresa</label><br> <input type="text" width:300px heigth:40px> </form> </fieldset> </body> </html> Pagina estilos.css #tudo { z-index:auto; font-family:Verdana, Arial, Helvetica, sans-serif; background-color:#CCCCCC; font-size:12px; width: 998px; margin:0 auto; position:relative; background-color: black; display: inline-block;
  10. Primeiro, duas coisas: o texto é grandinho e não sei se postei no local correto, se não, eu peço que me orientem, se sim, obrigado, é meu primeiro post aqui. Olá, eu estou criando um site bem simples, ele vai funcionar apenas para os usuários lerem conteúdos postados, será postados livros/quadrinhos e outros conteúdos próprios, eu já criei todo o site usando html e css3, mas ainda sou bem novo nessa área, estou sempre procurando aprender, então desculpe se minha dúvida for muito "noob", mas é o seguinte: O site está todo pronto, em questão de layout e estrutura, estou estudando php e Banco de dados para criar um sistema de registro/login para os usuários salvarem seus dados, como "último livro lido, livros marcados com gostei" e etc, mas antes disso, Eu tenho uma dúvida, como vou postar nesse site? Pois eu tenho ele todo pronto, mas ele é "estatico", para eu adicionar algo novo, eu teria que criar tudo por linhas de códigos e etc, mas quais linguagens uso ou como é chamado os métodos para eu deixar esse site "vivo", no sentido de ele ter postagens constantes automaticamente por meio de uma simples interface para posts dos adms? A minha ideia é ter um "rank" de permissões, para usuários normais, lhes seriam atribuído o "rank 0", podendo assim apenas ler e salvar os dados como últimos lidos, quais começaram e não terminaram e etc, já para os adms, eles seriam "rank 1", tendo as mesmas opcoes/funcoes do "rank 0", mas em sua página de perfil, surgiria opções para postar conteúdos, não precisa ter ferramentas para modificar o site, como mudar logo, mudar x cor de y local, mas sim apenas para postar conteudos, pois a manutenção e edição do site eu posso fazer arrumando as linhas de código, mas o sistema de postagem eu gostaria de automatizar, como um blog, que posta uma notícia, ela aparece com uma imagem e uma pequena descrição, quando eu postar outra, a antiga vai "descer" e cada vez mais ir para baixo ou para a página 2, 3 etc... Um exemplo do que eu mais ou menos quero dizer, seria algo assim: leitor.net ou neoxscan.com acho que esses são os melhores exemplos, é algo bem simples, a pessoa acessa, ler e pronto, quem tiver logado vai ter informações de leitura salvas, mas a pergunta agora é: como postarei? Quais linguagens são usadas para isso? Existe algum nome que denomina essa função de posts para que eu pesquise mais sobre isso? Mesmo se não for possível explicar, por ser complexo, poderia pelo menos dizer qual caminho e o que é usado para tornar isso possível, por favor? Então essa é minha dúvida, obrigado.
  11. Bom dia pessoal! Estou com uma situação, vou tentar colocar de forma clara e objetiva: Possuo uma aplicação que ainda estou em desenvolvimento no Laravel, a ideia da aplicação é liberar o acesso após a confirmação do pagamento de uma mensalidade, se o usuario não efetuar o pagamento ele não libera o acesso. Porém existem duas situações: É o usuário que vai pagar mensalmente e a verificação seria todo mês de um novo boleto gerado; O usuário que opinar pagar um plano anual então essa verificação seria feita anualmente. A ideia é utilizar ao menos no inicio uma forma de integrar o PagSeguro com o Laravel e fazer essa verificação, eis que surge minha dúvida a que nível isso é possível? Confesso que estou meio perdido em relação a isso, caso alguém tenha algum "case" parecido, será que poderia me dar uma ajuda, ao menos para tentar explicar a melhor forma de fazer esse tipo de validação/acesso? Desde já agradeço a todos!
  12. Olá pessoal, É o seguinte, eu gosto de testar rapidamente os meus códigos front-end (HTML-JS-CSS) diretamente à partir da área de trabalho, simplesmente clicando no navegador e vendo. Acontece que aconteceu algo aqui no meu PC que só estou conseguindo fazer isso com o IE que nem é o meu navegador padrão, quando clico na página com o simbolo do Chrome (salvo como .htm) ele não abre o que fiz e sim vai direto para a pagina inicial do google, idem no firefox, já desabilitei o google como página inicial e não funcionou, o que pode ser ?? desde já agradeço pela ajuda.
  13. Robson Tenorio Henriques

    Scroll de Imagens

    Olá pessoal, estou com um projeto onde no mesmo existe 11 categorias e vários modelos para cada categoria, as categorias e modelos são apresentadas por meio de imagens em miniaturas (OBS: as imagens são dispostas em duas colunas), onde ao clicar numa categoria abre os modelos existentes, esta parte esta funcionando perfeitamente, porém o que necessito fazer é limitar a exibição das categorias e modelo para uma área de no máximo 1000px, que seria umas 6 ou 7 imagens aproximadamente e adicionar botões de navegação para passar entre os itens.. Abaixo segue o código da página: <div id="menu" class="pecasmain"> <input type="hidden" id="idlinha" name="idlinha" value="0"> <input type="hidden" id="idmodelo" name="idmodelo" value="0"> <div id="menuLinhas" class="menuLinhas"> <h3>LINHAS</h3> <a id="linha1" idreg="225" href="JavaScript: void(0);" class="linklinha"> <img src="../imgs_categorias/img_0000000225_01_gd.jpg" /> <span class="linknaoselecionado">Adubadoras Pendulares</span> </a> <a id="linha2" idreg="62" href="JavaScript: void(0);" class="linklinha"> <img src="../imgs_categorias/img_0000000062_01_gd.jpg" /> <span class="linknaoselecionado">Mini Pá Carregadeira e Mini Retro Escavadeira</span> </a> <a id="linha3" idreg="63" href="JavaScript: void(0);" class="linklinha"> <img src="../imgs_categorias/img_0000000063_01_gd.jpg" /> <span class="linknaoselecionado">Manejo de solo e trituração de poda: </span> </a> <a id="linha4" idreg="61" href="JavaScript: void(0);" class="linklinha"> <img src="../imgs_categorias/img_0000000061_01_gd.jpg" /> <span class="linknaoselecionado">Adubadoras mono disco</span> </a> <a id="linha5" idreg="242" href="JavaScript: void(0);" class="linklinha"> <img src="../imgs_categorias/img_0000000242_01_gd.jpg" /> <span class="linknaoselecionado">Recolhedora de terreiro</span> </a> <a id="linha6" idreg="246" href="JavaScript: void(0);" class="linklinha"> <img src="../imgs_categorias/img_0000000246_01_gd.jpg" /> <span class="linknaoselecionado">Enlerador e soprador</span> </a> <a id="linha7" idreg="59" href="JavaScript: void(0);" class="linklinha"> <img src="../imgs_categorias/img_0000000059_01_gd.jpg" /> <span class="linknaoselecionado">Adubadoras de 2 discos</span> </a> <a id="linha8" idreg="10419" href="JavaScript: void(0);" class="linklinha"> <img src="../imgs_categorias/img_0000010419_01_gd.jpg" /> <span class="linknaoselecionado">Adubadora cafeeira e citrus</span> </a> <a id="linha9" idreg="65" href="JavaScript: void(0);" class="linklinha"> <img src="../imgs_categorias/img_0000000065_01_gd.jpg" /> <span class="linknaoselecionado">Recolhedora e abonadora de chão</span> </a> <a id="linha10" idreg="9039" href="JavaScript: void(0);" class="linklinha"> <img src="../imgs_categorias/img_0000009039_01_gd.jpg" /> <span class="linknaoselecionado">Podadora</span> </a> <a id="linha11" idreg="16321" href="JavaScript: void(0);" class="linklinha"> <img src="../imgs_categorias/img_0000016321_01_gd.jpg" /> <span class="linknaoselecionado">Braço de retro agrícola</span> </a> </div> <div id="menuModelos0" class="menuModelos"> <h3>MODELOS</h3> <span>Selecione uma LINHA no menu à esquerda.</span> </div> <div id="menuModelos225" class="menuModelos" style="display: none;"> <h3>Adubadoras Pendulares</h3> <a href="#" id="modelo1" idreg="69" class="linkmodelo"> <img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000069_01_gd.jpg" /> <span class="linknaoselecionado"> PS 203</span></a> <a href="#" id="modelo2" idreg="232" class="linkmodelo"><img id="img2" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000232_01_gd.jpg" /> <span class="linknaoselecionado"> PS / PSPP 303</span></a> <a href="#" id="modelo3" idreg="235" class="linkmodelo"><img id="img3" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000235_01_gd.jpg" /> <span class="linknaoselecionado">PS / PSPP 403</span></a> <a href="#" id="modelo4" idreg="236" class="linkmodelo"><img id="img4" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000236_01_gd.jpg" /> <span class="linknaoselecionado">PS 503</span></a> <a href="#" id="modelo5" idreg="237" class="linkmodelo"><img id="img5" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000237_01_gd.jpg" /> <span class="linknaoselecionado">PS / PSPP 603</span></a> <a href="#" id="modelo6" idreg="233" class="linkmodelo"><img id="img6" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000233_01_gd.jpg" /> <span class="linknaoselecionado">PS 753</span></a> <a href="#" id="modelo7" idreg="234" class="linkmodelo"><img id="img7" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000234_01_gd.jpg" /> <span class="linknaoselecionado">PS 953</span></a> <a href="#" id="modelo8" idreg="238" class="linkmodelo"><img id="img8" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000238_01_gd.jpg" /> <span class="linknaoselecionado">PS 1153</span></a> <a href="#" id="modelo9" idreg="239" class="linkmodelo"><img id="img9" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000239_01_gd.jpg" /> <span class="linknaoselecionado">PS 1353</span></a> <a href="#" id="modelo10" idreg="240" class="linkmodelo"><img id="img10" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000240_01_gd.jpg" /> <span class="linknaoselecionado">PS 1553T</span></a> <a href="#" id="modelo11" idreg="16808" class="linkmodelo"><img id="img11" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000016808_01_gd.jpg" /> <span class="linknaoselecionado">Pendulum</span></a> </div> <div id="menuModelos62" class="menuModelos" style="display: none;"> <h3>Mini Pá Carregadeira e Mini Retro Escavadeira</h3> <a href="#" id="modelo1" idreg="88" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000088_01_gd.jpg" /> <span class="linknaoselecionado">PX 04 Mini Pá carregadeira</span></a> <a href="#" id="modelo2" idreg="89" class="linkmodelo"><img id="img2" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000089_01_gd.jpg" /> <span class="linknaoselecionado">RX 04 Mini Retro escavadeira</span></a> </div> <div id="menuModelos63" class="menuModelos" style="display: none;"> <h3>Manejo de solo e trituração de poda: </h3> <a href="#" id="modelo1" idreg="86" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000086_01_gd.jpg" /> <span class="linknaoselecionado">TRSL 90</span></a> <a href="#" id="modelo2" idreg="87" class="linkmodelo"><img id="img2" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000087_01_gd.jpg" /> <span class="linknaoselecionado">TRSL 90E</span></a> <a href="#" id="modelo3" idreg="251" class="linkmodelo"><img id="img3" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000251_01_gd.jpg" /> <span class="linknaoselecionado">TRV 100 </span></a> <a href="#" id="modelo4" idreg="252" class="linkmodelo"><img id="img4" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000252_01_gd.jpg" /> <span class="linknaoselecionado">TRV 120</span></a> <a href="#" id="modelo5" idreg="16615" class="linkmodelo"><img id="img5" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000016615_01_gd.jpg" /> <span class="linknaoselecionado">TRL 120</span></a> <a href="#" id="modelo6" idreg="258" class="linkmodelo"><img id="img6" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000258_01_gd.jpg" /> <span class="linknaoselecionado">TRL 140</span></a> <a href="#" id="modelo7" idreg="259" class="linkmodelo"><img id="img7" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000259_01_gd.jpg" /> <span class="linknaoselecionado">TRL 160</span></a> <a href="#" id="modelo8" idreg="260" class="linkmodelo"><img id="img8" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000260_01_gd.jpg" /> <span class="linknaoselecionado">TRL 180</span></a> <a href="#" id="modelo9" idreg="261" class="linkmodelo"><img id="img9" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000261_01_gd.jpg" /> <span class="linknaoselecionado">TRL 200</span></a> <a href="#" id="modelo10" idreg="262" class="linkmodelo"><img id="img10" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000262_01_gd.jpg" /> <span class="linknaoselecionado">TRL 220</span></a> <a href="#" id="modelo11" idreg="254" class="linkmodelo"><img id="img11" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000254_01_gd.jpg" /> <span class="linknaoselecionado">TRP 120</span></a> <a href="#" id="modelo12" idreg="255" class="linkmodelo"><img id="img12" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000255_01_gd.jpg" /> <span class="linknaoselecionado">TRP 160H</span></a> <a href="#" id="modelo13" idreg="253" class="linkmodelo"><img id="img13" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000253_01_gd.jpg" /> <span class="linknaoselecionado">TRLA 180 </span></a> <a href="#" id="modelo14" idreg="15868" class="linkmodelo"><img id="img14" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000015868_01_gd.jpg" /> <span class="linknaoselecionado">TRLA 140</span></a> <a href="#" id="modelo15" idreg="257" class="linkmodelo"><img id="img15" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000257_01_gd.jpg" /> <span class="linknaoselecionado">TRS 360</span></a> <a href="#" id="modelo16" idreg="256" class="linkmodelo"><img id="img16" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000256_01_gd.jpg" /> <span class="linknaoselecionado">TRC 220</span></a> <a href="#" id="modelo17" idreg="10327" class="linkmodelo"><img id="img17" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000010327_01_gd.jpg" /> <span class="linknaoselecionado">TRSL 1,50</span></a> <a href="#" id="modelo18" idreg="2947" class="linkmodelo"><img id="img18" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000002947_01_gd.jpg" /> <span class="linknaoselecionado">TRL 140 RS</span></a> </div> <div id="menuModelos61" class="menuModelos" style="display: none;"> <h3>Adubadoras mono disco</h3> <a href="#" id="modelo1" idreg="85" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000085_01_gd.jpg" /> <span class="linknaoselecionado">Giro 400/600</span></a> <a href="#" id="modelo2" idreg="81" class="linkmodelo"><img id="img2" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000081_01_gd.jpg" /> <span class="linknaoselecionado">Giro 400/600 INOX</span></a> </div> <div id="menuModelos242" class="menuModelos" style="display: none;"> <h3>Recolhedora de terreiro</h3> <a href="#" id="modelo1" idreg="243" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000243_01_gd.jpg" /> <span class="linknaoselecionado">VRC 1600</span></a> <a href="#" id="modelo2" idreg="10245" class="linkmodelo"><img id="img2" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000010245_01_gd.jpg" /> <span class="linknaoselecionado">Varredor Hidraulico 2.6 Para Terreiro de Café</span></a> <a href="#" id="modelo3" idreg="10421" class="linkmodelo"><img id="img3" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000010421_01_gd.jpg" /> <span class="linknaoselecionado">Varredor Hidráulico 3.6 Para Terreiro de Café</span></a> <a href="#" id="modelo4" idreg="13270" class="linkmodelo"><img id="img4" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000013270_01_gd.jpg" /> <span class="linknaoselecionado">Varredor Hidráulico 2.6 Para Terreiro de Café Com Pistão Hid</span></a> <a href="#" id="modelo5" idreg="13693" class="linkmodelo"><img id="img5" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000013693_01_gd.jpg" /> <span class="linknaoselecionado">Varredor Hidráulico 3.6 Para Terreiro de Café Com Pistão Hid</span></a> </div> <div id="menuModelos246" class="menuModelos" style="display: none;"> <h3>Enlerador e soprador</h3> <a href="#" id="modelo1" idreg="13885" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000013885_01_gd.jpg" /> <span class="linknaoselecionado">Varrecafé Traseiro Simples Geração 2C </span></a> <a href="#" id="modelo2" idreg="14055" class="linkmodelo"><img id="img2" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000014055_01_gd.jpg" /> <span class="linknaoselecionado">Varrecafé Traseiro Duplo Geração 2C</span></a> <a href="#" id="modelo3" idreg="14491" class="linkmodelo"><img id="img3" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000014491_01_gd.jpg" /> <span class="linknaoselecionado">Varrecafé Duplo G2 Caixa Dupla</span></a> <a href="#" id="modelo4" idreg="14351" class="linkmodelo"><img id="img4" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000014351_01_gd.jpg" /> <span class="linknaoselecionado">Varrecafé Simples G2 Caixa Dupla </span></a> <a href="#" id="modelo5" idreg="247" class="linkmodelo"><img id="img5" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000247_01_gd.jpg" /> <span class="linknaoselecionado">Cleaner café/ RTF Dual</span></a> <a href="#" id="modelo6" idreg="248" class="linkmodelo"><img id="img6" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000248_01_gd.jpg" /> <span class="linknaoselecionado">Cleaner maçã / citrus</span></a> <a href="#" id="modelo7" idreg="9042" class="linkmodelo"><img id="img7" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000009042_01_gd.jpg" /> <span class="linknaoselecionado">Soprador</span></a> </div> <div id="menuModelos59" class="menuModelos" style="display: none;"> <h3>Adubadoras de 2 discos</h3> <a href="#" id="modelo1" idreg="74" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000074_01_gd.jpg" /> <span class="linknaoselecionado">TDS 750</span></a> <a href="#" id="modelo2" idreg="75" class="linkmodelo"><img id="img2" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000075_01_gd.jpg" /> <span class="linknaoselecionado">TDS 950</span></a> <a href="#" id="modelo3" idreg="76" class="linkmodelo"><img id="img3" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000076_01_gd.jpg" /> <span class="linknaoselecionado">TDS 1150</span></a> <a href="#" id="modelo4" idreg="73" class="linkmodelo"><img id="img4" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000073_01_gd.jpg" /> <span class="linknaoselecionado">TDS 1350</span></a> <a href="#" id="modelo5" idreg="72" class="linkmodelo"><img id="img5" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000072_01_gd.jpg" /> <span class="linknaoselecionado">TDS 1550</span></a> <a href="#" id="modelo6" idreg="71" class="linkmodelo"><img id="img6" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000000071_01_gd.jpg" /> <span class="linknaoselecionado">Vibraflow II</span></a> </div> <div id="menuModelos10419" class="menuModelos" style="display: none;"> <h3>Adubadora cafeeira e citrus</h3> <a href="#" id="modelo1" idreg="10420" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000010420_01_gd.jpg" /> <span class="linknaoselecionado">MX 2100</span></a> </div> <div id="menuModelos65" class="menuModelos" style="display: none;"> <h3>Recolhedora e abonadora de chão</h3> <a href="#" id="modelo1" idreg="9343" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000009343_01_gd.jpg" /> <span class="linknaoselecionado">Catacafé </span></a> </div> <div id="menuModelos9039" class="menuModelos" style="display: none;"> <h3>Podadora</h3> <a href="#" id="modelo1" idreg="9040" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000009040_01_gd.jpg" /> <span class="linknaoselecionado">Podadora</span></a> </div> <div id="menuModelos16321" class="menuModelos" style="display: none;"> <h3>Braço de retro agrícola</h3> <a href="#" id="modelo1" idreg="16322" class="linkmodelo"><img id="img1" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000016322_01_gd.jpg" /> <span class="linknaoselecionado">BRM BRAÇO MÓVEL </span></a> <a href="#" id="modelo2" idreg="16423" class="linkmodelo"><img id="img2" style="cursor: pointer;" src="../../imgs_produtos/pt/img_0000016423_01_gd.jpg" /> <span class="linknaoselecionado">BRF BRAÇO FIXO </span></a> </div> <div id="pecasHome" class="pecasConteudo"> <img src="../img/pecas.jpg" /> <img src="../img/diversas-pecas.jpg" /> <div id="desconto"> <p class="desconto"> Desconto de 3% para compras efetuadas em nosso site. </p> </div> </div> <div id="pecasConteudo" class="pecasConteudo" style="display: none;"></div> <br style="clear: both;"/> <iframe id="frameprocessa" name="frameprocessa" style="width: 0px; height: 0px; visibility: hidden; "></iframe> <!--<script src="../js/jquery-3.4.1.min.js"></script>--> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script language="Javascript"> $(document).ready(function() { $(".linklinha").click(function(e) { $("#menuLinhas > a > span").removeClass ( 'linkselecionado' ); $("#menuLinhas > a > span").addClass ( 'linknaoselecionado' ); $(this).find('span').addClass('linkselecionado'); var idreg = parseInt($(this).attr("idreg")); // Esconde Todas Divs Modelos $.each($(".menuModelos"), function(e) { $(this).hide(); }); // Exibe Div Modelo $("#menuModelos"+idreg).show(); //console.log("idreg= " + idreg); $("#menuModelos"+idreg+" > a > span").removeClass ( 'linkselecionado' ); $("#menuModelos"+idreg+" > a > span").addClass ( 'linknaoselecionado' ); // Ajusta Foco $("#menuModelos"+idreg+" #modelo1").focus(); $("#pecasConteudo").hide(); $("#pecasHome").show(); // Seta Deselecionada Modelo $("#idlinha").val(idreg); $("#idmodelo").val(0); }); $(".linkmodelo").click(function(e) { var idlinha = parseInt($("#idlinha").val()); $("#menuModelos"+idlinha+" > a > span").removeClass ( 'linkselecionado' ); $("#menuModelos"+idlinha+" > a > span").addClass ( 'linknaoselecionado' ); $(this).find('span').addClass('linkselecionado'); $("#pecasHome").hide(); //alert('Vai carregar DETALHES do MODELO IDREG: ' + $(this).attr("idreg")); $("#pecasConteudo").load( "carrega_pecas_detalhe.html?id="+ $(this).attr("idreg"), function( response, status, xhr ) { if ( status == "error" ) { console.log("#error" + xhr.status + " " + xhr.statusText ); } }); $("#pecasConteudo").show(); }); function initPage() { console.log('Carregou Linhas OK !'); var idlinha = parseInt($("#idlinha").val()); var idmodelo = parseInt($("#idmodelo").val()); // Esconde Todas Divs Modelos $.each($(".menuModelos"), function(e) { $(this).hide(); }); // Exibe Div Modelo $("#menuModelos"+idlinha).show(); } initPage(); }); </script> Se alguém puder me ajudar, pois esse pequeno detalhe ta me tomando um grande tempo e atrasando o projeto.
  14. Nayara Aline

    Formulário em Java Script

    Ola, gostaria da ajuda de vocês. Tenho um programa de cadastro de Frotistas (caminhoneiros), onde eu cadastro o frotista e os dados do mesmo caem em uma tabela, em outra pagina. Estou apanhando muito para cadastrar. Por enquanto não sera necessário banco de dados, apenas quero que os dados cadastrados aparecem na tabela. vou enviar algumas fotos para melhor visualizar.
  15. Qual a função da # em html?
  16. pheureunanda

    Como alinhar elementos na página?

    Olá, eu sou iniciante em HTML e CSS, eu estou aprendendo por hobby para desenvolver temas para a rede social Tumblr, eu estou fazendo esse layout para fins de teste como fiz de rascunho no Photoshop: Só que ao codificá-lo, a área da barra lateral e a de postagem estão desreguladas e eu já tentei de todas as formas alinhá-las, mas não consigo, o que eu estou fazendo de errado? Aí os meus códigos e o link do Tumblr que eu estou desenvolvendo o layout. <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="utf-8"> <!-- Título --> <title> {Title} </title> <!-- Ícone --> <link rel="shortcut icon" href="{Favicon}"> <!-- Descrição --> {block:Description} <meta name="description" content="{MetaDescription}" /> {/block:Description} <!-- Fonte Família --> <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&display=swap" rel="stylesheet"> <!-- CSS --> <style type="text/css"> /*Corpo da Página*/ body { background: url("https://i.imgur.com/ujnC90p.png") no-repeat fixed; font-family: 'Open Sans Condensed', sans-serif; font-size: 15px; text-align: justify; color: #7db1a5; } /*Caixa*/ #conteiner { display: flex; justify-content: center; } /*Conteúdo*/ .content { display: flex; justify-content: center; width: 810px; background: #f3edcd; margin-top: 45px; margin-bottom: 40px; } /*Cabeçalho*/ .header { width: 1000px; height: 1000px; background: url("https://i.imgur.com/gpaEEDj.png") no-repeat scroll; margin: 10px; } .entry { display: flex; flex-direction: row; } /*Barra Lateral*/ .sidebar { width: 131px; height: 121px; background: red; margin-top: 10px; margin-right: 10px; padding: 10px; } /*Faixa*/ .ribbon { margin-top: -10px; margin-left: -16px; } /*Postagem*/ .post { width: 400px; background: transparent; margin-top: 150px; margin-bottom: 10px; padding: 10px; } /*Título*/ .title { font-size: 20px; text-align: center; color: #f2d377; padding: 5px; } </style> </head> <body> <!-- Div de Caixa --> <div id="conteiner"> <!-- Div de Conteúdo --> <div class="content"> <!-- Div de Cabeçalho --> <div class="header"> <!-- Div de Logotipo --> <div class="logo"> <img src="https://i.imgur.com/J3ME7rw.png"> </div> <!-- Fim da Div de Logotipo --> </div> <!-- Fim da Div de Cabeçalho --> <!-- Div de Acesso --> <div class="entry"> <!-- Div de Barra Lateral --> <div class="sidebar"> <!-- Div de Faixa --> <div class="ribbon"></div> </div> <!-- Fim da Div de Barra Lateral --> <!-- Div de Postagem --> <div class="post"> <!-- Block de Postagem --> {block:Posts} <!-- Block de Texto --> {block:Text} <!-- Div de Título --> <div class="title"> {Title} </div> {Body} {/block:Text} {/block:Posts} </div> </div> <!-- Fim da Div de Acesso --> </div> <!-- Fim da Div de conteúdo --> </div> <!-- Fim da Div de Caixa --> </body> </html> O Tumblr: http://stripestheme.tumblr.com
  17. Agatacat

    Dúvida com a tag h4.

    O problema ocorre aqui: <h4>Bem vindo ao</h4> <h3>Ateliê Ingo Martin!</h3> Dentro da tag h4 preciso deixar apenas a palavra "Bem" com a inicial maiúscula, enquanto "vindo ao" com as iniciais minúsculas. Se alguém puder me ajudar eu agradeceria muito.
  18. presuntou

    POP-UP informativo

    Tenho uma duvida, cabei criando o design de um mapa com os pontos de presença da empresa no mundo, mas não encontrei um meio mais interessante de tornar interativo do que criar popups informativos. Gostaria de poder colocar o mapa como backgroud, e criar um código que vai fornecer pontos, e ao passar o mouse sobre o ponto ele se abre e aparece alguma informação descrita. No caso quando abrir aparece o nome do nosso datacenter do local. Existe algum modo simples de fazer isso ? heheh
  19. Olá! Bom dia! Tenho uma imagem que fica responsiva na maioria dos navegadores, porém no internet explore ela não fica responsiva. No iexplore ela tbm sai da posição correta, então fiz um codigo especifico para o iexplore (o posicionamento ficou correto, porém a imagem não esta responsiva) Teria alguma forma de corrigir isso? O codigo esta assim: <div class="conteudo"> <div id="cabeçalho"> <div class="logotipo"> <img src="arquivo/img/logotipo.png"> </div> </div> </div> O CSS: .cabeçalho{width:90%;margin-left:auto;margin-right:auto;} .logotipo {width:100%;max-width:1000px;}} .logotipo img{width:100%!important;height:auto;max-width:180px;} Obrigada
  20. kaique nunes

    div desalinhado

    O div está desalinhado, não entendo o motivo. Há espaço suficiente pra ele encaixar, não há margin impedindo-o, seja dele proprio ou de outros divs. E estes 3 estão configurados com display: inline-block; Estou deixando o código aqui, porém é preciso abrir a tela em pelo menos 1200px para ve-lo desta maneira: https://jsfiddle.net/pjygtm2o/
  21. Pitag346

    Carregamento de imagem

    Olá pessoal, tudo bem? Estou com uma dúvida bem bobinha... mas gostaria que me ajudassem a solucionar. Alguns sites utilizam uma forma de carregar as imagens deixando elas embaçadas/desfocadas. Até que são carregadas e elas aparecerem normalmente... Exemplo básico seria esse site: https://www.redbull.com/br-pt/athletes Sabem me explicar como isso é feito, e pra que ? Meu site usa bastante imagens, gostaria de saber se tem algum benefício ou se seria somente estética ... Obrigado! (Não sei se isso é feito em JavaScript, acredito que sim... perdão se publiquei na área errada).
  22. MEGATRON

    Dúvida em código JavaScript

    Crie um código em JavaScript que receba 2 palavras, e depois as imprima intercaladas. Ex.: “Joao” e “Mary”; a impressão deve ser: “JMoaaroy”. Use uma função que receba as duas palavras, e faça a intercalação.
  23. vinihhylian0103

    IFRAME - APÓS APERTAR LOGIN FECHAR O FRAME

    Olá, Boa Noite. Estou usando o Iframe pra exibir meu form de login na minha página central, porém, quando eu clico no botão login, o profile parece somente no iframe, teria como eu fazer o profile ser redirecionado na página principal. Segue o código: <div class="modal fade" id="modalLRFormDemo2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog cascading-modal" role="document"> <!--Content--> <div class="modal-content"> <iframe marginwidth="50" height="500px" width="500px" src="CADASTROS_LOGINS\LOGIN\index.html"> Seu navegador não suporta frames )= </iframe> <center><button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">Fechar</button></center> <br> </div> </div> <!--/.Panel 8--> </div> </div> </div>
  24. Boa tarde pessoal, Estou quebrando a cabeça para resolver um problema, tenho uma div dinâmica que carrega uma <table> em uma das colunas deveria apresentar o componente Switchery, esta <table> é montada a partir de uma função PHP que faz o select em uma tabela do banco de dados conforme abaixo: echo '<table class="table table-hover"> <thead> <tr> <th>Nome</th> <th>Agrupamento</th> <th>Ativo</th> </tr> </thead> <tbody>'; foreach($data as $row) { If ($row['ativo'] == 1) { $vativochk = "checked"; } else { $vativochk = ""; } echo '<tr> <td>'.$row['nome'].'</td> <td>'.$row['agrupamento'].'</td> <td><input type="checkbox" name="ativo_grid" class="js-switch" '.$vativochk.' disabled="disabled"></td> </tr>'; } echo '</tbody> </table>'; Aqui está o Ajax que chama e retorna atualizando a DIV: function atualiza_grid_graficos() { $.ajax({ type: "POST", url: "hubfuncind.php", data: { id_tabindicadores_paineis: $('#id_tabindicadores_paineis').val(), acao: "gridgraficos" }, success: function(data) { $('#conteudo').html(data); } }); } O retorno vem certinho, mas apenas o componente Switchery está vindo desconfigurado, ou seja vem um checkbox normal (html). O que é mais incrível é que neste mesmo formulário mais acima tenho este mesmo componente funcionando normalmente, somente dentro da DIV dinâmica é que fica desconfigurado conforme imagem anexa. Será que alguém já passou por isso?
  25. danicarla

    Ajuda CSS para link

    Bom dia pessoal, Quero fazer um link com o titulo de uma cor e o texto em outra, mas quando passar o mouse em cima queria que a cor dos dois ficasse igual Meu codigo está assim: <style type="text/css"> a.ChamadaNoticias:link{text-decoration:none;} a.ChamadaNoticias:visited{text-decoration:none;} a.ChamadaNoticias:hover{color: #00FF05;text-decoration:underline;} .tituloA{font-family:'Open Sans', sans-serif;color:#00698C;font-size:16px;font-weight:bold;} .textoB{font-family:'Open Sans', sans-serif;color:#333;font-size:16px;} </style> <a href="#" class="ChamadaNoticias"> <div class="tituloA">Titulo da noticia</div> <div class="textoB">Aqui vai uma breve descrição da noticia</div> </a> Como preciso fazer com meu CSS para quando passar o mouse em cima mudar a cor do titulo e do texto para mesma cor?
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.