2

Estou montando um layout utilizando o framework Bulma.io. Até o momento está da seguinte maneira.

inserir a descrição da imagem aqui

Minha dúvida é:

Como fazer com CSS toda a minha div lateral ficar pintada? Como na imagem acima, quero pintar o espaço em branco que está riscado de vermelho.

Eis meu html.

<div class="container is-fluid">
    <div class="columns">
        <aside class="column is-narrow aside hero is-fullheight">
            <div style="width: 200px;">
                <p class="notification is-info"></p>
            </div>
        </aside>
        <div class="column">
            <p class="notification is-warning"></p>
        </div>
    </div>
</div>

E o css usado para colorir a div lateral.

.aside {
    display: block;
    background-color: rgb(58, 73, 83);
}
2
  • Jovem sem o código fica difícil te responder. Mas com certeza é ajuste de margem! Posta o código ai pq do jeito que está complica...
    – hugocsl
    14/03/2018 às 16:33
  • @hugocsl postei o código, tem a ver com as margens, mas não queria tirar a margem do elemento, só fazer a cor ir além da margem.
    – MeuChapeu
    14/03/2018 às 16:36

3 Respostas 3

2

Acho que para essa situação o melhor a fazer é usar o box-shadow.

A propriedade box-shadow não ocupa espaço então ela não interfere nos outros elementos.

Fiz um exemplo para demonstrar melhor. Repare que a linha pontilhada é o limite da <div> já a cor cinza é o box-shadow, Repare que ele não empurra a <div> inferior mais para baixo!

html, body {
    width: 100%;
    height: 100%;
    margin: 10px;
    padding: 0;
}
.box {
    box-sizing: border-box;
    padding: 5px;
    width: 200px;
    height: 100px;
    outline: 1.5px dashed red;
    box-shadow: 0 0 0 10px silver; /* controle aqui até onde vai a cor */
}
<div class="box">
    Meu conteúdo
</div>
<div class="box">
    Meu conteúdo
</div>

2
  • Excelente, funcionou perfeitamente. Obrigado!!
    – MeuChapeu
    14/03/2018 às 16:55
  • 1
    Dica de ouro :) boa sorte com o projeto!
    – hugocsl
    14/03/2018 às 16:56
1

Visto que você referiu que o problema é das margens faça o seguinte

.aside {
    margin-left: 0px;
    margin-top: 0px;
    padding-left:10px;
    padding-top:10px;
    display: block;
    background-color: rgb(58, 73, 83);
}

Com as alterações acima referidas, você irá ter o espaço na mesma mas irá estar pintado da cor da div.

Outra forma é retirando a margin como no exemplo acima mas adicionando uma border-left com 10px de width e com a cor que desejar

1

Você pode usar no seu código CSS, o seguinte comando:

body {
    background: #163c7a; /* ou a cor que você deseja */
}

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 .