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

dificuldade de deixar o cabeçalho inline

Referente ao curso HTML5 e CSS3 parte 2: posicionamento, listas e navegação, no capítulo Finalizando a página de produtos e atividade Projeto da aula anterior

por Anderson Escudeiro
| 23.8k xp | 10 posts

Estou passando o cabeçalho da pagina produtos para pagina home, porém os itens de seleção HOME, PRODUTOS e CONTATO não estão em linha, na página produtos está correto, não entendi, pois apenas copiei e colei conforme descrito abaixo: Na pagina html.

<head>
        <meta charset="UTF-8">
        <title>Barbearia Alura</title>
        <link rel="stylesheet" href="style.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="contato.html">Contato</a></li>

                    </ul>
                </nav>
            </div>    

            <h1 class="titulo-principal">Barbearia Alura</h1>
        </header>

Na pagina 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;
}

nav a:hover{
    color: #c78c19;
    text-decoration: underline;
}
4 respostas
solução!
por Leonardo Negrão
| 417.9k xp | 612 posts
Scuba Team

Oi, Anderson! Como vai?

A style.css usada pela Home (index.html) possui uma regra conflitante para a ul:

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

Mais especificamente as regras de width e margin-right, que não estão permitindo espaço para que todos os itens fiquem na mesma linha. Esse bloco de estilo é para os benefícios, então sugiro que você crie uma classe para a ul de benefícios e substitua o seletor do bloco acima pela classe, ficando:

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

O nome beneficios-itens é apenas um nome ilustrativo que eu dei para a classe.

Espero que ajude! Qualquer coisa pode avisar!

por Beatriz Moura
| 770.5k xp | 1156 posts
Alura Scuba Team Instrutora e Desenvolvedora de Software I

Ótima colocação Leonardo.

Bons estudos!

por Anderson Escudeiro
| 23.8k xp | 10 posts

Agradeço, deu certo Só que agora tem uma margem branca no top antes do cabeçalho que nas outras páginas não tem. quebrei a cabeça e ainda não consegui tirar

por Marcos Cirilo Abreu da Silva
| 63.5k xp | 1 posts

Oi Anderson, tenta usar o arquivo reset.css no head desta página.

<link rel="stylesheet" href="reset.css">

Cuidado, ele deve ser adicionado antes do arquivo de css que você desenvoveu para não dar problema.

Abraço e obrigado pelo post, me ajudou a resolver meu problema.