December 1st, 2008 in PSD Sitebuilds by Richard Carpenter
Portfolio Layout 4: The Code
18 Votes, Rating: 4.28
Loading ...
Hello there, in this tutorial il show you the code behind my portfolio layout #4.
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>&amp;amp;amp;nbsp;</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>&amp;amp;amp;nbsp;</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>&amp;amp;amp;nbsp;</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;
}
Be Part Of The Community!
Become part of the hv-designs community.
Subscribe Via RSS or Follow Us On Twitter.
40 Responses to “Portfolio Layout 4: The Code”