1

Estou desenvolvendo uma aplicação web e estou com os seguintes problemas:

  1. Não consigo preencher o espaço em branco que se encontra por cima do título "Ordenar Pesquisa" usando o background-color aplicado ao mesmo.

  2. Não consigo colocar uma linha outline: 1px solid #E0E0DA; e aplicar a propriedade padding entre as categorias da lista, na classe .ordena.

Aqui segue o código e um screenshot do mesmo abaixo:

inserir a descrição da imagem aqui

.conteudo_ordenar{
    border:1px solid #E0E0DA;
    border-top: 3px solid #00008B;
    border-bottom: 3px solid #00008B;
    height: 200px;
}
.titulo_ordenar {
    background-color: #00008B;
    color:White;
    text-align: center;
}
.orderna {
    outline: 1px solid #E0E0DA;
    padding: 12px;
}
<div class="col-sm-3">
    <div class="conteudo_ordenar">
        <h3 class="titulo_ordenar">Ordenar Pesquisa</h3>
        <p class="ordena"><span class="caret"></span> Marca</p>
        <p class="ordena"><span class="caret"></span> Tamanho</p>
        <p class="ordena"><span class="caret"></span> Cor</p>
        <p class="ordena"><span class="caret"></span> Faixa De Preço</p>
    </div>
</div>

1 Resposta 1

2
  1. Não estas a conseguir "preencher" o espaço por cima do título por causa dos estilos padrão do Navegador.

  2. Não estás a conseguir aplicar estilos aos items da 'lista' porque o selector está com um erro tipográfico, em vez de estar ordena está orderna no código CSS.

.conteudo_ordenar {
    border:1px solid #E0E0DA;
    border-top: 3px solid #00008B;
    border-bottom: 3px solid #00008B;
    height: 200px;
    overflow: auto; /* isto para evitar o conteúdo transborde o "container", por causa da altura limite de "200px height" definido acima */
}
.titulo_ordenar {
    background-color: #00008B;
    color:White;
    text-align: center;
    margin: 0; /* Aplica um reset à margem automática do título atribuída pelo Navegador */
}
.ordena {
    outline: 1px solid #E0E0DA;
    padding: 12px;
}
<div class="col-sm-3">
    <div class="conteudo_ordenar">
        <h3 class="titulo_ordenar">Ordenar Pesquisa</h3>
        <p class="ordena"><span class="caret"></span> Marca</p>
        <p class="ordena"><span class="caret"></span> Tamanho</p>
        <p class="ordena"><span class="caret"></span> Cor</p>
        <p class="ordena"><span class="caret"></span> Faixa De Preço</p>
    </div>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .