I can not put background-color and outline

Question

I can not put background-color and outline

Navigation

#1 by (2 votes)

1

I'm developing a web application and I have the following problems:

I can not fill in the white space above the title " Sort Search " using background-color applied to it.

I can not put a outline: 1px solid #E0E0DA; line and apply the padding property among the categories in the list, in the .ordena class.

Here is the code and a screenshot of it below:

.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>

html css

asked by anonymous 22.10.2017 / 00:22

1 answer

PHPMailer works only in some versions [closed] Communication between MVC Controllers

score 2 · Accepted Answer

You are not able to "fill" the space above the title because of default Browser styles .

You are not able to apply styles to 'list' items because the selector is typographical error, instead of ordena is orderna in CSS code.

.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>