Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Ajuda com o cabeçalho

Referente ao curso Arquitetura CSS: descomplicando os problemas

por Vander Polezel Michellão
| 149.7k xp | 98 posts

Olá,

Alguém consegue me ajudar? Estou estudando e tentando fazer um cabeçalho similar ao sites como Kabum e Americanas, onde tem na primeira parte um menu para pesquisa, favoritos, login, sac e cesta e abaixo na segunda parte tem um menu de navegação, onde está todos departamentos, lançamentos, electrónicos, etc... Gostaria de saber como criar esse menu, se consigo deixar tudo dentro da tag

, no código abaixo, só conseguir fazendo uma parte dentro da tag header e outra dentro de uma tag div, se coloco tudo dentro da tag header fica tudo agrupado, alguém consegue me dar uma orientação, segue abaixo o código e os prints. 
 <header class="cabecalho">

        <div class="menu__hamburgue">
        </div>

        <div class="logo">
            <img src="img/logo.png" alt="logo">
        </div>

        <div id="pesquisa">
            <input type = "text" name="search" id="search" placeholder = "Faça sua Busca"> 
        </div>  

        <div id="login">
            <a href="#">
                <img  src="img/login.png" alt=""> Faça seu login ou crie sua conta
            </a>    
        </div>

        <div id="sac">
            <a href="">
                <img src="img/sac.png" alt="">
            </a>
        </div>

        <div id="favorito">
            <a href="">
                <img src="img/favorite.png" alt="">
            </a>
        </div>

        <div id="carrinho">
            <a href="">
                <img  src="img/shopping-cart.png" alt="">
            </a>
        </div>

    </header>

    <div class="cabecalho__secundario">    
        <nav class="menu">
                <ul class="menu__lista">
                    <li class="menu__item"><a class="menu__link menu__principal ativo" href="#">TODOS OS DEPARTAMENTOS</a></li>
                    <li class="menu__item"><a class="menu__link" href="#">LANÇAMENTO</a></li>
                    <li class="menu__item"><a class="menu__link" href="#">DESTAQUES</a></li>
                    <li class="menu__item"><a class="menu__link" href="#">JOGOS</a></li>
                    <li class="menu__item"><a class="menu__link" href="#">OFERTAS DO DIA</a></li>
                </ul>
        </nav>
    </div>

Como ficou: 

![Cabeçalho com a separação do menu de navegação, fora da tag header](https://cdn1.gnarususercontent.com.br/1/884140/65b301c0-c762-4780-bac9-a38ca5351fed.png) 


Como ficou, colocando todo código dentro da tag <header>



![Cabeçalho com todo código dentro do header](https://cdn1.gnarususercontent.com.br/1/884140/22e72c92-d755-4fff-bd7a-dd97db8dea81.png)  

Alguém pode me ajudar, estou querendo saber a forma certa de boas práticas e deixar tudo dentro da tag header e se realmente é o correto?

Obrigado!
2 respostas
solução!
por Guilherme Guerra de Faria
| 63.1k xp | 3 posts

Olá Vander!

Essa questão acredito que esteja mais relacionada em deixar o html semântico. Assim, por entender que td faz parte do cabeçalho vc teria que estruturar o código dividindo o conteúdo dentro da tag header, por exemplo:

<header>
    <div>
        <div class="menu__hamburguer"></div>
        <div class="logo"></div>
        <div id="pesquisa"></div>  
        <div id="login"></div>
        <div id="sac"></div>
        <div id="favorito"></div>
        <div id="carrinho"></div>
    </div>

    <nav>
        <ul></ul>
    </nav>
</header>

Dessa forma fica entendível pra qualquer pessoa que olhar para o código ver que td isso faz parte do header.

por Vander Polezel Michellão
| 149.7k xp | 98 posts

Olá Guilherme,

Obrigado meu amigo, me ajudou bastante! Eu me atrapalhei, colocando muitas div e não fiz a divisão correta como explicou, agora entendi! Precisava fazer uma div para englobar a primeira parte e a nav para os menus.

Deixei tudo na tag

e criei uma div para a primeira parte onde tem o cabeçalho de pesquisa e outra ficou na tag para os menus e não ficou desconfigurado, como me indicou. Muito obrigado mesmo pela explicação!

Segue abaixo, como deixei: 

`    <header class="cabecalho">

    <div class="cabecalho__busca">
        <a href="index.html"><img src="img/logo.png" alt="logo"></a>             
        <input  class="pesquisa" type = "text" name="search" id="search" placeholder = "Faça sua Busca"> 
        <a href="login.html"> <img  src="img/login.png" alt="imagem do login">Faça seu login ou <br> crie sua conta </a>    
        <a href="#"> <img src="img/sac.png" alt="Imagem Sac"> </a>
        <a href="#"> <img src="img/favorite.png" alt="Imagem do Favorito"> </a>
        <a href="#"> <img  src="img/shopping-cart.png" alt="Imagem do Carrinho"> </a>        
    </div>

        <nav class="cabecalho__menu">
                <ul class="menu__lista">
                    <li class="menu__item"><a class="menu__link menu__principal ativo" href="#">Todos os departamentos</a></li>
                    <li class="menu__item"><a class="menu__link" href="#">Lançamentos</a></li>
                    <li class="menu__item"><a class="menu__link" href="#">Destaques</a></li>
                    <li class="menu__item"><a class="menu__link" href="#">Jogos</a></li>
                    <li class="menu__item"><a class="menu__link" href="#">Ofertas do Dia</a></li>
                </ul>
        </nav>

</header>   `


Agora está mais semântico e correto! Muito Obrigado por me ajudar!!!