3

Possuo um site onde uso dois cabeçalhos para mostrar minhas opções para o usuário, mas me deparei com um problema, preciso colocar o logo da empresa e não estou conseguindo fazer, preciso que a logo fique em um tamanho proporcional ao cabeçalho, se coloco no primeiro ou no segundo a logo fica pequena.

Tentei criar uma estrutura, mas meus conhecimentos de CSS não ajudaram muito, tentei algo como isso:

<style>
.Geral {
    height:120px;

}

#logo {
    float: left;
    width: 220px;
    height: 120px;
    cursor: pointer;
    cursor: hand;
    background-image:url(images/anc.fw.png);
    background-repeat: no-repeat;
}
#superior {
    float: left;
    width: 1005px;
    height: 60px;
}
#inferior {
    float: left;
    width: 1005px;
    height: 60px;

}

</style>

Falando pode ser que eu não consiga exemplificar o que preciso, por isso vou disponibilizar uma imagem.

O site é este e o que tentei fazer foi isto:

3 Respostas 3

5

Tenta essa solução aqui:

<header class="clearfix">
    <div class="logo" style="
    background-color: #59218D;
    width: 20%;
    height: 100%;
    position: absolute;
    float: left;
    z-index: 10000;
">

  </div>
    <div class="navbar navbar-default navbar-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#MenuUm"> <i class="icon-menu-1"></i> </button>
          <!-- <a class="navbar-brand" href="index.html"><img alt="" src="images/anc.fw.png"></a> --> 
        </div>
        <div class="navbar-collapse collapse" id="MenuUm">
          <div class="search-side" style="margin-top: 0px;"> <a href="#" class="show-search"><i class="icon-search-1"></i></a>
            <div class="search-form">
              <form autocomplete="off" role="search" method="get" class="searchform" action="#">
                <input type="text" value="" name="s" id="s" placeholder="Buscar...">
              </form>
            </div>
          </div>
          <ul class="nav navbar-nav navbar-right">
            <li> <a href="catalogos.php" style="padding-top: 28px; padding-bottom: 28px;">catálogos e manuais</a> </li>
            <li> <a href="cores.php" style="padding-top: 28px; padding-bottom: 28px;">cores e linha</a> </li>
            <li> <a href="garantia.php" style="padding-top: 28px; padding-bottom: 28px;">garantia e uso</a> </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="navbar navbar-default navbar-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#MenuDois"> <i class="icon-menu-1"></i> </button>
        </div>
        <div class="navbar-collapse collapse" id="MenuDois"> 
          <!-- Início da Lista de Navegação-->
          <ul class="nav navbar-nav navbar-right">
            <li> <a href="index.php" style="padding-top: 28px; padding-bottom: 28px;">INÍCIO</a> </li>
            <li> <a href="empresa.php" style="padding-top: 28px; padding-bottom: 28px;">EMPRESA</a> </li>
            <li> <a href="produtos.php" style="padding-top: 28px; padding-bottom: 28px;">PRODUTOS</a> </li>
            <li> <a href="representantes.php" style="padding-top: 28px; padding-bottom: 28px;">REPRESENTANTES</a> </li>
            <li> <a href="encontrar.php" style="padding-top: 28px; padding-bottom: 28px;">ONDE ENCONTRAR</a> </li>
            <li><a href="contato.php" style="padding-top: 28px; padding-bottom: 28px;">CONTATO</a></li>
          </ul>
        </div>
      </div>
    </div>
  </header>

Ficou assim:

Imagem exemplo

No caso eu usei uma cor para demonstrar, mas é só trocar por uma imagem.

