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

Desafio proposto no final

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

por Maria Eduarda Guimarães Secco Amaral
| 71.5k xp | 27 posts

Gente, dá um help aqui. Meu display: inline não coloca a lista na horizontal. 

<!DOCTYPE html>

<html lang="pt-br">

<head>

    <meta charset="UTF-8">
    <title>Barbearia Alura</title>

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


</head>

<body>

    <header>
        <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>
    </header>
    <main>
        <img id="banner" src="banner.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">Beneficios</h3>

            <ul>
                <li class="itens">Atendimento ao clientes</li>
                <li class="itens">Espaço diferenciado</li>
                <li class="itens">Localização</li>
                <li class="itens">Profissionais qualificados</li>
            </ul>
            <img src="beneficios.jpg" class="imagem-beneficios">
        </div>
</body>
</main>
<footer>
    <img src="logo-branco.png">
    <p class="copyright">&copy; Copyright Barbearia Alura 2019</p>
</footer>

</html>
 /* fundo */
 header {
    background: #cccccc;
    padding: 20px auto;
  }

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

  nav {
    position: absolute !important;
    top: 110px;
    right: 0;
  }
  nav li {
    display: inline !important;
    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; */
  }

 /* texto */
 #banner{
    width: 100%;

 }

 .principal{
    background: #CCCCCC;
    padding: 30px;
 }
 .titulo-principal{
     padding-left: 20px;
 }

 .titulo-centralizado{
    text-align: center;  
}

p {
    text-align: center;  
}

#missao{
    font-size: 20px;
}

em strong{
    color: #FF0000;
}

.itens{
    font-style: italic;
}

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

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

.imagem-beneficios{
    width: 50%;
}

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

.copyright{
    color: #FFFFFF;
    font-size: 13px;
    margin-top: 20px;
}
5 respostas
por Tálison Miguel Amancio
| 122.1k xp | 90 posts

Olá maria Eduarda , dei uma olhada no codigo e vi que vc colocou assim:

nav li {

display: inline !important;
margin: 0 0 0 15px;

}

mais para o conteudo da lista ficar um do lado do outro voce precisa colocar assim:

ul li {

display: inline;
margin: 0 0 0 15px;

}

Pois ai vc estara pegando a lista "ul> e deixando o conteudo dela "li" inline, e o width esta 20% talvez nao vai caber um do lado do outro, mais aí é so ajustar.

Qualquer coisa so perguntar! :)

por Maria Eduarda Guimarães Secco Amaral
| 71.5k xp | 27 posts

Ainda não acontece nada.... :-( Mesmo colocando o !important Ficou assim:

/* fundo */
header {
  background: #cccccc;
  padding: 20px auto;
}

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

nav {
  position: absolute !important;
  top: 110px;
  right: 0;
}
ul 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; */
}

/* texto */
#banner {
  width: 100%;
}

.principal {
  background: #cccccc;
  padding: 30px;
}
.titulo-principal {
  padding-left: 20px;
}

.titulo-centralizado {
  text-align: center;
}

p {
  text-align: center;
}

#missao {
  font-size: 20px;
}

em strong {
  color: #ff0000;
}

.itens {
  font-style: italic;
}

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

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

.imagem-beneficios {
  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 Leonorico Eduardo de Paula Borges
| 124.4k xp | 17 posts
Software Engineer Trainee

Boa tarde, Maria. O problema dos elementos da lista do menu de navegação não estarem organizados lado a lado é referente à linha que você declara as seguintes propriedades para a ul:

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

Como o seu menu de navegação tem, em seu interior, uma ul, ao declarar as propriedades desta forma, você acaba afetando todas as uls do seu código, criando algo que você não queria.

E como uma das propriedades se refere ao "width", ela acaba afetando também a largura da sua ul que se encontra no menu de navegação. Desta forma, o seu menu de navegação fica apenas com 20% da largura original e os elementos não ficam lado a lado.

Para resolver este problema, tente criar uma classe para a lista não ordenada da parte dos "benefícios" e passe estas propriedades para esta classe que será referente a esta ul, como:

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

Desta forma, você isola as propriedades que modificou apenas para a lista de benefícios, sem interferir no menu de navegação.

Espero que tenha ajudado! Qualquer dúvida estou à disposição.

por Lucas Loureiro Vuletic
| 42.4k xp | 4 posts

Resposta do Leonorico perfeita, fiquei um bom tempo batendo cabeça procurando o que estava errado ja que tinha copiado boa parte do código do cabeçalho das outras páginas que estavam funcionando perfeitamente, só não tinha percebido essa segunda ul que estava alterando as propriedades da ul do cabeçalho.

por Maria Eduarda Guimarães Secco Amaral
| 71.5k xp | 27 posts

Obrigada, Leonorico! Ajudou muito! Valeu!!