Portfolio Layout 4: The Code

Firstly your going to have to re-create the layout using this tutorial here, or just download the PSD. Once you have it design in photoshop we need to slice it up but 1st lets create our directory structure. Create a new folder on your desktop called “portfolio layout” then inside that folder create two more folders one called “css” and another called “images”.

Now we have our directory structure we can begin to slice it up, we dont need all the elements in the layout, believe it or not we will only be using chunks of the design. To create precise selections select the rectangular marquee tool and change to fixed width.

The first slice we need to make is for our background, if you PSD is the same as mine the lines pattern will be on a seperate layer, we need to merge these togther as one, so merge the lines pattern layer with your background layer. Select the rectangular marquee tool enter the values 8 pixels in width and 800 pixels in height.

Copy and paste the selection to a document of its own. save the file as “bg.png” in the “images folder”. The next slice we need to make is the logo on the side. Enter the values 128 pixels x 800 pixels.

Hide all the layers in the PSD (including background layer) apart from the logo elements, Merge all the logo elements toegther into one layer. Copy and paste to a document of its own with a transparent background save as “logo.png” in the “images folder”. The next slice is going to be the navigation, HIDE all layers apart from the navigation elements, you can hide the text on the navigation also as this wont be needed. Create a selection 666 pixels x 64 pixels on the navigation.

Copy and paste to a document of its own with a transparent background save as “nav.png” in the “images folder”. The next part will be our content box, we only need to make one set of images as the 3 content boxes will re-use the images. For the content boxes we need to make 4 images top, side, bottom and the middle area. Remember to always copy and paste to a new document with a transparent background.

With all your images saved you should have something like this.

Now for the coding, Open a blank text file using notepad then save it as “layout.css” in the “css folder”. Start a new blank HTML file in dreamweaver, also open up your blank CSS file. In your HTML document link your style sheet.

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

Under the BODY tag lets map out our divs/class which we will refer to the stylesheet later. Please refer to comment code for notes.

[sourcecode language=’html’]

 

 

 



[/sourcecode]

Now that we have our layout mapped out. Lets start with the CSS. Lets set the whole document to have 0 padding and 0 margin this will ensure that the side header/logo will start and finish at the very top of our browser.

[sourcecode language=’css’]
*{
padding:0;
margin:0;
}
[/sourcecode]

Now lets set the styles for the body of the document.

[sourcecode language=’css’]
body{
background:url(../images/bg.png) repeat-x #000000;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: white;
}
[/sourcecode]

Were going to want to add some styles for our headers.

[sourcecode language=’css’]
h1, h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #ABABAB;
text-transform: uppercase;
}
h1 {
font-size: 18px;
letter-spacing: 0px;
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 5px;
border-left-width: 4px;
border-left-style: solid;
border-left-color: #98cd01;
}
h2 {
font-size: 14px;
letter-spacing: 2px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 5px;
font-weight: normal;
border-left-width: 4px;
border-left-style: solid;
border-left-color: #98cd01;
}
[/sourcecode]

The styles for our logo background and the main container.

[sourcecode language=’css’]
#content{
width:900px;
padding:0;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}

#logo{
width:180px;
background:url(../images/logobg.png) repeat-y;
position:fixed;
top:0;
bottom:0;
float:left;
padding:0;
margin:0;
}
[/sourcecode]

The div for all our content which is on the right (navigation and content boxes.)

[sourcecode language=’css’]
#rightcontent{
padding:0;
margin:0;
width:650px;
float:right;
}
[/sourcecode]

Our navigation styles.

[sourcecode language=’css’]
#nav{
background:url(../images/nav.png) no-repeat;
padding:28px 0 0 0;
margin:0;
width:666px;
height:36px;
clear:both;
text-align:center;
font-size:10px;
text-transform:uppercase;
color:#98cd01;
font-weight:bold;
}
[/sourcecode]

Our content box styles.

