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

ajuda para centralizar o cabeçalho.

ola.

estou criando um cabeçalho para a pagina index da barbearia assim como criamos para a pagina dos produtos, mas por alguma razao, nao estou conseguindo centralizar a foto junto com os link's...

alguem consegue me ajudar?

segue os codigos:

!DOCTYPE html>

<body>
    <header>
        <div class="caixa"></div>
            <h1><img src="logo-branco.png"></h1>
                <nav>
                    <ul>
                        <li><a href="index5.html">Home</a></li>
                        <li><a href="produtos5.html">Produtos</a></li>
                        <li><a href="contato5.html">Contato</a></li>
                    </ul>
                </nav>
        </div>
    </header>
</body>
<main>
    <img class="banner" src="banner1.jpg.jpg">

    <div class="principal">

        <h2 class="titulo-centralizado">Sobre a Barbearia Alura</h2>

        <p>Localizada no coração da cidade a <strong>Barbearia Alura</strong> traz para o mercado o que há de melhor para o seu cabelo e barba. Fundada em 2019, a Barbearia Alura já é destaque na cidade e conquista novos clientes a cada dia.</p>

        <p id="missao"><em>Nossa missão é: <strong>"Proporcionar auto-estima e qualidade de vida aos clientes"</strong>.</em></p>

        <p>Oferecemos profissionais experientes e antenados às mudanças no mundo da moda. O atendimento possui padrão de excelência e agilidade, garantindo qualidade e satisfação dos nossos clientes.</p>

    </div>

    <div class="beneficios">

    <h3 class="titulo-centralizado">Benefícios</h3>

        <ul class="itens-sobre">
            <div class="ajuste-itens">

                <li class="itens">Atendimento aos Clientes</li>
                <li class="itens">Espaço diferenciado</li>
                <li class="itens">Localização</li>
                <li class="itens">Profissionais Qualificados</li>
            </div>
        </ul>

        <img src="beneficios.jpg.jpg" class="imagembeneficios">

    </div>
</main>
<footer>

    <img src="logo-branco.png">

    <p class="copyright">&copy; Copyright Barbearia Alura by Douglas 2021</p>

</footer>
``

CSS

header {
    background: url(bg.jpg);
    padding: 20px;
}
.caixa{
    width: 940px;
    margin: auto;
    position: relative;

}

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

}

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

}

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

}

.banner {
    width: 100%;
}

.principal {
    background: url(bg.jpg);
    padding: 30px;
    color: #CCCCCC;
}

.titulo-centralizado {
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    padding: 30px;
}

p {
    text-align: center;
}

#missao {
    font-size: 20px;
}

em strong {
    color: #FF0000;
}


.itens {
    font-style: italic;
}

.beneficios {
    background: #FFFFFF;
    padding: 20px
}
.ajuste-itens{
    position: relative; 
    top: 160px; 
    left: 100px;


}

.itens-sobre {
    display: inline-block;
    vertical-align: top;
    margin-right: 15%;
}

.imagembeneficios {
    width: 50%;
}

footer{
    text-align: center;
    background: url(bg.jpg);
    padding: 40px;

}

.copyright{
    font-size: 13px;
    color: #FFFFFF;
}
5 respostas

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

solução!

Bom dia Douglas, tudo bem?

Então, para começar vi que você fechou seu body muito cedo em teu código, devemos fechar essa tag sempre após todo nosso conteúdo (incluindo cabeçalho e rodapé).

Sobre a centralização, você pode fazer dessa forma;

header {
    background: url(bg.jpg);
    padding: 20px;
    margin: auto;
}
.caixa{
    width: 940px;
    margin: auto;
    position: relative;
    display: inline-block;
}

h1 {
  display: inline-block;
  position: absolute;
  left: 150px;

}

nav{
    display: inline-block;
    position: absolute;
    right: 150px;
}

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

}

fala Kelvin, blz

obrigado pela dica do body.

quanto a centralização, eu copiei seu codigo e e ficou todo desalinhado, mas atraves dele consegui centralizar o cabeçalho. fiz essas alterações apenas e deu certo.

h1 {
    position: relative;
    left: 200px;
}

nav{
    position:absolute;
    top: 110px;
    right: 200px

e deu certo.

obrigado amigo!!!

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

Boa!!! É isso aí meu amigo, sucesso na nossa caminhada!