Portfolio Layout 4: The Code
Loading ...
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.
<link rel="stylesheet" type="text/css" href="css/layout.css" />
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.
<body> <!-- MAIN CONTAINER --> <div id="content"> <!-- MAIN CONTAINER END --> <!-- BIG LOGO/HEADER ON THE LEFT --> <div id="logo"> <img src="images/logo.png" boder="0" /> </div> <!-- BIG LOGO/HEADER ON THE LEFT END --> <!-- ALL THE CONTENT ON THE RIGHT --> <div id="rightcontent"> <!-- ALL THE CONTENT ON THE RIGHT END --> <!-- NAVIGATION --> <div id="nav"> <ul class="menu"> <li>>>.<a href="#">Web designs</a></li> <li>>>.<a href="#">virtual cars</a></li> <li>>>.<a href="#">3D Images </a></li> <li>>>.<a href="#">2d images </a></li> <li>>>.<a href="#">wallpapers</a></li> <li>>>.<a href="#">contact</a></li> </ul> </div> <!-- NAVIGATION END --> <!-- 1ST CONTENT BOX --> <div id="textheader"></div> <div id="texttop"> <div id="textcontent"> <h1> </h1> </div> <div class="clear"></div></div> <div id="textfooter"></div> <!-- 1ST CONTENT BOX END --> <div class="clear"></div> <!-- 2ND CONTENT BOX --> <div id="textheader"></div> <div id="texttop"> <div id="textcontent"> <h1> </h1> </div> <div class="clear"></div></div> <div id="textfooter"></div> <!-- 2ND CONTENT BOX END --> <div class="clear"></div> <!-- 3RD CONTENT BOX --> <div id="textheader"></div> <div id="texttop"> <div id="textcontent"> <h1> </h1> </div> <div class="clear"></div></div> <div id="textfooter"></div> <!-- 3RD CONTENT BOX END --> <div class="clear"></div> </div> <div class="clear"></div> </div> </body> </html>
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.
*{
padding:0;
margin:0;
}
Now lets set the styles for the body of the document.
body{
background:url(../images/bg.png) repeat-x #000000;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: white;
}
Were going to want to add some styles for our headers.
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;
}
The styles for our logo background and the main container.
#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;
}
The div for all our content which is on the right (navigation and content boxes.)
#rightcontent{
padding:0;
margin:0;
width:650px;
float:right;
}
Our navigation styles.
#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;
}
Our content box styles.
#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;
}
The styling for text within our content box and also our clears.
.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;
}
Responses to “Portfolio Layout 4: The Code”
Leave a reply
-
Copyright
This work by Richard Carpenter is licensed under a Creative Commons Attribution-No Derivative Works 2.0 UK: England & Wales License
Finally! I can easily follow a tutorial on coding. Thanks again Richard
good luck
there will be more soon
+1 nice!!!
May I ask why you used this technique instead of the slices option? Great tut btw!
slices option??
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.
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.
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)
Good to see you are helping noobs!
Thanx for a greate site!
quite ugly
in code and design..
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.
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!
tromendous tutooo
thnks
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?
@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.