Jump to content
Gustavo Brandão

Ajuda com CSS

Recommended Posts

Olá, estou tentando resolver um problema no meu css:

 

Atualmente:

-QQp1nqoT9KGkFLlPH6jhw.png

 

Como quero que fique:

SI5OkiEaQyq5Sz4ys2IbVw.png

 

CSS:

#categories {
    padding: 0;
    margin: -1px 0 0 0;
    display: flex !important;
}

#categories > ul:first-child {
    flex: 1;
}

#categories .nav.navbar-nav li {
    margin: 0;
    height: 100%;
    display: flex;
    border-top: 2.5px solid #FD8C07;
    border-bottom: 2.5px solid #FD8C07;
}

#categories .nav.navbar-nav li:hover {
    border-color: #FD7E07;
}

#categories .nav.navbar-nav li a {
    flex: 1;
    color: #fff;
    padding-left: 25px;
    padding-right: 25px;
    font-size: 16px;
    font-weight: bold;
    text-shadow: 1px 1px 5px #4E4E4E;
}

#categories .nav.navbar-nav li.active {
    border-top: 2.5px solid #FCCA00;
    border-bottom-color: #FD7E07;
}

#categories .nav.navbar-nav li.active::before {
    font-family: FontAwesome;
    content: "\f0d7";
    position: absolute;
    z-index: 20;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    line-height: 5px;
    font-size: 18px;
    text-align: center;
    color: #FCCA00;
}

#categories .nav.navbar-nav li.active a {
    color: #FCCA00;
}

#categories .nav.navbar-nav li.active a,
#categories .nav.navbar-nav li a:hover,
#categories .nav.navbar-nav li:active a,
#categories .nav.navbar-nav li a:active {
    background-color: #FD7E07;
}

#categories .search {
    display: flex;
}

#categories .search input {
    flex: 1;
    border-radius: 0;
    border: none;
    color: #168FFF;
}

#categories .search button {
    flex: 1;
    border-radius: 0;
    color: #168FFF;
    background-color: #fff;
    border: none;
}

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By geivisonsales
      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?
    • By juniorerb21
      Tenho um site em php e quero alterar o cabeçalho e os icones do cabeçalho, e não sei muito de programação, sei o básico, não consegui alterar, quem poder me ajudar vai ser de grande ajuda!

    • By Yiuky
      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&amp;pid=Api&amp;P=0&amp;w=300&amp;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&amp;pid=Api&amp;P=0&amp;w=300&amp;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>
    • By Gabrieli Moda
      Galera, eu faço curso de informática para internet na ETEC e estou fazendo meu TCC.
      Já tô morta de procurar por códigos desse tipo de botão e não consigo encontrar um que funcione. 
      Eu encontrei esse aqui hoje mais cedo, alguém consegue me ajudar consertar? 
       
      <?php // recebe as Variaveis $nome = $_POST['nome']; $email = $_POST['email']; $emailDonatario = $_POST['emailDonatario']; $mensagem = $_POST['mensagem']; //Inclui o arquivo class.phpmailer.php localizado na pasta phpmailer include(class.phpmailer.php); // Inicia a classe PHPMailer $mail = new PHPMailer(); // Define os dados do servidor e tipo de conexão $mail->IsSMTP(); $mail->Host = 'smtp-mail.outlook.com'; // SMTP server example $mail->Port = 587; $mail->SMTPSecure = ‘tls’; $mail->SMTPAuth = true; // Usa autenticação SMTP? (opcional) $mail->Username = ‘MEUEMAIL@outlook.com’; // Usuário do servidor SMTP $mail->Password = ‘*********’; // Senha do servidor SMTP // Define o remetente. $mail->From = 'MEUEMAIL@outlook.com'; // Seu e-mail $mail->FromName = “Samuel”; // Seu nome // Define os destinatário(s) $mail->AddAddress($email . $nome); $mail->AddCC(‘MEUEMAIL@outlook.com’, ‘Eu’); // Copia $mail->AddBCC($emailDonatario . $nome); // Cópia Oculta // Define os dados técnicos da Mensagem $mail->IsHTML(true); // Define que o e-mail será enviado como HTML // Define a mensagem (Texto e Assunto) $mail->Subject = “Mensagem do site”; // Assunto da mensagem $mail->Body = $mensagem . $nome; // Envia o e-mail $enviado = $mail->Send(); // Exibe uma mensagem de resultado if ($enviado) { echo 'E-mail enviado com sucesso!'; } else { echo 'Não foi possível enviar o e-mail!'; }  
      Desde já, agradeço.
    • By proflupin
      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?
×

Important Information

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