Explicação:

  • Criei uma div nova para alocar a imagem com um `backgroud´.
  • Usei o z-index para deixar a imagem por cima das outras duas divs.
  • Com Position: Absolute deixei ele estático na posição.

Observação:

No responsivo ele precisa de alguns ajustes, porém poucos ajustes. Você pode fazer a logo ficar para cima da navbar no responsivo, acredito que seria a melhor solução.

Substitui todo o header por esse código.

3
  • Olá @GiovanniBernini, obrigado pela grande ajuda, mas me diga uma coisa, se possível, como posso deixar a logo acima da navbar? Commented 13/11/2015 às 16:15
  • @adventistapr Você pode usar css com media queries para arrumar isso, por exemplo @media screen and (min-width: 400px) and (max-width: 600px) {.logo{float:none; position: relative;}} Você controla que em certo tamanho de tela, tal coisa irá mudar. No exemplo que eu dei, entre 400 e 600px a classe logo, não vai ter mais o float: left e o position: absolute, logo a div do logo, não vai mais ficar do lado em cima das outras divs. Commented 13/11/2015 às 16:58
  • Olá novamente @GiovanniBernini, devo estar fazendo algo errado, mas a alteração que fiz como código sugerida não surtiu efeito. Commented 13/11/2015 às 20:24
1

você pode deixar o seu header e apenas posicionar os #logo, #superior, #inferior dentro do header.

header, div {
  box-sizing: border-box;
}

header {
  position: relative;
  width: 1220px;
  max-width: 90%;
  height: 120px;
  top: 0px;
  right: 0px;
  left: 0px;
  margin: 0px auto;
  
}

#logo {
  position: absolute;
  width: 120px;
  top: 0px;  
  bottom: 0px;
  left: 0px;
  
  border: 1px solid red;
  background-color: rgba(255, 0, 0, 0.1);
}

#superior {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 60px;
  left: 120px;
  
  border: 1px solid green;
  background-color: rgba(0, 255, 0, 0.1);
}

#inferior {
  position: absolute;
  top: 60px;
  right: 0px;
  bottom: 0px;
  left: 120px;   
  
  border: 1px solid blue;
  background-color: rgba(0, 0, 255, 0.1);
}


#superior, #inferior {
  text-align: right;
  line-height: 40px;
  padding: 10px;
}
<header>
  <div id="logo"></div>
  <div id="superior">
    Superior
  </div>
  <div id="inferior">
    Inferior
  </div>
</header>

Tomei a liberdade de aplicar algumas alterações no estilo da sua pagina usando o Developer Tools do Opera, segue a imagem da janela do mesmo já com as alterações aplicadas:

inserir a descrição da imagem aqui

eu apaguei a div.hidden-header, pois como ela te um height fixo, ela estava empurrando o header.clearfix para baixo... caso prefira, pode simplesmente remover o height do div.hidden-header ou aplicar um position: absolute ao header.clearfix.

Por fim, adicionei uma div#logo a sua logo deverá ficar dentro dele, e o valor do width da div#logo, left do div.nav-top:nth-child(0) e left do div.nav-top:nth-child(1) devem ser iguais, de preferencia use a largura da imagem do logo.

5
  • Como posso postar o exemplo de como a minha página está ficando depois das dicas informadas? Ainda não consegui, mas gostaria de postar para possível ajuda, edito a minha pergunta colocando o código atual? Creio que deixaria descaracterizada. Commented 17/11/2015 às 12:13
  • @adventistapr, atualizei a resposta com uma edição aplicada direto ao seu HTML. Commented 17/11/2015 às 15:09
  • Olá@TobyMosque, não estou conseguindo identificar onde estão essas opções div.nav-top:nth-child(0) e left do div.nav-top:nth-child(1) para fazer a alteração. Commented 17/11/2015 às 15:54
  • Este e um seletor css, :nth-child() selecioma um elemento pelo indice, entao estava me referindo a primeira e a segunda div com a classe nav-top Commented 17/11/2015 às 16:07
  • Olá @TobyMosque, obrigado pela ajuda e grande paciência, fiz as alterações solicitadas, ficaram legais, mas tenho agora um novo problema, acesse: ancestofados.com.br/anc e redimensione até a menor resolução e tente navegar pelas opções do menu, por favor. Commented 17/11/2015 às 16:45
1

Agora que notei que é uma questão duplicada, então vou migrar minha resposta para cá, já que este tópico está mais desenvolvido.

Outro modo de obter o resultado seria:

Primeiramente, se você pretende deixar o seu trabalho reponsivo, ou seja, acessível em mobile, não é recomendável utilizar um valor de width fixo, como você fez nas divs #logo, #superior e #inferior, pois quando o website for acessado em mobile, ele terá um "scroll" horizontal. Utilize % ao invés disso.

Quanto a sua dúvida em si, a ideia é que você crie um bloco para armazenar todo o conteúdo. Logo, menu superior e inferior.

Dentro dela você terá ainda 2 sub blocos para armazenar, sendo 1 para o logo e outro para os 2 menus. Depois basta dividir os 2 menus com largura 100% dentro do bloco destinado apenas ao menu.

Assim você não cria dependência de position ou entre os diferentes conteúdos (menu e logo).

Fiz um exemplo que está funcionando com a ideia geral disso, dê uma olhada e veja se resolve o seu problema: http://jsfiddle.net/f19tc70y/1/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .