Passo 9 – Adicionar mais algum estilo

Bem, aqui vem mais um bloco de CSS:

/*
Block-Styles
*/

.block {
border:1px solid #a3a09e;
background-color:#ffffff;
margin-bottom:20px;
}
.block_inside {
display:block;
border:1px solid #ffffff;
background: #ffffff url(images/background_block_slice.jpg) repeat-x;
padding:30px;
overflow:auto;
}

.image_block {
border:1px solid #b5b5b5;
background-color:#d2d2d2;
padding:5px;
float:left;
}
.image_block img {
border:1px solid #b5b5b5;
}
.text_block {
float:left;
width:430px;
margin-left:30px;
}

Já falei aqui da classe .border que cria uma borda e a margem em baixo. Dentro temos a classe .block_inside que cria uma borda branca, uma “fatia” do fundo”, posicionamento e ainda um valor overflow.

Nós temos “overflow:auto” porque iremos ter dois elementos a flutuar neste bloco.

Dentro temos a classe .image_block que dá à nossa imagem uma borda dupla (uma na div e outra na própria imagem) que está a flutuar à esquerda com também a classe .text_block também a flutar à esquerda para dar um layout em colunas.

E o resultado é este:

Partilhar esta Entrada