Entrar Ainda não tem acesso?
5
respostas

Display: inline não funciona

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

por João Pedro Becker Ayres
| 13.3k xp | 5 posts

Estou tentando deixar os itens do menu (Home, Produtos e Contato) um do lado do outro na página home e não estou conseguindo. Já tentei de tudo. O código tanto do HTML quanto do CSS estão iguais ao da página produtos, na qual o inline funcionou

Aqui está o código:

<header>
            <div class="caixa">
                <h1><img src="logo.png" alt="logo"></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>
header {
    background: #BBBBBB;
    padding: 20px 0;
}

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

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

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;
}
5 respostas
por Marcos Pacheco
| 51k xp | 118 posts
Locutor e apresentador

Óla João pedro estão faltando as segintes informações para o navegardor.

<link rel="stylesheet"href="reset.css">
<link rel="stylesheet"href="produtos.css">
por João Pedro Becker Ayres
| 13.3k xp | 5 posts

Oi Marcos, essas informações estão no arquivo, na parte

. Eu só não botei essa parte do código aqui. Mas o problema ainda persiste
por Marcos Pacheco
| 51k xp | 118 posts
Locutor e apresentador

pois é mas copiei seu código e adicionei e funcionou!!

<!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">
<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>
</header></body>
por João Pedro Becker Ayres
| 13.3k xp | 5 posts

Pois é, mas aqui não ta funcionando de jeito nenhum. Tô até meio estressado com isso já, desde ontem não estou conseguindo...

por Cauê Henrique de Lima Alexandrino
| 40.2k xp | 2 posts

Então, pelo que vi aqui no fórum o erro parece ser porque na home já tínhamos uma lista, a dos benefícios. Então quando acrescentamos a lista da navegação que criamos na página de produto, as duas entraram em conflito.

No meu código deixei uma classe para a lista dos benefícios, e mantive a classe normal da div da navegação (caixa).

No Html fica assim:

Primeira lista, referente a nav que criamos nos produtos:

<header>
    <p class="Barbearia">Barbearia Alura</p>
    <div class="caixa">
      <h1><img src="logo.png" alt="logomarca"></h1> 
      <nav>
        <ul>
          <li> <a href="index.html" target= "_blank" >Home</a></li>
          <li><a href="produtos.html" target= "_blank"> Produtos</a> </li>
          <li><a href="" target= "_blank"> Contato</a></li>
        </ul>
      </nav>
    </div>
  </header>

Segunda lista, referente aos benefícios:

  <ul class="itens-beneficios">
    <li id="itens">Atendimento ao cliente </li> 
    <li id="itens">Espaço diferenciado </li> 
    <li id="itens">Localização </li> 
    <li id="itens">Profissionais qualificados</li> 
  </ul>

Acredito que o inverso também daria certo, o importante seria apenas diferenciar as duas listas, eu acredito.