Passo 12 – Criar o segundo bloco

No último passo, o nosso primeiro bloco ficou completo. Agora vamos começar a trabalhar no segundo bloco. Este segundo bloco terá uma lista dos últimos trabalhos. Vejámos o HTML:

<div id=”block_portfolio”>

<div id=”portfolio_items”>

<div class=”mini_portfolio_item”>
<div class=”block_inside”>
<img src=”images/sample_mini_portfolio.jpg” class=”thumbnail” alt=”PSDTUTS”  />
<h3>PSDTUTS Theme 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>

<div class=”mini_portfolio_item”>
<div class=”block_inside”>
<img src=”images/sample_mini_portfolio.jpg” class=”thumbnail” alt=”PSDTUTS”  />
<h3>PSDTUTS Theme 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>

<div class=”mini_portfolio_item”>
<div class=”block_inside”>
<img src=”images/sample_mini_portfolio.jpg” class=”thumbnail” alt=”PSDTUTS”  />
<h3>PSDTUTS Theme 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>

</div>

<div id=”text_column”>
<h2 id=”text_title”>Creatif is a WordPress portfolio theme for designers and creatives</h2>
<p>You can use it to quickly turn WordPress into a portfolio website.  Not familiar with WordPress? Fear not, the theme accompanies a book called <a href=”#”>How to Be a Rockstar Wordpress Designer</a> by Rockstar Resources due for release in 2008.</p>
<p>The book teaches you to use WordPress theming to take advantage of this flexible CMS product to create dynamic sites.</p>
<p>And as if that’s not enough, you can see a photoshop to HTML tutorial on designing the theme over at <a href=”http://psdtuts.com”>PSDTUTS</a> and <a href=”http://nettuts.com”>NETTUTS</a>.</p>
</div>

</div>

Parece muito código, mas na verdade não é. Vejámos:

1. Primeiro criámos o container <div id=”block_portfolio”> que irá conter este segmento de código.

2. Depois temos uma <div id=”portfolio_items”> que contém três <div class=”mini_portfolio_item”>. Já iremos falar sobre elas…

3. Depois temos um <div id=”text_column”> com algum texto e sub-títulos com a tag <h2>.

4. O que iremos fazer é flutuar o texto e os items do portfolio, lado a lado para formar duas colunas de conteúdo.

5. Substituiremos aquele <h2> por uma imagem.

6. Vamos adicinar códigos para que os mini_portfolio_items fiquem com aquela borda dupla.

Aqui está o CSS:

/*
Portfolio-Home-Styles
*/

#block_portfolio {
overflow:auto;
margin-bottom:20px;
}
#portfolio_items {
width:615px;
margin-right:25px;
float:left;

}
#text_column {
float:right;
width:310px;
}
#text_column h2#text_title {
text-indent:-9999px;
background-image:url(images/creatif.jpg);
background-repeat:no-repeat;
width:310px;
height:129px;
}

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

}
.mini_portfolio_item .block_inside {
background:none; background-color:#e2dddc;
padding:25px 30px 15px 30px;
}
.mini_portfolio_item .thumbnail { float:left; margin-right:20px; border:1px solid #979390; }

Novamente, parece muito, mas vejámos passo a passo:

1. Primeiro, usámos novamente o overflow:auto no elemento principal do #block_portfolio. Isto é porque temos duas colunas e se não fizermos isto, elas irão passar para cima do footer.

2. Depois, definimos que o #portfolio_items flutue à esquerda, tenha uma margem para o separar da coluna de texto e uma largura de 615px.

3. A #text_column é definida para flutuar à direita com uma largura de 310px.

4. Dentro da coluna de texto temos novamente aquele truque com a tag <h2> onde usámos o text-indent para azer com que o texto desapareça e depois usar uma imagem de fundo.

Depois temos três definições para o mini_portfolio_items.

1. Definimos uma borda escura de 1px e uma margem entre eles.

2. Depois redifinimos o .block_inside para que se adapte a estes elementos. Lembre-se que o .block_inside foi definido antes quando fizemos a área do “Fetured Project”. Então, aqui estamos a ultrapassar a imagem de fundo, alterando a cor de fundo e o padding.

Depois de todas estas alterações, aqui fica o resultado:

Partilhar esta Entrada