1
resposta

Projeto

Olá, pessoal, estou fazendo o projeto antes de iniciar a aula, pois já avançamos para aprofundar em flexbox, entretanto estou tendo problemas no meu projeto, com o nav. O desenvolvimento do instrutor é de uma maneira que não estou muito acostumado a ver, então nao consigo sanar minha dúvida, pois enquanto eu faço uma ul para o nav, ele usa um ::before e põe os ícones. Estou fazendo o menu lateral e também os tópicos visitados, que no meu codigo tem nomes navigation e superiorsecaocontainer respectivamente, porém o navigation está ficando com o espaço do header quando eu faço a rolagem para baixo. Já a seção visitador da classe superiorsecaocontainer está muito mal, já tentei trocar e fica com aquela barra de rolagem feia, enfim, conseguem me ajudar antes que eu desista desse projeto, por favor? kk

https://docs.google.com/document/d/11Vb_xOq7USBK3KQMEa3WplfwtkKngeHCKPqkgsv9wmM/edit?usp=sharing

https://docs.google.com/document/d/1oBZY3RBslGz1VojBNNT8FblZY1J9DRbZRYeqpBWuzmQ/edit?usp=sharing

1 resposta

Parece que você está trabalhando em um projeto com um cabeçalho (header), um menu de navegação (navigation), e uma seção superior (superior__secao__container). Vamos abordar os problemas que você mencionou e algumas melhorias no seu código CSS:

Problemas e Melhorias no Código CSS: Espaço do Header no Menu de Navegação (navigation): Para garantir que o menu de navegação (navigation) não ocupe espaço quando a página é rolada para baixo, você já definiu corretamente position: fixed e left: 0. Certifique-se de ajustar a altura corretamente para cobrir a tela inteira usando height: 100vh;. Se você perceber que ainda há espaço extra no topo, pode ser necessário ajustar a posição vertical (top) conforme necessário.

css Copiar código .navigation { width: 239px; height: 100vh; background-color: var(--azul-medio); position: fixed; left: 0; top: 0; /* Ajuste conforme necessário */ } Estilo da Seção Superior (superior__secao__container): Para a seção superior (superior__secao__container), você deseja evitar que ela tenha uma barra de rolagem indesejada (overflow-x: auto;). Certifique-se de que o conteúdo dentro dessa seção não seja maior do que a largura da tela para evitar a barra de rolagem horizontal. Use white-space: nowrap; para garantir que o texto não quebre para a próxima linha.

css Copiar código .superior__secao__container { height: 63px; color: var(--branco-acinzentado); font-size: 16px; background-color: var(--azul-claro); padding: 0 20px; top: 80px; /* Ajuste conforme necessário / right: 0; left: 0; align-items: center; overflow-x: hidden; / Alterado para 'hidden' para esconder a barra de rolagem / white-space: nowrap; / Para evitar que o texto quebre para a próxima linha */ } Estilização dos Itens da Seção Superior (superior__item): Para os itens dentro da seção superior (superior__secao__container), você já está aplicando estilos de hover (:hover) para melhorar a interatividade. Certifique-se de que os estilos de transição (transition) estão sendo aplicados corretamente para suavizar a mudança de cor de fundo e texto.

css Copiar código .superior__item { color: var(--cinza-texto); font-size: 16px; background-color: white; border-radius: 20px; padding: 8px 20px; cursor: pointer; text-decoration: none; transition: background-color 0.5s, color 0.5s; /* Transição suave para mudança de cor */ }

.superior__item:hover { color: white; background-color: var(--azul-escuro); } Observações Finais: Certifique-se de que a estrutura HTML está corretamente organizada para corresponder aos seletores CSS que você está usando. Além disso, utilize ferramentas de desenvolvimento do navegador para inspecionar elementos e debugar problemas de layout e estilo.