hv-designs » PSD Sitebuilds

Digital Curriculum Vitae: PSD Conversion

Richard Carpenter — Sun, 11 Apr 2010 17:10:03 +0000

Good evening everybody, today i’ll be walking you through the process of coding your “Digital Curriculum Vitae” into a working HTML/CSS Template. Lets get started.

The Live Version

You can check out the Live Version of the template by clicking the image below. The template has been tested in the following browsers without any problems.

Firefox 2.0, 3.0 and 3.5
Internet Explorer 7 and 8
Chrome 3.0
Safari 3.0 and 4.0

Preparing Your Files

Create a new folder on your desktop called “Digital Curriculum Vitae”, within this folder create three more folders called “fonts”, “images” and “Stylesheets”.

The “Fonts” folder will be used for our fonts, if you can remember from part #1 of the tutorial we used a font called “Myriad Pro”. This font won’t work on a live webpage unless we use some CSS3 (@font Face), more on this later.

The “Images” folder will be for our template images, all images will be saved in PNG format.

Finally the “Stylesheets” folder will contain our stylesheets, i this template there will be two stylesheets. A “Reset.CSS” and “Styles.CSS”.

Once you’ve created your folders, create a blank HTML file called “Index.HTML”. Save the blank HTML file inside the main folder. Next create two blank CSS files inside your stylesheets folder.

Setting Up The HTML File

Open your HTML file in your favorite code editor, in the “HEAD” section of the HTML file add your template title and link your CSS document.

[sourcecode language="html"]
Digital Curriculum Vitae – Richard Carpenter – HV-Designs.co.uk

[/sourcecode]

In the “BODY” of your document add a DIV called “Container”, the container will be our main DIV in which our template will be held.

[sourcecode language="html"]

[/sourcecode]

Inside the container DIV were going to create 3 more DIV’s, “Frame-Top”, “Frame-Middle” and “Frame-Btm”.

[sourcecode language="html"]

[/sourcecode]

The 3 DIV’s will each contain the top, middle and bottom portions of the transparent box which is behind the white rectangle on our layout.

Finally the actual white rectangle on our layout we can do all in CSS, so we’ll just create 1 more DIV called “Page”. Place the DIV inside the “Frame-Middle” DIV.

[sourcecode language="html"]

[/sourcecode]

So just to recap then we have our “Container DIV” which will contain a whole template, “Frame-Top”, “Frame-Middle” and “Frame-Btm” which will contain our transparent rectangle cut into 3 separate images. Then finally our “Page” DIV which will contain our white main rectangle for our content.

Slicing The Background Image

Now our HTML mark-up is finished lets start slicing our images, We’ll start with the background. Select the rectangular marquee tool then drag out a selection about 50 pixels wide and the whole length of your background.

Once the selection has been made go to “Edit > Copy Merged”, then go to “File > New” and create a new document. (The size of your selection should automatically be entered into the dimension boxes)

Save the background image as “bg.PNG” inside the images folder.

Slicing The Transparent Rectangle

Hide all your layers apart from the background layers and the transparent rectangle. Select the rectangular marquee tool then make a selection around the top half of the rectangle.

In the selection include your drop shadow, but don’t include the content rectangle. Once you’ve made the selection hide the background layers and go to “Edit > Copy Merged”, paste the selection into a new document then save the file as “frame_top.PNG”.

Repeat the process for the bottom of the rectangle and also the middle, make sure all slices are the same width.

Slicing The Template Title

Still with the rectangular marquee tool make a selection around your website title.

Once you’ve made the selection hide all your layers apart from the title layer itself then go to “Edit > Copy Merged”. Create a new document by going to “File > New” and then paste your selection into the new document.

In your new document hide the background layer then go to “File > Save As”, save the image as “title.PNG” inside the images folder.

Slicing The Navigation

For our little 3 button navigation were going to keep all the buttons as one image, we’ll then use CSS to adjust the background image for our template.

Start off by making a selection around all 3 buttons using the rectangular marquee tool.

Hide all your layers apart from the 3 button icons and there text, once you’ve hidden your layers go to “Edit > Copy Merged”.

Paste your copied selection to a new document, hide the background layer then save the images as “right_navigation.PNG” inside your images folder.

Slicing The Page Background

Using the rectangular marquee tool make a selection 1 pixel wide starting from the top of your white rectangle. The starting point should be underneath the 1 pixel white border.

Drag the selection all the way down until you come into the white portion of the rectangle. You can use the eye dropper tool to make sure the selection ends on white (#ffffff). The reason for this is because where the background image ends the color white will continue on down the page which will be set in our stylesheet.

Slicing The Bullet Points And Divider Line

Make a selection around one of your bullet points using the rectangular marquee tool.

Once you’ve made the selection hide all your layers apart from the bullet layer itself then go to “Edit > Copy Merged”. Create a new document by going to “File > New” and then paste your selection into the new document.

In your new document hide the background layer then go to “File > Save As”, save the image as “bullet.PNG” inside the images folder.

For our divider line you only need to make a 1 x 2 pixel selection as the image will be repeated using CSS. Make a selection on your divider line as shown in the image below.

Once the selection has been made go to “Edit > Copy Merged”. Paste the selection into a new document then save the image as “divider.png” inside the images folder.

Slicing The Social Icons

Finally we need to slice our individual social icons. Using the same methods listed above slice each button, then save each button on a transparent background inside your images folder.

Once your finished thats all the slicing done. Here’s a screen shot of all my images inside the images folder.

The Background CSS

Open up your styles.CSS stylesheet inside your favorite code editor, then add the body as your first style.

[sourcecode language="css"]
body {
}
[/sourcecode]

Inside your body style we need to set our background image, to do this we add your “bg.PNG” image as a background then repeat the background horizontally (X-Axis).

We don’t want the background to move when scrolling down the page so we also set the background to fixed. Finally we need to push our template downwards so its not flush with the top of our browser, we do this by adding a top margin. The CSS code looks like this.

[sourcecode language="css"]
body {
background-image: url(../images/bg.png);
background-repeat: repeat-x;
background-attachment: fixed;
margin-top: 35px;
}
[/sourcecode]

Styling The Container

The next set of DIV’s we need to style are the foundations of our template, these DIV’s are the main container and the transparent rectangle which goes all the way around our template. We’ll start with the container DIV.

We first set our container width, to find out the width of the container you can check the size of your transparent rectangle images.

Notice the width of 861px, this will be our container width. We then set our containers margins to auto, doing this will center our template in the browser.

[sourcecode language="css"]
#container {
margin: auto;
width: 861px;
}
[/sourcecode]

Styling The Transparent Rectangle

Inside your HTML file locate the DIV’s “frame-top” and “frame-btm”. Inside the frame top DIV insert your frame top image from your images folder.

[sourcecode language="html"]

[/sourcecode]

Repeat the same for the frame btm DIV.

[sourcecode language="html"]

[/sourcecode]

For our top and bottom frame DIV’s we need to float them left then add a fixed height and width. The width and height of our DIV should be the same width and height as images which we sliced earlier.

Instead of creating two separate styles for frame top and frame btm we can join them together as both DIV’s share the same styles. We do this by separating the DIV’s with comma’s in our stylesheet.

[sourcecode language="css"]
#frame-top, #frame-btm {
float: left;
height: 25px;
width: 861px;
}
[/sourcecode]

Styling Frame Middle DIV

Our “frame-middle” DIV is styled in a similar way as body background, the only difference being we repeat the background vertically (Y Axis), float the DIV to the left and add a fixed width. The fixed width should match the frame middle image, which should also be the same width as our container DIV.

[sourcecode language="css"]
#frame-middle {
background-image: url(../images/frame_middle.png);
background-repeat: repeat-y;
float: left;
width: 861px;
}
[/sourcecode]

Styling The Page DIV

This DIV is the final DIV we need to style, we should then have the foundations of our template ready for our content.

Float the DIV left, add a fixed width of 809px (the width is the same size as our content rectangle in our PSD file) then set a white solid 1 px border.

[sourcecode language="css"]
#page {
float: left;
width: 809px;
border: 1px solid #FFFFFF;
}
[/sourcecode]

Set your “page_bg.PNG” as the DIV’s background repeating it horizontally (X Axis), set the DIV’s background color to white (#ffffff) then set a top and bottom margin of 30px.

#page {
float: left;
width: 809px;
margin-left: 25px;
border: 1px solid #FFFFFF;
background-image: url(../images/page_bg.png);
background-repeat: repeat-x;
background-color: #FFFFFF;
padding-top: 30px;
padding-bottom: 30px;
}

Adding Some Content

In your HTML file inside the “#page” DIV add a “H1″ heading tag then insert your “title.PNG” file inside. Add a link to your image if you wish.

[sourcecode language="html"]

[/sourcecode]

Underneath your “H1″ tag add an unordered list “UL” with a class of “right-nav”. Inside your list add your 3 list items also known as your 3 button navigation each with there own classes to represent that list (LI) Item.

[sourcecode language="html"]

Save

Contact

[/sourcecode]

Underneath your small navigation add a simple paragraph “P” tag with a class of “job-title”. Inside your “P” tag add your desired text.

[sourcecode language="html"]

Web Designer / Developer

[/sourcecode]

Finally we need to add our intro text, create another “P” tag but with a class of “intro”.

[sourcecode language="html"]

INTRO TEXT GOES HERE

[/sourcecode]

Styling Our Header Content

We’ll start with our “H1″ tag, set a fixed width and height the same dimensions as your title image, float the title left then add a bottom margin of 10px. To push the tag over from the left add a left margin of 30px.

We could of added the left padding to the “page” DIV which would automatically push everything from the left over 30px, but if we used this method then our little lined divider would also have 30px padding which we don’t want. We want the divider to start and end at either side of the page layout. We’ll add the 30px left margin to all items inside the “page” DIV.

[sourcecode language="css"]
h1 {
height: 47px;
width: 334px;
margin-bottom: 10px;
float: left;
margin-left: 30px;
}
[/sourcecode]

Styling Our P Tag Classes

There are two “P” tag classes we need to style, “P class job-title” and “P class intro”. The styles for these classes are just changes in the way the text looks. Notice we haven’t set any font-family yet as we’ll be doing this at the as it requires some CSS3.

The “P” class “job-title” looks like this.

[sourcecode language="css"]
p.job-title {
color: #b1b1b1;
font-size: 20px;
letter-spacing: -1px;
font-style: italic;
clear: both;
margin-left: 30px;
}
[/sourcecode]

The “P” class “intro” styling looks like this.

[sourcecode language="css"]
p.intro {
font-style: italic;
color: #646464;
font-size: 12px;
margin-top: 20px;
text-align: justify;
margin-left: 30px;
margin-right: 30px;
line-height: 18px;
}
[/sourcecode]

Styling The Navigation

For our navigation start off by styling the unordered-list “UL”. Simply float the navigation to the right then add 30px of right margin.

[sourcecode language="css"]
ul.right-nav {
float: right;
margin-right: 30px;
}
[/sourcecode]

The next few styles are for our navigation list “LI” items and the link “A” associated with our buttons. For our list “LI” items we float each of them left, to add spacing in between each button we add a left margin of 22px.

For our list “LI A” links we display each of them as a block and add a text-indent which will push the text off the page (We’ll be using images don’t forget).

Finally we need to add a fixed width and height to our buttons to find out how big you need to set them you have to measure each button then use the biggest one as your fixed width and height.

[sourcecode language="css"]
.right-nav li {
float: left;
margin-left: 22px;
}

.right-nav li a {
display: block;
height: 46px;
text-indent: -9999px;
width: 38px;
}
[/sourcecode]

We now have to style our list “LI” classes, each list class will have our navigation background image set as a background. You can merge these styles into one by separating each style with a comma.

[sourcecode language="css"]
li.save a, li.print a, li.contact a {
background-image: url(../images/right_navigation.png);
background-repeat: no-repeat;
}
[/sourcecode]

All’s we have to do now is adjust our list background image position so that the buttons display correctly. Your positions might be different to mine depending on how big your buttons are.

[sourcecode language="css"]
li.save a {
background-position: 5px top;
}

li.print a {
background-position: -44px top;
}

li.contact a {
background-position: -101px top;
}
[/sourcecode]

Adding The Divider

Inside your HTML file create an empty DIV with a class of divider. The DIV should live underneath your intro text inside the “page” DIV.

[sourcecode language="html"]

[/sourcecode]

Inside your stylesheet add the divider class then set the “divider.PNG” image as a background repeated horizontally (X Axis). Float the DIV left with a top and bottom margin of 27px. Finally add a fixed width and height, the height should be 2px the same height as the image the width should be the same width as the “page” DIV.

[sourcecode language="css"]
.divider {
clear: both;
background-image: url(../images/divider.png);
background-repeat: repeat-x;
float: left;
height: 2px;
width: 809px;
margin-top: 27px;
margin-bottom: 27px;
}
[/sourcecode]

Adding Your Section Titles

Inside your HTML file, underneath your divider simply add an “H2″ tag. Inside the “H2″ tag add one of your section titles I.E – Technical Skills.

[sourcecode language="html"]

Technical Skills

[/sourcecode]

Inside your stylesheet add your “H2″ tag then set the text color, font size, letter spacing and some bottom margin to separate the title from the content which will lie underneath. Finally add a left margin of 30px to push the title over inline with everything else.

[sourcecode language="css"]
h2 {
margin-left: 30px;
font-size: 25px;
color: #414141;
letter-spacing: -1px;
margin-bottom: 15px;
}
[/sourcecode]

All your section titles should be wrapped within the “H2″ tag.

Adding Your CV Details

All the CV information/details will be added using an unordered list “LI”. In your HTML file underneath your H2 tag create an unordered list “LI” with a class of “details”.

[sourcecode language="html"]

[/sourcecode]

Inside the unordered list add a list “LI” item containing an “H3″ tag. Inside the “H3″ tag add your title E.G XHTML & CSS – 4 Years, Intermediate to Advanced.

[sourcecode language="html"]

XHTML & CSS – 4 Years, Intermediate to Advanced

[/sourcecode]

Inside the “H3″ tag where you have the details of the “H3″ tag E.G 4 Years, Intermediate to Advanced, add a span class of “color2″. Doing this will enable us to add additional styling to that specific bit of text.

[sourcecode language="html"]

XHTML & CSS – 4 Years, Intermediate to Advanced

[/sourcecode]

Underneath the “H3″ tag create a “P” tag will your text.

[sourcecode language="html"]

XHTML & CSS – 4 Years, Intermediate to Advanced

TEXT GOES HERE

[/sourcecode]

When adding more details simply create another list containing the “H3″ and “P” tags.

[sourcecode language="html"]

XHTML & CSS – 4 Years, Intermediate to Advanced

TEXT GOES HERE

Adobe Photoshop – 8 Years, Advanced

TEXT GOES HERE

[/sourcecode]

Styling Our Details

Inside your stylesheet you need to add your unordered list classes, start with the “UL” Attribute.

Float your list to the left then add left and bottom margins. The left margin will push the list over inline with everything else and the bottom margin will space out the lists.

[sourcecode language="css"]
ul.details {
float: left;
margin-left: 30px;
margin-bottom: 10px;
}
[/sourcecode]

For your list elements add your “bullet.PNG” image as a background then using some left padding push the list elements over so the text is by the side of the bullet. Finally add a bottom margin which will space out the list elements.

[sourcecode language="css"]
.details li {
background-image: url(../images/bullet.png);
background-repeat: no-repeat;
background-position: left 6px;
padding-left: 35px;
margin-bottom: 20px;
}
[/sourcecode]

Finally, we need to style our “P” tags within our list. Set your font size and color along with any thing else you want to add. Don’t forget to add a right margin of 30px which will push the text over from the right.

[sourcecode language="css"]
.details li p {
margin-right: 30px;
text-align: justify;
color: #646464;
font-size: 12px;
line-height: 18px;
}
[/sourcecode]

Using a combination of H2, H3 and the list items make up the rest of your CV details.

Adding Your Custom Font With CSS3

Move your desired font to your desktop then go to “Font Squirrel” and convert your font into a “TrueType”, “EOT” and “SVG” file. These 3 types of fonts are needed for the custom font to work in our browsers.

Once you’ve converted the font move the 3 files into your fonts folder. Open your CSS file then add the @fontface code to the top.

[sourcecode language="css"]
@font-face {
font-family: ‘MyriadProRegular’;
src: url(‘myriadpro.eot’);
src: local(‘Myriad Pro’), local(‘fonts’), url(‘myriadpro.ttf’) format(‘truetype’), url(‘myriadpro.svg#MyriadPro-Regular’) format(‘svg’);
}
[/sourcecode]

Also inside your CSS file add the font family to your “page” DIV.

[sourcecode language="css"]
font-family: MyriadProRegular, Verdana, Arial;
[/sourcecode]

Test your template in your browser and see how it looks. I’ll be releasing the template for download soon along with the PSD file.

Take care and thanks for reading.

Personal vCard Pt.2

Richard Carpenter — Sun, 07 Feb 2010 21:09:04 +0000

Hello everybody welcome to the second part of the vCard layout tutorial. In today’s tutorial we’ll be converting the vCard into a 4 page template, if you haven’t already id download the free PSD file i released earlier OR feel free to follow along with your own PSD FILE.

Setting Up Our Local Files

Create a new folder on your hard drive labeled “vCard”, inside the folder called “vCard” create two more folders “images” and “stylesheets”.

Inside the stylesheets folder create 3 separate CSS files with the following names. “ie.css”, “reset.css” and “styles.css”.

You can easily create CSS files using notepad, just open up a blank notepad document and save it as “filename.css” inside the stylesheets folder. Alternatively you can probably use your favorite code editor.

Finally in your favorite code editor create a blank HTML document called “index.html”, save the HTML file inside the main folder with your two folders.

Linking Our Stylesheets

Inside your HTML file add your own personal title within the “TITLE” tags.

[sourcecode language="html"]
Personal vCard – HV-DESIGNS.CO.UK By Richard Carpenter
[/sourcecode]

Next we need to link our stylesheets the first one we’ll link will be our main one “styles.css”.

[sourcecode language="html"]

[/sourcecode]

The next stylesheet will be our internet explorer specific stylesheet “ie.css”, we’ll link this stylesheet using a conditional statement. Basically the way it works is if someone browses the site using internet explorer 7 then the elements within the “ie.css” stylesheet will become active.

[sourcecode language="html"]

[/sourcecode]

We have one more style sheet to link (reset.css), but we wont link the stylesheet within the HTML file. Instead the stylesheet will be imported into our “styles.css”. Open up your “styles.css” stylesheet, at the top add the following code.

[sourcecode language="css"]
@import url("reset.css");
[/sourcecode]

Drafting Some Div’s

Inside the “BODY” tag of your HTML document start off with a DIV of “container”, this DIV will be our main box which will contain all our website elements.

[sourcecode language="html"]

[/sourcecode]

We now need to add 3 more DIV’s which will make up our layout, because the way our layout is designed we can’t make the framework using CSS. So instead we’ll be using 3 separate images.

The first DIV will contain our top rounded corners, the middle DIV will be our main DIV where we add all our content, the middle DIV will also contain a 1 pixel background image which will repeat over and over again. Finally the last DIV will contain our bottom rounded corners and reflection.

We draft the DIV’s out like this.

[sourcecode language="html"]

[/sourcecode]

Slicing Our Main Images

Open up your PSD file, hide your background layer then select the rectangular marquee tool and make a selection around the top half of your layout including some of the drop shadow. My selection is “856 pixels x 18 pixels”.

Once you’ve made the selection and your happy with it go to “edit > copy merged”. Create a new document, the dimensions of the copied selection should automatically be inputted into the new document box.

Paste the selection into the new document, delete the background layer then save the document as “vcard_top.PNG” inside the images folder.

You need to do the steps listed above for every image your create unless stated otherwise. Remember the steps as i wont be repeating the steps for every image we slice.

Head back over to your original PSD document, select the rectangular marquee tool once again and a make a selection any where across the middle part of your layout. The selection should be equal width to the last image you created and the selection should contain the same amount of drop shadow.

Paste the selection into the new document, delete the background layer then save the document as “vcard_middle.PNG” inside the images folder.

Finally repeat the steps above only this time for the bottom part of the layout including the reflection. Remember to include the same amount of drop shadow into the selection.

Last but not least we need to slice our background image. Hide all the layout elements in your PSD file leaving the background layer un-hidden. Make a 1 pixel high selection spanning 850 pixels wide across the middle part of the radial gradient.

Copy the selection then save it as “bg.PNG” inside the images folder.

Bringing It Together With Some CSS

Open up your “styles.css” file inside your code editor, the first tag we need to style is our body tag. The body tag contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.

Our body styles look like this.

[sourcecode language="css"]
body {
background-image: url(../images/bg.png);
background-repeat: repeat-y;
background-position: center;
background-color: #D6D6D6;
color: #9a9a9a;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
[/sourcecode]

We add our background image “bg.PNG” as our body background, we then repeat our background along the Y-Axis (vertically). For our background to be situated in the middle of our browser we need to set the background position to center. Finally we set our main background color, font color and font size.

The next DIV we add CSS styles to is our container DIV.

[sourcecode language="css"]
#container {
margin: auto;
width: 856px;
padding-top: 50px;
}
[/sourcecode]

Our container should have a width of 856 pixels the same as our images we created earlier. To center the layout in our browser we set our margins to auto, finally I’ve added 50 pixels of top padding which will push the layout down away from the top of the browser.

Finally we can add our CSS styles to the last 3 DIV’s. The reason why I’m showing all 3 together is because there basically all the same.

[sourcecode language="css"]
#vcard-top {
background-image: url(../images/vcard_top.png);
background-repeat: no-repeat;
float: left;
height: 18px;
width: 856px;
}

