Pesquisar na Comunidade
Mostrando resultados para as tags ''css''.
Encontrado 324 registros
-
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
-
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; }
-
Olá. Estou desenvolvendo uma pagina web onde preciso capturar o áudio do microfone em tempo real e converter o sinal em cores, semelhante ao funcionamento de um vu meter. Alguém tem alguma dica, ou indicação de algum conteúdo para ter uma noção de como fazer ?
-
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;
-
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!
-
Probleminha chato com navegador e pagina .htm
renan mafra postou um tópico no fórum Desenvolvimento frontend
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. -
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
-
Erro misterioso de HTML & CSS na Loja Virtual
p.a.artegrafica postou um tópico no fórum Desenvolvimento frontend
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á! -
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.
-
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.
-
Qual a função da # em html, como em <a href=''#''>
Alanna3005 postou um tópico no fórum Desenvolvimento frontend
Qual a função da # em html? -
Olá, estou aprendendo a como usar o layout grid e estou com uma dúvida, como eu faço para definir um espaçamento entre a parte do cabeçalho, a barra lateral e a área de postagem? É que eu usei o grid gap e defini o espaçamento, só que o cabeçalho estava junto ao conteiner sem margem, aí eu defini uma margem do topo para separar o cabeçalho do conteiner, mas ao fazer isso ele ficou sem espaçamento entre a parte da barra lateral e a área de postagem, como eu faço para arrumar isso? Aí como está o layout no momento e os meus códigos: Eu estou fazendo o layout para desenvolver um tema para a rede social Tumblr, ele está como na imagem, aqui o link do Tumblr que eu estou usando para aplicar o layout: https://stripestheme.tumblr.com/ Os meus códigos: /*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: grid; grid-template-columns: 140px 400px; grid-template-rows: 40px; grid-template-areas:"h h" "p s"; grid-gap: 10px; justify-content: center; width: 570px; height: 610px; background: #f3edcd; margin-top: 45px; margin-bottom: 40px; } /*Cabeçalho*/ .header { grid-area: h; width: 500px; height: 50px; background: #7db1a5; margin-top: 10px; margin-bottom: 10px; } /*Sidebar*/ .sidebar { grid-area: s; background: #7db1a5; margin-bottom: 10px; } /*Postagem*/ .post { grid-area: p; background: #7db1a5; margin-bottom: 10px; } <div id="conteiner"> <div class="content"> <div class="header"></div> <div class="sidebar"></div> <div class="post"></div> </div> Olá, estou aprendendo a como usar o layout grid e estou com uma dúvida, como eu faço para definir um espaçamento entre a parte do cabeçalho, a barra lateral e a área de postagem? É que eu usei o grid gap e defini o espaçamento, só que o cabeçalho estava junto ao conteiner sem margem, aí eu defini uma margem do topo para separar o cabeçalho do conteiner, mas ao fazer isso ele ficou sem espaçamento entre a parte da barra lateral e a área de postagem, como eu faço para arrumar isso? Aí como está o layout no momento e os meus códigos: Eu estou fazendo o layout para desenvolver um tema para a rede social Tumblr, ele está como na imagem, aqui o link do Tumblr que eu estou usando para aplicar o layout: https://stripestheme.tumblr.com/ Os meus códigos: /*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: grid; grid-template-columns: 140px 400px; grid-template-rows: 40px; grid-template-areas:"h h" "p s"; grid-gap: 10px; justify-content: center; width: 570px; height: 610px; background: #f3edcd; margin-top: 45px; margin-bottom: 40px; } /*Cabeçalho*/ .header { grid-area: h; width: 500px; height: 50px; background: #7db1a5; margin-top: 10px; margin-bottom: 10px; } /*Sidebar*/ .sidebar { grid-area: s; background: #7db1a5; margin-bottom: 10px; } /*Postagem*/ .post { grid-area: p; background: #7db1a5; margin-bottom: 10px; } <div id="conteiner"> <div class="content"> <div class="header"></div> <div class="sidebar"></div> <div class="post"></div> </div> </div> Executar Expandir trecho de código Se alguém puder me ajudar...
-
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
-
Tema não está respondendo adequadamente.
Agatacat postou um tópico no fórum Desenvolvimento com Wordpress
Boa tarde pessoal, estou com esse problema infernal, já tentei de tudo e nada parece dar resultado, vou explicar, estou utilizando um tema meio “bugado”, o “Bauhaus” e tive vários problemas com ele, e um que não consigo alterar de forma alguma, é a cor das imagens ao passar o mouse por cima, na página home, lá embaixo na seção “Alguns de Nossos Ambientes” ele está na cor “#cee002” e preciso que fique na cor “#fd8900” como nos detalhes do restante do site, mas realizo a mudança por meio do tema em “Theme options” e tudo que deveria alterar de cor muda, menos esse bendito. Se alguém puder me ajudar eu serei muito grata, estou com esse problema a semanas sem achar uma solução. link da página: https://moveiscantoacanto.com.br/ -
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.
-
Preciso deixar apenas algumas palavra minúsculas dentro da tag h4.
EnzoG postou um tópico no fórum Desenvolvimento frontend
Sou novo na área e preciso do seguinte, deixar "vindo ao" minúsculo e o "Bem" apenas com a inicial maiúscula. <h4>Bem vindo ao</h4> <h3>Ateliê Ingo Martin!</h3> agradeço desde já pela ajuda. -
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
-
imagem responsiva Imagens Responsivas no IExplore
BelleFisio postou um tópico no fórum Desenvolvimento frontend
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 -
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/
-
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.
-
Boa tarde, estou com dificuldades em repetir o seguinte exemplo: Criar 2 bordas (esquerda e direita) a partir do meio de uma palavra (box). Alguém tem alguma ideia? Segue imagem de exemplo:
-
Quando vou pesquisar aparece este erro da imagem Pesquisando, descobri o erro da imagem abaixo seguindo os seguintes passos 1. Para acessar as ferramentas do desenvolvedor no Chrome: Mac: acesse a opção de menu Visualizar> Desenvolvedor> Ferramentas do desenvolvedor . Windows: clique no menu do Google Chrome (à direita da barra de endereço) e selecione Ferramentas> Ferramentas do desenvolvedor . 2. As ferramentas do desenvolvedor são mostradas na parte inferior da janela atual do navegador. O Chrome mostrará o console JavaScript por padrão. Clique na guia Rede para ver solicitações de rede Atualize a página para permitir que o Chrome capture todas as solicitações 3. O painel da rede mostrará todas as solicitações feitas pelo Chrome para carregar a página. Clique na opção XHR na parte inferior da janela para reduzir as solicitações apenas para as solicitações do Ajax (XHR). Clique duas vezes na solicitação do Ajax feita pelo DataTables 4.Detalhes sobre a solicitação do Ajax são mostrados. Clique na guia Reponse na visualização do Ajax para ver os dados exatos que foram retornados do servidor. É nisso que estamos interessados! E não consigo fazer as pesquisas. E Pesquisando mais um pouco descobri que o "$_REQUEST", não é confiável pq ele pode ser facilmente burlado. Eu resolvi o erro com este comando "$requestData = filter_input(INPUT_POST, 0);", mas mesmo assim não consigo fazer a pesquisa. No aguardo de uma resposta.
-
IFRAME - APÓS APERTAR LOGIN FECHAR O FRAME
vinihhylian0103 postou um tópico no fórum Desenvolvimento frontend
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> -
PHP, Ajax e Bootstrap - Callback retorna componente desconfigurado
Anderson Maciel postou um tópico no fórum Desenvolvimento frontend
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? -
Mostrando conteudo de após selecionar do autocomplete.
sthefany silva postou um tópico no fórum Javascript
Olá, minha dúvida é ao fazer um selecte em algum as opções do autocomplete mostrar contudo na pág. e ao limpar os dados inseridos no input fazer com que volte ao estado anterior. ou seja, ao seleconar ele abrirar o que foi seleconado, ao limpar campus do input mostrar topicos anterior. segue abaixo meus códigos: HTML: <form class="submit-line" id="form"> <input id="buscaPerguntas" autocomplete="off" class="form-control input-faq" placeholder="Digite palavras-chaves para pesquisar" style="padding: 28px;"> </form> </div> </div> </div> <div class="row"> <div id="buscaPerguntas-description"> </div> </div> <div class="divFaq" id="listaFaq"> <div class="row"> {% for valor in faq%} <div class="col-sm-12"> <div class="boxFaq"> <a class="btn btn-faq accordion" type="button" data-toggle="collapse" data-target="#{{valor.id}}" aria-expanded="true"> {{valor.pergunta}} </a> </div> </div> <div class="col-sm-12"> <div id="{{valor.id}}" class="collapse"> <div class="boxFaq"> <div class="card-body"> <div>{{valor.resposta|raw}}</div> </div> </div> </div> </div> {% endfor %} </div> JAVASCRIPT: $(function () { $("#buscaPerguntas").autocomplete({ autoFocus: true, minLength: 1, appendTo: '#form', source: function (request, response) { $.ajax({ url: '/pesquisafaq', type: 'post', data: { dadosPesquisa: request.term } }).done(function (data) { let parse = JSON.parse(data) if (parse.length > 0) { let dados = Object.values(parse).map((e) => { return { label: e.pergunta, desc: "<div class='divFaqCollapse'><div class='col-sm-12'><div class='boxFaq'><a class='btn btn-faq accordion' type='button' data-toggle='collapse' data-target='#collapse' aria-expanded='true'>" + e.pergunta + "</a></div></div> <div class='col-sm-12'> <div id='collapse' class='collapse'> <div class='boxFaq'> <div class='card-body'> <div>" + e.resposta + "</div> </div> </div> </div> </div> </div>", } }) response(dados.slice(0)) } }); }, select: function (event, ui) { $("#buscaPerguntas").val(ui.item.label); $("#buscaPerguntas-description").html(ui.item.desc); $('#listaFaq').hide(); $('#buscaPerguntas-description').show(); } }) });
