Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Aplicação de estilo menu

Olá, boa noite. gostaria de tirar uma pequena dúvida com relação a minha conclusão do briefing com a do gabarito.

Com o CSS que fiz, cheguei ao resultado desejado, mas aplicando em elementos diferentes conforme mostrarei abaixo:

.header {
    background: url("../img/destaque.jpeg") no-repeat;
    background-size: cover;
    padding: 2em 0;
}
.header>.navbar>ul {
    text-align: center;
}
.header>.navbar>ul>li{
    display: inline-block;
    padding: 1.5em 0.3em;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    margin: 0 0.2em;
    transition: background-color 0.5s;
}
.header>.navbar>ul>li:hover {
    background-color: #48A3A6;
}
.header>.navbar>ul>li>a {
    color: #FFF;
    text-decoration: none;
    font-weight: bold;
    padding: 1.5em;
    text-transform: uppercase;
}

A questão é: eu não apliquei os fundos no link, e sim na item (li). Isso é uma pratica incomum/incorreta? Aplicar isso diretamente no link é uma pratica melhor de se adortar?

Desde já agradeço pela atenção

3 respostas
solução!

então no css da para fazer varias coisas de diferentes modo e é bom vc tentar fazer de outros jeitos, mas eu aconselho vc colocar o padding e hover no <a></a> pq se vc colocar eles no li a área que o usuário podera clickar para ser redirecionado para outra pagina e muito menor, eu montei esse exemplo para te explicar melhor e vc decide qual faz mais sentido. click aqui ou aqui se não estiver funcionando o primeiro

Tudo bem, mas para contornar a área de click do usuário, também acrescentei um padding na tag . ela esta do mesmo tamanho que a li, como pode ser visto no meu exemplo https://jsfiddle.net/btgvfuyz/

mano não tem sentido vc ta criando dois padding, e duas propriedades um com hover, e ne outro para clickar, em vez de criar um padding, e utilizar só ela para para clickar, e colocar o hover, ou demais funcionalidades em uma propriedade, mas é claro que vc pode utilizar e vai funcionar perfeitamente, mas a logica do código é afetada.

se vc não entendeu muito bem pega seu código e adicionar um background: red; na tag <a></a>

espero ter te ajudado :)