#vcard-middle {
background-image: url(../images/vcard_middle.png);
background-repeat: repeat-y;
float: left;
width: 856px;
}

#vcard-bottom {
background-image: url(../images/vcard_bottom.png);
background-repeat: no-repeat;
float: left;
height: 62px;
width: 856px;
}
[/sourcecode]

For our 3 left over DIV’s we add our background images, the top and bottom DIV’s the background should be set to no repeat, where as the middle background we need it to repeat vertically. Each element is floated left and has a width and height that corresponds to the images we created earlier, apart from the “vcard-middle” DIV, there should be no height set as we want the DIV to expand with our content.

Test your layout inside your browser to see how it looks. Hopefully you should have something that looks like this.

Creating Our Sidebar And Content Div’s

For use to add our sidebar elements and content we need to create two DIV’s inside the “vcard-middle” DIV. To determine the width and margins of each DIV we have to do some measuring in photoshop.

We need to measure from our drop shadow to the sidebar area.

From the start of our drop shadow to the sidebar area is “15 pixels”, so we know that we need to add 15 pixels of left margin to our sidebar DIV. We now need to measure our actual sidebar area.

Our sidebar area will need a width of 162 pixels. We create our DIV for the sidebar like this.

[sourcecode language="html"]

[/sourcecode]

The styles for our sidebar DIV look like this.

[sourcecode language="css"]
#sidebar {
float: left;
width: 162px;
margin-left: 15px;
}
[/sourcecode]

We first float the DIV left so that the content DIV will align-up next to it. We then add our width of 162px and add a left margin of 15px. The sidebar DIV should now be perfectly aligned up.

We do exactly the same for the content area. We know there are three 1 pixel lines in between the sidebar and content area, so the margin for our content area will be 3 pixels.

Next measure the content area but don’t include the right frame and drop shadow. Just measure to the end of the white area.

Our content DIV HTML looks like this.

[sourcecode language="html"]

[/sourcecode]

The CSS for our content DIV looks like this.

[sourcecode language="css"]
#content {
float: left;
width: 662px;
margin-left: 3px;
}
[/sourcecode]

Your content area should now all be aligned up nicely, lets add some content.

Creating The Sidebar Menu

Inside the “sidebar” DIV create a simple unordered list with a class of navigation. Add the names for your links including the title attribute. Each list item you also have its own CLASS relating to that list link. Your list should look like this.

[sourcecode language="html"]

[/sourcecode]

Before we start adding the styles for our navigation we first need to slice our icons, the hover state for our buttons and the little navigation dividers.

The way I’m going to style the navigation in this tutorial is going to be slightly different from all the rest of my tutorials, as in this tutorial we’ll be using sprites. The way it works is we have one big image of all the navigation buttons in there normal state and hover state. The image looks like this.

The image can be either in vertical form or horizontal form, we can adjust the position of the background using CSS. Each button should be equal height and length, all mine are 162px 65px.

Lets add the CSS for our navigation.

[sourcecode language="css"]
.navigation li {
display: block;
float: left;
}
[/sourcecode]

We’ll start with styling our list items. Each list item will be displayed as a block and floated left.

[sourcecode language="css"]
.navigation li a {
display: block;
height: 65px;
width: 162px;
text-indent: -9999px;
background-image: url(../images/nav_divider.png);
background-repeat: repeat-x;
background-position: bottom;
}
[/sourcecode]

Each list item link will also be displayed as a block and must have a width and height which match our buttons, which were 162px X 65px. I’ve added a text indent to shift our text descriptions off the page, the text descriptions will still be accessible by search engines.

We then add our navigation divider image as a background and repeat it horizontal (X axis), positioning the background at the bottom will ensure the background image is displayed at the bottom of each button.

[sourcecode language="css"]
li.about, li.work, li.social, li.contact {
background-image: url(../images/navigation.png);
background-repeat: no-repeat;
}
[/sourcecode]

The above code adds our navigation “sprite” image as a background to each one of our list classes. We can merge styles that are the same saving space and loads times.

All’s we have to do now is adjust the background position on a list classes. The code looks like this.

[sourcecode language="css"]
li.about {
background-position: left top;
}

li.work {
background-position: -162px top;
}

li.social {
background-position: -324px top;
}

li.contact {
background-position: right top;
}
[/sourcecode]

The math’s arn’t that hard too work out, we also style our hover states in the same way.

[sourcecode language="css"]
li.about:hover {
background-position: left bottom;
}

li.work:hover {
background-position: -162px bottom;
}

li.social:hover {
background-position: -324px bottom;
}

li.contact:hover {
background-position: right bottom;
}
[/sourcecode]

Test the navigation in your browser to see how it looks.

Adding Our Textual Content

We’ll now add our text for our content area, all our text will go inside the “content” DIV. We’ll start off with our main title and slogan. We’ll start by creating an H1 tag with our title then we’ll add our slogan within the H1 tag wrapped inside a span class of slogan. The HTML looks like this.

[sourcecode language="html"]

Richard Carpenter Front-End Web Developer

[/sourcecode]

On the next line underneath our H1 tag we’ll add an H2 tag with our welcome message.

[sourcecode language="html"]

Richard Carpenter Front-End Web Developer

Hello, Welcome…

[/sourcecode]

To finish off the page we’ll add the rest of our text wrapped in P tags.

[sourcecode language="html"]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet sem libero, vitae rhoncus orci. Suspendisse enim sem, iaculis a dapibus eleifend, laoreet vitae tellus. Cras vitae dignissim purus. Nunc mattis luctus eleifend. Aliquam vel felis risus. Quisque imperdiet gravida consequat. Fusce volutpat tortor ac lectus pellentesque congue. Integer non lacus non felis congue egestas vel et erat. Donec elit nunc, posuere in semper id, pharetra vitae dolor. Nam imperdiet, risus vel fringilla placerat, enim erat cursus lorem, sit amet vulputate ante sapien sed dolor.

[/sourcecode]

The CSS for our H1, H2 and P tags look like this.

[sourcecode language="css"]
h1 {
font-size: 30px;
color: #595858;
text-align: center;
letter-spacing: -2px;
margin-top: 10px;
margin-bottom: 20px;
}

h2 {
font-size: 16px;
color: #4e4e4e;
margin-bottom: 5px;
}

span.slogan {
color: #858585;
font-size: 14px;
vertical-align: middle;
letter-spacing: -1px;
}

#content p {
text-align: justify;
}
[/sourcecode]

Done

Test your layout inside your browser, you should have something like the image below.

Still not convinced, you can view the live demo by clicking the image below. All that’s left for you to do now is create your additional pages which shouldn’t be too hard. Look out for the complete layout which il be giving away for free soon.

Hosting Layout #2: Sitebuild Pt.2

Richard Carpenter — Wed, 14 Oct 2009 16:28:39 +0000

PART TWO of the PSD sitebuild for Hosting Layout #2. If you havent already download the FREE PSD here.

Welcome to part two, lets get started.

Slicing And Marking-Up The Content Area

The content area will be sliced and coded similar to the navigation, there will be top part, a middle part and a bottom part. The top and bottom parts will contain one image, while the middle part will contain a small image which will repeat over and over with the flow of content.

The only dis-advantage of doing it this way is the sidebar will always be as big as the content area, but because the layout has the 3D part seperating the sidebar from the content area, i dont see how else it can be done.

Open up your PSD file, then hide all sidebar and content text layers, leaving just the content box and sidebar. Select the rectangular marquee tool then make a selection around the top half of the main content area and also the sidebar.

Repeat the same process for the bottom area, then save both images as “content_top.png” and content_bottom.png” inside the images folder, if both images are the same dimensions it will make life alot easier. Next, make a selection around the middle part of both the content and sidebar area. The selection doesnt need to be any bigger than 1 pixel high, just as long as its 900 pixel’s wide.

In your HTML file create 3 class, “content-top”, “content-middle” and “content-bottom”. In the top and bottom classes insert your top and bottom images.

[sourcecode language="html"]

[/sourcecode]

We can now add our CSS styles, because our top and bottom styles will be the same we can group our top and bottom set of styles just like we did on our navigation. Both styles should be floated left and have a fixed width and height which match the dimensions of the images. If your images are different dimensions you’ll have to seperate the styles.

For the middle class we do exactly the same only this time remove the fixed height and apply the content_middle.png image as a background. Finally the background should be repeated vertically.

[sourcecode language="css"]
/*————— MAIN CONTENT IMAGES —————*/

.content-top, .content-bottom {
float: left;
height: 20px;
width: 900px;
}

.content-middle {
background-image: url(../images/content_middle.png);
background-repeat: repeat-y;
float: left;
width: 900px;
}
[/sourcecode]

Creating The Sidebar

Now all our images are setup we can begin to add template content. All our content will be adding inside a DIV inside the content-middle class. We’ll start with the sidebar.

Inside the content-middle class create a new DIV called sidebar. Inside the DIV sidebar create an H2 tag with a class of plan, this is where we add our plan number (PlanOne). Around the number add a span class of “plan-color2″.

[sourcecode language="html"]

[/sourcecode]

Before we add the CSS for our sidebar elements we must first slice our little icons. Make a selection around the plan and list icons using the rectangular marquee tool.

Save each icon in PNG format on transparent backgrounds inside the images folder. Now for the sidebar CSS.

Give the sidebar a fixed width of 229px, i know the size of the sidebar as it was measured in photoshop before hand. Add 10px padding all the way around the DIV then finally float the DIV left.

[sourcecode language="css"]
/*————— LEFT CONTENT —————*/

#sidebar {
float: left;
width: 229px;
padding: 10px;
}
[/sourcecode]

The span class we added inside the H2 tag is just to change the color of the text. The 2H2 tag styles you should already be familar with so il move straight onto the the H2 class “plan”. In the class we need to add our little icon, we simply set it as a background then use padding to shift the text over away from the icon.

[sourcecode language="css"]
span.plan-color2 {
color: #14a7ec;
}

h2 {
font-size: 24px;
text-transform: capitalize;
color: #373737;
letter-spacing: -2px;
margin-bottom: 10px;
}

h2.plan {
background-image: url(../images/plan_icon.png);
background-repeat: no-repeat;
padding-left: 40px;
}
[/sourcecode]

Creating The Sidebar Plan Lists

Before we attempt to style and code the sidebar plan lists, lets slice our final image from the PSD file, the learn more button. Slice the learn more button from the PSD file using the methods already explored, then save it inside the images folder.

The HTML mark-up for the plan lists is quite easy, we first create an unorderlist with a class of “plan-list”, then add our individual list items (LI).

[sourcecode language="html"]

100MB Webspace

1.5GB Bandwidth

15 Mailboxes

1 Database

1 Domain Name

24 Hour Support

[/sourcecode]

We can also add our learn more image inside the actual list, underneath th last list item create a new list item with a class of “learn-more”. Inside the learn more list item just insert the image using the normal image code. Finally, add a class of “learn-more-image” to the actual image.

[sourcecode language="html"]

[/sourcecode]

The CSS for our list looks like this.

[sourcecode language="css"]
ul.plan-list {
margin-top: 20px;
}

.plan-list li {
background-image: url(../images/list_icon.png);
background-repeat: no-repeat;
padding-left: 20px;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #c7c7c7;
padding-bottom: 5px;
margin-bottom: 5px;
margin-top: 5px;
padding-top: 5px;
background-position: left center;
}

li.learn-more {
background-image: none;
border-bottom-style: none;
margin-top: 20px;
margin-bottom: 20px;
}

.learn-more-image {
float: right;
}
[/sourcecode]

We can now add as many lists as we like. Heres all 3 plans together.

[sourcecode language="html"]

[/sourcecode]

Creating The Content Area

As soon as the sidebar ends we can add another DIV called “main-content”.

[sourcecode language="html"]

[/sourcecode]

Inside this DIV is where all our main content will go. The CSS looks like this.

[sourcecode language="css"]
#main-content {
float: left;
width: 614px;
margin-left: 17px;
padding-right: 10px;
padding-left: 10px;
line-height: 20px;
text-align: justify;
}
[/sourcecode]

We float our DIV left which will bring it inline with the sidebar, we then need to add a left margin to push the content across away from the 3D part of the image. The content area has a fixed width, which was measured in photoshop, we then add padding to the left and right of the DIV to push the text away from the edges, top and bottom padding is not needed on the main content DIV as the top and bottom images provide a decent enough gap.

You should be able to add some paragraphs inside the “main-content” DIV and any other content you might want.

Coding The Footer

For the footer we need to create a DIV outside of the container area.

[sourcecode language="html"]

[/sourcecode]

Once you’ve created the DIV add the following CSS styles.

[sourcecode language="css"]
/*————— FOOTER —————*/

#footer {
clear: both;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
padding-top: 20px;
text-align: center;
[/sourcecode]

For the footer to remain under the container we need to clear both floats. For the footer to remain in the middle of the browser we need to set left and right margins to auto, just like we did our container.

Things Left To Do

You should now have a complete layout, however there are some elements which still need to be styled things like, hyperlinks, headers 3 onwards and anything else you might want to add. Ive uploaded my coded version for you all to look at, take alook at the code and take alook at the CSS stylesheet.

Hosting Layout #2: Sitebuild Pt.1

Richard Carpenter — Mon, 12 Oct 2009 14:00:12 +0000

Hello everybody as requested heres the PSD sitebuild for Hosting Layout #2. If you havent already download the FREE PSD here.

Right lets get started

Preparing Our Folders And Files

Create a new folder on your desktop called “Hosting Layout”, inside this folder create another two new folders. Rename one folder “Stylesheets” and the other “Images”.

Inside the folder “Stylesheets” create two empty CSS files, one called “styles.css” and another called “reset.css”. Inside the main directory create a blank HTML file called “index.html”.

Preparing Our HTML And CSS Files

Open up your HTML file in your favourite code editor, il be using adobe dreamweaver. Inside your empty HTML file add the doctype, website title and link the styles.css stylesheet. The code should look something like this.

[sourcecode language="html"]

YOUR HOSTING – Template By Richard Carpenter | www.hv-designs.co.uk

[/sourcecode]

Now open up the “reset.css” file in your code editor. Inside the “reset.css” file were going to add a global reset for the whole website, the reset im using is based upon the “Yahoo! User Interface Library“.

[sourcecode language="css"]
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal }
q:before, q:after { content:”}

/* Global reset-RESET */
/* The below restores some sensible defaults */
strong { font-weight: bold }
em { font-style: italic }
a img { border:none } /* Gets rid of IE’s blue borders */
[/sourcecode]

Close the “reset.css” file as we won’t be needing it again. Now open up the “styles.css” file, at the very top of the file were going to import our “reset.css” file. We do this by adding the code below.

[sourcecode language="css"]
/*————— ADDITIONAL STYLESHEETS —————*/

@import url("reset.css");
[/sourcecode]

Coding The PSD Background

Now all our prep work has been done lets get down to business. Open up the hosting layout PSD file, then select the rectangular marquee tool. Scroll down to the very bottom of the canvas and make a rough selection.

The size of the selection isn’t really that important hence why i said rough selection. Now you’ve made the selection go to “edit > copy merged”, then go to “file > new” (the dimensions should automatically be entered) then “edit > paste”. Save the file as “background.png” inside the images folder.

Inside the “styles.css” file create a style for the body tag, inside the style for the body tag enter the following styles.

[sourcecode language="css"]
/*————— MAIN BODY —————*/

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #898989;
background-image: url(../images/background.png);
background-repeat: repeat;
margin-top: 30px;
margin-bottom: 30px;
}
[/sourcecode]

Lets just go through the styles above, we first set our font family for our website, i used the font “verdana” mostly inside the PSD file so we’l set that our as primary font. We then add our font size of 12 pixels along with the primary color of our text.

The chunk of background we just copied from the PSD file we set as our background image then set the background to repeat. Finally we add a top and bottom margin to the body which in turn will give us a gap at the top and bottom of our layout, just like the PSD file.

Coding The Website Title

Head over to the PSD file, select the rectangular marquee tool then make a selection around the website title and slogan.

Try and get the selection as close as possible. Before we copy and paste to a new document we need to hide the background layer, as we need the image to be on a transparent background. Once you’ve hid the background layer go to “edit > copy merged” then paste to a new document. Save the image as “title.png” inside the images folder.

Lets now mark-up some code in our HTML file. We start off with a “container DIV” which is what our site will be contained in.

[sourcecode language="html"]

[/sourcecode]

Inside our “container DIV” we then add another DIV called “title”, inside the “DIV title” we insert our website title image.

[sourcecode language="html"]

[/sourcecode]

Lets style the two DIV’s we just created. We’ll start with the “container DIV”, our website PSD was based upon the website being 900px wide, so we first set a width of 900px, we then want the website to be centered in our browser so we set our margin’s to auto. The code looks like this.

[sourcecode language="css"]
/*————— MAIN CONTAINER —————*/

#container {
margin: auto;
width: 900px;
}
[/sourcecode]

For our “title DIV” we need to create a fixed width and height, the dimensions for the width and height should be the same as our title image.

The dimensions on your image might be slightly different compared to mine. We then float our DIV left and add a margin at the top of 2px. The margin at the top of 2px will bring the title DIV level with our navigation, you wont know this yet but i will as ive pre-coded my layout. The code looks like this.

[sourcecode language="css"]
/*————— TITLE —————*/

#title {
float: left;
height: 43px;
width: 250px;
margin-top: 2px;
}
[/sourcecode]

Coding The Navigation

Lets move onto the navigation bar, now because the navigation is rounded were going to have to slice the navigation into 3 seperate images. In your PSD file make a selection around the left side of the naviagtion.

Copy the selection to a new document on a transparent background, then save the image as “nav_left.png” inside the images folder. Either repeat the same process for the right side of the navigation or just go to “image > rotate canvas > flip horizontally” then save the image again as “nav_right.png”.

For the middle part of the navigation we just need to make a small selection about 1 pixel wide, make sure the selection is the same height as the two left and right images.

Save the middle slice as “nav-middle.png” inside the images folder. Right lets move onto marking up our navigation in our HTML file.

The Navigation Mark-Up

For our navigation we start off with a DIV called “navigation” inside this DIV we then add 3 classes. “navigation-left”, “navigation-middle” and “navigation-right”, the left and right classes will contain our rounded corners, while the middle will hold our content.

Inside the “navigation-middle” class add an unorder list (UL) with a class of “nav-links” then add your navigation items in list form. Give the very last list item a class of “no-divider”, the no-divider class will remove the bullet point from the very last link in the navigation.

In the left and right navigation classes insert your left and right images. The code looks like this.

[sourcecode language="html"]

[/sourcecode]

Before we add our styles for our navigation lets first slice the little bullet point between each link.

Save the little bullet point as “nav_divider.png” inside the images folder. Lets now add our navigation styles to our style sheet.

