Portfolio Layout #10: Learn To Code It

Hello, welcome to the coding tutorial of the portfolio #10 layout. In this tutorial il explain the steps to take in slicing and coding the layout. Before attempting this tutorial i highly suggest you create the layout before hand and have it ready, you can also download the CSS layout for FREEEE using the download button above, there is no licence with the download so your free to manipulate it as you wish. (just dont rip me off and decide to sell it). The whole of the css document is well documented with every style entry comment coded on what it does.

Right lets get started, the first thing you need to do is create your template directory, just make a folder on your desktop called “portfolio” within this folder you need another folder called “images”, a blank HTML document and a blank CSS document. Once you have those in place your ready to rock and roll.

Now when i code from a PSD file i generally code from the top and work my way down and slice the images as needed. When saving your images save them as a PNG file within the images folder, and try to use a name which corrosponds with the image. Right lets take alook at our PSD and work out what we need.

Right looking at the image above we need a container div which will hold all our content in, a header wrapping div which will hold our logo and navigation, inside the header wrapper div we need a logo div and a navigation div. Then we need to set up a class for our content. Why use a CLASS and not DIV i here you say??? well a class can be repeated as many times as needed, a DIV shouldnt, a DIV should be a unique element of the site. So our HTML structure should look like this.

[sourcecode language=’html’]


[/sourcecode]

Add the following code to your HTML document, once your done with the structure of the document add the code below inbetween your HEAD tags. Without the code below your CSS style sheet will be useless.

[sourcecode language=’html’] [/sourcecode]

Open up your styles.css document in dreamweaver ready for your styles. The first thing we need to style is the main body of our document, we want to set all margins to 0, set our default font, size and color. We also need to set our background color and image. Head over to photoshop, flattern your layers into one layer (DONT SAVE IT THOUGH), select the rectangular marquee tool and make a selection like this.

The selection should cover your topbar and background up to the footer. Copy and paste the selection to a new document and save it as “bg.png” in your images folder. Now in the step above i mentioned we need to set our background color, well the background color we need to choose is the color in which ends at the bottom of the selection. You can get the color code by using the eye dropper tool in photoshop. How it works is the background image will be displayed up until the point it ends, then the background color will take over. Right now for the CSS.

[sourcecode language=’css’]
/*MAIN DOCUMENT STYLES*/

*{
padding:0;
margin:0;
}

body {
font-family: Arial, Helvetica, sans-serif; /*fonts for the main document*/
font-size: 12px; /*font size for the main document*/
color: #484941; /*font color for the main document*/
background-color: #cccccc; /*background color*/
background-image: url(images/bg.png); /*our background image*/
background-repeat: repeat-x; /*background image repeated horizontally*/
}
[/sourcecode]

Refer to the commented code for each element. The next DIV we need to style will be our container DIV and head wrap DIV. The code for these DIV’S looks like this.

[sourcecode language=’css’]
/*CONTAINER STYLES*/

#container {
width: 800px; /*the bottom margin is the negative value of the footer’s height*/
margin: auto; /*centers our content*/
}

#head_wrap {
height: 90px; /*head wrap will be 90 px high*/
width: 800px; /*head wrap will be 800 px wide*/
margin-bottom: 20px; /*margin at the bottom will be 20px*/
}
[/sourcecode]

Right thats our containers sorted, now we need to add our logo or website text in our case. You can do this two ways, the 1st one is save the website text and box as an image BUT doing this means you’l have to edit the image each time you want to update your text inside the box. The 2nd way is to just slice the box into an image and add the text using CSS. Now the choice is yours on the route you take. Im going with the 2nd one as it offers the most flexability and is quickest. The way we go about it is first you need to hide all your layers on your photoshop document except the rounded see through box.

Select the rectangular marquee tool and draw a box around your rounded box, make sure you include the drop shadow, its best if you zoom in and just follow the last pixel on the drop shadow. Once you’ve made the selection just goto “image > crop” (DONT SAVE PSD FILE) save the image as “logo.png”. Now for the code.

[sourcecode language=’css’]
/*LOGO STYLES*/

