Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Aplicação do layout da página no index

Referente ao curso HTML5 e CSS3 parte 2: posicionamento, listas e navegação

por Jean Felipe Alves dos Santos
| 56.2k xp | 8 posts

Como o professor pediu, em forma de exercício, tentei atualizar o 'header' e o 'footer' do 'index' com as configurações do 'produtos.html', porém não consigo fazer com que os elementos do

fiquem em ordem, na horizontal, assim como fizemos no produtos.html: .Imagem do Header na página produtos.html E aqui como está na pág do index: Insira aqui a descrição dessa imagem para ajudar na acessibilidade Já tentei centralizar os itens conforme um artigo para centralização de elementos no CSS mas não consegui. Aqui o header no index.html e o CSS: 
`<header>
<div class="caixa">
    <h1><img src="logo.png"></h1>

    <nav>
        <ul class="navegacao">
            <li><a href="index.html">Home</a></li>
            <li><a href="produtos.html">Produtos</a></li>
            <li><a href="contato.html">Contato</a></li>
        </ul>
    </nav>
header {
    background: #BBBBBB;
    padding: 20px 0; 
}

.caixa {
    width: 940px;
    position: relative;
    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;
}`
4 respostas
por Lorena Garcia
| 8349.6k xp | 12208 posts
Alura Scuba Team Suporte Educacional

Oi Jean, tudo bem?

Você poderia mandar seu código HTML e CSS todo? Pelo o que você mandou está tudo correto, pode ser que tenha algo no resto do código que possa estar causando esse erro.

Fico no aguardo!

Bons estudos.

por Jean Felipe Alves dos Santos
| 56.2k xp | 8 posts

Olá, Lorena. Vou bem obrigado :D Aqui o código:

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8"> 
        <title>Barbearia Alura</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="style-home.css">
    </head>
    <body>
        <header>
            <div class="caixa">
                <h1><img src="logo.png"></h1>

                <nav>
                    <ul class="navegacao">
                        <li><a href="index.html">Home</a></li>
                        <li><a href="produtos.html">Produtos</a></li>
                        <li><a href="contato.html">Contato</a></li>
                    </ul>
                </nav>
           </div>
        </header>
        <img id="banner" src="banner.jpg">
        <div class="principal">
            <h2 class="titulocentralizado">
                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 de nossos clientes.</p>
        </div>          

        <div class="beneficios">
            <h3 class="titulocentralizado">
                Benefícios
            </h3>
            <ul>
                <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>
            </ul>

            <img class="imagembeneficios" src="beneficios.jpg">
        </div>
        <footer>
            <img src="logo-branco.png">
            <p class="copyright">© Copyright Barbearia Alura - 2019</p>
        </footer>
    </body>
</html> 

header {
    background: #BBBBBB;
    padding: 20px 0; 
}

.caixa {
    width: 940px;
    position: relative;
    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;
}

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

#banner {
    width: 100%;
    background: #CCCCCC;
}

.principal {
    background: #CCCCCC;
    padding: 30px;
}

.titulocentralizado {
    font-size: 40px; 
    text-align: center; 
    padding: 30px 0;
}

p {
    text-align: center;
}

#missao {
    font-size: 20px;
}

em strong {
    color: #FF0000;
}

.beneficios {
    background: #FFFFFF;
    padding: 20px;
}

ul {
    display: inline-block;
    vertical-align: top;
    width: 20%;
    margin-right: 15%;
}

.itens {
    font-style: italic;
    font-size: 20px;
    padding: 10px 10px;
}

.imagembeneficios {
    width: 50%;
}

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

.copyright {
    color: #FFFFFF;
    font-size: 13px;
    margin-top: 20px;
}
solução!
por Jean Felipe Alves dos Santos
| 56.2k xp | 8 posts

Então, na verdade eu consegui corrigir aqui agora. Estava olhando o código pela 5ª vez, até que eu vi mais em embaixo no css um código "ul" e pensei que poderia estar conflitando com o "ul" do header, então eu dei uma classe pra ele e consegui consertar.

por Lorena Garcia
| 8349.6k xp | 12208 posts
Alura Scuba Team Suporte Educacional

Oi Jean!

Que bom que conseguiu resolver o problema! É assim mesmo, às vezes precisamos de um tempo para acharmos nosso erro no código.

Parabéns por não desistir e bons estudos :D

Abraços.