The first item we style will be our main navigation DIV. We start off by floating the DIV to the right then add a fixed height, the height of the navigation DIV should be the same height as our navigation slices. All my slices have a height of 49px, the code looks like this.

[sourcecode language="css"]
/*————— NAVIGATION —————*/

#navigation {
float: right;
height: 49px;
}

[/sourcecode]

We can now style our left, right and middle part of the navigation, now because we inserted the rounded corners as images into the HTML file we dont need to add them as backgrounds or anything in our CSS file, which also means the left and right class styles can be grouped together.

First we float our two classes left inside of our navigation DIV, we then add a fixed width and height which should be the same pixels as our left and right images. If your images are not the same width and height then id suggest you modify them so they are, it will make life much easier. The code looks like this.

[sourcecode language="css"]
.navigation-left, .navigation-right {
float: left;
height: 49px;
width: 18px;
}
[/sourcecode]

The middle class is very similar as the left and right styles, the only difference is we add our navigation middle image as a background and repeat it horizontally, the fixed width is also removed which will allow the navigation to expand with the amount of content that is added.

[sourcecode language="css"]
.navigation-middle {
background-image: url(../images/nav_middle.png);
background-repeat: repeat-x;
float: left;
height: 49px;
}
[/sourcecode]

Lets now style our lists and hyperlinks. Each list element will be displayed as a block and floated left, the little bullet point image will be added as a background on each list, then the little bullet points background position will have to be adjusted to align in the middle of the navigation, the position should be set to the right and shifted down 22px.

We then remove the background style from the class “no-divider” which will remove the bullet point from the last navigation item.

[sourcecode language="css"]
.nav-links li {
display: block;
float: left;
background-image: url(../images/nav_divider.png);
background-repeat: no-repeat;
background-position: right 22px;
}

li.no-divider {
background-image: none;
}
[/sourcecode]

Finally we style navigation links and set the hover state of each link. The links will also be floated left and displayed as a block element, each link will have a height of 49px the same as our navigation DIV and images. We can seperate each link item by adding a left and right margin, adding some top padding will also push down our links to the middle of the navigation.

[sourcecode language="css"]
.nav-links li a {
display: block;
float: left;
height: 49px;
margin-right: 15px;
margin-left: 15px;
padding-top: 16px;
color: #FFFFFF;
text-decoration: none;
text-transform: uppercase;
font-size: 11px;
}

.nav-links li a:hover {
color: #004869;
}

[/sourcecode]

Coding The Featured Sentance

In our PSD file we had a featured sentance, we’ll achieve the same look in CSS by using span classes. Start off by creating a DIV called “featured-text”, inside the DIV add your featured sentance wrapped in a H1 tag. Insert a span class of “featured-text2″ on the words you want in a different color. The code looks like this.

[sourcecode language="html"]

Upgraded. Improved. Better. With more features than ever,
our hosting packages are the best way to get your sites online.

[/sourcecode]

The “featured-text DIV” will be floated left inside our container and will have a fixed width of 900px, no fixed height is set as we want the DIV to expand with the amount of content added. Finsh it off with a top and bottom margin of 40px which will provide a nice decent size gap between the sentance and the other content.

The H1 tag will contain our primary text color, size and font style, then the span class will will provide the additional styles for the blue bigger words. The code looks like this.

[sourcecode language="css"]
/*————— FEATURED TEXT —————*/

#featured-text {
float: left;
width: 900px;
margin-bottom: 40px;
margin-top: 40px;
}

h1 {
text-align: center;
font-size: 24px;
font-style: italic;
color: #FFFFFF;
}

span.featured-text2 {
font-size: 30px;
color: #14aff7;
}
[/sourcecode]

Stay Tuned…

Thats it for part one, look out for part two tomorrow, i suggest you subscribe VIA our RSS feeds if you havent already. I’ll look forward to all your comments, questions and part one results.

Web Design Layout #10: Sitebuild

Richard Carpenter — Mon, 13 Jul 2009 19:05:44 +0000

Hello welcome to the web design layout sitebuild tutorial, today i’ll be taking you through the process of converting it into a one page template.

You can download the template already coded by clicking the button above. You can also view a live version of the website by clicking here.

Getting Started

Before we even start diving into any HTML and CSS, lets create our files and its structure. On your desktop create a new folder and give it a name. Inside the folder create another folder called images. Also in the main folder create a blank HTML document called index.html and a blank CSS document called styles.css.

Mocking Up Our HTML

We’ll start by adding a few DIV tags into our HTML document, so go ahead and load up your HTML file in your favourite code editor. Set your website title within the “title tag” then link your style sheet using the usual method.

Inside the body area of our document create a DIV called “container”, everything for our website will be contained within this DIV.

[sourcecode language="html"]

[/sourcecode]

Inside our DIV “container” add 3 more DIV’s “navigation”, “title” and “featured”.

[sourcecode language="html"]

[/sourcecode]

The DIV navigation will contain our navigation elements, the title DIV will contain our website title and the featured DIV will contain our featured area.

Slicing Our Background

There arn’t any seperate images for the navigation and our featured area, infact the navigation and the featured area is just a snippet and repeated over and over again. Open up the layout PSD in photoshop, using the rectangular marquee tool make an all in one selection covering the navigation bar and the featured area. Also note down the color code for the background using the eye dropper tool.

Once you’ve made the selection go to “edit > copy merged”, then go to “file > new”. Once the new document dialog opens the selections dimensions you just copy merged should be automatically input into the width and height areas.

The dimensions in the image above are the actual sizes used for the template image. Finally save the image as “bg.PNG” inside your images folder.

Adding Some CSS

Now we have a few DIV’s setup and our background image ready to rock ‘n’ roll we can begin to add some CSS. Open up your CSS style sheet in your favourite code editor, inside the style sheet were going to add a simple reset, our body tag and then our DIV tags. The code looks like this.

[sourcecode language="css"]
* {
margin: 0px;
padding: 0px;
}

body {
background-color: #f6f6f6;
background-image: url(images/bg.gif);
background-repeat: repeat-x;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#container {
margin: auto;
width: 850px;
}

#navigation {
float: left;
height: 68px;
width: 850px;
}

#title {
}

#featured {
float: left;
height: 223px;
width: 850px;
}
[/sourcecode]

Lets look at the styles in abit more detail. Our first style displayed by an asterix (*) is our simple CSS reset. There are many methods to apply a CSS reset, but for the sake of the beginners, i’ve chosen to use this following method. The reset just resets all padding and margins to 0.

The next style is our body tag, on this tag we set our website background image (bg.PNG), background color and font family. Make sure the background is repeated along the X-axis (horizontally).

We then have our container style, this ones real simple, the container need to have a auto margin, this will center our website, the container also has a width of 850 pixels this will be the width of website.

Our navigation DIV is floated left inside our container, it has a fixed width the same as our container and has a fixed height of 68px. The height was measured in photoshop.

The title DIV style has been left empty for now as we need to slice up our image.

Finally we have our featured DIV, the same as our navigation it has a fixed width and height which was also measure in photoshop (down to the last pixel) again we also float the DIV left.

Slicing Up Our Title

For the website title make a selection 347 x 105 pixels using the rectangular marquee tool.

Save the website title and slogan on a transparent background, save the file as “title.PNG”.

Adding The Title Styles

The styles for our title DIV are as follows.

[sourcecode language="css"]
#title {
float: left;
height: 105px;
width: 850px;
background-image: url(images/title.png);
background-repeat: no-repeat;
background-position: left top;
}
[/sourcecode]

We float the DIV left and give it a fixed height (same dimesion as our title.PNG image). We also give the DIV a fixed width but its not going to be the same as our title.PNG image, instead it will be 850px same as our container. We’ll then add our image as a background, set it to no repeat and position it in the top left corner.

Adding Our Navigation

Now we have some basic foundations we can start adding in some of our elements starting with the navigation. The navigation is the same as any other, we present it in list form.

[sourcecode language="html"]

[/sourcecode]

There are of course two more slices we need to make to get the navigation working as intended. The first slice will be one of those little seperators (2 pixels by 68 pixels). The second slice will be the hover state on the home button, the selection on the hover state should be 1 pixel wide by the height of the navigation, we can then repeat the background in CSS.

Navigation CSS

The navigation CSS looks like this,

[sourcecode language="css"]
#navigation li {
display: block;
list-style-type: none;
float: left;
background-image: url(images/nav_seperator.gif);
background-repeat: no-repeat;
background-position: left;
}

#navigation li a {
color: #666666;
font-weight: bold;
width: 108px;
height: 42px;
text-align: center;
text-transform: uppercase;
font-size: 12px;
padding-top: 26px;
float: left;
text-decoration: none;
margin-left: 2px;
}

#navigation li a:hover {
background-image: url(images/nav_hover.gif);
background-repeat: repeat-x;
color: #0087c7;
margin-left: 2px;
}
[/sourcecode]

On each LI element we add our navigation seperator image with a background position of left. The list style type should be set to none this will remove the bullet points.

On the list links (a) we style everything to do with our text, we also need to add some sort of padidng to push the text down into the middle. We’ve added a fixed width and height, the width has gone by the longest word, again measured in photoshop. The height matches the navigation bar height just remember to take the padding into account as this also makes up the height.

Our hover style is pretty simple we just add our hover image as background repeating along the X-axis. The left margin of 2 px pushes the background image away from our navigation dividers. This in turn makes the hover image load directly between them instead of covering them up.

The Search Box

The search bar ive decided to include inside the LI of the navigation. The search itself will be made up of 2 DIV’s, the left rounded side and the right rounded side.

When i coded the layout to make things easier i removed the inner shadow within photoshop. Make your selection around the ends of the search form, each end should 21 x 40 pixels. The navigation code looks like this.

[sourcecode language="html"]

[/sourcecode]

So in our last LI tag we have a simple form with a class of “form”, we then have an empty DIV of search-left which will be our left search bar image. We then have our actual search field with class of “search-field”, underneath that we have our last DIV “search-right”, this will be our right search field image. Then finally we have our actual search button which you’ll also need to turn into a single image. The search button also has its own class assigned called “search-btn”. We can now style each element by using the following styles.

[sourcecode language="css"]
.form {
float: left;
padding-left: 20px;
height: 54px;
padding-top: 14px;
}

#search-left {
background-image: url(images/search_field_left.png);
background-repeat: no-repeat;
float: left;
height: 40px;
width: 21px;
}

#search-right {
background-image: url(images/search_field_right.png);
background-repeat: no-repeat;
float: left;
height: 40px;
width: 21px;
}

.search-field {
float: left;
background-color: #FFFFFF;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #d1d1d1;
border-bottom-color: #d1d1d1;
padding-top: 11px;
padding-bottom: 11px;

}

.search-btn {
float: left;
}
[/sourcecode]

Lets break each style down,

“.form” – Is the class we assigned to our form element or form container, we need to float this left to align it in the navigation. It has a fixed height of 68 pixels same as our navigation, remember the top padding also makes up the height. The left padding pushes the search form away from our last navigation button.

“#search-left & #search-right” – These are our two DIV’s which contain our search end images which we sliced in photoshop, they both have a fixed width and height which matches the dimensions of the images. These elements are also floated left.

“.search-field” – The search field class is style to replicate the photoshop version of the form, we add a 1pixel top and bottom solid border in the same color as our stroke. We must also set the background color to white and add sufficient padding.

Mocking Up Our Featured Area

Our featured contain’s two classes within our featured DIV.

The code looks like this.

[sourcecode language="html"]

[/sourcecode]

The class featured image contains our image within the featured area (without the white background/border). The class “featured-text” contains our title (H2) and a simple paragraph (P).

Featured Area CSS

Our CSS for the featured area looks like this.

[sourcecode language="css"]
.featured-image {
float: left;
height: 206px;
width: 517px;
}

.featured-image img {
background-color: #FFFFFF;
border: 1px solid #d9d9d9;
padding: 10px;
}

.featured-text {
float: right;
width: 323px;
height: 206px;
}

.featured-text p {
margin-top: 10px;
}
[/sourcecode]

Our feature image class has a fixed width and height which matches the dimensions of our image. Beware though as ther style underneath “.featured-image img” is also linked the featured-image class. You have to take into account when dealing with the fixed width and height that there is also 10px padding all the way around and image which increases the dimensions.

Slicing Our Content Boxes

Before we mockup our left and right content boxes we must slice our images, each box will contain 3 elements “top”, “middle” and “bottom”.

When slicing the the right content box you may need to make it smaller as our website is 850 pixels wide where as the PSD is 1000 pixels wide. The actual sizes are listed on the image above.

Mocking Up Our Content Boxes

As mentioned above each box will have 3 elements top, middle and bottom. The top and bottom will be empty DIV’s but will contain our images top and bottom content box images. The middle will contain our content and our content box background image.

[sourcecode language="html"]

[/sourcecode]

The CSS looks like this.

[sourcecode language="css"]
#left-content {
float: left;
width: 349px;
margin-top: 20px;
}

.left-top {
background-image: url(images/left_content_top.png);
background-repeat: no-repeat;
float: left;
height: 26px;
width: 349px;
}

.left-middle {
background-image: url(images/left_content_middle.png);
background-repeat: repeat-y;
float: left;
width: 307px;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #d1d1d1;
border-left-color: #d1d1d1;
padding-right: 20px;
padding-left: 20px;
}

.left-bottom {
background-image: url(images/left_content_bottom.png);
background-repeat: no-repeat;
float: left;
height: 26px;
width: 349px;
margin-bottom: 10px;
}
[/sourcecode]

Again everything has its own fixed width and height. The top and bottom classes fixed width and height are the same dimensions as our top and bottom images. The middle class is slightly different, when i sliced the middle image i didnt included the dark grey border, i decided to add it in using CSS.

Adding More Left Boxes

In the HTML code of the first left content box you should of noticed i put a big comment saying where the content box starts and ends. You just need to duplicate it whith the left content DIV. So 3 boxes would look like this.

[sourcecode language="html"]

[/sourcecode]

Right Content Box

The right content box is mocked up and coded the same way.

[sourcecode language="html"]

[/sourcecode]

We wrap the whole block in a DIV called right-content. Inside this DIV we then add our 3 elements which make up our content box “top”, “middle” and “bottom”. All our content is adding inside the middle DIV. The CSS looks like this.

[sourcecode language="css"]
#right-content {
float: right;
width: 480px;
margin-top: 20px;
}

.right-top {
float: left;
height: 29px;
width: 480px;
background-image: url(images/right_content_top.png);
background-repeat: no-repeat;
}

.right-middle {
background-image: url(images/right_content_middle.png);
background-repeat: repeat-y;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #d1d1d1;
border-left-color: #d1d1d1;
float: left;
width: 438px;
padding-right: 20px;
padding-left: 20px;
}

.right-middle h3 {
margin-bottom: 10px;
}

.right-bottom {
float: left;
height: 29px;
width: 480px;
background-image: url(images/right_content_bottom.png);
background-repeat: no-repeat;
}
[/sourcecode]

The Footer

For the footer i’m going to use the whole image instead of slicing the corners and having 3 parts. The layout isn’t really that graphics intensive, most of the graphics are small snipets which are repeated.

The footer code is pretty simple its just a single DIV inside the container at the bottom of your website. The code looks like this.

[sourcecode language="html"]

[/sourcecode]

The CSS looks like this.

[sourcecode language="css"]
#footer {
background-image: url(images/footer.png);
background-repeat: no-repeat;
float: left;
height: 88px;
width: 850px;
margin-top: 20px;
}

#footer p {
color: #666666;
text-align: center;
padding-top: 35px;
}
[/sourcecode]

Thats it all done.

Dont Forget…

You can download the CSS template for free, have a play around with it, your free to edit as you want.

Dark Layout #2: Sitebuild

Richard Carpenter — Mon, 22 Jun 2009 12:13:06 +0000

Good evening welcome to another tutorial by the hv team, in todays tutorial il be showing you how to slice and dice the dark layout #2 PSD into a working template.

Right lets get started, the first thing you need to do is create a new folder on your desktop called dark layout, inside this folder you need three more folders “images”, “js” and “styles”. Inside the “styles” folder create two blank CSS files “style.css” and “ie.css”, then in the main folder create your blank HTML file “index.html”.

The “js” folder will remain empty untill we come to our jquery jflow slider towards the end of the tutorial. The next part we need to tackle are our image slices, the first slice your going to need to make is for our background. (all images are .png files on a transparent backgrounds).

You dont need to slice a big part of the bits that will be repeated, you can use as little as a 1 pixel wide slice. Save the first slice as “bg.png”. The next slice is for our metal looking navigation bar, again the slice doesnt have to be massive as it will be repeated when we code our css.

Also on our navigation bar we have our little seperators, your also going to need to slice one of these into a seperate image.

Hide all your header elements in your layers pallette than make a selection around the whole of your header pattern, save the file as header_bg.png.

We also have a pattern background in our featured area, hide all your featured elements and make a selection around your featured background, ideally the selection needs to end when the pattern disapears eles you will get unexpected lines in the background.

If i wanted the content boxes to be rounded across all browser types id slice up our content boxes, but this time im not going to bother, instead il be rounding them off using CSS, the only trouble is some browsers do no support the border-radius style yet. So people using firefox, mozilla and safari will benifit from the rounded corners but everybody eles who isnt using them browser types will get square boxes.

The next slices we need to make are for our footer, we need to make two slices, the actual footer and the repeated background. We’ll start with the background that needs to be repeated.

Then our actual footer box.

Thats all the background slices taken care off we now need to start slicing some of the additional elements like our search submit button, our icons and our featured arrows. We’ll start with our search submit button.

Our RSS button.

We also need to slice both left and right arrow buttons on our featured slider.

Our actual featured image for our featured slider. It might be a good idea to note the size of your background selection you made on the featured background mine was about 300px in height so really your featured images shouldnt exceed 300px in height.

Now for our individual icons, try and keep the selection as tight as you can get it, also to make life easier make sure there icons are all the same width which means you may need to resize some by a traction or two. All mine are 39px wide.

Also in ouor sidebar content box inbetween our list items we have a divider seperating each item, you will also need to slice that, dont slice it all you just need a fraction of it as it will be repeated horizontally via css when we code it.

You should now have 17 images in your image folder, here’s a screenshot of my images folder.

We can now start coding our layout, open up your html file and both css files into your code editor il be using dreamweaver. In the head of your html file link your stylesheet style.css, for the ie.css file we need to use some special code which looks like this.

[sourcecode language="html"]

HV-Designs.co.uk – Dark Layout #2 PSD Sitebuild

[/sourcecode]

We can now begin to start mocking up our layout we’ll start with our header, logo, search and navigation.

The code looks like this.

[sourcecode language="html"]

[/sourcecode]

Our css looks like this, please refer to the commented code next to each style.

[sourcecode language="css"]
/* ———-MAIN BODY STYLES———- */

* {
margin: 0px; /*SETS 0 MARGIN*/
padding: 0px; /*SETS 0 PADDING*/
}

body {
color: #bababa; /*MAIN WEBSITE TEXT COLOR*/
font-family: Verdana, Arial, Helvetica, sans-serif; /*SIZE OF TEXT 0.69EM = 11PX*/
background-image: url(../images/bg.png); /*OUR BACKGROUND IMAGE*/
background-repeat: repeat-x; /*REPEATS BACKGROUND HORIZONTALLY*/
background-color: #000000; /*SETS THE COLOR OF OUR BACKGROUND WHEN THE BACKGROUND IMAGE COMES TO AN END*/
}

/* ———-CONTAINER STYLES———- */

#container {
width: 950px; /*MAXIMUM WIDTH OF OUR LAYOUT*/
margin-top: 13px; /*ADDS A TOP MARGIN TO THE TOP OF OUR CONTAINER*/
margin-right: auto; /*AUTO MARGIN*/
margin-left: auto; /*AUTO MARGIN*/
}

/* ———-HEADER STYLES———- */

#header {
float: left; /*FLOATS HEADER LEFT*/
height: 155px; /*ADDS A FIXED HEIGHT*/
width: 950px; /*ADDS A FIXED WIDTH, SHOULD BE SAME AS CONTAINER*/
background-image: url(../images/header_bg.png); /*OUR HEADER BACKGROUND IMAGE*/
background-repeat: no-repeat; /*STOPS HEADER BACKGROUND REPEATING */
}

