Bom dia.
Seguindo as orientações do curso para esta aula, fiz o posicionamento do menu de navegação (main nav) conforme orientação, porém quando alteramos o tamanho da janela do navegador ocorrem problemas no posicionamento deste menu (não fica exatamente responsivo) Procurando dar uma cara diferente à proposta do curso, alterei as classes .titulo-principal, .minha-foto, .navegacao-site e .rodape-pagina e assim, quando fizermos a rolagem das barras vertical e horizontal este blocos da página estarão sempre visíveis para o visitante. Acontece que no caso do bloco de navegação, não consegui garantir que o posicionamento fique rente e imediatamente abaixo da foto (não ficou responsivo), e mesmo entre o titulo da página e a foto ao alterar o tamanho da página ocorre uma separação entre estes blocos. Como posso construir com garantia que isto não venha a ocorrer com a minha página causando um "desconforto" para o visitante, dependendo da instalação que ele tenha (monitor, navegador, tamanho da página, etc). Utilizei a seguinte configuração:
.minha-foto { background-image: url(eu.jpeg); position: fixed; right: 0px; top: 0px; width: 20%; } .navegacao-site { background-color: #3C1D3D; color: #F2FFFC; font-family: "Open Sans Condensed", sans-serif; margin: 0px; padding: 20px; position: fixed; right: 0px; text-align: center; text-transform: lowercase; top: 183px; } .minha-foto, .navegacao-site { box-sizing: border-box; border-bottom: 5px solid black; border-left: 5px solid black; border-right: 5px solid black; float: right; } .rodape-pagina { background-color: #000; bottom: 0px; color: #F2FFFC; margin: 0px; padding: 10px; position: fixed; width: 100%;} .titulo-principal { background-color: #851944; border-bottom: 5px solid #000; color: #FFF; font-family: "Open Sans Condensed", "Arial", sans-serif; font-size: 60px; margin: 0px; padding: 10px; text-align: center; text-transform: uppercase; position: fixed; width: 80%; left: 0; top: 0; }
Também gostaria de confirmar que, utilizando o "position" podemos afirmar que não mais serão necessários os float? Fiz um teste com retirando a propriedade "float" da classe .minha-foto e parece que funcionou ...
