Passo 13 – Adicionar faixa

Agora vamos adicionar uma faixa ao primeiro item, tal como anteriormente. Vejámos o HTML:

<div class=”mini_portfolio_item”>
<img src=”images/ribbon_recent.png” class=”ribbon” alt=”Recent Projects”/>
<div class=”block_inside”>
<img src=”images/sample_mini_portfolio3.jpg” class=”thumbnail” alt=”AudioJungle” />
<h3>AudioJungle Site Design</h3>
<p>Website design for leading photoshop tutorial site and creation and maintenance of Wordpress theme. </p>
<a href=”#” class=”button”>View Project</a>
</div>
</div>

Depois atribuímos o atributo postion:relative ao mini_portfolio_items:

.mini_portfolio_item {
border:1px solid #a3a09e;
margin-bottom:10px;
position:relative;
}

Mas algo estranho acontece… O lado direito da faixa parece estar bem mas o topo não.

A razão para isso é que onde o mini_portfolio_item está dentro está a cortá-lo. Os mini_portfolio_item’s estão dentro do <div id=”portfolio_items”>. Então, a solução é muito fácil. Adicionámos 3px de padding ao topo e é o suficiente para que a faixa seja mostrada correctamente.

#portfolio_items {
width:615px;
margin-right:25px;
float:left;
padding-top:3px;
}

Partilhar esta Entrada