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

Alinhamento dos menus

Olá a todos! Nesta aula foi informado que a imagem possui 240px e para que o elemento fique ao meio da mesma, deveríamos atribuir 110px ao topo . A dúvida é: além da medida da imagem ele levou em consideração também o espaço superior e inferior que fica entre a mesma?

4 respostas

Olá, Rosilene.

Tudo bem?

É que a imagem por ser .png ela não tem um fundo visível, porém o fundo ta lá e ele interfere no tamanho da imagem, nesse caso o professor levou em conta o tamanho total da imagem.

Você consegue ver o tamanho dos elementos pelo especionar da ferramenta do desenvolvedor Dev Tools no próprio navegador apertenado a tecla F12.

Espero ter ajudado.

Qualquer dúvida conta com a gente :)

Valeu Rosilene.

Obrigada, Renan por responder. Então...isso eu sei, mas o que não consigo compreender é o fato dele ter colocado 110px em vez de 120px, já que o tamanho total da imagem é de 240px.

Entendi, é que foi uma conta, não precisamente mas sim para ter uma base.

Se for fazer precisamente, a tag <nav> ta dentro da <div class="caixa"> e a <div class="caixa"> tem uma altura de 253px já a <nav> tem 22px então para ficar perfeitamente no centro teria que fazer a conta 253 - 22 e dividir o resultado por 2 que daria 115,5 então ficaria top: 115.5px;, porém não precisa fazer contas e se apegar tanto a essa precisão, existe por exemplo o FlexBox no CSS que facilita as coisas para nós desenvolvedores, ele posiciona os elementos no centro de forma muito mais fácil sem precisar calcular, e é muito utilizado hoje em dia.

Você pode aprender Flexbox nesse curso muito bom da Alura: https://cursos.alura.com.br/course/css-dispondo-elementos-flexbox-grid

Espero ter ajudado.

Qualquer dúvida manda aqui de novo :)

solução!

Agora entendi, muito obrigada!! Me ajudou muito!! ;)