[sourcecode language=’css’]
#textheader{
background:url(../images/textheader.png) no-repeat;
padding:0;
margin:0;
width:666px;
height:22px;
clear:both;
}

#texttop{
background:url(../images/textcontenttop.png) repeat-y top;
padding:0;
margin:0;
width:666px;
clear:both;
}

#textcontent{
background:url(../images/textcontent.png) no-repeat bottom;
padding:0 15px 0 15px;
margin:0;
width:636px;
clear:both;
min-height:172px;
}

#textfooter{
background:url(../images/textfooter.png) no-repeat;
padding:0;
margin:0;
width:666px;
height:30px;
clear:both;
}
[/sourcecode]

The styling for text within our content box and also our clears.

[sourcecode language=’css’]
.menu ul{
padding:0;
margin:0;
}

.menu li{
padding:0 5px;
margin:0;
display:inline;
}

.menu li a{
padding:0;
margin:0;
color:white;
text-decoration:none;
}

.menu li a:hover{
padding:0;
margin:0;
color:#FF066D;
text-decoration:none;
}

p{
margin:0;
z-index:200000;
padding-top: 5px;
padding-right: 0;
padding-bottom: 5px;
padding-left: 0;
}

/* Clears */

.clear{
clear:both;
}
[/sourcecode]

22 thoughts on “Portfolio Layout 4: The Code”

  1. I think he means using the slice tool and then export for web and devices. That’s what I used to do, it works pretty good but it’s hard to get your site expand to the sizes of your textboxes etc.

  2. Thank you for taking up my request, much appreciated. I need way more tuts on the css part of the website, and less on the PSD 🙂
    But thanks, this is a great tut 10/10.

  3. Thanx for explainin, Swen. I’m not that good with English. On the subject, I used to use the technique that was so perfectly explained here untill I discover the Slice Tool (thanx hehe). In relation to the expanding, I think it’s just a matter of planning before hand. There are lots of techniques for making expandible text boxes, nav. bar, etc. (or tables and divs – depends how you look at them). Again, I wish I’d have found this tut. a few years back lol I think that this technique, if applied correctly (as explained here) will render flawless results. The Slice Tool is for lazy ppl like me (Click Save and BOOM! I got slices, roll overs, tables, coding lol)

  4. very nice tutorial. I thought I was the only one to slice/ copy/ paste with the rectangular marquee tool… I never use the slice tool… because I don’t use tag I used so it’s more convenient to use the “rectangular marquee tool” if you’re coding in divs and CSS! I only use (tabular databasing) when I make things like calendars… or if i’m lazy and I wanna make a gallery full of rows and columns i’ll use tag… but then again I use and float them all left so I can place the divs side by side.

  5. Hehe, very good one 🙂 Well, the slice tool is a good thing and it’s not only for lazy people :). I am using it all the time, but only for images, cause the code that PS makes is crap (tables instead of DIV’s etc.). If you want something to look exactly like your PSD file you need to bend the space and time to make it work (usually some JavaScript helps a lot), thats why we use HAND-CODED CSS guyz!

    I like your tuts, Richard, good job, and keep it up!

  6. I don’t understand the difference between the “textcontenttop” image and the “textcontent” image. What is the purpose of the textcontenttop? Also, what does the “clear” class do?

  7. @AEONZ

    haha do you no what, i dont understand why i did that either 🙁 the clear class basically means you dont want any items either side of the div.

  8. …i have a question…how will you change the content of the content box whenever you click one of the navigations?and are they spanable?

    they are all messed up whenever i type something on the of the content area…x_X

    thank you very much..

  9. id double check your code, if the content boxes are messing up.

    if you want to create more pages just duplicate the html file, but change the content… or using the some of the styles/code in the tutorial make your own page.

  10. When i save the slices as png the result will end with 0 kb and i can’t open anything, does anyone knows what the problem is?

    Kay

Leave a Reply

Your email address will not be published. Required fields are marked *