5
respostas

Posicionamento do Logo

Olá,

Penso que no meu caso, o logo da página produtos está mais centralizado do que o exemplo: Insira aqui a descrição dessa imagem para ajudar na acessibilidadeHTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Produtos - Barbearia Alura</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="produtos.css">
    </head>

    <body>
        <header>
            <div class="caixa">
                <h1><img src="logo.png"></h1>

                <nav>
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="produtos.html">Produtos</a></li>
                        <li><a href="Contacto.html">Contacto</a></li>
                    </ul>
                </nav>       
            </div>
        </header>
    </body>
</html>
CSS:
header{
    background: #BBBBBB;
    padding: 20px 0;
}

.caixa{
    position: relative;
    width: 940px;
    margin: 0 auto;
}

nav{
    position: absolute;
    top: 110px;
    right: 0;
}

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

nav a {
    text-transform: uppercase;
    color: #000000;
    font-weight: bold;
    font-size: 22px;
    text-decoration:none;

}

Obrigado.

5 respostas

Boa noite, Emanuel!

Acredito que essa diferença ocorra devido à largura de tela do seu monitor. No CSS, a largura da classe caixa foi limitada a 940px, então se você quiser, pode aumentar esse valor para que o conteúdo ocupe mais espaço na tela, ficando menos centralizado. Por exemplo, experimente uma width de 1080px, dessa forma:

.caixa {
    position: relative;
    width: 1080px;
    margin: 0 auto;
}

Espero ter ajudado, abraços

Obrigado pela ajuda Gabriel :)

No entanto com 1080px também só ajusta um pouco. Vou ter de aumentar mais um pouco. Sabes dizer quais as resoluções mais utilizadas?

Abraços

Que bom que deu certo!

Essa questão de criar um site que possua uma boa visualização em dispositivos com tamanhos de tela variados, como smartphones, tablets, notebooks, se chama responsividade. Existem os chamados breakpoints , que são algumas das larguras de tela mais utilizadas, como por exemplo:

Para desktop, costuma-se trabalhar na faixa dos 1200px a 1600px. Porém, atualmente o meio mais utilizado para acessar a internet têm sido os dispositivos móveis, então é interessante dar um bom suporte para telas menores. Existe ainda o conceito de "mobile first", onde projetamos inicialmente todo o layout do site tendo como base uma tela de celular e em seguida fazemos os ajustes para que ele seja responsivo em telas maiores.

Conforme você for progredindo nos seus estudos, vai acabar se deparando com esse assunto. Inclusive, tem um curso muito bom aqui da Alura que eu fiz recentemente sobre o tema, "Layouts Responsivos: Trabalhando com layouts mobile" (https://cursos.alura.com.br/course/mobile-first-layouts-responsivos), no qual são abordados vários desses tópicos, então fica a indicação!

Se quiser ler mais sobre breakpoints e responsividade, recomendo também estes sites:

Muito obrigado pela ajuda ;)

Por nada, amigo.

Não esqueça de marcar o tópico como solucionado para ajudar futuros colegas que possam ter a mesma dúvida que você. ;)

Abraços,