#logo {
float: left; /*FLOATS LOGO LEFT*/
margin-top: 45px; /*ADDS TOP MARGIN*/
}

/* ———-HEADER SEARCH STYLES———- */

#search {
float: right; /*FLOATS SEARCH RIGHT*/
margin-top: 55px; /*ADDS TOP MARGIN*/
}

/* ———-NAVIGATION STYLES———- */

#navigation {
float: left; /*FLOATS NAV LEFT*/
height: 45px; /*ADDS FIXED HEIGHT*/
width: 950px; /*ADDS FIXED WIDTH SAME AS OUR CONTAINER*/
background-image: url(../images/nav_bg.png); /*OUR NAV BACKGROUND IMAGE*/
background-repeat: repeat-x; /*REPEATS NAVIGATION BACKGROUND HORIZONTALLY*/
}
[/sourcecode]

When tested in your browser you should have something like this.

Now lets begin to add some of the elements to our header. We’ll start with our website title and slogan. Inside your logo div add a simple h1 tag with your website title, because on our PSD file one of the words are in bold we need to add a span tag with a class of bold to the word we want in bold. Underneath our h1 tag add a simple p tag with a class of slogan then your slogan inbetween. The code looks like this.

[sourcecode language="html"]

yourwebsite

fancy slogan here

[/sourcecode]

We can now style these tags using our css. Add these styles to your stylesheet.

[sourcecode language="css"]
h1 {
font-size: 36px; /*H1 FONT SIZE*/
color: #FFFFFF; /*H1 FONT COLOR*/
font-weight: normal; /*SETS FONT WEIGHT TO NORMAL*/
letter-spacing: -3px; /*DECREASES LETTER SPACING (the space between each letter)*/
}

.slogan {
text-align: right; /*ALIGNS SLOGAN TEXT RIGHT*/
text-transform: capitalize; /*CAPITALIZES THE FIRST LETTER ON EACH WORD*/
}

.bold {
font-weight: bold; /*ADDS BOLD FONT WEIGHT*/
}
[/sourcecode]

You should now have a your website title and slogan nicely presented on your template.

Lets start building our search form, please note the search has to actually be connected up for it work, im just demonstrating the styling side. Inside your search div add a simple form with just a text field and submit button. On your submit button you’ll need to change the input type to “image” then add an addition attribute called “src” with the url to the button. Once you’ve done that add a class of search-field to the search field and a class of “search-btn” to the submit button, the code looks like this.

[sourcecode language="html"]

[/sourcecode]

The css for our search field and button are.

[sourcecode language="css"]
.search-field {
font-style: italic; /*SETS FONT TO ITALIC*/
color: #FFFFFF; /*SEARCH TEXT COLOR*/
border: 1px solid #2a2a2a; /*ADDS 1 PX BORDER IN COLOR SPECIFIED*/
background-color: #000000; /*CHANGES BACKGROUND COLOR IN SEARCH FIELD*/
padding: 7px; /*ADDS PADDING*/
margin-right: 10px; /*ADDS RIGHT MARGIN*/
}

.search-btn {
vertical-align: top; /*CHANGES VERTICAL ALIGNMENT ON SEARCH BUTTON*/
}
[/sourcecode]

You should now have something like this.

Now for our navigation bar, we’ll start with a simple list creating each item in the list a block element. Each list item will also have our little seperator image after each link.

[sourcecode language="html"]

[/sourcecode]

Here’s the css for our navigation.

[sourcecode language="css"]
.nav-links li {
list-style-type: none; /*REMOVES BULLET POINTS FROM THE LIST*/
float: left; /*FLOATS LEFT*/
text-align: center; /*ALIGNS TEXT CENTER*/
letter-spacing: -1px; /*DECRESES LETTER SPACING*/
background-image: url(../images/seperator.png); /*SEPERATOR IMAGE*/
background-repeat: no-repeat; /*STOPS SEPERATOR REPEATING*/
background-position: right; /*ALIGNS THE SEPERATOR RIGHT OF EACH NAVIGATION LINK*/
}

.nav-links li a {
text-decoration: none; /*REMOVES UNDERSCORE FROM LINK ITEMS*/
color: #000000; /*COLOR OF OUR NAVIGATION LINKS*/
text-transform: uppercase; /*TRANSFORMS NAVIGATION LINKS TO ALL CAPITAL LETTERS*/
font-size: 12px; /*ADDS FONT SIZE*/
display: block; /*DISPLAYS THE NAV LINKS AS A BLOCK ELEMENT*/
height: 29px; /*ADDS A FIXED HEIGHT TO NAV LINKS*/
width: 100px; /*ADDS A FIXED WIDTH TO NAV LINKS*/
padding-top: 15px; /*ADDS TOP PADDING TO EACH LINK*/
}

.nav-links li a:hover {
color: #666666; /*COLOR OF LINK WHEN HOVERED*/
}
[/sourcecode]

Also on our navigation in our PSD file we had a little rss icon on the right of the navigation, we can create that the same we did our navigation above.

[sourcecode language="html"]

[/sourcecode]

The css for our rss icon is similar too.

[sourcecode language="css"]
.rss li {
list-style-type: none; /*REMOVES BULLET POINTS FROM THE LIST*/
float: right; /*FLOATS RSS LINKS RIGHT*/
margin-right: 10px; /*ADDS RIGHT MARGIN*/
margin-top: 5px; /*ADDS TOP MARGIN*/
}

.rss li img {
border: none; /*REMOVES BORDER FROM IMAGE*/
}
[/sourcecode]

You should now have something like this.

Thats the header part of our website done, lets move onto our featured area. We’ll mock the featured area up like this.

The code looks like this.

[sourcecode language="html"]

[/sourcecode]

The css for the code above looks like this.

[sourcecode language="css"]
#featured-area {
background-repeat: no-repeat; /*STOPS BACKGROUND REPEATING*/
background-image: url(../images/content_bg.png); /*ADDS OUR CONTENT BACKGROUND IMAGE*/
float: left; /*ADDS A FIXED HEIGHT*/
width: 950px; /*ADDS A FIXED WIDTH*/
margin-bottom: 20px; /*ADDS BOTTOM MARGIN*/
}

.featured-control-left {
float: left; /*FLOATS LEFT*/
height: 170px; /*ADDS A FIXED HEIGHT*/
width: 33px; /*ADDS A FIXED WIDTH*/
padding-top: 130px; /*ADDS TOP PADDING*/
}

.featured-text {
float: right; /*FLOATS RIGHT*/
width: 425px; /*ADDS A FIXED WIDTH*/
height: 260px; /*ADDS A FIXED HEIGHT*/
padding-top: 40px; /*ADDS TOP PADDING*/
padding-right: 20px; /*ADDS RIGHT PADDING*/
}

.featured-content {
float: left; /*FLOATS LEFT*/
height: 300px; /*ADDS A FIXED HEIGHT*/
width: 884px; /*ADDS A FIXED WIDTH*/
}

.featured-control-right {
float: right; /*FLOATS RIGHT*/
height: 170px; /*ADDS A FIXED HEIGHT*/
width: 33px; /*ADDS A FIXED WIDTH*/
padding-top: 130px; /*ADDS PADDING TOP*/
}
[/sourcecode]

You should now have some solid foundations for your featured area, lets insert some of our graphic elements. Inside the div’s featured-control-right and featured-control-left insert your arrow icons.

[sourcecode language="html"]

[/sourcecode]

Underneath the class “featured-content” insert your featured image. Insde the class “featured-text” add a h2 tag with a header then add a paragraph wrapped in a p tag.

[sourcecode language="html"]

lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a elit risus, in pretium dolor. Nullam egestas lacus ante. Integer cursus elementum nunc in convallis. Praesent condimentum justo vel nunc vestibulum vitae vehicula purus dignissim. Integer cursus elementum nunc in convallis. Praesent condimentum justo vel nunc vestibulum vitae vehicula purus dignissim.

[/sourcecode]

You now need to add some addtional styles in your style sheet, because we’ve added an image into the featured area we need to make sure that no browser adds a border to it, we also need to style our h2 tag.

[sourcecode language="css"]
h2 {
color: #FFFFFF; /*H2 FONT COLOR*/
text-transform: uppercase; /*TRANSFORMS TEXT TO UPPERCASE*/
font-size: 18px; /*H2 FONT SIZE*/
}

.featured-content img {
margin-left: 20px; /*ADDS A LEFT MARGIN*/
margin-right: 20px; /*ADDS A RIGHT MARGIN*/
float: left; /*FLOATS LEFT*/
}
[/sourcecode]

Your featured area should now look something like this.

We’ll add our jquery slider towards the end of the tutorial. The wireframe for our content boxes is really easy, we just create two classes “left-content” and “right-content”.

[sourcecode language="html"]

[/sourcecode]

The styles for these classes are as follows.

[sourcecode language="css"]
/* ———-LEFT CONTENT STYLES———- */

.left-content {
float: left; /*FLOATS LEFT CONTENT BOX LEFT*/
width: 560px; /*ADDS A FIXED WIDTH*/
-moz-border-radius: 15px; /*ADDS A BORDER RADIUS (applys to Mozilla/Firefox and Safari 3 users ONLY)*/
-webkit-border-radius: 15px; /*ADDS A BORDER RADIUS (applys to Mozilla/Firefox and Safari 3 users ONLY)*/
background-color: #0a0a0a; /*LEFT CONTENT BACKGROUND COLOR*/
border: 1px solid #181818; /*LEFT CONTENT 1 PX BORDER AND BORDER COLOR*/
padding: 20px; /*ADDS PADDING ALL THE WAY AROUND*/
}

/* ———-RIGHT CONTENT STYLES———- */

.right-content {
float: right; /*FLOATS RIGHT CONTENT BOX RIGHT*/
width: 290px; /*ADDS FIXED WIDTH*/
-moz-border-radius: 15px; /*ADDS A BORDER RADIUS (applys to Mozilla/Firefox and Safari 3 users ONLY)*/
-webkit-border-radius: 15px; /*ADDS A BORDER RADIUS (applys to Mozilla/Firefox and Safari 3 users ONLY)*/
background-color: #0a0a0a; /*RIGHT CONTENT BACKGROUND COLOR*/
border: 1px solid #181818; /*RIGHT CONTENT 1 PX BORDER AND BORDER COLOR*/
padding: 20px; /*ADDS PADDING ALL THE WAY AROUND*/
}
[/sourcecode]

Included in the styles above are the css styles for border-radius which makes the corners on your content boxes round, as stated in the comments it only applys to Mozilla/Firefox and Safari 3 users ONLY every other browser will see square corners. Inside our left-content box were just going to add some simple paragraphs with a h2 tag.

[sourcecode language="html"]

lorem ipsum dolor

[/sourcecode]

Our h2 tag is already styled in the style sheet but our p tags aren’t so add these simple styles in your style sheet.

[sourcecode language="css"]
p {
font-size: 12px; /*TEXT FONT SIZE*/
line-height: 22px; /*TEXT LINE HEIGHT*/
text-align: justify; /*JUSTIFYS OUR PARAGRAPHS*/
margin: 5px 0 10px; /*ADDS TOP MARGIN OF 5PX AND BOTTOM MARGIN OF 10PX NO MARGIN LEFT OR RIGHT*/
padding: 0; /*ADDS NO PADDING*/
}
[/sourcecode]

Our right content box looks tricky to really it isnt, for our right-content box we just create a simple list, each list item will have its very own class, the code looks like this.

[sourcecode language="html"]

lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a elit risus, in pretium dolor. Nullam egestas lacus ante.

lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a elit risus, in pretium dolor. Nullam egestas lacus ante.

lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a elit risus, in pretium dolor. Nullam egestas lacus ante.

lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent a elit risus, in pretium dolor. Nullam egestas lacus ante.

[/sourcecode]

We then style out list as normal but with a few extra styles for our list classes.

[sourcecode language="css"]
.right-content-list li {
list-style-type: none; /*REMOVES BULLET POINTS FROM THE LIST*/
}

.right-content-list li p {
font-size: 11px; /*LIST P TAG FONT SIZE*/
line-height: 18px; /*LIST P TAG FONT LINE HEIGHT*/
background-image: url(../images/divider.png); /*OUR DIVIDER IMAGE UNDERNEATH EACH LIST*/
background-repeat: repeat-x; /*REPEATS DIVIDER IMAGE HORIZONTALLY*/
background-position: bottom; /*PLACES THE DIVIDER AT THE BOTTOM OF THE P TAG*/
padding-bottom: 15px; /*ADDS PADDING TO THE BOTTOM OF THE P TAG IN THE LIST*/
}

li.lock {
background-image: url(../images/lock_icon.png); /*OUR LOCK ICON*/
background-repeat: no-repeat; /*STOPS ICON REPEATING*/
background-position: left top; /*KEEPS THE ICON IN THE TOP LEFT CORNER*/
padding-left: 50px; /*ADDS LEFT PADDING*/
}

li.cog {
background-image: url(../images/cog_icon.png); /*OUR COG ICON*/
background-repeat: no-repeat; /*STOPS ICON REPEATING*/
background-position: left top; /*KEEPS THE ICON IN THE TOP LEFT CORNER*/
padding-left: 50px; /*ADDS LEFT PADDING*/
}

li.coins {
background-image: url(../images/coins_icon.png); /*OUR COINS ICON*/
background-repeat: no-repeat; /*STOPS ICON REPEATING*/
background-position: left top; /*KEEPS THE ICON IN THE TOP LEFT CORNER*/
padding-left: 50px; /*ADDS LEFT PADDING*/
}

li.mail {
background-image: url(../images/mail_icon.png); /*OUR MAIL ICON*/
background-repeat: no-repeat; /*STOPS ICON REPEATING*/
background-position: left top; /*KEEPS THE ICON IN THE TOP LEFT CORNER*/
padding-left: 50px; /*ADDS LEFT PADDING*/
}
[/sourcecode]

Test your template in your browser and you should have something like this.

Now for our footer, we want our footer to span across the browser just like our background/navigation does, to do this we need create our footer outside the container div.

[sourcecode language="html"]

[/sourcecode]

The footer div is the background that will repeat across the browser, the footer-content div will be where our footer content goes. The css looks like this.

[sourcecode language="css"]
/* ———-FOOTER STYLES———- */

#footer {
background-image: url(../images/footer_bg.png); /*ADDS OUR BACKGROUND IMAGE*/
background-repeat: repeat-x; /*REPEATS BACKGROUND HORIZONTALLY*/
clear: both; /*CLEARS BOTH FLOATS*/
height: 82px; /*ADDS A FIXED HEIGHT*/
background-position: bottom; /*PLACES BACKGROUND AT THE BOTTOM OF THE DIV*/
}

#footer-content {
background-image: url(../images/footer_bg2.png); /*ADDS OUR BACKGROUND IMAGE*/
background-repeat: repeat-x; /*REPEATS BACKGROUND HORIZONTALLY*/
height: 82px; /*ADDS A FIXED HEIGHT*/
width: 950px; /*ADDS A FIXED WIDTTH*/
margin: auto; /*AUTO MARGIN CENTERS OUR FOOTER*/
background-position: bottom; /*PLACES BACKGROUND AT THE BOTTOM OF THE DIV*/
}

#footer-content p {
text-transform: capitalize; /*TRANSFORMS THE FIRST LETTER IN EVERY WORD TO A CAPITAL LETTER*/
color: #000000; /*COLOR OF FOOTER TEXT*/
padding-top: 50px; /*ADDS TOP PADDING*/
padding-left: 20px; /*ADDS LEFT PADDING*/
}
[/sourcecode]

Your template should now be complete, there’s just some styles id recommend adding to get you started. We need to style our hyper links, h3 and h4 tags just incase you use them.

[sourcecode language="css"]
a:link {
color: #333333; /*COLOR OF A LINK*/
text-decoration: none; /*REMOVES UNDERSCORE*/
}
a:visited {
text-decoration: none; /*REMOVES UNDERSCORE*/
color: #333333; /*COLOR OF A VISITED LINK*/
}
a:hover {
text-decoration: underline; /*ADDS UNDERSCORE*/
color: #666666; /*COLOR OF A HOVERED LINK*/
}
a:active {
text-decoration: none; /*REMOVES UNDERSCORE*/
color: #333333; /*COLOR OF A ACTIVE LINK*/
}

h3 {
color: #FFFFFF; /*H3 FONT COLOR*/
text-transform: uppercase; /*TRANSFORMS TEXT TO UPPERCASE*/
font-size: 14px; /*H3 FONT SIZE*/
font-weight: normal; /*REMOVES BOLD*/
}

h4 {
color: #FFFFFF; /*H4 FONT COLOR*/
text-transform: uppercase; /*TRANSFORMS TEXT TO UPPERCASE*/
font-size: 11px; /*H4 FONT SIZE*/
}
[/sourcecode]

There are also some styles you need to add to the “ie.css” file, the styles listed below are just minor fixes for items that dont quite lineup.

[sourcecode language="css"]
/* INTERNET EXPLORER HACKS */

/* ———-HEADER SEARCH STYLES———- */

.search-btn {
margin-top: 1px; /*ADDS A TOP MARGIN TO SEARCH BUTTON*/
}

/* ———-FOOTER STYLES———- */

#footer-content p {
padding-top: 45px; /*ADDS TOP PADDING*/
}
[/sourcecode]

Were now going to intergrate the jflow plugin for jquery on our featured area. The featured once done should slide across to any other items you wish to add in there. The first we need to do is download jflow and the jquery libary file, please note im using the jquery libary 1.2.6 NOT the new one as i had trouble with the latest libary. Link the files in the head of your document.

[sourcecode language="html"]

HV-Designs.co.uk – Dark Layout #2 PSD Sitebuild

[/sourcecode]

Also inside the head section add this bit of javascript.

[sourcecode language="javascript"]

[/sourcecode]

The width and height should be set to the dimensions of the featured area, you will also notice the div “slides” you will need to ad this div into your featured area. Above the featured-area div add the jflow controller code.

[sourcecode language="html"]

[/sourcecode]

In your style sheet we need to an additional style which will hide our 2nd and third slides.

[sourcecode language="css"]
.hidden {
display: none; /*hides our 2nd and 3rd featured images*/
}
[/sourcecode]

Underneath our featured-area div add a div id of slides then add an empty div.

[sourcecode language="html"]

[/sourcecode]

Dont forget to close the div at the bottom. Now everything inbetwwen the blank div and the end of the blank div will slide, for the slide to actually work though you need 3 slides in total. Make sure the 2nd and third slides all start and end with a blank div. I find it best just copy everything from the blank div to the closing blank div then edit the content accordingly.

For the buttons to work on the featured area you need to add the jflow classes to the buttons.

[sourcecode language="html"]

[/sourcecode]

You can see a live work demo by clicking the button below.

Thats it hope you enjoyed this tutorial, any questions just give me a shout, dont forget to subscribe via rss and twitter, your help and support is much appreciated.

Your PROject Pt.3: 4 Additional Pages

Richard Carpenter — Tue, 26 May 2009 10:51:22 +0000

Hello welcome to part 3 of the your PROject template. Today we’ll be creating 4 extra pages to go with our template.

Right lets get started, goto your folder wherr your template is copy your index.html file then paste it into the same directory. Rename the copied index.html file to services.html, then open it up in your code editor. Locate the code between the end div tag for the header all the way down to the container ends div. Highlight it all and hit the delete key, basically all’s were doing is removing the content area. This is what your code should look like once deleted.

[sourcecode language="html"]

THIS IS WHERE YOUR NEW CODE WILL GO

[/sourcecode]

We can now begin to add our modified layout for our services page. We’ll be mocking it up in the same way as we did for our main page boxes, only this time the box will be 900px wide. We mock it up like this.

[sourcecode language="html"]

a content title here

May 20, 2009

SOME TEXT HERE

[/sourcecode]

As you can see the code is pretty much the same as our main page code only difference is we’ve renamed the div’s. The css is also pretty much the same.

[sourcecode language="css"]
/* ———-SERVICE’S PAGE STYLES———- */

.services {
float: left;
border: 1px solid #121212;
margin-bottom: 15px;
float: left;
width: 898px;
}

.services-inside {
background-color: #0c0c0c;
border: 1px solid #030303;
float: left;
width: 876px;
padding: 10px;
}

.services-inside p {
padding-top: 10px;
}
[/sourcecode]

