1
resposta

quando o navegador é minimizado

Insira aqui a descrição dessa imagem para ajudar na acessibilidade Quando o navegador é minimizado os itens da caixa não são redimensionado juntos :

<!DOCTYPE html>
<html lang="pt-BR">
    <head>    
        <meta charset="UTF-8">
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="estilo_isac.css">
        <title>Herpetologia-Isac</title>    
    </head>
    <body>
        <header>
            <img src="logoherpetologia.png" class="logoheader">
            <div class="caixa">
                <p><h1 class="titulo">Chunb - </h1></p>
                <p><h2>Coleção Herpetologica da UNB</h2></p>
                    <nav>
                        <ul>
                            <li> <a href="Inicio.html ">Início</a></li>
                            <li> <a href="anficios.html ">Anfíbios</a></li>
                            <li> <a href="repteis.html ">Répteis</a></li>
                            <li> <a href="contato.html ">Contato</a></li> 
                        </ul>
                    </nav> 
                </p>
            </div>
        </header>
    </body>
    <footer>
    </footer>    
</html>
header{
    background: url(verde2.jpg);
    padding: 10px 10px;

}
.logoheader{
    height: 200px;
    width: 200px;
}

.caixa{
    position: absolute;
    width: 1000px;
}

div{
    display: inline;
    right: 500px;
    top: 75px;
}
.titulo{
    vertical-align: top;
    font-size: 50px;
    text-transform: uppercase;
    color: #FFFFFF;
    font-family:Verdana;
}

div h2{

    font-size:30px;
    color: #FFFFFF;
    font-family: Verdana;   
}
nav {
    position: absolute;
    top: 25px;
    right: 35px;
}
nav ul{
    left: 20px;
}

nav li{
    display: inline;
    margin: 0 0 0 15px;

}
nav a {
    text-transform: uppercase;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 20px;
    text-decoration: none;
    font-family:Verdana;
}

nav a:hover {
    color: #00ad63;
    text-decoration: underline;
}

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta

Olá, Davi.

Tudo bem?

Se quando você fala em "minimizar", você está se refereindo a diminuir o tamanho da tela do navegador e com isso ele empurra as letras para a esquerda. Isso acontece porque você fez a versão de desktop e se em tela cheia está tudo certo é isso aí, agora para quando a tela está menor você precisa trabalhar em uma coisa que chamamos de responsividade para diferentes tamanhos de telas, e isso o professor vai abordar no final do próximo curso de HTML e CSS dessa formação que é a parte 4:

HTML5 e CSS3 parte 4: avançando no CSS

https://cursos.alura.com.br/course/html5-css3-avancando-css

Porém o que causa isso é o position: absolute; do CSS teria que mudar mas pensando na outra tela menor já, então melhor entender sobre responsividade primeiro através do curso pelo link que coloquei aqui.

Espero ter ajudado.

Qualquer dúvida manda aqui no fórum. Valeu!