Jump to content
Sign in to follow this  
alessandromatoss

header

Recommended Posts

Fala galera sou novo na área e estou voltando para área de desenvolvimento web depois de 10 anos trabalhando com infra...

Andei fazendo uns cursos pra atualizar mas tudo mudou kkk atrasado mesmo...estou trabalhando a tag <header> e gostaria de colocar a logo do lado esquerdo e uns informações do meio e uns icones do lado direito...

 

Estou em duvida se dentro do header posso usar as divs para fazer essa divisão? Ou se é a melhor maneira de fazer isso.

 

Obrigado;

 

 

Alessandro matos

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
Sign in to follow this  

  • Similar Content

    • By EdPaulino
      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">&#9776;</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>
       
      --->

    • By s3c0
      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!


    • By Ewerton Hugo
      Boa noite, estou tentando fazer um site, que mostre a hora no momento que é acessado, juntamente com uma imagem que represente os periodos do dia, manhã
      , tarde e noite.Porém não consigo fazer com que o código em java script funcione alguém pode me ajudar (sou iniciante)?
       
       
       
    • By huntressDc
      Estou com uma atividade de aula para fazer e gostaria de uma ajuda, devo receber do usuário o valor da compra e o valor pago, e então exibir o troco. Até aí ok, só que também pede para exibir numa textarea as notas utilizadas no troco, informando sempre o mínimo de notas possíveis, exemplo:
       
       
      vlrCompra = 53,00 vlrPago = 100,00 vlrTroco = 47,00 notasTroco = 4 notas de 10,00 1 nota de 5,00 2 notas de 1,00  
      Não sei como fazer essa última parte, alguém para me ajudar? AS NOTAS QUE EU TENHO DISPONIVEIS SAO 1, 5, 10, 50
      Eis o que fiz até agora:
       
      function calculaTroco(){          var valorCompra = parseFloat($("#valorCompra").val());     var valorPago = parseFloat($("#valorPago").val());     var valorTroco = 0;          if (validarCampos() && validarNan()){         if (valorPago == valorCompra){             valorTroco = 0;             $("#valorTroco").val(valorTroco);             alert("Não gerou troco");                      }else if(valorPago > valorCompra){                          valorTroco = valorPago - valorCompra;             $("#valorTroco").val(valorTroco);                      }else{             alert("Não gerou troco (Valor pago menor que valor da compra)");         }         notasUtilizadas();         $("#valorCompra").val("");         $("#valorPago").val("");         $("#valorCompra").focus();     } } validarCampos() e validarNan() são apenas funções de tratamento. A função notasUtilizadas() seria a função que não estou conseguindo fazer... Devo utilizar array, if, for nessa atividade.
       
      Se alguém puder me ajudar, me dar umas dicas, agradeço muito!
       
      Parte do HTML:
      <!DOCTYPE html>
      <html lang="pt-BR">
          <head>
              <meta charset="utf-8"/>
              <title>Calcular Troco</title>
              <script type="text/javascript" src="jquery.js"></script>
              <style type="text/css">
                  fieldset { width:250px; }
                  label { display:block; float:left; } 
                  label, input, textarea, select { width:150px; margin: 5px 0; }
                  th, td { border:1px solid #ccc; font-size:0.9em; }
              </style>
          </head>
          <body>
              
              <form id="formulario">
                  <fieldset>
                      <legend>Calcular Troco</legend>
                      
                      <label for="valorCompra" >Valor da compra:</label>
                      <input type="text" id="valorCompra" name="valorCompra" /><br />
                      
                      <label for="valorPago" >Valor pago:</label>
                      <input type="text" id="valorPago" name="valorPago" /><br /><br />
                      
                      <button type="button" id="button" onclick="calculaTroco()">Calcular troco</button><br /><br />
                      
                      <label for="valorTroco" >Valor do troco:</label>
                      <input type="text" id="valorTroco" name="valorTroco" readonly="readonly"/><br /><br />    
                      
                      <label for="notasUtilizadas">Notas utilizadas:</label>
                      <textarea rows="3" id="notasUtilizadas" readonly="readonly" ></textarea><br/>
                      
                  </fieldset>
              </form>
          <script type="text/javascript" src="troco.js"></script>
          </body>
      </html>
×

Important Information

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