Depending on what you actually want on your services page you’ll have to add in the extra styles. So if you wanted a list on the services page with some images then you’d have to style them under the “SERVICE’S PAGE STYLES” in the style sheet. Here is the code for my services page with images and a simple list.

[sourcecode language="html"]

a content title here

May 20, 2009

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis porttitor massa eu scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris eget metus orci, et venenatis turpis. Quisque felis velit, sollicitudin ac pellentesque vehicula, fermentum ut velit. Etiam tellus ipsum, posuere nec molestie in, ultrices vel enim. Donec vel est orci. Donec diam leo, fringilla sit amet vehicula eu, dictum quis elit.

Services

Service #1 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Service #2 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Service #3 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Service #4 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Service #5 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

another header goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis porttitor massa eu scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris eget metus orci, et venenatis turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis porttitor massa eu scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris eget metus orci, et venenatis turpis.

[/sourcecode]

You’ll now have to style the img tag’s and list’s in your stylesheet which looks like this.

[sourcecode language="css"]
.service-list li{
padding-left: 10px;
font-size: 0.7em;
color: #FFFFFF;
margin-left: 40px;
line-height: 18px;
margin-top: 10px;
margin-bottom: 10px;
}

.service-img {
padding: 5px;
background-color: #000000;
border: 1px solid #383838;
margin-left: 6px;
margin-top: 10px;
margin-bottom: 5px;
}
[/sourcecode]

My services page looks like this.

So basically when creating your new pages depending on what you have in there will determine what styles you will need in your style sheet otherwise you can re-use styles we have already set. Thats our services page done, lets start on our products page. Copy your services.html file and paste a copy in the main directory, rename the file to products.html then open it in your code editor. Keep all the classes associated with the services page as we can reuse them for this page just remove all the content inbetween them.

Once you’ve removed all the content from the classes you should have something like this. (just remember if you change anything in the services page css it will automatically change on the products page also. You can get around this by using the same styles but change the class ID’s.)

[sourcecode language="html"]

product #1 here

product short info

CONTENT HERE

[/sourcecode]

For the products page i think we’ll have 3 boxes, to do this all’s we need to do is copy and paste the code above 2 times.

[sourcecode language="html"]

product #1 here

product short info

CONTENT HERE

product #1 here

product short info

CONTENT HERE

product #1 here

product short info

CONTENT HERE

[/sourcecode]

All’s thats needed now is to stick some content inside each box. The content you choose to display and how you display it will determine what styles you have to put inside your style sheet. For instance if you look at the code below you’ll see what ive put in my three product boxes.

[sourcecode language="html"]

product #1 here

product short info

Service #1 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Service #2 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Service #3 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

[/sourcecode]

[sourcecode language="html"]

product #2 here

product short info

Service #1 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Service #2 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Service #3 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

[/sourcecode]

[sourcecode language="html"]

product #1 here

product short info

Service #1 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Service #2 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Service #3 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

[/sourcecode]

Each box contains a short paragraph, an image floated either left or right and again a small list. We can use the orginal P tag styles from our style sheet already, aswell as the list we already styled inside services section. All’s we need to style are some image left and right float options so we can float our product images either left or right. We can do this by adding the following css into our stylesheet.

[sourcecode language="css"]
/* ———-PRODUCT’S PAGE STYLES———- */

.imgfloat-left {
float:left;
padding: 5px;
background-color: #000000;
border: 1px solid #383838;
margin-right: 6px;
margin-bottom: 6px;
margin-top: 6px;
margin-left: 6px;
}

.imgfloat-right {
float:right;
padding: 5px;
background-color: #000000;
border: 1px solid #383838;
margin-left: 6px;
margin-bottom: 6px;
margin-top: 6px;
margin-right: 6px;
}
[/sourcecode]

Save your work and test your template in your browser. Here’s how mine looks.

Copy and paste the services page again, only this rename the file to testimonials.html. Remove ALL the content between the header ending div and container ending div. Were now going to make a new mockup but using some of the same styles. In the testimonials area we’ll have boxes the same as our products page but at the bottom of each box we’ll have some star ratings. The code looks like this.

[sourcecode language="html"]

customer #1

Thomas davis

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis porttitor massa eu scelerisque. Mauris eget metus orci, et venenatis turpis. Quisque felis velit, sollicitudin ac pellentesque vehicula, fermentum ut velit.

[/sourcecode]

We now need to style everything, we’ll use the same styles as our services page classes, but we’ll use the class testimonial instead. We’ve also created a new class called rating which will be for our stars. The css looks like this.

[sourcecode language="css"]
/* ———-TESTIMONIAL’S PAGE STYLES———- */

.testimonial {
float: left;
border: 1px solid #121212;
margin-bottom: 15px;
float: left;
width: 898px;
margin-right: 25px;
background-color: #0c0c0c;
}

.testimonial-inside {
background-color: #0c0c0c;
border: 1px solid #030303;
float: left;
width: 876px;
padding: 10px;
}

.testimonial-inside p {
padding-top: 10px;
}

.rating {
float: left;
height: 18px;
width: 876px;
margin-top: 10px;
}

.rating img{
float: right;
}
[/sourcecode]

You can now copy and paste the code for each box underneath each other to create more testimonial boxes. Just change the information inside each box. My testimonials page looks like this.

Copy and paste your services page once more then rename to contact.html, also on this page we’ll be using the services page classes.

[sourcecode language="html"]

contact us

get in touch using the contact form below

CONTENT HERE

[/sourcecode]

Inside the contact page were going to need a form and maybe a short paragraph with some info. On the text fields that we use we’ll assign some classes which will enable us to style the form and text boxes etc… via our style sheet.

[sourcecode language="html"]

contact us

get in touch using the contact form below

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis porttitor massa eu scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris eget metus orci, et venenatis turpis. Quisque felis velit, sollicitudin ac pellentesque vehicula, fermentum ut velit. Donec vel est orci. Donec diam leo, fringilla sit amet vehicula eu, dictum quis elit.

[/sourcecode]

The css for our contact form looks like this.

[sourcecode language="css"]
/* ———-CONTACT PAGE STYLES———- */

.textfield, .textbox {
background-color: #000000;
border: 1px solid #383838;
padding: 2px;
margin-top: 5px;
margin-bottom: 5px;
color: #CCCCCC;
font-style: italic;
}

.form-button {
background-color: #000000;
border: 1px solid #383838;
padding: 4px;
color: #CCCCCC;
margin-right: 5px;
font-size: 0.8em;
}

#contact {
margin-top: 10px;
width: 300px;
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
[/sourcecode]

Your contact page should now look something like this.

All your pages should now be set and in working order. Before your template goes live you’ll have to change the links in your navigation, you will also have to set the ID of current for each individual page link. So for example if your on the contact page the link for your contact page in your navigation should have an ID of current. If your on the index page your index page should have an ID of current.

Thats all for this tutorial you should now have a good idea of how to create a 5page website. Its not as hard as some people think, once you’ve coded the main page its just as simple as copy and paste for the others. Dont forget to subscribe via rss and twitter also please could you promote this post along with many of my others. Thats it till next time, look out for the next tutorial when we’ll be intergrating a jquery plugin called jflow for our featured area.

Other Parts To This Project

Download The FREE Template

You can download the FREE CSS Template by clicking HERE.

My PROject Pt.2: PSD To HTML

Richard Carpenter — Sat, 23 May 2009 06:50:36 +0000

Hello welcome to part 2 of the 5 page template series. Today we’ll be converting our PSD into a one page working CSS template. In part 3 we’ll begin to add our additional pages.

Right lets get started, the first thing you need to do is create a blank HTML and blank CSS file inside a folder called “your project”, save your blank HTML file as index.html and your blank CSS file as styles.css. Also inside your folder create an empty folder called images.

Open up your blank HTML file and add your website title inbetween the title tag, underneath the title tag link your css file.

[sourcecode language="html"]

Your PROject – Welcome…

[/sourcecode]

We can now start to mockup the top half of our layout, we start with a container div, this will be the big box our website lives in. Everything we create will go inside this container div.

[sourcecode language="html"]

Your PROject – Welcome…

EVERYTHING GOES INBETWEEN HERE

[/sourcecode]

Our next div will be our header div.

[sourcecode language="html"]

[/sourcecode]

Inside our header div we need to add our website logo and navigation. Ive chosen to also wrap the logo and navigation in another div called top-elements, ive done this because i dont want any alignment / postioning issues when we code the featured area. So our code now looks like this.

[sourcecode language="html"]

[/sourcecode]

Before we start to add our styles in the style sheet we need to create a few images from our PSD file. Open up your PSD file in photoshop, hide all the layers associated with the featured area then make a selection like this.

Make sure you select the background underneath the divider line, the selection should also be the whole width of your canvas (900px). Save the file as “bg.png” inside your images folder. You also need to make a selection around your website logo.

Get your selection around the logo has tight as you can get it. Copy and paste your logo to a new canvas with a transparant background then save the image as “logo.png”. We now also need the background in the header, so make a selection around the top part of the header including the divider line.

You dont have to use the big image if you dont want to, if you prefer you can use a chunk of the background and repeat it then code the divider line seperatly. Right now we have some images to work with lets begin to add our css styles, head over to your css style sheet and add the following code. (refer to commented code for each style)

[sourcecode language="css"]
/* ———-MAIN BODY STYLES———- */

* {
margin: 0px; /*sets 0 margin to the whole website*/
padding: 0px; /*sets 0 padding to the whole website*/
}

body {
font-family: Verdana, Arial, Helvetica, sans-serif; /*website font family*/
background-color: #000000; /*website background color*/
color: #999a9a; /*website default text color*/
background-image: url(images/bg.png); /*our background image*/
background-repeat: repeat-y; /*repeats background image along the Y axis*/
background-position: center; /*centers our background*/
}

a:link {
color: #0096FF; /*color of our hyperlinks*/
}
a:visited {
color: #FFFFFF; /*color of visited hyperlinks*/
}
a:hover {
color: #FFFFFF; /*color of the hyperlink when hovered over*/
}
a:active {
color: #0096FF; /*color of our active links*/
}

p {
font-size: 0.7em; /*sets default paragraph text size*/
line-height: 18px; /*sets default paragraph line height*/
text-align: justify; /*justifys our paragraphs*/
}

h1 {
color: #727372; /*color of our H1 tag*/
text-transform: uppercase; /*sets all H1 tags to uppcase*/
font-size: 1.2em; /*sets H1 font size*/
font-weight: normal; /*sets H1 font weight to normal*/
}

h2 {
color: #FFFFFF; /*color of our H2 tag*/
text-transform: uppercase; /*sets all H2 tags to uppcase*/
font-size: 1em; /*sets H2 font size*/
font-weight: normal; /*sets H2 font weight to normal*/
}

h3 {
color: #727372; /*color of our H3 tag*/
text-transform: uppercase; /*sets all H3 tags to uppcase*/
font-size: 0.9em; /*sets H3 font size*/
font-weight: normal; /*sets H3 font weight to normal*/
}

h4 {
color: #727372; /*color of our H4 tag*/
text-transform: uppercase; /*sets all H4 tags to uppcase*/
font-size: 0.8em; /*sets H4 font size*/
font-weight: normal; /*sets H4 font weight to normal*/
}

img {
border:none; /*removes borders from images*/
}

.float-left {
float:left; /*class for float left*/
}

.float-right {
float:right; /*class for float right*/
}

/* ———-MAIN CONTAINER STYLES———- */

#container {
width: 900px; /*width of our container*/
margin-top: 0px; /*sets top margin to 0*/
margin-right: auto; /*sets right margin to auto which centers our website*/
margin-left: auto; /*sets left margin to auto which centers our website*/
}

/* ———-HEADER STYLES———- */

#header {
background-image: url(images/hd_bg.png); /*sets our header background image*/
background-repeat: no-repeat; /*sets our background to no repeat*/
float: left; /*floats our header left*/
width: 900px; /*gives our header a width of 900px*/
}

#top-elements {
float: left; /*floats top elements left*/
width: 900px; /*sets our top elements width to 900px*/
padding-top: 20px; /*gives our top elements a padding of 20px*/
}

/* ———-LOGO STYLES———- */

#logo {
float: left; /*floats our logo left*/
height: 37px; /*gives our logo a height of 37px same as our logo image*/
width: 270px; /*sets our logo div’s height to 270px same as our logo image*/
}

/* ———-NAVIGATION STYLES———- */

#nav-bar {
float: right; /*floats our navigation right*/
height: 29px; /*gives our navigation a height of 29px*/
padding-top: 8px; /*gives our navigation top padding*/
margin-bottom: 40px; /*gives our navigation a bottom margin*/
}

.navlinks ul {
margin: 0px; /*gives our unordered list 0 margin*/
padding: 0px; /*gives our unordered list 0 padding*/
}

.navlinks li {
display: inline; /*displays our navigation links inline*/
list-style-type: none; /*removes bullets points from our navigation*/
padding-left: 20px; /*gives our navigation list items left padding*/
}

.navlinks li a {
text-decoration: none; /*removes bottom line from nav links*/
font-size: 12px; /*sets navigation font size*/
color: #FFFFFF; /*sets navigation link color*/
padding-bottom: 2px; /*gives our navigation links bottom padding*/
}

.navlinks li a:hover {
border-bottom-width: medium; /*gives links a medium thickness bottom border*/
border-bottom-style: solid; /*makes the bottom border line solid*/
border-bottom-color: #0096ff; /*sets the color of the border*/
}

.navlinks li.current a{
border-bottom-width: medium; /*gives links a medium thickness bottom border*/
border-bottom-style: solid; /*makes the bottom border line solid*/
border-bottom-color: #0096ff; /*sets the color of the border*/
}
[/sourcecode]

Loads of css, believe it or not but that huge chunk isnt even half of the css file. In the css code above we have set our header tags up to H4, we’ve added the styles for our hyperlinks and some minor styles for images and paragraphs all pretty straight forward stuff. We have also set our styles for our container, logo and navigation, so now we can start adding our items to our header. Head over to your index.html file, inbetween the logo start and ending div insert your logo as an image. Inbetween the start and ending nav-bar div add a simple unorder list with a class of navlinks. The code looks like this.

[sourcecode language="html"]

[/sourcecode]

Notice in our style sheet the navigation should have a medium solid blue line underneath each link. If you test your layout in firefox and internet explorer you will see that internet explorer doesnt have the bottom line. We now have to do some cross browser styles to make it work. Open up a blank notepad file and save it as “ie.css” inside your main folder. Opne up the ie.css file inside your code editor, inside this file we need to add all our little fixes for internet explorer. To fix our little navigation problem we need to add these styles.

[sourcecode language="css"]
.navlinks li a:hover {
position: relative;
}

.navlinks li.current a{
position: relative;
}
[/sourcecode]

Before we go ahead and test out our layout again we need to link our ie.css file in our index.html file, when we link the ie.css file we dont do it in the normal way we basically want to insert a statment which says “if im using internet explorer overwrite the following styles”. We can do that by adding this bit of code inside the head section of our index.html file.

[sourcecode language="php"]

[/sourcecode]

Save your work and test your layout in firefox and internet explorer, the navigation should now work as planned. Also in our navigation code you will notice the “home” link has an ID of current this ID of current will basically keep the link hover styling for that specific page, so if your on the home page the medium solid blue line will stay under the link “home” when we create our additional pages later on we’ll need to remove the ID of current from the home link and add it to another link which ever page your making next.

Moving on… we now have to code up our featured section, head over to your PSD file, the images we need to slice are the little bullet point in the featured title area, our featured image with frame, our left button and our right button.

Save all images separatly on transparant backgrounds within your images folder. We can now begin to add our div’s for our featured area. Add the following code underneath our ending div for our top elements but above our header ending div. Ive also added dummy text and titles for our featured area.

[sourcecode language="html"]

featured text here 01

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porttitor est et ante euismod vel euismod tortor ornare. Quisque turpis augue, iaculis vel luctus non, dapibus a ante. Quisque vitae turpis augue. Nulla facilisi. Continue Reading…

[/sourcecode]

We can now style our featured content area using the following styles. (please refer to commented code for each style).

[sourcecode language="css"]
/* ———-FEATURED CONTENT STYLES———- */

#featured {
float: right; /*floats our featured area right*/
width: 900px; /*gives our featured area a width of 900px*/
margin-bottom: 20px; /*gives our featured area a bottom margin*/
}

.featured-text {
float: left; /*floats our featured text left*/
width: 450px; /*sets our featured text box width*/
margin-top: 40px; /*gives our featured text box a top margin*/
}

#featured-text p {
font-size: 0.7em; /*sets our featured text paragraph font size*/
line-height: 24px; /*sets our featured text line height*/
text-align: justify; /*justifys our paragraphs*/
padding-top: 10px; /*adds top padding to our featured text paragraph*/
}

#featured-image01 {
float: right; /*floats our featured images rights*/
width: 449px; /*gives our featured images a fixed width same as our images*/
background-repeat: no-repeat; /*stops images from repeating*/
background-position: right; /*sets background position right*/
height: 214px; /*gives our featured image a fixed height same as our images*/
}

#featured-image01 {
background-image: url(images/featured_image.png); /*our featured image #1*/
}

h1.featured {
color: #FFFFFF; /*sets featured H1 color*/
text-transform: uppercase; /*transforms featured H1 tag to uppercase*/
font-size: 18px; /*sets font size of featured H1 tag*/
background-image: url(images/bullet_icon.png); /*addeds our bullet image to our featured H1 tag*/
background-repeat: no-repeat; /*stops bullet from repeating*/
padding-left: 30px; /*adds padding to the left of our featured H1 tag*/
line-height: 24px; /*sets featured H1 tag’s line height*/
}

#featured-image {
float: right; /*floats our featured image right*/
width: 449px; /*sets our featured image width same dimensions as our featured image*/
background-image: url(images/featured_image.png); /*adds a featured image as a background*/
background-repeat: no-repeat; /*stops featured image repeatsing*/
background-position: right; /*sets our featured image backgroud position*/
height: 214px; /*adds a fixed height same dimensions as our featured image*/
}

.featured-btn {
height: 34px; /*adds a fixed height*/
width: 34px; /*adds a fixed width*/
cursor: pointer; /*sets cursor to point cursor*/
}

.featured-buttons {
height: 144px; /*sets fixed height*/
width: 34px; /*sets fixed width*/
margin-left: 75px; /*adds left margin*/
padding-top: 70px; /*adds top padding*/
}
[/sourcecode]

Test your layout inside your browser and see how it looks i have something like this.

Time to move onto our main content area, we’ll be start with the left content first. The boxes for our content will all be made using css. If you look at the PSD file you will see the boxes have two strokes in two different colors we can accomplish this by creating a div with one of the borders, then inside that div create another div slightly smaller with the other border added. We mock it up like this.

[sourcecode language="html"]

a content title here

May 20, 2009

SOME TEXT HERE

[/sourcecode]

The styles for our left content area look like this.

[sourcecode language="css"]
/* ———-CONTENT LEFT STYLES———- */

#content-left {
float: left; /*floats left*/
width: 600px; /*adds a fixed width*/
padding-bottom: 40px; /*adds bottom padding*/
}

.box {
float: left; /*floats left*/
width: 498px; /*adds a fixed width*/
border: 1px solid #121212; /*adds a 1 px colored border*/
margin-bottom: 15px; /*adds a bottom margin*/
width: 490px; /*adds a fixed width*/
}

.box-inside {
background-color: #0c0c0c; /*adds a background color*/
border: 1px solid #030303; /*adds a 1px colored border*/
float: left; /*floats left*/
width: 576px; /*adds a fix width */
padding: 10px; /*adds padding all the way around*/
}

.box-inside p {
padding-top: 10px; /*adds top padding*/
}

.boxtitle1 {
color: #FFFFFF; /*text color*/
text-transform: uppercase; /*transforms text to uppercase*/
font-size: 1em; /*sets font size*/
font-weight: normal; /*sets font weight*/
background-image: url(images/post_icon.png); /*adds our right icon to our header*/
background-repeat: no-repeat; /*stops icon repeating*/
background-position: right; /*positions background right*/
}