#logo {
float: left; /*floats the logo to the left of our container*/
height: 90px; /*height of our logo image*/
width: 261px; /*width of our logo image*/
background-image: url(images/logo.png); /*our logo image set as a background*/
background-repeat: no-repeat; /*logo image wont repeat*/
}

#logo h1 {
text-transform: uppercase; /*transforms text into capital letters*/
font-size: 30px; /*font size*/
font-weight: bold; /*font weight*/
margin-top: 15px; /*margin above the text*/
margin-left: 40px; /*margin left side of the text*/
}

#logo p {
font-size: 12px; /*slogan font size*/
font-weight: bold; /*slogan bold*/
float: right; /*floats slogan to the right*/
margin-right: 50px; /*margin right side of the slogan*/
}
[/sourcecode]

Right you will notice height and width of the logo is the same specified in the CSS file this is important, your’s might be different though as depends on where you made the selection in the PSD cutting stage. Also the HEAD_WRAP DIV is also 90px high which also corrosponds with the logo. The head_wrap DIV is the box which will hold our logo box and navigation, there is no need for the head_wrap DIV to be any higher than our logo. We have also set a h1 tag within our logo DIV this will be the actual text of our website I.E yourname, the #logo P tag is our slogan underneath our website title. Add the following to your HTML file within the logo DIV.

[sourcecode language=’html’]


[/sourcecode]

If you view your HTML document you should see everything display similar to your PSD file. The background, logo box, website title and slogan.

Right the next part we need to code is our navigation, firstly lets draft the navigation bar in our HTML document. Put the following code in your navigation DIV.

[sourcecode language=’html’]


[/sourcecode]

You’l notice there are now additional tags we need to style “ul”, “li”, “a” and some sort of hover. All these tags will have a class of “nav_links”. The CSS looks like this.

[sourcecode language=’css’]
/*NAVIGATION STYLES*/

#navigation {
float: right; /*floats navigation to the right of the container*/
margin-top: 10px; /*places a top margin*/
}

.nav_links ul {
list-style:none; /*removes bullet points from a list*/
display: inline; /*displays links inline*/
}

.nav_links li {
list-style:none; /*removes bullet points from a list*/
display: inline; /*displays links inline*/
}

.nav_links a {
padding-left: 50px; /*each links will have 50px padding on the left*/
text-decoration: none; /*removes link underscore*/
text-transform: uppercase; /*all links will be in capitals*/
color: #8d8d8d; /*color of the link*/
font-weight: bold; /*makes links in bold*/
}

.nav_links a:hover {
color: #0099FF; /*color of the links on mouseover*/
}
[/sourcecode]

Thats it for the top half, save your work and test it out in your browser. Were now going to code and style our content box, dont forget the content box will be a CLASS not a DIV. Your going to need to slice your content box image, to do this you need to hide all your layers in your PSD file and leave in view the content box and the pattern, goto “edit > merge visable” (DONT SAVE PSD) draw out your selection using the rectangular marquee tool, either crop it or copy & paste to a new document then save as content_box.png

You can now add the styling to your content class, which looks like this.

[sourcecode language=’css’]
/*MAIN CONTENT STYLES*/

.content {
height: 271px; /*height of our content box*/
width: 706px; /*width of our content box*/
margin-right: 47px; /*margin right*/
margin-left: 47px; /*margin left*/
background-image: url(images/content_box.png); /*our content box image */
background-repeat: no-repeat; /*content image nor to repeat*/
margin-bottom: 20px; /*margin bottom of 20px*/
clear: both; /*clears the floats both left and right*/
}
[/sourcecode]

The height and width refer to the actual dimension of your content_box.png image. Yours might be different depending on where you made the selection. Once you’ve added the styles above you can view the HTML file and your content box should show up. The content inside the content box will each have there own classes and will be coded like this.

The HTML code for the image above looks like this.

[sourcecode language=’html’]


[/sourcecode]

The CSS styling for the class above looks like this.

[sourcecode language=’css’]
/*MAIN CONTENT STYLES*/

.content {
height: 271px; /*height of our content box*/
width: 706px; /*width of our content box*/
margin-right: 47px; /*margin right*/
margin-left: 47px; /*margin left*/
background-image: url(images/content_box.png); /*our content box image */
background-repeat: no-repeat; /*content image nor to repeat*/
margin-bottom: 20px; /*margin bottom of 20px*/
clear: both; /*clears the floats both left and right*/
}

