Pesquisar na Comunidade
Mostrando resultados para as tags ''CSS''.
Encontrado 323 registros
-
Melhor local para armazenar os arquivos e ter acesso de qualquer computador
proflupin postou uma questão Perguntas e respostas rápidas
Utilizo o computador de casa e também utilizo o computador do escritório. Muitas vezes faço alterações nos meus arquivos de desenvolvimento no de casa e depois fico querendo utilizá-los no do escritório. Tentei fazer este controle através do OneDrive, direcionando o Xampp para a pasta do OneDrive, porém não ficou legal, em alguns momentos os arquivos não foram sincronizados corretamente. Qual a melhor ferramenta para utilizar neste caso? Aproveitando a pergunta e engatando outra, existe alguma ferramenta ideal para desenvolvimento em grupo? -
Tenho um site sobre conteudos de entretenimento, e todos os posts tem uma imagem de fundo do tmdb, tem alguma maneira de otimizar o carregamento dessas imagens por url? ou alguma outra maneira?
-
Quando mudo a cor da div o programa para
Kauê Fucherberger Bonfá postou um tópico no fórum Javascript
estou tentando fazer um programa que mostra qual produto vale mais a pena, mas estou tendo problemas, quando clico duas vezes para calcular a cor da div não volta a ser branco, por isso decidi criar uma função que faz a cor voltar a ser branco mas quando coloco a função o programa para de funcionar meu programa está assim: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #produto1 { background: white; border-radius: 10px; text-align: center; } #produto2 { background: white; border-radius: 10px; text-align: center; } #resultado{ text-align:center; } </style> </head> <body> <div> <div id="produto1"> <div><input type="number" id="quantidade1" name="quantidade" ></div> <div><input type="number" id="preco1" name="preco"></div> </div> <div id="produto2"> <div><input type="number" id="quantidade2" name="quantidade"></div> <div><input type="number" id="preco2" name="preco"></div> </div> </div> <div><button onclick="calcular()">calcular</button></div> <div><p>resultado:<a id="resultado"></a></p></div> <script> var v1 var v2 function calcular(){ var q1 = document.getElementById('quantidade1').value var p1 = document.getElementById('preco1').value var q2 = document.getElementById('quantidade2').value var p2 = document.getElementById('preco2').value v1=p1/q1 v2=p2/q2 mr() } function mr() { if (v1 < v2) { //deixar_branco() document.getElementById('resultado').innerText='segundo produto' document.getElementById('produto2').style.backgroundColor="#99CC32" } if (v2 < v1) { //deixar_branco() document.getElementById('resultado').innerText='primeiro produto' document.getElementById('produto1').style.backgroundColor="#99CC32" } } function deixar_branco() { document.getElementById('produto2').style.backgroundColor = white document.getElementById('produto1').style.backgroundColor = white } </script> </body> </html> -
Olá tenho esse código abaixo e a parte em vermelho é um HTML carregado pelo meu Arduíno, e como podem ver, ao clicar no botão LIGAR/DESLIGAR é enviado um retorno pelo <a href> porém eu gostaria de saber como posso apenas coletar esse retorno /L OU /H e carregar a pagina index / (barra vazia)? Ou se posso clicar no LIGAR/DESLIGAR e adicionar algo para que a pagina "atualize" ou vá para a /? // \r\n no final de todos os códigos AT para pular linhas e reconhecer comando #include "SDHT.h" #include "WiFiEsp.h" //INCLUSÃO DA BIBLIOTECA #include <SoftwareSerial.h> //Pino do Tx no 6, pino Rx no 7 SoftwareSerial esp8266(6, 7); SDHT dht; char ssid[] = "2.4_GAMBATESHIMA"; //VARIÁVEL QUE ARMAZENA O NOME DA REDE SEM FIO char pass[] = "FACA2010";//VARIÁVEL QUE ARMAZENA A SENHA DA REDE SEM FIO //char ssid[] = "Ali"; //VARIÁVEL QUE ARMAZENA O NOME DA REDE SEM FIO //char pass[] = "01010101";//VARIÁVEL QUE ARMAZENA A SENHA DA REDE SEM FIO WiFiEspServer server(81); //CONEXÃO REALIZADA NA PORTA 80 RingBuffer buf(8); //BUFFER PARA AUMENTAR A VELOCIDADE E REDUZIR A ALOCAÇÃO DE MEMÓRIA #define DEBUG true int statusLed = LOW; //VARIÁVEL QUE ARMAZENA O ESTADO ATUAL DO LED (LIGADO / DESLIGADO) String temperatura; String umidade; int status = WL_IDLE_STATUS; void lerTempUmi(){ dht.broadcast(DHT11, A1); delay(500); temperatura = String (dht.celsius, 0); umidade = String (dht.humidity, 0); } void setup() { Serial.begin(9600); esp8266.begin(9600); WiFi.init(&esp8266); // initialize ESP module pinMode(12, OUTPUT); digitalWrite(12, statusLed); if (WiFi.status() == WL_NO_SHIELD) // check for the presence of the shield { Serial.println("WiFi shield not present"); // don't continue while (true); } // attempt to connect to WiFi network while ( status != WL_CONNECTED) { Serial.print("Attempting to connect to WPA SSID: "); Serial.println(ssid); // Connect to WPA/WPA2 network status = WiFi.begin(ssid, pass); } Serial.println("You're connected to the network"); printWifiStatus(); while ( status != WL_CONNECTED) { Serial.print("Attempting to connect to WPA SSID: "); WiFi.init(&esp8266); WiFi.begin(ssid, pass); Serial.println(ssid); // Connect to WPA/WPA2 network status = WiFi.begin(ssid, pass); } //sendData("AT+RST\r\n", 2000, DEBUG); // rst //sendData("AT+CWMODE=1\r\n",2000, DEBUG); //sendData("AT+CWJAP=\"2.4_GAMBATESHIMA\",\"FACA2010\"\r\n", 5000, DEBUG); //sendData("AT+CIFSR\r\n", 2000, DEBUG);//You will get the IP Address of the ESP8266 from this command. //sendData("AT+CIPMUX=1\r\n", 2000, DEBUG); //sendData("AT+CIPSERVER=1,80\r\n", 2000, DEBUG); //sendData("AT+CIPSTART=0,\"TCP\",\"192.168.0.120\",37777\r\n",1000, DEBUG); // escolhe entre conexao TCP ou UDP //delay(1000); //sendData("AT+CWDHCP=1,0\r\n",1000, DEBUG); // configura ESP8266 para receber um IP do roteador conectado //delay(1000); //sendData("AT+CIPSTA_DEF=\"192.168.2.5\",\"192.168.2.1\",\"255.255.255.0\"\r\n",1000, DEBUG); // configura novo IP a ser escolhido - IP fixo, IP do roteador, Mascara da Rede (lembrando que o IP a ser escolhido deve estar na mesma faixa do roteador); //delay(1000); //sendData("AT+CIFSR\r\n", 1000, DEBUG); // Mostra o endereco IP //delay(3000); // Configura para multiplas conexoes //sendData("AT+CIPMUX=1\r\n", 1000, DEBUG); // Abre multiplas conexoes //delay(2000); //sendData("AT+CIPSERVER=1,80\r\n", 1000, DEBUG); delay(1000); server.begin(); } void loop() { WiFiEspClient client = server.available(); //ATENDE AS SOLICITAÇÕES DO CLIENTE if (client) { //SE CLIENTE TENTAR SE CONECTAR, FAZ buf.init(); //INICIALIZA O BUFFER boolean currentLineIsBlank = true; while (client.connected()){ //ENQU if(client.available()){ //SE EXISTIR REQUISIÇÃO DO CLIENTE, FAZ char c = client.read(); //LÊ A REQUISIÇÃO DO CLIENTE buf.push(c); //BUFFER ARMAZENA A REQUISIÇÃO //IDENTIFICA O FIM DA REQUISIÇÃO HTTP E ENVIA UMA RESPOSTA if(buf.endsWith("\r\n\r\n") && currentLineIsBlank) { // lerTempUmi(); WebPage2(client); break; }else if(buf.endsWith("GET /H")){ //SE O PARÂMETRO DA REQUISIÇÃO VINDO POR GET FOR IGUAL A "H", FAZ digitalWrite(12, HIGH); //ACENDE O LED statusLed = HIGH; //VARIÁVEL RECEBE VALOR 0(SIGNIFICA QUE O LED ESTÁ APAGADO) }else if (buf.endsWith("GET /L")) { //SE O PARÂMETRO DA REQUISIÇÃO VINDO POR GET FOR IGUAL A "L", FAZ digitalWrite(12, LOW); //APAGA O LED statusLed = LOW; //VARIÁVEL RECEBE VALOR 0(SIGNIFICA QUE O LED ESTÁ APAGADO) } } } delay(10); client.stop(); //sendData("AT+CIPCLOSE=0\r\n", 1000, DEBUG); } if (status != WL_CONNECTED) { setup();} } void WebPage2(WiFiEspClient client){ client.print( "HTTP/1.1 200 OK\r\n" "Content-Type: text/html\r\n" // "Connection: close\r\n" // the connection will be closed after completion of the response "\r\n"); client.println(""); client.println(F("<!DOCTYPE HTML>")); //INFORMA AO NAVEGADOR A ESPECIFICAÇÃO DO HTML client.println(F("<html><head><meta charset=\"utf-8\">")); //ABRE A TAG "html" client.println(F("<link rel='stylesheet' type='text/css' href='http://blogmasterwalkershop.com.br/arquivos/artigos/sub_wifi/webpagecss.css' />\n" "<link rel=\"icon\" type=\"image/png\" href=\"webserver\" src=\"https://tse3.mm.bing.net/th?id=OIP.iEsBOeq78HtIighYnuVMRAHaHa&pid=Api&P=0&w=300&h=300.png\">\n" " <title>GAMBATESHIMA ARDUINO WORK</title>")); //AS LINHAS ABAIXO CRIAM A PÁGINA HTML client.println(F("<body class=\"htmlNoPages\">\n" " <img alt=\"webserver\" src=\"https://tse3.mm.bing.net/th?id=OIP.iEsBOeq78HtIighYnuVMRAHaHa&pid=Api&P=0&w=300&h=300.png\" style=\"width: 150px; height: 150px; margin-top: 50px;\">\n" " <p style=\"line-height: 2;\" class=\"gwd-p-pzi3\"><font>WEBSERVER GAMBATESHIMA</font></p><p>ESTADO ATUAL DO LED: \n")); if (statusLed == HIGH) { client.println(F(" <strong><font color=\"green\">LIGADO</font></strong></p>\n" "<a href=\"/L\" style=\"margin-bottom:50px;\">DESLIGAR</a>\n")); }else { if (statusLed == LOW) { client.println(F(" <strong><font color=\"red\">DESLIGADO</font></strong></p>\n" "<a href=\"/H\" style=\"margin-bottom:50px;\">ACENDER</a>\n")); }} lerTempUmi(); client.println(F( " <hr width=\"250\">\n" " <p style=\"line-height: 0;\"><font color=\"red\">TEMPERATURA: </font>")); client.print(temperatura); client.println(F(" ºC</p>\n <hr width=\"250\">\n" " <p style=\"line-height: 0;\"><font color=\"red\">UMIDADE: </font>")); client.print(umidade); client.println(F(" %</p>\n <hr width=\"250\">\n" "<a href=\"/\">ATUALIZAR</a>\n" "</body>\n" "</html>
-
tenho uma DIV que possui um while em php, esse while carrega 12 posts(DIV), e quero que quando acesse o site, a pagina carregue normalmente mas dentro da div aparece um loader e apenas mostre os posts quando todos estiverem carregados! isso é possivel?
-
É possível repetir background-image em perspectiva?
tiicaa postou um tópico no fórum Desenvolvimento frontend
Pessoal, preciso replicar o fundo (piso) em uma aplicação web. Acontece que eu consigo replicar uma parede enviando uma "tira" de imagem e via css repetir em X porém para o chão gostaira de utilizar perspectiva no piso de madeira como nessa imagem - https://i.imgur.com/BwzVfQo.png Porém na minha aplicação o usuário escolhe o tamanho do container, se ele quiser criar um corredor infinito ele pode inserir o tamanho que quiser, porém eu preciso que o background se repit. A dúvida é.... É possível replicar background em perspectiva? Se sim, como possso fazer? -
Como expandir Multi-Level Menu para 100% ??
Carlos Web Soluções Web postou um tópico no fórum Desenvolvimento frontend
Como expandir Multi-Level Menu para 100% ?? Olá....como vão ?? Eu peguei um CSS Multi-Level Menu como modelo na internet, e gostaria de fazer uma modificação !! O menu (no link abaixo) sem estar no Responsive está ocupando mais ou menos a metade da tela. Eu gostaria que ocupasse 100% !! Tentei fazer tal modificação por conta mas não consegui !! Link = CSS Multi-Level Menu Alguém por favor poderia me dar uma ajuda ?? Desde já obrigado Carlos -
Quero colocar uma imagem de banner no site, mas quero que seu lado direito seja fixo na tela, se alterar o tamanho da tela, quero que somente a parte esquerda a imagem seja escondida. É possivel isso? se for, poderia me dizer como posso fazer?
-
olá pessoal. Estou disponibilizando um script para paginação de noticias, ele funciona, porém, ao adaptar codigo usado da internet, não encontrei maneiras de LIMITAR os REGISTROS. Se alguém quiser contribuir, na parte da paginação, agradeço. preciso limitar os registros em 10 em 10 a paginação primeiro < 1 2 3 4 5 6 7 8 9 10 > ultimo <section class="container-fluid"> <div class="row mb-5"> <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 mb-5"> <h1 class="text-center"> Informações e noticias </h1> <h3 class="text-center"> Atualizações diárias de conteúdos advocatícios e judiciais </h3> </div> <div class="col-xl-8 col-lg-8 col-md-8 col-sm-8 col-xs-12 mt-2 p-5" style="height: auto;"> <% IF IsEmpty(Request.QueryString("idnot")) OR IsNull(Request.QueryString("idnot")) THEN SQL1 = "SELECT * FROM dbluz_noticias ORDER BY id DESC LIMIT 1" ELSE SQL1 = "SELECT * FROM dbluz_noticias WHERE id = "& Request.QueryString("idnot") &" ORDER BY id DESC LIMIT 1" END IF SET strNoticias = Server.CreateObject("ADODB.Recordset") strNoticias.Open SQL1, conexao, 3, 3 IF strNoticias.EOF THEN %> <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center"> <h1>AVISO!</h1> <h4 style="color: green;"> Não existem noticias cadastradas no momento, <br> ou não existe registro para este ID informado. </h4> </div> <% ELSE DO WHILE NOT strNoticias.EOF %> <div class="box-noticias-data"> <%=strNoticias("dbluz_data")%> </div> <div class="box-noticias-subtitulo"> <%=strNoticias("dbluz_subtitulo")%> </div> <div class="box-noticias-titulo mt-4"> <%=strNoticias("dbluz_titulo")%> </div> <div class="box-noticias-descricao mt-5 text-justify"> <%=strNoticias("dbluz_descricao")%> </div> <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 text-right box-noticias-fonte line-dotted-top mt-3 mb-5 p-2"> <span class="mb-5 mt-2 p-2 bg-success"> <a href="index.asp?idnot=<%=strNoticias("id")%>" role="button" class="btn btn-clean"> <span class="fa fa-print fa-1x font-color-var1"></span> </a> </span> </div> <% strNoticias.MoveNext Loop SET strNoticias = Nothing %> </div> <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-xs-12 mt-5 p-0"> <% SQL2 = "SELECT * FROM dbluz_noticias " SET strNoticiasBlocos = Server.CreateObject("ADODB.Recordset") strNoticiasBlocos.Open SQL2, conexao, 3, 3 IF strNoticiasBlocos.EOF THEN %> <div class="row"> <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center"> <h1>AVISO!</h1> <h4 style="color: green;">Não existem noticias cadastradas no momento, <br> ou não existe registro para este ID informado.</h4> </div> </div> <% ELSE ItensExibidos = 1 'Qtde de Itens' NumeroDaPagina = Request.QueryString("pg") IF NumeroDaPagina = "" THEN NumeroDaPagina = 1 TotalDeRegistros = UBound(strNoticiasBlocos.GetRows,2)+1 InicioDaPagina = ((ItensExibidos*NumeroDaPagina)-ItensExibidos) FinalDaPagina = ItensExibidos IF TotalDeRegistros <= ItensExibidos THEN PaginaTotal = 1 ELSEIF (TotalDeRegistros MOD ItensExibidos = 0) THEN PaginaTotal = (TotalDeRegistros/ItensExibidos) ELSE PaginaTotal = (TotalDeRegistros/ItensExibidos) + 1 PaginaTotal = Cint(PaginaTotal) END IF strNoticiasBlocos.close SQL3 = SQL2 & "WHERE id != (SELECT max(id) FROM dbluz_noticias) ORDER BY id DESC LIMIT "& InicioDaPagina &" , "& FinalDaPagina &"" strNoticiasBlocos.Open SQL3, conexao, 3, 3 %> <div class="row"> <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 mb-2"> <% DO WHILE NOT strNoticiasBlocos.EOF %> <div class="box-noticias-data-min"><%= strNoticiasBlocos("dbluz_data")%></div> <div class="box-noticias-titulo-min mt-1 mb-1"> <a href="index.asp?idnot=<%=strNoticiasBlocos("id")%>" class=""> <%= strNoticiasBlocos("dbluz_titulo")%> </a> </div> <div class="box-noticias-descricao-min hidden-sm hidden-xs mb-4 line-dotted-top"> <%= LEFT(strNoticiasBlocos("dbluz_descricao"),200)%> </div> <% strNoticiasBlocos.MoveNext Loop %> </div> <% END IF END IF %> </div> <div class="col-xl-12 col-lg-12 col-md-12 col-md-12 col-xs-12"> <ul class="pagination pagination-sm"> <% IF Cint(NumeroDaPagina) = 1 THEN %> <li class="page-item disabled"> <a class="page-link fa fa-home" href="?pg=1" tabindex="-1"></a> </li> <li class="page-item disabled"> <a class="page-link" href="?pg=<%=NumeroDaPagina-1%>" tabindex="-1">Anterior</a> </li> <% ELSE %> <li class="page-item"> <a class="page-link fa fa-home" href="?pg=1" tabindex="-1"></a> </li> <li class="page-item"> <a class="page-link" href="?pg=<%=NumeroDaPagina-1%>" tabindex="-1">Anterior</a> </li> <% END IF %> <% FOR intID = 1 TO PaginaTotal IF intID = Cint(NumeroDaPagina) THEN %> <li class="page-item active"><a class="page-link" href="#"><b><%=intID%></b></a></li> <% ELSE %> <li class="page-item"> <a class="page-link" href="?pg=<%=intID%>"> <%=intID%> </a> </li> <% END IF NEXT %> <% IF Cint(NumeroDaPagina) = PaginaTotal THEN %> <li class="page-item disabled"> <a class="page-link" href="?pg=<%=NumeroDaPagina+1%>">Proxima</a> </li> <li class="page-item disabled"> <a class="page-link fa fa-arrow-circle-right" href="?pg=<%=PaginaTotal%>"></a> </li> <% ELSE %> <li class="page-item"> <a class="page-link" href="?pg=<%=NumeroDaPagina+1%>">Proxima</a> </li> <li class="page-item"> <a class="page-link fa fa-arrow-circle-right" href="?pg=<%=PaginaTotal%>"></a> </li> <% END IF %> </ul> </div> <div class="col-xl-12 col-lg-12 col-md-12 col-md-12 col-xs-12"> <div class="text-right p-1" style="font-size: 10px;"> Navegando na página <b id="barra_numero"><%= NumeroDaPagina %></b> de <b id="barra_total"><%= PaginaTotal %></b> </div> <div class="text-right p-1" style="font-size: 10px; color: dimgray;"> TOTAL DE <b id="barra_registro"><%= TotalDeRegistros %></b> REGISTROS </div> </div> </div> </div> </section> CODIGO DA PAGINACAO EXTRAIDO DA PARTE DE CIMA, a parte que preciso ajustar.... <ul class="pagination pagination-sm"> <% IF Cint(NumeroDaPagina) = 1 THEN %> <li class="page-item disabled"> <a class="page-link fa fa-home" href="?pg=1" tabindex="-1"></a> </li> <li class="page-item disabled"> <a class="page-link" href="?pg=<%=NumeroDaPagina-1%>" tabindex="-1">Anterior</a> </li> <% ELSE %> <li class="page-item"> <a class="page-link fa fa-home" href="?pg=1" tabindex="-1"></a> </li> <li class="page-item"> <a class="page-link" href="?pg=<%=NumeroDaPagina-1%>" tabindex="-1">Anterior</a> </li> <% END IF %> <% FOR intID = 1 TO PaginaTotal IF intID = Cint(NumeroDaPagina) THEN %> <li class="page-item active"><a class="page-link" href="#"><b><%=intID%></b></a></li> <% ELSE %> <li class="page-item"> <a class="page-link" href="?pg=<%=intID%>"> <%=intID%> </a> </li> <% END IF NEXT %> <% IF Cint(NumeroDaPagina) = PaginaTotal THEN %> <li class="page-item disabled"> <a class="page-link" href="?pg=<%=NumeroDaPagina+1%>">Proxima</a> </li> <li class="page-item disabled"> <a class="page-link fa fa-arrow-circle-right" href="?pg=<%=PaginaTotal%>"></a> </li> <% ELSE %> <li class="page-item"> <a class="page-link" href="?pg=<%=NumeroDaPagina+1%>">Proxima</a> </li> <li class="page-item"> <a class="page-link fa fa-arrow-circle-right" href="?pg=<%=PaginaTotal%>"></a> </li> <% END IF %> Desde já obrigado...
-
Estou estudando html e css e estou com um erro ao criar o navbar! me ajudem!
-
Gente, alguém sabe onde estou não errado nesse código para reproduzir essa tabela ? <html> <head> <title>Números Pares de 2 a 100</title> <style type="text/css"> <!-- td {font: 80% verdana; text-align: center; color:blue;} //--> </style> </head> <body> <table border="1" bordercolor="green" cellpadding="2" cellspacing="0"> <tr bgColor="#cccccc" borderColorDark="#fcfcfc" borderColorLight="#999999"> <script type="text/javascript"> <!-- for(i = 2; i <= 100; i++){ if(i % 2 == 0){ if(i % 20 = 0){ document.writ('<td>' + i + '</td></tr>'); if(i < 100){ document.write('<tr bgColor=\"#cccccc\" borderColorDark=\"#fcfcfc\" borderColorLight=\"#999999\">'); } } else{ document.write ('<td>' + i + '</td>'); } } } //--> </script> </tr> </table> </body>
-
oi, estou desenvolvendo abas de navegação utilizando bootstrap, porém gostaria de tornar ele responsivo pois as abas não se alinham em telas menores e as abas ficam bagunçadas. segue código abaixo: em html: <div class="row"> <div class="col-lg-12"> <h3 class="page-header">Central de ajuda</h3> </div> </div> <div class="row"> <div class="col-lg-12"> <ul class="nav nav-tabs round" id="#" role="tablist"> <li class="active"> <a id="tutorial-tab" data-toggle="tab" href="#tutorial" role="tab" aria-controls="tutorial" aria-selected="true"><span><i class="fas fa-book-reader"></i> Tutorial</a> </span> </li> <li> <a id="tarefa-tab" data-toggle="tab" href="#tarefa" role="tab" aria-controls="tarefa" aria-selected="false"> <span><i class=" fa fa-list-alt"></i> Tarefa</a> </li></span> <li> <a id="sugestao-tab" data-toggle="tab" href="#sugestao" role="tab" aria-controls="sugestao" aria-selected="false"><span> <i class="fa fa-lightbulb-o"></i> Sugestão</a></span> </li> <li> <a id="faq-tab" data-toggle="tab" href="#faq" role="tab" aria-controls="faq" aria-selected="true"><span><i class=" fa fa-search"></i> FAQ</a> </span> </li> </ul> </div> css: .nav-tabs { border-bottom: 1px solid var(--cor-primaria); overflow: hidden; transition: border 250ms ease; } .nav-tabs > li { margin: 0px; padding: 0px; float: left; padding-left: 48px; list-style-type: none; } .nav-tabs >li *{ margin: 0px; padding: 0px; } .nav-tabs > li > a { margin-right: 2px; line-height: 1.42857143; display: block; float: right; padding: 10px 24px 8px; background-color: #f2f2f2; z-index: 2; position: relative; color: #666666; text-transform: uppercase; transition: all 250ms ease; border-top: 0.5px solid rgba(204, 204, 204, 0.1803921568627451); } .nav-tabs > li > a:before, .nav-tabs > li > a:after{ display: block; content: " "; position: absolute; top: 0; height: 100%; width: 44px; background-color:#f2f2f2; transition: all 250ms ease; } .nav-tabs > li > a:before { right: -24px; transform: skew(30deg, 0deg); box-shadow: rgba(0,0,0,.1) 3px 2px 5px, inset rgba(255,255,255,.09) -1px 0; border-top: 0.5px solid rgba(204, 204, 204, 0.1803921568627451); } .nav-tabs > li > a:after { left: -24px; transform: skew(-30deg, 0deg); box-shadow: rgba(0,0,0,.1) -3px 2px 5px, inset rgba(255,255,255,.09) 1px 0; border-top: 0.5px solid rgba(204, 204, 204, 0.1803921568627451); } .nav-tabs > li > a:hover, .nav-tabs > li > a:hover:before, .nav-tabs > li > a:hover:after { background-color: var(--cor-primaria); color: #fff; border-top: 0px; } .nav-tabs >li.active > a{ z-index: 3; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:before, .nav-tabs > li.active > a:after { color: #fff; background-color: var(--cor-primaria); cursor: default; font-weight: 700; border-top: 0px; } /* Round Tabs */ .nav-tabs.round >li > a{ border-radius: 8px 8px 0 0; } .nav-tabs.round > li > a:before { border-radius: 0 8px 0 0; } .nav-tabs.round > li > a:after { border-radius: 8px 0 0 0; } tbm já tentei fazer utilizando o @media porém não ajusta certinho. poderia me dar essa ajuda.
-
Bom dia pessoal, estou tentando inserir um menu responsivo no meu projeto, mas quando acesso pelo celular ele não se adapta, continua do mesmo jeito que no computador, o que deve-se fazer pra forçar-lo a se adaptar? segue codigo: <!-- <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Menu RESPONSIVO</title> <!---<link rel="stylesheet" href="style.css">--> </head> <style> *{ margin: 0; padding: 0; } .menu{ width: 100%; height: 50px; background-color: #f0f0f0; font-family:'Arial'; } .menu ul{ list-style:none; position: relative; } .menu ul li{ width: 150px; float: left; } .menu ul ul{ position: absolute; visibility: hidden; } .menu ul li:hover ul{ visibility: visible; display:block; } .menu a{ text-decoration: none; display: block; padding: 15px; text-align: center; background-color: #f6f6f6; color: #000; } .menu a:hover{ background-color: #f4f4f4; } .menu ul ul li{ float: none; border-bottom: 1px solid #000; } .menu ul ul li a{ background-color: #f0f0f0; } label[for="bt_menu"]{ padding: 5px; background-color: #d0d0d0; font-family: 'Arial'; text-align: center; font-size: 30px; width: 50px; height: 50px; } #bt_menu{ display: none ; } label[for="bt_menu"]{ display: none; } @media (max-width: 800px){ label[for="bt_menu"]{ display:block; margin-left: 0; } #bt_menu:checked ~ .menu{ margin-left: 0; display: block; } .menu{ margin-top:5px; margin-left: -100%; transition: all .4s } .menu ul li{ width:100%; float: none; } .menu ul ul{ position:static; overflow: hidden; max-height: 0; transition: all 2s; } .menu ul li:hover ul{ height:auto; max-height: 200px; } } </style> <body> <input type="checkbox" id="bt_menu"> <label for="bt_menu">☰</label> <nav class="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Serviços</a> <ul> <li><a href="#">Criação de Sites</a></li> <li><a href="#">Artes Visuais</a></li> </ul> </li> <li><a href="#">Cursos</a> <ul> <li><a href="#">Java</a></li> <li><a href="#">Photoshop</a></li> <li><a href="#">HTML/CSS</a></li> </ul> </li> <li><a href="#">Contato</a></li> </ul> </nav> </body> </html> --->
-
Preciso de ajuda para configurar Newsletter e Contatos no meu site
JulioMoraes postou um tópico no fórum Desenvolvimento frontend
Preciso de ajuda para configurar a Newsletter e o formulário de contato do meu site. -
Estou desenvolvendo um site que terá varias paginas iguais, apenas com conteúdos diferentes (como se fosse o perfil do facebook, a pagina é padrão, mas conteúdos é diferente em cada perfil), e como serão varias paginas eu não quero só copiar o código e colar, eu queria fazer uma pagina base que se eu mudar alguma coisa mudará todas as "filhas" automaticamente. Entretanto eu não sei como esse método é chamado, nem como fazer, poderiam me falar como se chama essa técnica em HTML? e se puderem me mandem materiais sobre isso.
-
bom dia/tarde/noite , eu estou desenvolvendo um sistema de machine learning para o meu TCC onde eu automatizarei dados que entrarão pelo meu sistema web via uma intranet e esses dados virarão estatística . Bem ,para isso eu preciso de ajuda com APIs as quais eu possa usar , gostaria que me Ajudassem com alguma que funciona com java Script A respeito de segurança na Intranet e segurança dos dados, ou até mesmo na transformação do conteúdo em documento . Sendo assim peço que me ajudem com APIs que já utilizaram ou recomendam , já pesquisei em alguns sites mas não achei nada que chamasse atenção ou fosse de acordo com um sistema de automatização . Agradeço desde já .
-
Boa tarde, Semanas atrás estava com um problema em um script de um widget de relógio para um site. Consegui um novo script sem o link que estava gerando um erro, porém gostaria de utilizar a formatação do texto similar a do anexo. Alguém pode me ajudar com a alteração no código? <div id="clockbox" style="text-align:center;"></div> <script type="text/javascript"> var tmonth=["January","February","March","April","May","June","July","August","September","October","November","December"]; function GetClock(){ var tzOffset = -3; var d=new Date(); var dx=d.toGMTString(); dx=dx.substr(0,dx.length -3); d.setTime(Date.parse(dx)) d.setHours(d.getHours()+tzOffset); var nmonth=d.getMonth(),ndate=d.getDate(),nyear=d.getFullYear(); var nhour=d.getHours(),nmin=d.getMinutes(),ap; if(nhour==0){ap=" AM";nhour=12;} else if(nhour<12){ap=" AM";} else if(nhour==12){ap=" PM";} else if(nhour>12){ap=" PM";nhour-=12;} if(nmin<=9) nmin="0"+nmin; var clocktext=""+tmonth[nmonth]+" "+ndate+", "+nyear+" "+nhour+":"+nmin+ap+""; document.getElementById('clockbox').innerHTML=clocktext; } GetClock(); setInterval(GetClock,1000); </script> Obrigado!
-
html Liberar o botão quando marcado o checkbox
gumoreno2803 postou um tópico no fórum Desenvolvimento frontend
olá, estou tentando fazer uma check box que libera o botão quando ela for marcado, mas não estou conseguindo pois não sou muito bom com html, java etc etc achei esse code no forum, mas não estou conseguindo colocar o link para quando marcar e clicar em "concordar" ele abrir uma pagina <script> function HabiDsabi(){ if(document.getElementById('habi').checked == true){ document.getElementById('envia').disabled = "" } if(document.getElementById('habi').checked == false){ document.getElementById('envia').disabled = "disabled" } }</script><form name="form1"><input type="checkbox" name="habi" id="habi" onClick="HabiDsabi()"><input type="button" name="envia" id="envia" value="Concorda" disabled></form> -
Corousel Bootstrap pequeno em altura no celular
DinhoPHP postou um tópico no fórum Desenvolvimento frontend
Olá! Tenho um carousel em Bootstrap que se ajusta automaticamente à página, porém no modo mobile fica muito pequeno. O carousel está direto no <body>. Segue o código. O resultado pode ser visualizado em: http://equipenovainfo.com.br/_portifolio/br_informatica_tec/ <!-- CAROUSEL --> <div id="carousel_slide" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li class="active bg-primary" data-target="#carousel_slide" data-slide-to="0"></li> <li class="bg-primary" data-target="#carousel_slide" data-slide-to="1"></li> <li class="bg-primary" data-slide-to="#carousel_slide" data-target-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img class="img-fluid" src="_imagens/_slide/foto01.jpg" alt=""> <div class="carousel-caption text-dark d-none d-md-block"> <h2>Título da Descrição I</h2> <p class="lead">A descrição deste anúncio do banner aparece aqui!</p> </div> </div> <div class="carousel-item"> <img class="img-fluid" src="_imagens/_slide/foto02.jpg" alt=""> <div class="carousel-caption text-dark d-none d-md-block"> <h2>Título da Descrição II</h2> <p class="lead">A descrição deste anúncio do banner aparece aqui!</p> </div> </div> <div class="carousel-item"> <img class="img-fluid" src="_imagens/_slide/foto03.jpg" alt=""> <div class="carousel-caption text-dark d-none d-md-block"> <h2>Título da Descrição III</h2> <p class="lead">A descrição deste anúncio do banner aparece aqui!</p> </div> </div> </div> <a class="carousel-control-prev" href="#carousel_slide" role="button" data-slide="prev"> <span class="carousel-control-prev-icon"></span> <span class="sr-only">Anterior</span> </a> <a class="carousel-control-next" role="button" data-slide="next" href="#carousel_slide"> <span class="carousel-control-next-icon"></span> <span class="sr-only">Avançar</span> </a> </div> -
Executar ação contínua enquanto um botão esta pressionado e pará-la quando ele é solto
erikjfn postou um tópico no fórum Desenvolvimento frontend
Olá pessoal! Estou desenvolvendo uma aplicação que usa uma página html com css como controle de uma pequeno game que estou fazendo. Quero que quando eu pressionar um botão e deixar ele pressionado a ação executada desse botão continue em execução (por exemplo acelerar um carro do game) e quando soltar esse botão a ação seja encerrada. É possível fazer isso ? sinceramente eu comecei a ver html essa semana e não achei algo a respeito. Alguém pode me ajudar nessa? -
Executar ação contínua enquanto um botão esta pressionado e pará-la quando ele é solto
erikjfn postou um tópico no fórum Desenvolvimento frontend
Olá pessoal! Estou desenvolvendo uma aplicação que usa uma página html com css como controle de uma pequeno game que estou fazendo. Quero que quando eu pressionar um botão e deixar ele pressionado a ação executada desse botão continue em execução (por exemplo acelerar um carro do game) e quando soltar esse botão a ação seja encerrada. É possível fazer isso ? sinceramente eu comecei a ver html essa semana e não achei algo a respeito. Alguém pode me ajudar nessa? -
Alterar o html do tema animal de estimação da tray
Fabiana Theodoro postou um tópico no fórum Desenvolvimento frontend
Oi, tenho uma loja na Tray e o Tema é de animais de estimação. Na home quando passamos o mouse em cima do produto, aparece a patinha escrito Quero Esse! Gostaria de mudar essa imagem, e não estou achando no html. Só falta essa alteração para eu publicar a loja. Alguém pode me ajudar, por gentileza. Obg -
Boa Tarde! Estou desenvolvendo um site de uma agência de viagem para fixar meu conhecimento em javascript, html e css. Porém gostaria de colocar uma restrição no tópico "data de ida" que o usuário só prosseguia para a próxima página se no campo "Data de ida" tivesse um determinado valor no caso uma data. Iria aparecer um modal com uma mensagem de erro dizendo que é obrigatório colocar uma data. Gostaria de saber como consigo fazer essa validação utilizando javascript? <div class="container"> <div class="row"> <div class="col-12 text-center my-5"> <h1 class="display-3">Passagens Aéreas</h1> </div> </div> <div class="row justify-content-center mb-5"> <div class="col-sm-12 col-md-10 col-lg-8"> <form name="consulta" method="post"> <div class="form-row"> <div class="form-group col-sm-6"> <label for="escolhaDataIda">Escolha Data de Ida:</label> <input type="date" id="escolhaDataIda" class="form-control" name="dataida"> </div> <div class="form-group col-sm-6"> <label for="escolhaDataVolta">Escolha Data de Volta:</label> <input type="date" id="escolhaDataVolta" class="form-control" name="datavolta"> </div> <div class="form-group col-sm-12"> <a href="listaderesultados.html"> <button type="button" class="btn btn-outline-dark btn-lg btn-block">Pesquisar</button> </a> </div> </div> </form> </div> </div> </div> <!-- Modal --> <div class="modal" id="erroModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Eco Aero - Viagens</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-sucess" data-dismiss="modal">OK</button> </div> </div> </div> </div> showModal = function(mensagem, callback){ $('#erroModal').find('.modal-body').text(mensagem); $('#erroModal').find('.modal-footer .btn').click(callback); $('#erroModal').modal('show'); } function validacaoida () { if (document.cadastro.dataida.value == "") { showModal ("Por favor, coloque uma data de ida para prosseguir.", function(){ document.cadastro.dataida.focus (); }); return false; } return true; }
-
Olá pessoal, peguei um exemplo de um menu suspenso que utiliza somente CSS, porém não estou conseguindo adaptar para a minha aplicação. Segue abaixo: * { box-sizing: border-box; } body { margin: 0; } /*Configurações Padrões*/ ul.menu, .menu li, .menu a{ margin:0; padding:0; list-style:none; text-decoration:none; width:100%; } ul.menu ul{ position:absolute; display:none;} /* Configurações nivel 1*/ ul.menu{ float:left; font-family:Verdana, Geneva, sans-serif; font-size:15px; padding:0 5px;} .menu li{ float:left; width:auto; position:relative;} .menu li a{ display:block; padding:0 20px; line-height:45px; height:45px; float:left; width:240px; transition:all 0.1s linear; } /* Configurações nivel 2*/ .menu li:hover > ul.submenu-1{ display:block; top:45px; left:0; padding:0px; width:250px; } .menu ul.submenu-1 a{ padding:0 20px; width:250px; } /* Configurações nivel 2*/ .menu li:hover > ul.submenu-2{ display:block; top:0; padding:0px; width:250px; left:240px; } .menu ul.submenu-2 a{ width:250px; padding:0 20px; } /* Configurações nivel 3*/ .menu li:hover > ul.submenu-3{ display:block; top:0; padding:0px; width:250px; left:240px; } .menu ul.submenu-3 a{ width:250px; padding:0 20px; } .column1 { float: left; width: 250px; padding: 10px; min-height: 250px; } .column1 a { float: none; color: black; padding: 16px; text-decoration: none; display: block; text-align: left; } .column1 a:hover { } .column4 { float: right; width: 300px; padding: 10px; min-height: 250px; position:relative; top:0px; } .column4 a { float: none; color: black; padding: 16px; text-decoration: none; display: block; text-align: left; } .column4 a:hover { } .row:after { content: ""; display: table; clear: both; } /*Configurações de cores*/ /*nivel 1*/ .menu{background:#CCC; } .menu a{ color:#000; } .menu li:hover > a{ color:#000; } /*nivel 2*/ .submenu-1{} .submenu-1 a{color:#000;} .submenu-1 li:hover > a{ color:#000; } /*nivel 3*/ .submenu-2{ } .submenu-2 a{color:#000;}; .submenu-2 li:hover > a{ color:#000; } /*nivel 3*/ .submenu-3{ } .submenu-3 a{color:#000;} .submenu-3 li:hover > a{ color:#000; } <ul class="menu"> <!-- Esse é o 1 nivel ou o nivel principal --> <li><a href="#">Categorias <i class="fa fa-caret-down"></i></a> <ul class="submenu-1"> <!-- Esse é o 2 nivel ou o primeiro Drop Down --> <li><a href="#">Departamento 1 <i class="fa fa-caret-right"></i></a> <ul class="submenu-2"> <!-- Esse é o 3 nivel ou o Segundo Drop Down --> <li><a href="#">Categoria 1</a></li> <li><a href="#">Categoria 11</a></li> <li><a href="#">Categoria 111 <i class="fa fa-caret-right"></i></a> <ul class="submenu-3"> <!-- Esse é o 4 nivel ou o Terceiro Drop Down --> <li><a href="#">Subcategoria 1</a></li> <li><a href="#">Subcategoria 11</a></li> <li><a href="#">Subcategoria 111</a></li> </ul> </li> </ul> </li> <li><a href="#">Departamento 2 <i class="fa fa-caret-right"></i></a> <ul class="submenu-2"> <!-- Esse é o 3 nivel ou o Segundo Drop Down --> <li><a href="#">Categoria 1</a></li> <li><a href="#">Categoria 11</a></li> <li><a href="#">Categoria 111 <i class="fa fa-caret-right"></i></a> <ul class="submenu-3"> <!-- Esse é o 4 nivel ou o Terceiro Drop Down --> <li><a href="#">Subcategoria 1</a></li> <li><a href="#">Subcategoria 11</a></li> <li><a href="#">Subcategoria 111</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> A primeira imagem é o resultado e a segunda imagem, seria o que estou querendo fazer. Alguém consegue me explicar o que está de errado? Agradeço a atenção de todos!
-
Eu gostaria de saber como faço para criar uma area de serviço igual ao dessa página https://ciesalon.com/services deixando ela responsiva
.thumb.jpg.6d2448400c07192c7587b7e6a08fa29a.jpg)