.boxtitle2 {
color: #aaaaaa; /*sets font color*/
text-transform: uppercase; /*transforms text to uppercase*/
font-size: 0.7em; /*sets font size*/
background-image: url(images/divider.png); /*adds our divider image*/
background-repeat: repeat-x; /*repeats our divider image horizontally*/
background-position: bottom; /*positions divider at the bottom*/
padding-bottom: 10px; /*adds bottom padding*/
}
[/sourcecode]

If you look at the class “boxtitle1″ you will see it has a background image of “post_icon.png”, this is the little paper icon in the right side of content box. Cut the icon from your PSD and save it as “post_icon.png”, You will also need to cut out the divider from underneath sample header. Thats all you need to do for the left content, if you want more boxes all’s you need to do is copy all the code from the class “box” then paste it underneath. Alter the content as needed. So two boxes would looks like this.

[sourcecode language="html"]

a content title here

May 20, 2009

SOME TEXT HERE

a content title here

May 20, 2009

SOME TEXT HERE

[/sourcecode]

We code and style the sidebar in exactly the same way, only difference is the widths will be alot smaller and you need to use a different icon.

[sourcecode language="html"]

[/sourcecode]

The css looks like this.

[sourcecode language="css"]
/* ———-CONTENT RIGHT (sidebar) STYLES———- */

#content-right {
float: right; /*floats right*/
width: 290px; /*sets a fixed width*/
margin-left: 10px; /*adds a left margin*/
padding-bottom: 40px; /*adds bottom padding*/
}

.sidebar {
float: left; /*floats left*/
width: 287px; /*adds a fixed width*/
border: 1px solid #121212; /*adds a 1 px colored border*/
margin-bottom: 15px; /*adds a bottom margin*/
float: left; /*floats left*/
}

.sidebar-inside {
background-color: #0c0c0c; /*sets background color*/
border: 1px solid #030303; /*adds a 1px colored border*/
float: left; /*floats left*/
width: 266px; /*sets a fixed width*/
padding: 10px; /*adds padding all the way around*/
}

.sidebar-inside p {
padding-top: 10px; /*adds top padding*/
}

.sidebar-title1 {
background-image: url(images/sidebar_bullet.png); /*adds our sidebar bullet icon*/
background-repeat: no-repeat; /*stops background from repeating*/
background-position: right; /*positions background right*/
}

.sidebar-title2 {
color: #aaaaaa; /*sets text color*/
text-transform: uppercase; /*transforms text to uppercase*/
font-size: 0.7em; /*sets font size*/
background-image: url(images/divider.png); /*adds our divider image*/
background-repeat: repeat-x; /*repeats divider imaage horizontally*/
background-position: bottom; /*positions background bottom*/
padding-bottom: 10px; /*adds bottom padding*/
}
[/sourcecode]

Now for our footer,…. we need to create our footer outside of our container div as were having the footer span across the hole browser. You will need two images for the footer, the first one will be the last 1 – 2 pixels from the edge of the canvas and the other one will be the whole footer image containing our radial gradient image.

We then mock up our footer like this.

[sourcecode language="html"]

[/sourcecode]

We then add our footer css styling like this.

[sourcecode language="css"]
/* ———-FOOTER STYLES———- */

#footer {
background-image: url(images/footer_bg.png); /*adds our footer background image*/
background-repeat: repeat-x; /*repeats background horizontally*/
height: 140px; /*adds a fixed height*/
clear: both; /*clears both floats*/
margin-top: 40px; /*adds a top margin*/
}

#footer-content {
background-image: url(images/footer_contentbg.png); /*adds our footer background image*/
background-repeat: no-repeat; /*stops background repeating*/
margin: auto; /*centers our footer*/
height: 90px; /*adds a fixed height*/
width: 900px; /*adds a fixed width*/
clear: both; /*clear’s both floats*/
padding-top: 50px; /*adds top padding*/
}

#footer-content p {
text-align: center; /*aligns text center*/
}
[/sourcecode]

Your first page should now be completed, watch out for the 3rd part where we’ll be creating additional pages. Subscribe to our RSS feeds to stay updated. See you next time.

Other Parts To This Project

Download The FREE Template

You can download the FREE CSS Template by clicking HERE.

Web Design Layout #9 SiteBuild

Richard Carpenter — Wed, 29 Apr 2009 17:55:18 +0000

Hello everybody today il be showing you how to code the web design layout #9 PSD. I recently setup a poll to see which one you all wanted to see as a coded tutorial, and this one won. Thanks to everyone who took part in the submission process.

I promised to do this layout as a 5page full site build BUT ive changed my mind, dont fret though there will be a very intresting complete 5 page website sitebuild coming soon which will also include a screencast. Right lets get started, the first thing you need to do is create a new folder somewhere on your desktop, give it a name. Inside your folder create another folder called “images”. Create a blank CSS & HTML document, save the files as index.HTML and styles.CSS inside your main folder.

Open up your index file and style sheet in your favourite code editor, im going to be using adobe dreamweaver CS3. The first thing we need to do is set our website title and link our stylesheet.

[sourcecode language="html"]
Web Design Layout #9 | Welcome…

[/sourcecode]

Inside our BODY tag we can start to mockup our layout, were going to need a main container which our whole template will sit inside, we then need a DIV for our header, logo and menu. The code for it all looks like this.

[sourcecode language="html"]

[/sourcecode]

With the top area mocked up we can begin to add some styles to each DIV. But first were going to need a background image and color. Open up your PSD file and hide all your layers apart from the background layer, the wood texture in our header, the navigation bar and our grey box on our background.

Once you’ve got something like the image above goto “layer > flatten image” (make sure you dont save your PSD file). Select the rectangular marquee tool and make a selection like this.

Start the selection from the start of one of the grains in the wood texture, then end the selection on another part of a grain.

Selecting / slicing on the grains will ensure the background image is repeated properly, making the slice in the middle of a grain will cause the background image to have inapropriate lines. Save your background as “bg.PNG” inside your images folder. Open up our CSS file and add 0 margin and padding to the whole document, inside the body tag add your background that you just created. The code looks like this.

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

body { /*–WEBSITE BODY–*/
background-image: url(images/bg.png); /*sets background image*/
background-repeat: repeat-x; /*repeats background image horizontally*/
background-color: #e9e9e9; /*color of our background */
font-family: Arial, Helvetica, sans-serif; /*font family*/
}
[/sourcecode]

Refer to the comments within the style sheet, each style is comment coded on what it does. The next styles we need to add are for our main container, header and logo.

[sourcecode language="css"]
#container { /*–WEBSITE CONTAINER–*/
margin: auto; /*centers our website*/
width: 850px; /*gives our website a width of 850px*/
}

#header { /*–HEADER CONTAINER–*/
float: left; /*floats our header left*/
height: 123px; /*gives our header a height of 123px*/
width: 850px; /*gives our header a width of 850px same as our container*/
}

#logo { /*–LOGO CONTAINER–*/
float: left; /*floats our logo left*/
height: 123px; /*height of the actual image used for the logo*/
width: 279px; /*width of the actual image used for the logo*/
}
[/sourcecode]

To determine the height of our header measure the height of the wood texture used in our PSD file. The logo container’s height will also be the same as the header eles our logo will overlap our navigation. To make the logo goto your PSD file and make a selection like this.

Once you’ve made the selection goto “layer > flatten image”, then goto “image > crop” save the logo as “logo.PNG” inside your images folder. Goto your HTML file inside the “logo DIV” insert your image.

[sourcecode language="html"]

[/sourcecode]

Double check the dimensions of your logo.PNG file and update the height and width of the logo container within the CSS file. Before we add our styles for our menu lets quickly mockup our menu. Create an unordered list with a class of menu-links, then add in your 5 links. For the first link we’ll add a list ID of current. The current ID will basically keep one of the menu items in hover state to show the user what page there on. The code for the menu looks like this.

[sourcecode language="html"]

[/sourcecode]

We style the menu like this.

[sourcecode language="css"]
#menu { /*–NAVIGATION CONTAINER–*/
float: left; /*floats our menu left*/
width: 850px; /*gives our menu a width of 850px same as our container*/
height: 57px; /*height of our menu*/
}

.menu-links li { /*–NAVIGATION LINKS–*/
list-style:none; /*removes bullets from our list*/
display:block; /*displays links as a block*/
font-size: 14px; /*font size*/
float: left; /*floats our links left*/
font-weight: bold; /*gives our links a bold look*/
}

.menu-links li#current a { /*–NAVIGATION CURRENT STATE–*/
background-image: url(images/menu_hover.png); /*image for the link current state*/
background-repeat: no-repeat; /*image doesnt repeat*/
background-position: center; /*centers our background image*/
color: #ff9833; /*text color*/
}

.menu-links a { /*–NAVIGATION LINKS–*/
text-decoration: none; /*removes underscore from our links*/
color: #707070; /*sets our link colors*/
display: block; /*displays each link as a block*/
height: 35px; /*gives our block a height of 35px*/
padding-top: 22px; /*adds 22px padding to the top*/
padding-right: 17px; /*adds 17px padding right*/
padding-left: 17px; /*adds 17px padding left*/
text-transform: uppercase; /*transforms text into uppercase*/
}

.menu-links a:hover { /*–NAVIGATION HOVER–*/
background-image: url(images/menu_hover.png); /*link hover image*/
background-repeat: no-repeat; /*stops hover image repeating itself*/
background-position: center; /*sets the position of the background image*/
color: #ff9833; /*text color when hovered*/
}
[/sourcecode]

On the right side of our navigation on our PSD file we had an RSS icon with some text. We can easily achieve this in CSS by simply adding another DIV inside the navigation which is floated right. We’ll need a DIV for our logo then another DIV for the text next to it. Firstly lets create our RSS icon, open up your PSD file and save your RSS icon as a single image called “rss.png”, save the image into your images folder. The code inside our menu DIV will now look like this.

[sourcecode language="html"]

[/sourcecode]

We then style our RSS DIV’s like this.

[sourcecode language="css"]
#rss { /*–RSS ICON CONTAINER–*/
float: right; /*floats our rss div to the right*/
height: 31px; /*gives our rss div a height of 31px exactly the same as the rss icon*/
width: 31px; /*gives our rss div a width of 31px exactly the same as the rss icon*/
margin-top: 15px; /*adds a top marhin of 15px*/
margin-right: 10px; /*adds a right margin of 10px*/
}

#rss-text { /*–RSS TEXT CONTAINER–*/
float: right; /*floats our rss text right*/
height: 31px; /*gives our div a height of 31px*/
margin-top: 15px; /*adds a 15px top margin*/
}

.rss-header { /*–RSS SUBSCRIBE TEXT–*/
color: #707070; /*sets color of the subscribe text*/
font-weight: bold; /*sets subscribe text to bold*/
font-size: 14px; /*adds a font size of 14px*/
}

.text-rss { /*–RSS DESCRIPTION TEXT–*/
color: #828282; /*sets the color of our rss description text*/
font-size: 11px; /*sets font size of our rss description text*/
}
[/sourcecode]

Give the HTML a blast in your favourite browser and see how things pan out. The layout has been tested in both IE7 and FF and works fine without any hiccups. The next part of the template we need to mockup is our featured area, for now we’ll be using a static background which will contain our drop shadow, then inside we’ll add our featured image. The mockup for the featured area is relatively simple, we first make a container which will hold our elements. Inside the container we’ll have two DIV’s, one for the text on the left and one for our image on the right.

[sourcecode language="html"]

Portfolio Layout

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac justo vel enim congue accumsan. Fusce ut metus quis lorem consequat mollis. Pellentesque eleifend interdum diam. Phasellus adipiscing ligula sit amet erat consectetur fringilla. Vestibulum viverra eleifend enim. Ut congue pharetra nibh. Suspendisse feugiat, turpis ac ornare ullamcorperd bibendum, dolor. Phasellus at dui. Sed lectus.

[/sourcecode]

In the code above we have our first DIV of featured, this is our container for the featured area. We then have an ID of content-featured, this DIV is for our image description. As you can see from the code above inside the content-featured DIV we have a h1 tag and a big paragraph. We then move onto our image, which is a simple DIV of content-featured-image which contains our sample image. Our sample image does not contain our drop shadow, we need to cut the drop shadow from our PSD file and set it as a background in our CSS file. Our featured image will then go straight over the top. This is what my featured image background looks like.

The code for our featured area looks like this.

[sourcecode language="css"]
#featured { /*–FEATURED CONTENT CONTAINER–*/
float: left; /*floats our featured div left*/
width: 850px; /*adds a width of 850px same as our container*/
margin-top: 30px; /*adds a top margin of 30px*/
clear: both; /*clears left and right floats*/
}

#content-featured { /*–FEATURED CONTENT TEXT BOX–*/
float: left; /*floats our featured text left*/
height: 195px; /*gives us a height of 195px*/
width: 292px; /*gives us a width of 292px*/
}

#content-featured h1{ /*–FEATURED CONTENT HEADER–*/
color: #707070; /*sets our featured area h1 tag text color*/
text-transform: uppercase; /*transform our h1 tag to uppercase*/
font-family: Impact; /*sets our font family to impact*/
font-size: 26px; /*gives our h1 tag a font size of 26px*/
}

#content-featured p{ /*–FEATURED CONTENT BOX TEXT–*/
color: #9f9e9e; /*sets our paragraph text color*/
font-family: Arial, Helvetica, sans-serif; /*sets our font family for the p tag*/
font-size: 10px; /*sets our paragraph font size*/
line-height: 18px; /*increases our line height to 18px*/
text-align: justify; /*justifys our paragraph*/
}

#content-featured-image { /*–FEATURED CONTENT BACKGROUND–*/
height: 241px; /*sets our featured image div height to 241px*/
width: 501px; /*sets our featured image width to 501px*/
float: left; /*floats left*/
margin-left: 35px; /*adds a left margin to 35px*/
background-image: url(images/featured-bg.png); /*adds our background image for our featured images*/
background-repeat: no-repeat; /*sets background to no repeat*/
padding-top: 19px; /*sets top padding to 19px*/
padding-left: 22px; /*sets top padding-left of 22px*/
}
[/sourcecode]

On our PSD file underneath our featured area we have two blocks of text with simple headers. We start with a simple DIV of left and a DIV of right, all the left content in the left DIV and right content in the right DIV. We then create a class for our header tag to sit into and a class for our paragraph. Because we’ve used classes we can apply them to both the left and right content.

[sourcecode language="html"]

What can i do for you?

Phasellus adipiscing ligula sit amet erat consectetur fringilla. Vestibulum viverra eleifend enim. Ut congue pharetra nibh. Suspendisse feugiat, turpis ac ornare ullamcorperd bibendum, dolor. Phasellus at dui. Sed lectus.

Who am i?

[/sourcecode]

The styles for our boxes are.

[sourcecode language="css"]
.information { /*–CONTENT CONTAINER–*/
width: 400px; /*sets a width of 400px*/
float: left; /*floats our information class left*/
color: #9f9e9e; /*sets our font color for our information class*/
font-size: 12px; /*sets our font size*/
text-align: justify; /*justify’s our text*/
line-height: 18px; /*sets a line height of 18px*/
margin-right: 25px; /*adds a right margin of 25px*/
}

.info-header { /*–CONTENT BOX TITLE CONTAINER–*/
width: 400px; /*sets our header width to 400px same as our information class*/
float: left; /*floats left*/
margin-right: 25px; /*adds a 15px margin right*/
margin-bottom: 10px; /*adds a bottom margin of 10px*/
}

.info-header h1 { /*–CONTENT BOX TITLE–*/
color: #ff9833; /*sets our text color*/
text-transform: uppercase; /*transforms our text to uppercase*/
font-family: Impact; /*sets font family to impact*/
font-size: 18px; /*sets font size to 18px*/
line-height: 20px; /*increases line height to 20px*/
border-bottom-width: 1px; /*adds a bottom border with a width of 1px*/
border-bottom-style: solid; /*sets border style to solid*/
border-bottom-color: #c9c9c9; /*sets border color*/
}

#left { /*–LEFT CONTENT TEXT BOX–*/
float: left; /*floats left*/
width: 400px; /*sets a width of 400px*/
margin-top: 30px; /*adds a top margin of 30px*/
margin-bottom: 40px; /*adds a bottom margin of 40px*/
}

#right { /*–RIGHT CONTENT TEXT BOX–*/
float: right; /*floats right*/
width: 400px; /*sets a width of 400px*/
margin-top: 30px; /*adds a top margin of 30px*/
margin-bottom: 40px; /*adds a bottom margin of 40px*/
}
[/sourcecode]

Now finally for our footer, we need to create the footer outiside our container DIV as the background will be repeating across the screen. Open up your PSD file and make a small selection on your footer area.

Crop the image then save it as “footer_bg.PNG” inside your images folder. We mock our footer up like this.

[sourcecode language="html"]

[/sourcecode]

Pretty simple, our styles for our footer are.

[sourcecode language="css"]
#footer { /*–FOOTER CONTAINER–*/
background-image: url(images/footer-bg.png); /*sets our footer background8*/
background-repeat: repeat-x; /*sets background to repeat horizontally*/
clear: both; /*clears left and right floats*/
}

#footer-content { /*–FOOTER CONTENT–*/
width: 850px; /*adds a width of 850px same as our container*/
margin-top: 50px; /*adds a top margin of 50px*/
margin-right: auto; /*sets right margin to auto*/
margin-bottom: auto; /*sets bottom margin to auto*/
margin-left: auto; /*sets left margin to auto*/
padding-top: 50px; /*adds 50px top padding*/
padding-bottom: 50px; /*adds bottom padding of 50px*/
color: #9F9E9E; /*sets color of footer text*/
text-align: center; /*aligns text center*/
}
[/sourcecode]

Finally give your template a blast in your browser to see how it looks. Thats all from me, dont forget to subscribe via RSS and twitter.

BLOOpress CSS Template

Richard Carpenter — Tue, 21 Apr 2009 17:18:17 +0000

Hello everybody welcome to part #2 of the BLOOpress wordpress theme, today we’ll be converting the BLOOpress photoshop mockup into a one page CSS template.

The CSS template will basically immertate the main page of our wordpress theme. Most of the styles used in the main page of our theme will be re-used over and over in other areas of the website. Right lets get started, create a new folder on your desktop called “BLOOpress” inside this folder also create another folder called “images”. Open up notepad then goto “file > save as” save the blank notepad document as “style.css” within the “BLOOpress” folder. Open up dreamweaver and start a new HTML document.

Straight away goto “file > save as”, save the HTML file as “index.html” inside your “BLOOpress” folder on your desktop. Select the “code view” within the dreamweaver interface.

Lets add our website title and link our style sheet just to get the ball rolling. In between the “TITLE” tag add your website title or what ever it is you want to be displayed in the main window. Then link your style sheet.

[sourcecode language="html"]
BLOOpress "another wordpress blog" | Welcome…

[/sourcecode]

You dont have to type out the whole line of text to add your style sheet, there are tools available within the dreamweaver application to automate this process. You can use this tool by rolling out the right panel by clicking the little grey arrow, once open click the little chain icon.

I strongly recommend you get to grips with some of the tools within the dreamweaver application as they can make your life a whole lot easier, some of the tools include browser compatability tests as well as CSS/HTML validation.

Okay lets get this template moving, open up your PSD in photoshop, zoom into the top left hand corner of the template, hide the top nav link text, the second nav link text, header rectangle and the website title including the pattern and shine effect. Select the rectangular marquee tool, at the top change style to “fixed size” enter the values 25px for the width and 225px the height. Goto “layer > flatten image” then make a selection like the image below (DONT SAVE PSD)

Once you’ve made the selection like above goto “image > crop”. Now goto “file > save as”, save the image as “bg.PNG” in the images folder within the BLOOpress folder. Close your PSD FILE and head back over to dreamweaver lets start to mockup some of the layout in HTML. Take alook at the image below, this will give you some idea on how we will be doing it.

In code we mock it up like this.

[sourcecode language="html"]

Home

Sitemap

Contact Me

[/sourcecode]

First we make a container which will be the container which holds the whole site, we then add a DIV for our first navigation, a DIV for our header and a DIV for our second navigation. Inside our first navigation DIV we need to add a simple unordered list. Now we’ve mocked up some of the top half of the website lets begin adding our styles to our style sheet. Open up your style.CSS file and copy the code below, each style element is comment coded already for your convience.

[sourcecode language="css"]
/* ——MAIN STYLES—— */