.content_thumb {
height: 236px; /*height of our thumbnail*/
width: 391px; /*width of our thumbnail*/
float: left; /*floats our thumbnail to the left of our content box*/
margin-top: 17px; /*margin of 17px*/
margin-bottom: 17px; /*margin of 17px*/
margin-left: 17px; /*margin of 17px*/
}

.content_desc {
float: right; /*floats description text to the right*/
margin-top: 17px; /*description text has a top margin*/
margin-right: 15px; /*description text has a right margin*/
margin-left: 5px; /*description text has a left margin*/
line-height: 20px; /*description text has a line height of 20px to space out the paragraph*/
text-align: justify; /*description text is justifyed for nice clean columns*/
overflow: hidden; /*text that overflow the box will be hidden*/
height: 200px; /*fixed height of 200px*/
width: 278px; /*fixed width of 278px*/
}

.content_footer {
float: left; /*content footer text is floated left*/
width: 278px; /*has a fixed width of 278px*/
margin-right: 15px; /*has a right margin*/
margin-left: 5px; /*has a left margin*/
margin-top: 3px; /*has a top margin*/
}

.content_footer h1{
font-size: 12px; /*content footer text has a font size of 12px*/
}

.content_footer_col2 {
color: #0099FF /*content footer text color two (the blue text)*/
}
[/sourcecode]

The width and height in the content_thumb class will refer to the height and width of your thumbnail image, we create our thumbnail image by merging the thumbnail and thumbnail border layers as one, then simply copy and paste to a new document, save as what ever thumb.png. Right lets insert out content into our content box. We need to place our thumbnail in there, our header for the image, descriptive text and then our footer app and date.

[sourcecode language=’html’]


Example Thumbnail

MY WORDPRESS

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo.


[/sourcecode]

Check your HTML document in your browser you should have everything placed nicely. If you wanted to create another box for another project just copy and paste everything in the content class. so from DIV CLASS CONTENT to CLOSING DIV CLASS CONTENT then paste it underneath. You will just need to edit the thumbnail and content within the box to your new project, as easy as that.

Finally we need to add our footer styles.

[sourcecode language=’css’]
/*FOOTER STYLES*/

#footer {
background-image: url(images/footer_bg.png); /*footer background image*/
background-repeat: repeat-x; /*background image repeats horizontally*/
height: 32px; /*height of footer is 32px same as our image*/
clear: both; /*clear the floats left and right*/
margin-top: 50px; /*has a top margin of 50px*/
}

#footer p {
line-height: 30px; /*line height for footer text is 30px*/
float: right; /*floats text right of the screen*/
margin-right: 20px; /*pushes text 20px inwards from the right*/
}
[/sourcecode]

The footer background image will refer to the footer slice, you should no how to create the footer image by now 😉 similar to how we created our background image, just make a selection about 4 pixels wide. The image will then be repeated in CSS. You just need to add your P tag in your HTML document.

[sourcecode language=’html’]


[/sourcecode]

Thats it basically all done, dont forget you can download the FREE css template from the button at the top. Spread the word and i hope to see all your portfolios out and about 😉 you’ve got no excuse not to have one now.

ADDITIONAL STEPS

You can make your portfolio more intresting by adding abit of jquery interaction. These extra steps will get your images loading up in lightbox. The simple lightbox jquery plugin were using is by by Lokesh Dhakar, i havent really tested out alot of plugins but i no this one works and does the job. All the files needed for the lightbox are included in the download in a folder called lightbox. Just copy & paste the folder into portfolio directory. Open up your index.html file and reference the files like we do our CSS file.

[sourcecode language=’html’]
[/sourcecode]

The files are referenced find your thumbnail code and just add rel=”lightbox” within the A tag.

[sourcecode language=’html’]


Example Thumbnail

[/sourcecode]

Upload your files to your server and test it out 😉 Note lightbox only works with images and you need the full size image of the thumbnail in a folder somewhere on your server.

Many thanks for reading this tutorial, dont forget to subscribe VIA twitter and our RSS feeds. Till next time.