*{
padding:0;
margin:0;
}

body {
background-color: #202020; /*sets background color for the whole website*/
font-family: Verdana, Arial, Helvetica, sans-serif; /*sets font family for the whole website*/
font-size: 12px; /*sets a font size of 12px for the whole website*/
color: #FFFFFF; /*sets default color of text to white*/
background-image: url(images/bg.png); /*our repeated background image*/
background-repeat: repeat-x; /*repeats background horizontally*/
}

#container {
width: 900px; /*sets a website width of 900px*/
margin-right: auto; /*centers website*/
margin-bottom: 40px; /*adds 40px margin to the bottom*/
margin-left: auto; /*centers website*/
}

/* ——NAV1 STYLES—— */

#nav1 {
float: left; /*floats nav1 left in the container*/
height: 26px; /*gives nav1 a height of 26px*/
width: 900px; /*gives nav1 a width of 900px*/
padding-top: 10px; /*adds 10px padding to the top*/
}

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

.nav1-links a {
color: #FFFFFF; /*sets nav links to white*/
font-family:Verdana, Arial, Helvetica, sans-serif; /*sets nav1′s font family*/
font-size: 12px; /*sets nav1′s font size*/
text-decoration: none; /*removes underline from links*/
padding-right: 20px; /*adds 20px right padding to each link*/
}

.nav1-links a:hover {
color: #0390c5; /*sets nav1 link hover color*/
}

/* ——HEADER STYLES—— */

#header {
}

/* ——NAV2 STYLES—— */

#nav2 {
float: left; /*floats our nav2 left in the container*/
height: 46px; /*gives our nav2 a height of 46px*/
width: 900px; /*gives our nav to a width of 900px*/
}
[/sourcecode]

Most of the styles are pretty simple the only thing that may be different are the heights of the elements, depending on how you made your PSD file, you may want to double check the height of your navigations and header. Notice we left the header DIV blank, this is the next part we need to tackle. Open up your PSD file and select the header layer, make a selection of the whole header exluding all the header elements. Save the header background as “header_bg.PNG” inside your images folder.

Depending on how big you made your header part, the height values may differ to mine. You may need to determine your header image height. We can then add our header styles to the CSS file.

[sourcecode language="css"]
/* ——HEADER STYLES—— */

#header {
float: left; /*floats our header left in the container*/
height: 136px; /*gives our header a height of 136px*/
width: 900px; /*gives our header a width of 900px*/
background-image: url(images/header_bg.png); /*our header background image*/
background-repeat: no-repeat; /*stops header background repeating itself*/
}
[/sourcecode]

You may now test your HTML file inside your browser and see how it looks, heres a small screenshot of mine.

The next item we need to tackle will be our website title, slogan and search field. Unfortunetly we aint going to be able to use plain text for the website title, so were going to have to use an image. Open up your PSD file, hide all yours layer apart from your website title, slogan, lines pattern and shine. Make a selection like the image below, NOTE ive left the background on so you can see the selection. Once you’ve made the selection goto “image > crop” save the image as “title.PNG” inside your images folder.

Inside your “header DIV” create another DIV of title.

[sourcecode language="html"]

[/sourcecode]

Notice ive left a space inbetween the “title DIV” in this bit we need to add our title image.

[sourcecode language="html"]

[/sourcecode]

Now we’ve inserted our image we need to style our “title DIV”, head over to your style sheet, within the “header styles section” create a new style of “title”.

[sourcecode language="css"]
/* ——HEADER STYLES—— */

#title {
}
[/sourcecode]

For the title we need to float it left, add a fixed width and height which should be exactly the same as our image. We then need to add a top margin to push the title down so its kind of centered inside our header, the code looks like this.

[sourcecode language="css"]
#title {
float: left; /*floats our header title image in the container*/
height: 37px; /*our title div has a height of 37px*/
width: 367px; /*our title div has a width of 367px*/
margin-top: 50px; /*push our image down from the top 50px*/
}
[/sourcecode]

Check your website inside your browser to reflect the changes you just made. Once you’ve checked it and all is fine, create yea another DIV inside your “header DIV” called “search-from”.

[sourcecode language="html"]

[/sourcecode]

Inside the “search-form DIV” insert a text field and button. It doesnt need to be a valid form as the form will automatically be created in wordpress. On each field and button add a class that will be relivant to the certain item, ive used a class of “search-field” for the search field and “search-button” for the submit button.

[sourcecode language="html"]

[/sourcecode]

We now need to add our styling to the search field & button to match our PSD. The first item we will style will be the “search-form DIV”. The code looks like this.

[sourcecode language="css"]
#search-form{
float: right; /*floats our search div to the right*/
margin-top: 54px; /*adds a margin of 54px to the top of our div*/
}
[/sourcecode]

Now the form is postioned lets go about adding our styling to the text field and button. You need to add two classes into your style sheet. “.search-field” & “.search-button”. Lets style the search field first.

[sourcecode language="css"]
.search-field{
font-style: italic; /*adds font type intalic to text inside the search field*/
padding: 5px; /*gives 5px padding all the way around the field*/
background-color: #262626; /*changes background color*/
border: 1px solid #323232; /*adds a 1 pixel border*/
color: #FFFFFF; /*color of the text typed into the field*/
}
[/sourcecode]

The submit button or go button whatever you want to call it, is going to use an image as the button. Firstly we must open our PSD and make a selection around the button.

Crop your PSD around your button then save it as “submit_bg.PNG” into your images folder. We now need to alter our search button code. Head over to your HTML file in dreamweaver inside the code view. We need to change the type from submit to image, then add our image url. The code looks like this.

[sourcecode language="html"]

[/sourcecode]

Then we need to add a single style to our “.search-button” class, which looks like this.

[sourcecode language="css"]
.search-button{
vertical-align: top; /*vertically aligns the button from the top*/
}
[/sourcecode]

Thats the header part pretty much finished, just one last item to finish off and thatst he second navigation. In the “nav 2 DIV” add a simple unordered list, you can use the class of “nav1-links” for this menu also. The code looks like this.

[sourcecode language="html"]

Page#1

Page#2

Page#3

Page#4

Page#5

Page#6

Page#7

Page#8

Page#9

Page#10

Page#11

[/sourcecode]

We have already set out some styles for a nav2 DIV, all’s we need to do is add some top padding to center the navigation links.

[sourcecode language="css"]
#nav2 {
float: left; /*floats our nav2 left in the container*/
height: 31px; /*gives our nav2 a height of 46px*/
width: 900px; /*gives our nav to a width of 900px*/
padding-top: 15px; /*gives a 15px padding to the top of the nav2 div*/
}
[/sourcecode]

Okay now for our content area which will contain our main posts and sidebar. Each wordpress post will look like this.

In code we lay it out like this.

[sourcecode language="html"]

[/sourcecode]

we start by making a DIV of left content, which is where all our main posts within wordpress will lie. We then make 2 class DIV’s for our main post box, and our post thumbnail. Inside the class “post-thumb” ive added a example thumbnail using the actual size i made it on the PSD file. We will remove the thumbnail from the code when were coding it to wordpress. Lastly we add another class which is for our post footer. Now for the styles.

[sourcecode language="css"]
/* ——LEFT CONTENT STYLES—— */

#left-content {
float: left; /*floats our left content to the left*/
width: 600px; /*gives the left-content div a width of 600px*/
margin-top: 20px; /*adds 40px margin to the bottom*/
}

.post-box {
background-color: #292929; /*adds a background color to our post box*/
border: 1px solid #2f2f2f; /*gives our box a 1px border*/
padding: 10px; /*adss 10px padding all the way around our box*/
float: left; /*floats our box left inside "left-content div*/
width: 580px; /*gives our box a width of 580px with the 10px padding makes a total of 600px*/
}

.post-thumb {
float: left; /*floats our post thumbnail left*/
padding: 4px; /*adds 4px padding around the thumbnial*/
background-color: #1d1d1d; /*adds a background color behind our thumnail*/
border: 1px solid #2f2f2f; /*adds a 1px solid border around our thumbnail*/
}
[/sourcecode]

Once you’ve added the styles you can test your template inside the browser. Still with our content box we need to add our post-title and some example post text. Underneath your “post-thumb class” add another class called “post-title”. Inside the class “post-title” also wrap an exaple header in a H1 tag.

[sourcecode language="html"]

Example WordPress Title

[/sourcecode]

The styling for our “post-title” and H1 tag looks like this.

[sourcecode language="css"]
.post-title h1 {
color: #0c78a8; /*h1 tag text color*/
font-family: Verdana, Arial, Helvetica, sans-serif; /*h1 tag font group*/
font-size: 24px; /*h1 tag font size*/
}

.post-title {
float: left; /*floats our post title left*/
width: 378px; /*adds a width to our post-title class*/
margin-left: 4px; /*adds a 4px left margin*/
}
[/sourcecode]

Test your template inside your browser, you should now have an example post title, heres how mine looks in IE7.

We can now add our example paragraph to our example post. Similar to what we did above, underneath our post title class we need to add another class called “post-content” inside the post-content class add a simple P tag with an example paragraph. The code looks like this.

[sourcecode language="html"]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit nulla, pretium sit amet, sagittis et, tristique at, libero. Duis quam. Aliquam libero lacus, tristique et, pellentesque nec, commodo et, tortor. Proin sem. Cras elit nunc, luctus id, consectetur vel, placerat id, ipsum. Suspendisse eleifend laoreet velit.

[/sourcecode]

We can then begin to style our “post-content class”, which looks like this.

[sourcecode language="css"]
.post-content {
float: left; /*floats our post content left*/
width: 378px; /*adds a width to our content class*/
margin-left: 4px; /*adds a 4px left margin*/
font-family: Verdana, Arial, Helvetica, sans-serif; /*content font group*/
line-height: 18px; /*post content line height*/
font-size: 11px; /*adds a font size of 11px to our post content*/
text-align: justify; /*justifys our paragraphs inside our post content class*/
margin-top: 4px; /*adds a 4px top margin to our post-content class*/
font-style: italic; /*gives our paragraphs a italic look*/
}
[/sourcecode]

Finally underneath your post-content class there should be a class called “post-footer”. Inside this class add a simple paragraph saying “104 Comments | Posted on 16/04/09 @ 10:38am”. Or something similar, in wordpress it will all be replaced with PHP code.

[sourcecode language="html"]

[/sourcecode]

Before we add our styling to the post-footer class we firstly need to make the post footer background. Head over to your PSD file and make a selection like this.

Once you’ve made the selection goto “layer > flatten image” Once flattened goto “image > crop”. Save the final image as “post_footer_bg.PNG” inside your images folder. Then add these styles to your “post-footer class”.

[sourcecode language="css"]
.post-footer {
border: 1px solid #0c5b7d; /*adss 10px padding all the way around our box*/
float: left; /*floats our box left inside "left-content div*/
width: 580px; /*gives our box a width of 580px*/
background-image: url(images/post_footer_bg.png); /*adds background image*/
background-repeat: repeat-x; /*repeats background horizontally*/
height: 20px; /*gives our class a height of 20px*/
padding-top: 6px; /*adss 6px padding to the top*/
padding-right: 10px; /*adds 10 px padding to the right*/
padding-left: 10px; /*adds 10px padding to the left*/
margin-bottom: 20px; /*adds a 20px margin between each post*/
[/sourcecode]

Test your template in your browser to see how everything measures up. Heres mine.

To add an extra 2 posts underneath each other you need to copy from the class “post-box” to the ending DIV of “post-footer” then just paste the text underneath all the code for the first box. Right lets get one with the sidebar area. Underneath the ending DIV of the “left-content DIV” add another DIV called “right-content”.

[sourcecode language="html"]

[/sourcecode]

Add these styles for the right-content DIV inside your stylesheet.

[sourcecode language="css"]
/* ——SIDEBAR STYLES—— */

#right-content {
float: right; /*floats right content div to the right*/
width: 280px; /*gives our div right content a width of 280px*/
margin-top: 20px; /*adds 40px margin to the bottom*/
}
[/sourcecode]

Inside your “right-content DIV” add another DIV called “stay-connected”.

[sourcecode language="html"]

[/sourcecode]

We need to now extract the background from our stay connected box within our PSD file. Make a selection like the image below, miss out the stroke that is applied to the box.

Save the image as “stay_connected_bg.PNG” inside your images folder. We now need to add our styles for our stay connected box.

[sourcecode language="css"]
#stay-connected {
float: right; /*floats our box to the right*/
width: 258px; /*gives our box a width of 258px*/
border: 1px solid #0a6085; /*adds a 1px border to our box*/
background-image: url(images/stay_connected_bg.png); /*adds our background image*/
background-repeat: repeat-x; /*repeats our background image horizontally*/
background-color: #0474a5; /*chnanges background color*/
padding-top: 10px; /*adds 10px padding top*/
padding-right: 10px; /*adds 10px padding right*/
padding-bottom: 20px; /*adds 20px padding bottom*/
padding-left: 10px; /*adds 10px padding left*/
}
[/sourcecode]

Head back over to your HTML code, inside your “stay connected DIV” add a h1 tag with the text “stay connected”.

[sourcecode language="html"]

Stay Connected…

[/sourcecode]

Inside your style sheet add the styles for your H1 tag.

[sourcecode language="css"]
#stay-connected h1 {
font-family: Verdana, Arial, Helvetica, sans-serif; /*font family for the H1 tag*/
font-size: 16px; /*font size for the H1 tag*/
color: #FFFFFF; /*color of the H1 tag*/
text-align: center; /*aligns H1 tag center*/
margin-bottom: 20px; /*adds a 20px margin to the bottom of the h1 tag*/
}
[/sourcecode]

The next part will be adding the icons to our stay connected box, but first we must save them as individual images from our PSD file. Copy and paste your icons to a blank canvas of 30px x 30px you may need to resize them abit. Make sure your icons are on transparant backgrounds then save them as what_ever_icon.PNG inside your images folder. Once you’ve sorted all your icons head back over to your HTML code. Underneath your H1 tag we need to add another two CLASSES, a class of “sc-icons” and “icon-text”. Inside the “sc-icon” class add your icon, inside the “icon-text” class add to P tags each with a class to represent each P tag.

[sourcecode language="html"]

Stay Connected…

Updates in your reader

[/sourcecode]

We style these classes like this.

[sourcecode language="css"]
.sc-icon {
float: left; /*floats icons left*/
height: 30px; /*has height of 30px (relates to height of actual image*/
width: 30px; /*has width of 30px (relates to width of actual image*/
margin-right: 10px; /*adds a 10px margin right*/
margin-bottom: 10px; /*adds a 10px margin bottom*/
margin-left: 20px; /*adds a 20px margin left*/
}

.icon-text {
float: left; /*floats icon text to the left*/
height: 30px; /*gives the text BOX a height of 30px*/
width: 180px; /*gives the box a width of 180px*/
margin-bottom: 10px; /*adds a 10px margin bottom*/
}

.subscribe {
color: #FFFFFF; /*color of text*/
font-size: 14px; /*font size of text*/
font-weight: bold; /*gives text a bold look*/
}

.subscribe2 {
font-size: 10px; /*gives text a font size of 10px*/
color: #8bdbff; /*changes color fo text*/
}
[/sourcecode]

Now you need to duplicate the code for the icon and text to add further icons, making sure you change the image SRC to another icon. The code looks like this.

[sourcecode language="html"]

Stay Connected…

Updates in your reader

Updates on your twitter

Updates in your mailbox

[/sourcecode]

Test your template to see if any changes need making, mine loads up fine in IE7 and firefox. Heres my preview in IE7.

The rest of the sidebar we’ll make when we move it over to wordpress. Now for the footer, firstly we need our repeated background image from our PSD… you should know how to do that by now. Goto your HTML code UNDERNEATH your ending container DIV draft out your footer. We need two DIV’s one for the footer background and another one for the actual footer. Inside the actual footer we need to add two P tags with a class.

[sourcecode language="html"]

[/sourcecode]

The styles for our footer are as follows.

[sourcecode language="css"]
/* ——FOOTER STYLES—— */

#footer-bg {
height: 25px; /*gives footer a height of 25px*/
clear: both; /*clears both floats*/
background-image: url(images/footer_bg.png); /*adds background image*/
background-repeat: repeat-x; /*repeats background image horizontally*/
}

#footer {
width: 900px; /*gives the footer a width of 900px*/
margin-right: auto; /*centers div*/
margin-left: auto;/*centers div*/
}

.footer-left {
float: left; /*floats left*/
padding-top: 5px; /*adds top padding of 5px*/
}

.footer-right {
float: right; /*foats rights*/
padding-top: 5px; /*adds 5px padding to the top*/
}
[/sourcecode]

CONGRATULATIONS, you’ve completed the conversion to CSS. I hope you’ve enjoyed this tutorial, dont forget to subscribe via RSS and twitter. Next time we’ll be converting it into a live wordpress theme.

MINOR FIX 24/04/2009
Remove the 40px margin from the container DIV
Add 20px bottom margin to the DIV nav#2

PSD to CSS to WordPress PT.2

Richard Carpenter — Sun, 29 Mar 2009 07:52:21 +0000

Hello welcome to part #2 of the “mywordpress” tutorial, today were going to be converting our PSD file into a working CSS template ready for when we convert it over to wordpress.

You can download the CSS template for FREE by using the button above. Right lets get started, create a folder on your desktop called “mywordpress” inside this folder create another folder called “images”. Open up a blank notepad document then goto “file > save as” then save the blank file as “style.css” inside the “mywordpress” folder. Open up dreamweaver and start a new HTML document.

Once the new blank HTML document has loaded goto “file > save as” then save it as “index.html” into your “mywordpress” folder on your desktop. Select the code view tab to view the code to the index.html file.

Inside the “code view” edit the TITLE TAG to display what ever you want in your title bar of the browser. “MYWORDPRESS – fancy wordpress slogan here – Welcome…”.

[sourcecode language="html"]

MYWORDPRESS – fancy wordpress slogan here – Welcome…

[/sourcecode]

On the far right side of the dreamweaver window there should be a big box in which you can slide in and out.

If you cant see it, click the little black arrow. If you find there are loads of boxes open just collapse them the only window we need is the CSS window. In the CSS window we can attach our style sheet by clicking the little chain button. OR if you prefer type it out by hand.

Once you’ve clicked the chain button, you’ll be presented with a box like this.

Just click browse and select your .CSS file in your “mywordpress” folder. Then click ok. You’ll notice once you click ok the style sheet is attached and the code is automatically written for you.

[sourcecode language="html"]

MYWORDPRESS – fancy wordpress slogan here – Welcome…

[/sourcecode]

You can also add and edit any styles linked to your HTML document in the CSS window. Although i prefer to write out my CSS then edit or tweak in the CSS window just for quickness. When you start to write your CSS styles they will be automatically added into the CSS window, all’s you need to do is just double click what ever style you want to edit then a box will pop up with loads of wonderfull options. Right lets start mocking up our DIV’s in our HTML document, we’ll start with the top half first. Were going to need a container DIV, a DIV for the topbar, header and navigation. The code looks like this.

[sourcecode language="html"]

MYWORDPRESS – fancy wordpress slogan here – Welcome…

[/sourcecode]

Notice all my DIV’s are commented, i cant stress enough how important it is that you should comment code, it will save bags of time when finding you DIV’s later on as things can get quite messy. Another thing i tend to do is always TAB in DIV’s that are inside other DIV’s, it just keeps things nice and neat. Right open up your style sheet inside dreamweaver, the first items we need to style is the body of our document.

[sourcecode language="css"]
/* MAIN BODY STYLES */

*{
padding:0;
margin:0;
}

body {
background-image: url(images/bg.png);
background-repeat: repeat-x;
background-color: #f6f7f1;
font-family: Verdana, Arial, "Century Gothic";
font-size: 12px;
color: #878787;
}
[/sourcecode]

Let me explain a little bit about the code above, firstly we dont want any of our document to have any padding or margin, setting the margins and padding to 0 will make the document sit flush at the top, sides and bottom of the browser. In the body style we have a background image which we’ll be creating in a moment, the background repeats along the x axis (horizontal). Then we have our document background color which is the color of the last pixel on the background image, then we have our font family, font size and default font color. Lets create our background image. Duplicate your PSD file (a backup is always good) open up your backup PSD file in photoshop, goto “layer > flatten image”. Select the rectangular marquee tool and make a 2 pixel wide selection spanning from the very top of your document down to the end of the last post. Keep the selection 1 pixel from the left side of the edge. If you start the selection from the edge you’ll get small inperfections on the image. as the last pixel on the navigation is slighly lighter. If you zoom in you’ll see. Once you’ve made the selection goto “image > crop” then save the image as “bg.png” inside your images folder. Once you’ve saved the image select the eye dropper tool, zoom right in to the bottom of the image and select the last pixel on the image, get the color code by clicking on your forground color, you’ll see the color code in the window that pops up.

The hex color code of the last pixel you need to paste into the “background-color” style in your CSS file. If you view you HTML document in your browser you should see your background in action. Now lets style the container, topbar and header.

[sourcecode language="css"]
#container {
margin: auto;
width: 900px;
}

#top-bar {
float: left;
height: 24px;
width: 900px;
padding-top: 8px;
}

#header {
float: left;
height: 125px;
width: 900px;
}
[/sourcecode]

For the container we just want a 900px wide box which is centered, the 900px is what we created our PSD file at, you dont need a height as the container will increase or decrese depending on the amount of content. For the topbar we want to float it left, we also want it to be 900px wide. We also need to set a height, to determine the height i measured it in photoshop, the topbar was actually 32px in height, but we have to minus the padding 32 – 8 = 24. So we set the height to 24px. We also want abit of padding as we dont want the text in our topbar to be stuck right underneath our URL bar in the browser. If you find your text isnt quite centered due to you using a bigger size or something just adjust the padding. The header is pretty much the same as the top bar, 900px wide, floated left and a measured height of 125px. Now we need to fugure out how were going to display our elements inside our divs.

As you can see from the image above its pretty straight forward, the topbar will have 2 lists inside of it, the header DIV will have to more DIV’s inside it one for the website title and slogan and another for the search fields. We write this in our HTML document like this.

[sourcecode language="html"]

Wordpress.org

Sitemap

[/sourcecode]

Inside the topbar there is two unordered lists one with class of nav1 and the other with a class of nav2, then we’ve simply added two more DIV’s inside our header DIV. Lets style our topbar lists first, head over to your style sheet and add this code underneath your “top-bar” DIV.

[sourcecode language="css"]
#top-bar a{
color: #FFFFFF;
text-decoration: none;
}

#top-bar a:hover{
color: #323232;
text-decoration: none;
}

.nav1 li {
display: inline;
list-style-type: none;
margin-right: 20px;
color: #FFFFFF;
float: left;
}

.nav2 li{
display: inline;
list-style-type: none;
color: #FFFFFF;
float: right;
margin-left: 20px;
}
[/sourcecode]

The first two styles refer to the list’s links. “top-bar a” sets the links to have a color of white and the text-decoration removes the line underneath the link. The next one is the hover state of the link, when you hover over a link in the list the color will change to #323232. Then we have out two lists, we display our links inline oppsosed to vertically, list style type is set to none, this removes the bullet points from the list. nav1 is floated left and nav2 is floated right. The list that is floated left will have a right margin of 20px spacing the links apart by 20px then vise-versa for nav2. If you view your document in your browser you should see your lists active. Now lets add our website title and slogan, add the following code inside your “site-title” DIV.

[sourcecode language="html"]

yourwordpress "your wordpress slogan here"

[/sourcecode]

First we wrap out website title and slogan inside a H1 tag, because one of our words is blue in our title we need to add a span class before the word. So we add a span class of “blue-title” before the word “wordpress”. Then because our slogan will look different again we need to add another span class. A span class of slogan. Now we can style the word “wordpress” and the whole slogan sentance though css. You could just use an image but why mess about with images when the effect can be pulled off with CSS. We style our website title and slogan like this.

[sourcecode language="css"]
#site-title{
height: 80px;
float: left;
padding-top: 45px;
}

#site-title h1{
color: #FFFFFF;
text-transform: uppercase;
font-size: 24px;
font-style: italic;
font-weight: bold;
}

.blue-title {
color: #309dcf
}

.slogan {
font-size: 12px;
font-weight: normal;
text-transform: none;
}
[/sourcecode]

Our site-title DIV has the same height as our header box “125px” but also has 45px padding to the top so we have to do 125px – 45px = 80px. We also want our text to the left so we float it left. Next we style our H1 tag, the H1 tag has a color of white (#ffffff), the text has to be uppercase in italic and bold, then the font size is a nice big 24px. Then we had a span class of “blue-title” which was our word “wordpress” we just wanted to change the color so we set a new color. Then the slogan inherits the H1 tags color (#ffffff) we just need to set a different font size so we set a smaller 12px. The slogan will also inherit the H1 tags uppercase and font weight style so we just set the slogan style to normal and none. Thats our title and slogan out the way now for our search field, add the following code to your search DIV.

[sourcecode language="html"]

[/sourcecode]

Here we have a simple form mockup, we have a text field which will be our search field, the search field has a class of “search-field” allowing us to style it in CSS. Then we have our go button with a class of “search-button”. We style our search field and button like this.

[sourcecode language="css"]
#search {
float: right;
padding-top: 45px;
}

.search-field {
margin-right: 10px;
padding: 4px;
background-color: #494949;
border: 1px solid #666666;
color: #FFFFFF;
}

.search-button {
background-color: #494949;
border: 1px solid #666666;
color: #FFFFFF;
padding: 2px;
}

.search-button:hover {
background-color: #707070;
}
[/sourcecode]

We set our main search DIV to float right with the same top padding as our website title. Our search field had a class of “search-field” in this style we add a 10px right margin will push the go button over by 10px, we set 4px padding all the way around the search field. The search field has a background color of #494949 and a 1px border all the way around it in the color #666666. Finally the text inside the search field we want to be white so we add our color: #ffffff. The search button has a class of “search-button” and has the same styles as the search field part from the padding is 2px and it has no margin. The last style is optional really, i always find its better to have a hover effect on buttons. We just want the color of the go button to change slightly once hovered over it. Test your HTML document to reveal the search field iin action. Obviously it doesnt work yet. The next part we need to create is our navigation, we mock this up like this.

[sourcecode language="html"]

[/sourcecode]

Inside our navigation DIV we add a simple unordered list and within that unordered list i have 10 links. You might not get 10 links across if the words are longer. Ive just done page 1 – 9 for an example, in the wordpress template these links will be our pages which will load up dynamically. You’ll also notice links 1-9 has a class of “withdiv”, this basically means with divider, we’ll be creating the divider in a moment. The CSS for our navigation looks like this.

[sourcecode language="css"]
#navigation {
height: 42px;
float: left;
width: 900px;
}

.nav_links ul {
margin: 0px;
padding: 0px;
}

.nav_links li {
list-style:none;
display:block;
float: left;
}

.nav_links a {
text-decoration: none;
color: #5f5f5f;
display: block;
height: 27px;
padding-right: 17px;
padding-left: 17px;
padding-top: 15px;
}

.withdiv {
background-image: url(images/nav_divider.png);
background-repeat: no-repeat;
}

.nav_links a:hover {
color: #FFFFFF;
background-image: url(images/nav_hover.png);
background-repeat: repeat-x;
}
[/sourcecode]

Our first style is our navigation DIV, it has a height of 42px which is the height of the actuall navigation in photoshop. The navigation is floated left and is 900px wide. The unordered list has no margin or padding, the list has no list style, this removes the bullet points from the list, its floated left and is displayed as a block. All the navigation links have no text decoration, 15px padding at the top. The links also have two identical padding of 17px. If your pages have longer words then you might want to reduce the size of the padding. Next up is our class “withdiv” this class basically place a small divider to the left of each link, we’ll be creating the divider in moment. Finally the navigation hover, when we mouse over each button or link we want the text to change to white and have a background image called nav_hover show up. Lets create these image now open up your duplicated PSD file in photoshop if you havent already flattern your PSD FILE, and make a selection like this.

Goto “image > crop” then save the file as “nav_divider.PNG” into your images folder. Next create a new document 200×43 pixels. You need to create an image like the image below.

The image above is exactly the same as our blue bar at the very top of our website you can refer to our PSD file for the layer styles. Once you’ve replicated the image above make a 2 pixel wide selection and crop it. Save the file as “nav_hover.PNG” save the file into the images folder. Test your HTML file in your browser to see if it works. You should have a working navigation with a nice hover, just make sure all the hovers look the way there surposed to. Now its time for our content, before we start were going to make the background images for our sidebar and content boxes or dummy posts. Open up photoshop with your PSD file HIDE all the layers apart from the background layer and the content box in which our wordpress posts will be. Double click your post content box and adjust the inner shadow layer style.

Change the size to 2pixels, the reason why we’ve done this is because when we add our border in CSS it will overlap our white line and it wont be visable. Now we have a 2 pixel line so the border will cover up the 1st 1 pixel white border on our content box background image, leaving the 2nd white border visable. Make a selection like this.

Only select the rectangle dont include the stroke on the box, we’ll be adding the border through CSS. Flattern your PSD file then goto”image > crop” save the image as “post_bg.PNG” Do exactly the same to the sidebar image, the sidebar image should be 280px wide. and the same height as the “post_bg.PNG” save the sidebar image as “sidebar_bg.PNG” You should have two images like this.

We mockup our content area like this.

We’ll be doing the left content first, the HTML looks like this.

[sourcecode language="html"]

[/sourcecode]

The CSS styling for our two content DIV’s are.

[sourcecode language="css"]
#content {
float: left;
width: 900px;
margin-top: 20px;
padding-bottom: 40px;
}

#content-left {
float: left;
width: 602px;
}
[/sourcecode]

Our DIV “content” will basically be the container which holds all our content, we float this DIV left, we make it 900px wide. We also need to space it out abit so we add a 20px top margin and 40px padding. The reason why we added the 40px padding instead of margin was because for some reason in Internet Explorer the content seemed to sit on top of the footer. Adding a 40px padding to the bottom instead of a margin seemed to fix it. The content left DIV will be the container which holds our posts. We have to make the box 602px wide as we’ll be adding a border to the box, a left and right border makes up an extra 2px, 1px each side. Again we float it left. Now we need to start mocking up what our dummy post will look like. The code looks like this.

[sourcecode language="html"]

This is a post title…

Posted on 25/03/2009 By "admin"

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

[/sourcecode]

Inside our content-left DIV we have a number of classes. (remember DIV’s should be unique and never repeated. Classes can be repeated as often as you like). The code above starting from the class “a-post” will be repeated everytime you make a post in the wordpress theme, so its important to use classes not DIV’s. The first class is “a-post” this will be the box which holds our background image and will also contain all other elements of a wordpress post. Inside the class “a-post” we have a class of “post-img” this will be our wordpress thumbnail for the posts. We then have “post-title” this class contains our post title and meta data. Finally we have our “post-desc” which is post description this class will contain our post content before the wordpress MORE tag. The CSS styles for each of the classes looks like this.

[sourcecode language="css"]
.a-post {
background-color: #FFFFFF;
background-image: url(images/post_bg.png);
background-repeat: no-repeat;
border: 1px solid #bababa;
width: 580px;
padding: 10px;
float: left;
margin-bottom: 20px;
}

.a-post h1{
color: #309DCF;
font-size: 24px;
font-weight: bold;
line-height: 34px;
}

.a-post img{
border: 1px solid #d4d4d4;
padding: 5px;
float: left;
}

.post-img {
float: left;
height: 198px;
width: 234px;
margin-right: 10px;
}

.post-title {
float: left;
width: 336px;
margin-bottom: 10px;
}

.post-title p {
color: #FFFFFF;
background-color: #90c6df;
float: left;
}

.post-desc {
float: left;
width: 336px;
text-align: justify;
font-style: italic;
line-height: 16px;
}
[/sourcecode]

The class which we style is the “a-post” class this has a background color of #FFFFFF and a background image post_bg.png which is our image we created in photoshop. We then set our 1px border around the whole class, we also give the box 10px padding all the way around which then makes the width 580px. 580px + 10px padding left + 10px padding right + 1 px border left + 1 px border right = 602px wide. The next class is our H1 tag for our post, we want a nice big blue font then we use line height of 34px to space the title out abit. For every image in a post we want a nice little border, so we add a class for all images in “a-post img”. We then give each thumbnail its own container “post-img” the width and height set in these styles matches my thumbnail which i created in the PSD file. We then space out the thumbnail by giving it a margin to the right of 10px, this will push the post title and content 10px away from the thumbnail. The next class is the “post-title” class, this is the container which holds our post title and meta data. The class “post-title p” refers to our meta data which is the bit of text underneath our post title. Finally we have “post-desc” which relates to our content within the post. You should now have 1 single post in your CSS template, to create more posts we just need to duplicate everything inbetween the “a-post” class. Test your index.html file to see how it looks in your browser. Now lets mockup the sidebar. Inbetween the ending div “content left ends” and “content ends” mockup our sidebar which looks like this.

[sourcecode language="html"]

[/sourcecode]

The sidebar is pretty simple we just have 2 classes of which one is repeated. The class “sidebar” is our sidebar container which will hold our sidebar elements. Then the “side-bar-content” class holds our content, each bit of content is contained within the “side-bar-content” class. Think of each element in your sidebar as a seperate item, so for example you have 4 125x125px ads at the top thats one item, then you have your categories thats another item and so on and so forth. If you look at the code above you can easily look at it and determine what each item is. The CSS for our sidebar looks like this.

[sourcecode language="css"]
.side-bar {
background-color: #FFFFFF;
border: 1px solid #bababa;
float: right;
width: 260px;
background-image: url(images/sidebar_bg.png);
background-repeat: no-repeat;
padding: 10px;
}

.side-bar-content {
width: 260px;
float: left;
margin-bottom: 20px;
}

.side-bar-ads {
margin-left: 3px;
margin-bottom: 3px;
}

.side-bar h1{
color: #309DCF;
font-size: 20px;
font-weight: bolder;
line-height: 24px;
}

.side-bar p {
text-align: justify;
line-height: 16px;
}

.side-bar li {
line-height: 18px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #e1e1e1;
margin-left: 15px;
margin-top: 10px;
display: block;
}
[/sourcecode]

The first thing to style is our sidebar class, this class contains our background image that we created in photoshop. The styles are pretty much similar to our post styles. We then have a class of “side-bar-content” this is our little container for each sidebar item. We then have a few classes which relate to our sidebar content, “side-bar-ads” are the styless for my little 125x125px ads, the “side-bar h1″ tag refers to each header that we have in our sidebar, if we have any plain text in our sidebar or paragraphs then these would be styled though the “side-bar p” style. Then finally we have our “side-bar li” style which we’ll use for any lists that we have in our sidebar. You can go ahead and test your template in your browser. Everything should be in order, you may need to copy the “ad image” from the images folder from my template unless you create your own. Finally we need to mockup our footer which looks like this.

[sourcecode language="html"]

[/sourcecode]

Make sure you add your footer outside of the container DIV as we want our footer to span across the browser just like our header and top-bar does. We first add a DIV of footer and a DIV of footer-topbar this will be our footer container DIV a DIV for our topbar pretty much similar to our header and top-bar. We then add another DIV which will be for some copyright text so we add a DIV of “footer-content”. We need to make a background for our footer, we do this in the same way as we did when we created the top half of our template. You need to make a 2 px selection of your footer background in your PSD file. Then the image will be repeated through CSS. The CSS for our footer looks like this.

[sourcecode language="css"]
#footer {
background-image: url(images/footer_bg.png);
background-repeat: repeat-x;
clear: both;
height: 147px;
}

#footer-topbar {
height: 33px;
width: 900px;
margin: auto;
}

#footer-topbar h1 {
color: #FFFFFF;
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
font-style: italic;
padding-top: 3px;
}

#footer-topbar span {
font-size: 12px;
font-style: normal;
font-weight: normal;
font-variant: normal;
color: #FFFFFF;
}

#footer-content {
height: 113px;
width: 900px;
margin: auto;
}

#footer-content p {
color: #FFFFFF;
padding-top: 45px;
text-align: right;
}
[/sourcecode]

We style our footer DIV first as you can see we’ve added our background which is repeated along the x axis. The height is the same height as a background image and importantly you have to clear the floats eles footer background will be 900px instead of spanning the entire browser width. We then have our footer top-bar, this is pretty much the same as when we created the header, our footer top-bar has a width of 900px, margin is set to auto to center everything so it matches the rest of our template, we then have a height of 33px which is the actual height of the blue bar, which i measured in photoshop. We then have a H1 tag and a span, this is exactly the same as when we created the website title. The copyright text is put inside the DIV “footer-content” and styled through a P tag. All thats left to do now is style our default H tags for headers that aint styled through another DIV, and also we need to style our links.

[sourcecode language="css"]
h1,h2 {
color: #309DCF;
font-weight: bold;
}

h1 {
font-size: 24px;
line-height: 34px;
}

h2 {
font-size: 18px;
line-height: 34px;
}

h3 {
color: #333333;
font-size: 18px;
line-height: 34px;
}

a:link {
color: #309DCF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #309DCF;
}
a:hover {
text-decoration: none;
color: #333333;
}
a:active {
text-decoration: none;
color: #309DCF;
}
[/sourcecode]

All done, hope you enjoyed this tutorial, sorry its so long, to be honest it could of been longer if i went into more detail. In the next tutorial we’ll be converting it into wordpress. Dont forget to subscribe via RSS & twitter. You can also share my tutorials by using the “share & enjoy” buttons at the bottom. Till next time, cya.

Portfolio Layout #10: Learn To Code It

Richard Carpenter — Fri, 27 Feb 2009 20:21:40 +0000

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"]

yourname

Digital Portfolio

[/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_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"]

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.

Created In: Adobe Photoshop

Created On: 01/01/2009

[/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"]

[/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.

hv-designs » PSD Sitebuilds

Digital Curriculum Vitae: PSD Conversion

The Live Version

Preparing Your Files

Setting Up The HTML File

Slicing The Background Image

Slicing The Transparent Rectangle

Slicing The Template Title

Slicing The Navigation

Slicing The Page Background

Slicing The Bullet Points And Divider Line

Slicing The Social Icons

The Background CSS

Styling The Container

Styling The Transparent Rectangle

Styling Frame Middle DIV

Styling The Page DIV

Adding Some Content

Styling Our Header Content

Styling Our P Tag Classes

Styling The Navigation

Adding The Divider

Adding Your Section Titles

Technical Skills

Adding Your CV Details

XHTML & CSS – 4 Years, Intermediate to Advanced

XHTML & CSS – 4 Years, Intermediate to Advanced

XHTML & CSS – 4 Years, Intermediate to Advanced

XHTML & CSS – 4 Years, Intermediate to Advanced

Adobe Photoshop – 8 Years, Advanced

Styling Our Details

Adding Your Custom Font With CSS3

Personal vCard Pt.2

Setting Up Our Local Files

Linking Our Stylesheets

Drafting Some Div’s

Slicing Our Main Images

Bringing It Together With Some CSS

Creating Our Sidebar And Content Div’s

Creating The Sidebar Menu

Adding Our Textual Content

Richard Carpenter Front-End Web Developer

Richard Carpenter Front-End Web Developer

Hello, Welcome…

Done

Hosting Layout #2: Sitebuild Pt.2

Slicing And Marking-Up The Content Area

Creating The Sidebar

PlanOne

Creating The Sidebar Plan Lists

PlanOne

PlanTwo

PlanThree

Creating The Content Area

Coding The Footer

Things Left To Do

Hosting Layout #2: Sitebuild Pt.1

Preparing Our Folders And Files

Preparing Our HTML And CSS Files

Coding The PSD Background

Coding The Website Title

Coding The Navigation

The Navigation Mark-Up

Coding The Featured Sentance

Upgraded. Improved. Better. With more features than ever, our hosting packages are the best way to get your sites online.

Stay Tuned…

Web Design Layout #10: Sitebuild

Getting Started

Mocking Up Our HTML

Slicing Our Background

Adding Some CSS

Slicing Up Our Title

Adding The Title Styles

Adding Our Navigation

Navigation CSS

The Search Box

Mocking Up Our Featured Area

Featured Area CSS

Slicing Our Content Boxes

Mocking Up Our Content Boxes

Upgraded. Improved. Better. With more features than ever,
our hosting packages are the best way to get your sites online.