hv-designs » PSD Sitebuilds

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.

Personal vCard - HV-DESIGNS.CO.UK By Richard Carpenter

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

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.

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.

@import url("reset.css");

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.

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.

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.

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;
}

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.

#container {
margin: auto;
width: 856px;
padding-top: 50px;
}

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.

#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;
}

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.

The styles for our sidebar DIV look like this.

#sidebar {
float: left;
width: 162px;
margin-left: 15px;
}

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.

The CSS for our content DIV looks like this.

#content {
float: left;
width: 662px;
margin-left: 3px;
}

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.



ABOUT
WORK
SOCIAL
CONTACT

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.

.navigation li {
display: block;
float: left;
}

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

.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;
}

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.

li.about, li.work, li.social, li.contact {
background-image: url(../images/navigation.png);
background-repeat: no-repeat;
}

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.

li.about {
background-position: left top;
}

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

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

li.contact {
background-position: right top;
}

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

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;
}

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.

Richard Carpenter Front-End Web Developer

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

Richard Carpenter Front-End Web Developer
Hello, Welcome...

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

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.

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

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;
}

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.

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.

/*--------------- 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;
}

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″.


PlanOne

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.

/*--------------- LEFT CONTENT ---------------*/

#sidebar {
	float: left;
	width: 229px;
	padding: 10px;
}

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.

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;
}

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).


100MB Webspace
1.5GB Bandwidth
15 Mailboxes
1 Database
1 Domain Name
24 Hour Support

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.

The CSS for our list looks like this.

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;
}

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


PlanOne


100MB Webspace
1.5GB Bandwidth
15 Mailboxes
1 Database
1 Domain Name
24 Hour Support



PlanTwo


100MB Webspace
1.5GB Bandwidth
15 Mailboxes
1 Database
1 Domain Name
24 Hour Support



PlanThree


100MB Webspace
1.5GB Bandwidth
15 Mailboxes
1 Database
1 Domain Name
24 Hour Support

Creating The Content Area

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

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

#main-content {
	float: left;
	width: 614px;
	margin-left: 17px;
	padding-right: 10px;
	padding-left: 10px;
	line-height: 20px;
	text-align: justify;
}

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.




Copyright Yourwensite | All Rights Reserved
Design By Richard Carpenter

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

/*--------------- FOOTER ---------------*/

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

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.






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

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“.

*, 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 */

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.

/*--------------- ADDITIONAL STYLESHEETS ---------------*/

@import url("reset.css");

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.

/*--------------- 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;
}

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.

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

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.

/*--------------- MAIN CONTAINER ---------------*/

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

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.

/*--------------- TITLE ---------------*/

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

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.









home
hosting plans
support
forum
members login
contact us

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.

/*--------------- NAVIGATION ---------------*/

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

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.

.navigation-left, .navigation-right {
	float: left;
	height: 49px;
	width: 18px;
}

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.

.navigation-middle {
	background-image: url(../images/nav_middle.png);
	background-repeat: repeat-x;
	float: left;
	height: 49px;
}

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.

.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;
}

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.

.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;
}

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.


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

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.

/*--------------- 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;
}

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.

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

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.

* {
	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;
}

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.

#title {
	float: left;
	height: 105px;
	width: 850px;
	background-image: url(images/title.png);
	background-repeat: no-repeat;
	background-position: left top;
}

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.



home
services
portfolio
about
contact us

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,

#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;
}

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.



home
services
portfolio
about
contact us

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.

.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;
}

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.

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.

.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;
}

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.

The CSS looks like this.

#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;
}

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.

Right Content Box

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

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.

#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;
}

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.


Copyright © yoursite.com | All Rights Reserved - Design By Richard Carpenter

The CSS looks like this.

#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;
}

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.





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

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.

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

/* ----------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*/
}

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.


yourwebsite
fancy slogan here

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

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*/
}

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.

The css for our search field and button are.

.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*/
}

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.



home
blog
work
forum
services
contact

Here’s the css for our navigation.

.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*/
}

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.

The css for our rss icon is similar too.

.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*/
}

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.

The css for the code above looks like this.

#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*/
}

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.

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.













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.

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.

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*/
}

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”.

The styles for these classes are as follows.

/* ----------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*/
}

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.



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.
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.
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.

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.

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*/
}

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.



 


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.

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

.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*/
}

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.






copyright © yoursite.com | all rights reserved | design & coded by richard carpenter

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.

/* ----------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*/
}

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.

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*/
}

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.

/* 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*/
}

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.



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

Also inside the head section add this bit of javascript.

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.


No 1
No 2
No 3

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

.hidden {
	display: none; /*hides our 2nd and 3rd featured images*/
}

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

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.

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.

My PROject: 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.





Your PROject - Welcome...

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.





Your PROject - Welcome...







EVERYTHING GOES INBETWEEN HERE

Our next div will be our header div.

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.

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)

/* ----------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*/
}

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.







Home
Services
Products
Testimonials
Contact Us

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.

.navlinks li a:hover {
	position: relative;
}

.navlinks li.current a{
	position: relative;
}

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.

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.





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...

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

/* ----------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*/
}

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.





a content title here
May 20, 2009
SOME TEXT HERE

The styles for our left content area look like this.

/* ----------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*/
}

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.





a content title here
May 20, 2009
SOME TEXT HERE





a content title here
May 20, 2009
SOME TEXT HERE

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.





a content title here
May 20, 2009
CONTENT HERE

The css looks like this.

/* ----------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*/
}

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.





Copyright © your project | All Rights Reserved
Design By Richard Carpenter

We then add our footer css styling like this.

/* ----------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*/
}

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.

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.

Web Design Layout #9 | Welcome...

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.

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.

*{
	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*/
}

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.

#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*/
}

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.

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.



Home
Gallery
Digital Portfolio
Services
Contact Us

We style the menu like this.

#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*/
}

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.



Home
Gallery
Digital Portfolio
Services
Contact Us



Subscribe Via RSS
Updates in your reader

We then style our RSS DIV’s like this.

#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*/
}

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.



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.

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.

#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*/
}

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.



What can i do for you?



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.
 
 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?



 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.
 
 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.

The styles for our boxes are.

.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*/
}

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.






 Copyright © yoursite.com All Rights Reserved

Pretty simple, our styles for our footer are.

#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*/
}

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.

BLOOpress "another wordpress blog" | Welcome...

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.








Home
Sitemap
Contact Me

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.

/* ------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*/
}

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.

/* ------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*/
}

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.

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

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”.

/* ------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*/
}

#title {
}

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.

#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*/
}

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”.

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.

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.

#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*/
}

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.

.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*/
}

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.

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

.search-button{
vertical-align: top; /*vertically aligns the button from the top*/
}

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.



Page#1
Page#2
Page#3
Page#4
Page#5
Page#6
Page#7
Page#8
Page#9
Page#10
Page#11

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.

#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*/
}

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.

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.

/* ------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*/
}

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.


Example Wordpress Title

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

.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*/
}

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.


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.

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

.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*/
}

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.


104 Comments | Posted on 16/04/09 @ 10:38am

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”.

.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*/

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”.

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

/* ------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*/
}

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

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.

#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*/
}

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


Stay Connected...

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

#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*/
}

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.




Stay Connected...






Subscribe via RSS
Updates in your reader

We style these classes like this.

.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*/
}

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.


Stay Connected...






Subscribe via RSS
Updates in your reader







Subscribe via twitter
Updates on your twitter







Subscribe via email
Updates in your mailbox

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.






BLOOpress "your slogan here"

Copyright BLOOpress All Rights Reserved

The styles for our footer are as follows.

/* ------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*/
}

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…”.





MYWORDPRESS - fancy wordpress slogan here - Welcome...

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.





MYWORDPRESS - fancy wordpress slogan here - Welcome...

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.





MYWORDPRESS - fancy wordpress slogan here - Welcome...

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.

/* 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;
}

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.

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

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

#header {
	float: left;
	height: 125px;
	width: 900px;
}

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.






	Login
	Wordpress.org



	Sitemap
	Contact Us

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.

#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;
}

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.



yourwordpress "your wordpress slogan here"

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.

#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;
}

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.

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.

#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;
}

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.






	 Home
	Page #1
	Page #2
	Page #3
	Page #4
	Page #5
	Page #6
	Page #7
	Page #8
	Page #9

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.

#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;
}

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.

The CSS styling for our two content DIV’s are.

#content {
	float: left;
	width: 900px;
	margin-top: 20px;
	padding-bottom: 40px;
}

#content-left {
	float: left;
	width: 602px;
}

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.








   


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.

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.

.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;
}

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.






   


Some Text
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.



Categories
 
Categorie #1
Categorie #2
Categorie #3
Categorie #4
Categorie #5

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 125×125px 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.

.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;
}

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 125×125px 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.






mywordpress "Your fancy wordpress slogan here"



Copyright &copy; mywordpress.co.uk | All Rights Reserved

Design By HV-Designs.co.uk

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.

#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;
}

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.

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;
}

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.

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.

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.

/*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*/
}

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.

/*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*/
}

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.

/*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*/
}

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.


	yourname
	Digital Portfolio

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.


     
        web design
        logo design
        graphic design
        contact me

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.

/*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*/
}

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.

/*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*/
}

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.

The CSS styling for the class above looks like this.

/*MAIN CONTENT STYLES*/

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

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

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

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

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

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

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.



    

    


    
    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

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.

/*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*/
}

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.


Copyright yourname | All Rights Reserved

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.

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

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.

The Design Lab: PSD Conversion

Richard Carpenter — Wed, 28 Jan 2009 21:27:54 +0000

Hello, welcome to another layout coding tutorial. In this tutorial il show how to code my design lab layout tutorial. Make sure you have your PSD ready made in photoshop.

Create a new folder on your desktop called “design lab”, inside this folder create another folder called “images”. Open notepad then just goto “file > save as” save the blank document as “styles.css” save it in the “design lab” directory. Open up dreamweaver start a new HTML document then goto ” file > save as” save the HTML file as “index.html”.

Open up both files (styles.css & index.html) in adobe dreamweaver, put your HTML file in code view by clicking the code tab. Change the text within the title tag to what ever you want your site name to be. Also link your style sheet by adding the snippet of code underneath the title tag. That snippet of code is vital as without it your website will look pretty dull.





The Design Lab | HV-Designs Tutorial

The way i code my PSD’s are from top to bottom, so we’l start with the main things first like our container, title and naviagtion. The first thing we’ll need is our container to hold the website, then within the container there will be another container for our clouds background. Then there will be our title and naviagtion. We can draft these out in our HTML file which looks like this.









Home
Services
Portfolio
Free Quote
Support
 Contact

To keep on top of our code and to see where one div begins and where another one ends we can use coded comments, which you’ll only see when viewing the source code. When creating a div i always start with a comment to say that it starts here, then end it with a comment to reflect the end of the div. from the structure above you can clearly see where one item begins and where one ends. Now before we code out CSS we need to make a couple of images from our PSD. The first one being our clouds background, so in photoshop with your PSD file HIDE every layer apart from your clouds layers (there should be two) a blurred one and a normal one. With all the layers hidden apart from the two clouds images goto “layer > merge visable” your two clouds layers should merge into one. Now you need to make a selection around your clouds image making sure you have it all. Once the selection has been made copy and paste it to a new document with a TRANSPARENT background. Goto “file > save as” then save it as clouds.png in your images folder. Heres my clouds image on my canvas.

your going to need to do this for each item that we copy from our PSD so remember the steps listed above, failure to follow the steps will result in choppy images, non transparent images etc,.. Do the same to the website title and the navigation bar.

Save each file as “navigation.png” and “title.png”.

You also need a little chunk of the background as we have used a gradient background. We can repeat the background horizontally across our website.

Save the background as “background.png”. You should now have 4 images in your images folder background, website title, navigation and the clouds.

Now we have our first set of images we can now add our CSS styles to our stylesheet. The first set of styles we will write will be our body styles which will be repeated through out our whole site.

*{
	padding:0;
	margin:0;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #797979;
	margin: 0px;
	padding: 0px;
	background-color: #156894;
	background-image: url(images/background.png);
	background-repeat: repeat-x;
}

So we dont want any margins or padding around our website so we set our margin and padding to 0. We want a common font family “Arial, Helvetica, sans-serif;”, with a size of 12 pixels in the color #797979. Our background color will reflect the color at the very bottom of our “background.png” file. Mine is #156894 yours might be slightly different depending on how long your selection was. Just open it up in photoshop and use the eye dropper to select the color of the last couple of pixels. We then want our background image with the gradient on it to repeat along the x axis (horizontally). The next bit of code we need to add is for our container and clouds.

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

#clouds {
	width: 850px;
	float: left;
	background-image: url(images/clouds.png);
	background-repeat: no-repeat;
}

The first div we style is our container which we want to be 850pixels wide the same as our PSD file. We want our magins set to auto, this will center our whole site in our a browsers. We then style our 2nd div which is our clouds div, which will also act as our container but with a background image. We want the width to be the same as our container and we want to float it left within our container, we then set our background image to the clouds image in our images folder. We dont want it to repeat so we set no-repeat. You can view your HTML file in your browser to see how it looks, you wont see alot, but you’ll definetley be able to see if your background color matches. The next part we want to style is our title and navigation which looks like this.

#title {
	background-image: url(images/title.png);
	background-repeat: no-repeat;
	height: 39px;
	width: 243px;
	float: left;
	margin-top: 45px;
	margin-left: 20px;
}

#navigation {
	background-image: url(images/navigation.png);
	background-repeat: no-repeat;
	height: 45px;
	width: 434px;
	float: right;
	margin-top: 40px;
}

.nav_menu li{
	list-style:none;
	display:inline;
	padding-left: 13px;
	padding-right: 13px;
	float: left;
	padding-top: 14px;
}

.nav_menu a {
	font-size: 11px;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	color: #848484;
	font-weight: bold;
}

.nav_menu a:hover {
	color: #156894;
}

Okay so the title div first, we set a background image which will be our title image from our images folder, we dont want it to repeat. Then the width and height which is the actual dimensions of our title.png image.

We then want to float it left with a top and left margin to bring the title in abit so its not stuck up in the corner of our container. Next is our navigation similar to our title styles we set a background, width and height, dont forget the width and height have to be the same as your .PNG image in your images folder. Then we just want to add a top margin to bring it down a touch, importantly we want to float it to the right.

Now for our lists, and link styles for our navigation bar. We dont want any list style, setting the list style to none will get rid of the bullet points, we also want our navigation text to display inline next to each other so we use display:inline. We want our text in the middle of our navigation so ive set some padding around the items. Yours might have to be adjusted depending on how big your navigation.png image is. We then style our links and hovers for our navigation text, i wont go into to much detail on the last two styles as there self explanitory. Hit F12 on your HTML file to display it in our browser. This is how mine looks.

If you examine the PSD file you will see we also have some catchy text above our big content box, we can add this the same way we did our title.

The HTML code for the catchy text is as follows.

We want our catchy text to be inside the same div our big content box will be in, so we add the above content underneath the END of our navigation div. We start with an id of content which will be like our container for our big content box, then simply add our id of catchy text. Then end with our content closing div. The styles for our content and catchy text div are as follows.

#catchy_text {
	height: 55px;
	width: 362px;
	background-image: url(images/catchy_title.png);
	background-repeat: no-repeat;
	margin-top: 150px;
	margin-left: 65px;
}

#content {
	float: left;
	width: 511px;
}

Firstly the styles for the catchy text, the width an height relate to the image dimensions of our catchy text, dont forget you will need to create the .png image from the PSD file. The background image refers to the actual image in the images folder, we dont want it to repeat. We have then added quite a big top margin to push the whole thing down quite abit. Ive also added a left margin to center the text abit, you will see its sort of centered when we add the content box.

The content div will be like a container for our content box, we just need to float it left and add a width of 511 pixels which is how wide i want it to be. If you view your HTML file in your browser you should have something like this.

Coming on nicely :) dont you think…… Right this next part you need to create top, middle and bottom images from your big content box.

Quick Tip: instead of creating your bottom bit of the content box, just rotate your canvas 180 degrees on content box top image then just save it as content_box_bottom. That way your top content box will be identical to the bottom ;) therefor your styles will also be the same. So you’ve got your 3 individual images saved in your images folder. Lets draft it out into our HTML file.

You’ve already done the content div and catchy text, just add the rest. Content box top and bottom will stay the same but inbetween the content box middle div and ending div thats where your content will be. Also please note content top, middle and bottom are all classes NOT div id’s. Now for the styles.

.content_top {
	background-image: url(images/content_top.png);
	background-repeat: no-repeat;
	height: 16px;
	width: 511px;
}

.content_middle {
	background-image: url(images/content_middle.png);
	background-repeat: repeat-y;
	width: 471px;
	padding-right: 20px;
	padding-left: 20px;
	line-height: 20px;
	padding-top: 15px;
	padding-bottom: 15px;

}

.content_bottom {
	height: 16px;
	width: 511px;
	background-image: url(images/content_bottom.png);
	background-repeat: no-repeat;
	margin-bottom: 50px;
}

The first class is the top half of the content box, it has the background image of content_top which is the top part of the big content box, we dont want it to repeat. Height and width refer to the images dimensions. The bottom class is exactly the same apart from it has a bottom margin, the margin is there to ensure there’s spacing between the box and the footer which will be underneath. Also because these styles are classes, they can be duplicated in the HTML file so you can continue to create another content box underneath if need be. The content middle class is abit different, it has a background image but repeats on the y axis (vertically) also note there is no height only the width, the width is 471 pixels, but is exactly the same as 511pixels if you add the left and right padding. You have to count the padding in with your width. If we set a height then the box wouldnt expand with the content. Also note there is some padding in all directions, this is to make the content nice and spacious, you can adjust the padding to suite if you wish.

Add some text and headers to your content middle part and check to see how it looks in your browser. Dont forget to style some head tags ;) They might look like this.

h1 {
	color: #3b3b3b;
	font-size: 24px;
	margin-bottom: 10px;
}

h2 {
	color: #FFFFFF;
	font-weight: bold;
	font-size: 18px;
	margin-left: 5px;
	line-height: 30px;
}

Now for the sidebar, The way the sidebar is constructed is exactly the same as our content box we just created. Only the top half of our sidebar box will contain a big tag saying free quote. Split your sidebar box into 3 sections from your PSD file like we did with the content box. Once your done we’ll write it out in our HTML file.

We start off with a div called sidebar which will be like our sidebar container, then we have 3 classes similar to the big content box sidebar top, middle and bottom. Inbetween sidebar middle and the ending div thats where your content would go. The CSS for the sidebar is as follows.

#sidebar {
	float: right;
	width: 264px;
	margin-top: 75px;
}

.sidebar_top {
	height: 58px;
	width: 264px;
	background-image: url(images/sidebar_top.png);
	background-repeat: no-repeat;
}

.sidebar_middle {
	background-image: url(images/sidebar_middle.png);
	background-repeat: repeat-y;
	width: 264px;
	padding-top: 20px;
	padding-bottom: 20px;
}

.sidebar_bottom {
	background-image: url(images/sidebar_bottom.png);
	background-repeat: no-repeat;
	height: 8px;
	width: 264px;
	margin-bottom: 20px;
}

So we start with our first style which is for our div of sidebar, because we want it to be on the right side of our page we float it right, we also need a margin at the top BUT not as big as the big content box as the sidebar sits slightly higher. Finally the width of the sidebar is 264pixels which should also be the size of our split images for our content box.

The last 3 class top, middle and bottom are the same as we did for the big content box but only on a small scale meaning the images arn’t as wide as the big content box., Just make sure the widths and heights of the top and bottom relate to the images in your images folder. Although the widths should most definetley be identical.

Ive added an example form in the image above. You can also add content underneath your content box by just adding paragraphs and headers in your content middle HTML. OR you can create more content boxes using the code above, just change the content box top image to one without the quote now tab, just be sure to add it in your css file as sidebar_top2 or something ;)

Now for the footer. We want the footer to span right the way across our website so dont add your footer HTML code inside your container. Add it after your container END DIV.

For the footer we just create a new div called container, your content would then go between the footer and footer end div tag. The styles for our simple footer are.

#footer {
	background-color: #115579;
	clear: both;
	padding: 20px;
}

We want a slighly darker background color so i used an optional background color, Importantly we added clear:both, this means we dont want anything either side of our footer. We then add some simple padding to fill out our text abit. Thats it all done simple as that. Hope you enjoyed this tutorial dont forget to subscribe to our RSS or/and twitter.

Till next time, thanks for reading.

Coding The Creative Design Layout

Richard Carpenter — Fri, 09 Jan 2009 08:21:57 +0000

Welcome, in this tutorial il teach you how to convert my “creative design layout” into a working CSS/HTML valid website.

Firstly id do the tutorial on creating the layout or skip it and download the PSD file from the hv-designs shop, if you do my tutorial try and get it as close to my design as possilable, changes you wish to make can be done easily once coded. Right lets begin…

Create a folder on your desktop call it what ever you want, within the folder create another folder called “images”. Open up notepad then just goto “file > save as” then enter “styles.css” as the filename make sure you include the .css bit. Open up dreamweaver and click HTML under create new column.

You should now have a blank HTML document in dreamweaver, goto “file > save as” then save it as “index.html”. You should now be all set to go. In dreamweaver you need to be in code view and the CSS panel should be open. The CSS panel is the box on the right, if you cant see it click the little grey arrow. Also in dreamweaver there are 3 views available code, split and design, let me just explain what these are. Code is to view the code to the HTML document that is open. Split is a split screen version half design and half code. Design is how your website looks BUT dont go by what is actually in the design view as sometimes layouts look split up, not aligned properly etc… its very rare i used the design view, i always check what the layout looks like in my browsers, IE and Firefox. You can do this by pressing F12 on the keyboard.

Right enough explaining lets get on, once the CSS panel is open click the “attach style sheet” button.

Click browse in the box that pops up and navigate to the style sheet you created (the styles.css file).

Notice in the HTML code in your index.html file you have a new line of code.

This line of code is VERY important as it tells the HTML file to look in this file (styles.css) to style the actual document. But most of you new that right…! Okay the way i code my templates are i work from the top of the PSD file and work my way down, i also slice this way also, most people slice everything first the start coding each item. I find it easier my way, but feel free to experiment.

Lets start by laying out the 1st foundations of our website, we need a container, header, navbar and logo. The container is the box which will basically hold our layout, the header is the header the navbar is the navbar and the
logo is the logo. Pretty simple ah?! All these elements will be wrapped in divs and looks like this.





Untitled Document

Lets explain the code above in more detail now you no what it looks like. The 1st div is the the container which like i said above is the box that basically holds the website. Everything for the website will be inside this div. Then theres the header div, now this div will only hold a background image as you will see when we add the styles. Now beacuse we want the background image behind the menu bar and logo we need to place these item inside the header div and as you can see the header div ends at the bottom of the html file with the container. When we add our website content we must place it after the header end div but before the container end div. Now lets being to style our divs. Open up your styles.css file in dreamweaver, use the tabs to flick between the two files.

The first bit of CSS code we need to add is to style the body of the document which looks like this.

*{
padding:0;
margin:0;
}

body {
font-family:Verdana, Arial, Helvetica, sans-serif;
background-image:url(images/bg.png);
background-repeat:repeat-x;
background-color:#eae5cf;
padding:0;
margin:0;
}

We dont want any margin or padding around the edges of the website so we set the padding and margin to 0, we need to add our font family which is the fonts were going to be using through out the layout. Then theres a background image which is our background, il show you how to create that in a minute. We want our background image to repeat along the X axis which is horizontally. Background color is the color of our background which relates to the background on the PSD file. To create the background image header over to your PSD file and create a 1 or 2 pixel selection like this. Make sure all your layers are flattened, BUT DONT SAVE IT THE PSD FILE, just copy and paste the selection to a new document then undo everything on your PSD file. Save the image you copied as “bg.PNG” save it in your images folder.

Head back over to your HTML file and press F12, you should see your background in action.

Now lets create our container and the background image for the header. We’l create the background image 1st, hide all your header elements on your PSD file then just select the background part of the header (again make sure you flatten your PSD file when you’ve hidden the header elements, but dont forget to undo once the image is made). Copy and paste the header background to a new document then save as “header_bg.png” in your images folder.

Now lets add the CSS styles for our container and header divs.

#container {
width:900px;
padding:0;
margin:auto;
}

/* HEADER BACKGROUND IMAGE */
#header{
background-repeat:no-repeat;
background-image: url(images/header_bg.png);
height: 298px;
width: 900px;
float:left;
margin:auto;
}
/* HEADER BACKGROUND IMAGE END */

My PSD file width is 900pixels, so we’ll use a container of 900px, again with no padding, BUT set margin to auto this will center our webpage in the browser. For the header div we need to add the header image which is the “header_bg.png” image. We dont want the header background to repeat as its a fixed item. You need to check the width and height of your image that you saved, mine is 900px wide and 298px high. Yours might be different so adjust accordingly. Save our css file then head back to your HTML file press F12 and take alook. You should be able to see your background image where the header is surposed to be.

Now lets add our logo which will be our website title, slogan and the man image. Head back over to PSD file and copy and paste your logo to a new document and save as “logo.png” heres my mine.

Lets add the CSS styles to the css file for the logo image.

/* HEADER LOGO */
#logo {
background-repeat:no-repeat;
background-image: url(images/logo.png);
height: 298px;
width: 315px;
float:left;
}
/* HEADER LOGO END*/

Again pretty much the same as the header styles apart from the filename is different and the width and height corrospond to the image you just saved (logo.png). Save your CSS file then head back over to your HTML file press F12. Heres what mine looks like in the browser.

Time to code our navigation in your HTML code under the nav div you need to add your menu code which looks like this.




#
#
#
#

The new bit code “ul class=”menu” means unordered list, all the navigation items have a “li id” which means list id. The links have a list id beacause we wont be using plain text for our navigation we will be using images. Head over to your PSD file copy and paste each navigation item and save as seperate images label them according to the image as it will make it easier. You should have 4 images in total. Also big tip when saving PNG files, make sure the images are on transparant backgrounds. The CSS code for the navigation is as follows.

/* NAVIGATION */
#nav{
width:480px;
padding-top:20px;
float:right;
height:40px;
margin-right: 40px;
}

.menu ul{
padding:0;
margin:0;
list-style-type:none;
list-style:none;
display:inline;
}

.menu li{
padding-right:10px;
margin:0 5px 0 0;
height:40px;
list-style-type:none;
list-style:none;
display:inline;
float:left;
}

span{
display:none;
}

#about a{
background:url(images/about.png);
width:107px;
height:39px;
display:block;
}

#portfolio a{
background:url(images/portfolio.png);
width:106px;
height:39px;
display:block;
}

#clients a{
background:url(images/clients.png);
width:98px;
height:39px;
display:block;
}

#contact a{
background:url(images/contact.png);
width:109px;
height:39px;
display:block;
}
/* NAVIGATION END*/

The nav div is the box that holds the navigation images. So we need to add a width, the width should be the size of all the images together so for EXAMPLE: if each image is 200px thats 200px x 4 = the width of the box. Then we need to add some padding to the top of the box so it isnt stuck right at the top of the browser. Height is the height of the navigation images which should all be the same. Then we need to stick it more to the right so add a margin of 40 pixels to the right. Now the next part is of code relates to the ul and li tags which are both classes not divs, a class starts with a period (.) the difference between a class and div is that a class can be used over and over and a div should be unique and used once. The most important styles on the ul and li classes are the list-style ones, these styles remove the bullets from the list and place the images in a line next to each other opposed to being displayed vertically. The span style is also important as span allows us to add styles to the content, or manipulate the content with for example JavaScript. Next comes the actual code for our navigation images, as you can see each li id relates to each style, keeping the names of items simple and straight to the point will make your life more easier. Each background URL relates to the navigation images we created previously. Width & height relate to the dimensions of each image. The display:block style means “The element will be displayed as a block-level element, with a line break before and after the element”. Save your CSS file then head back over to your HTML file press F12.

The next part is to create the welcome text under the navigation bar. We need to add some new HTML code for this part so in your HTML file code in between and

add this code.





Welcome...
SOME TEXT HERE

So we basically need another box for our text which is the div id featured, the h1 tag means header#1 you can have as many of these as you want. i called it h1 beacause its the 1st header we’ve done so far. The p tag means paragraph which is where our text will be. So in this chunk of HTML code there are 3 elements we need to style the div tag “featured”, the h1 tag and the p tag. The CSS code looks like this.

/* FEATURED*/
#featured {
height: 200px;
width: 480px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #eae5cf;
margin-top: 90px;
margin-left: 380px;
}

h1 {
padding:0;
margin:0;
font-size:20px;
color:#eae5cf;
text-transform:uppercase;
font-family: Impact;
font-weight: normal;
}

p {
padding:0;
margin:0;
font-size:11px;
color:#eae5cf;
font-family: Verdana;
}
/* FEATURED END*/

The height and width in the #featured tag corrospond to the height and width of the box that the text will be in. Margin -top push’s the block of text down 90px and the margin-left moves it to the right 380px. The other styles corrospond to the text being displayed, here you can set which ever font you want, in any color you want and what ever size you want. Viewing your HTML file in your browser should now look like this.

The next part we need to do is create our content area which has one snazy title and 6 content boxes which need to be expandable. So the first we need code is the snazy header. Goto your PSD file and copy and paste the snazy title to a new a document and save it in your images folder.

Goto your HTML document and add this code between and the last div which is the container end div.

The div id content will represent the big box in which our content boxes and sidebar boxes will sit, at the moment though there is only a h2 tag which we’l use for our snazy title we just sliced and saved. Add this CSS code for your content div and h2 tag.

/* CONTENT*/
#content {
width:800px;
padding-top: 20px;
margin:auto;
}

h2 {
background:url(images/h2.png);
width:302px;
height:67px;
margin-bottom:20px;
margin-left: 10px;
}
/* CONTENT END*/

The content box which will hold our content only needs to be 800px wide as the content boxes arnt that wide them selves you can set it at 900px if you want to but that means the gao between the content boxes and sidebar boxes will be greatly increased. We have set 20px padding at the top of the div content so that it isnt stuck right beneath the header. Then we set the margin to auto, this will center everything that falls in the content div. The h2 styles are for our snazy title we just sliced up background url is the filename and path to the image. Width and height have to be the same as the actual image itself. Then finally we add our 20px margin to the bottom so that the content boxes dont sit right underneath the snazy title, the margin-left simply push’s the snazy title over to the right. View your HTML file and you should have something like this.

Now for the content boxes themselves. The content boxes all have top and bottom rounded corners so basically there will be 3 elements to each content box. The top rounded corners, the middle bit which will be expandable then the bottom rounded corners.

Slice these parts of the content boxes into 3 individual files save them as .png on a transparant background in the images folder.

Lets add our HTML code for the content boxes. Now because these content boxes will be repeated we need to use classes not div’s remember when i said before div’s should only be used once. Well nows a perfect example. Inside the content div inbetween the h2 tags and the end div you need to add this code.



Content Box One


some text


Posted on 04/01/2009

the 1st class is content_box, this will be the box our content box sits in, so it will be a content box inside a box. Then theres a class content_top, thats our top bit of the content boxes. In the top half of the content box i want to be able to add a header so i can label each content box so ive used a h3 tag. The content_main class is our expandable bit of the box so the box will adjust to the amount of text and images that inside. Then finally content_bottom…. you’ve guessed it, its the bottom half of the box. The p tag in the bottom half the box is just like a content box footer that ive added. So the CSS code to go with these elements are as follows.

/* CONTENT BOX*/
.content_box {
width:485px;
float:left;
margin:auto;
}

.content_top{
background:url(images/content_top.png);
background-repeat:no-repeat;
width:485px;
height:38px;
}

.content_top h3{
color: #5C5741;
font-family: Impact;
font-size: 24px;
font-weight: normal;
padding-top: 6px;
padding-left: 20px;

}

.content_main{
background:url(images/content.png);
background-repeat:repeat-y;
width:485px;
padding-top: 6px;
padding-left: 20px;
padding-right: 0px;
}

.content_main p {
font-family: Verdana;
color: #A09484;
font-size: 11px;
padding-right: 30px;
}

.content_bottom {
background:url(images/content_bottom.png);
background-repeat:no-repeat;
width:485px;
height:36px;
margin-bottom: 10px;
}

.content_bottom p {
font-family: Verdana, Arial, Helvetica, sans-serif, Impact;
color: #5C5741;
font-size: 9px;
float: right;
padding-top: 10px;
padding-right: 15px;
padding-left: 15px;
padding-bottom: 10px;

}
/* CONTENT BOX END*/

The class content_box has a style width:480px the width of our content boxes image are all 485px so that should be sufficient to hold it all in, we also want it on the left side so we float it left, we also want the content boxes to lye equally in the middle of the surrounding div so we set a margin of auto. The next set of classes are our actual content boxes and these classes contain our images that form the box. The 2nd class is content_top this will represent the top rounded corners of our box so we set the background image to the top box image we created in photoshop, we dont want the background to repeat and the width and height are the actual dimensions of our content top image. Our content_bottom class is exactly the same, the only difference is it has a bottom marhin of 10px. Ive added this so there is a 10px gap inbetween each box eles there boxes will just be right underneath each other. The class content_main is where our main content will be, now this is a little bit different from the others, the background image is the image we created in photoshop but because we want the background to repeat we set the repeat on the y axis, also notice there is only a width and no height the width should be the same width as the image. There is no height because we want it to expand if we did set a height then you wouldnt see all the text and it wouldnt expand it would be like a fixed object. Then theres the padding, we need to pad the top and left so the text lie’s nicely inside our box. If you save your HTML and CSS files press F12 and preview in your browser you should see you content box.

To add more content boxes all’s you need yo do is copy HTML code and paste the html classes. So three content boxes would look like this.


  

    

    

      
        Content Box One
      

      
      

      
      

      

        
          Content Box Two
        

        
        

        
        

        

          
            Content Box Three

Now for the right sidebar, its constructed in exactly the same way as the main content boxes, they contain 3 images, sidebar_top, middle and bottom open up your PSD file and begin to chop up your sidebar box. The markup will be the same just different div and class names. Lets start preping it in our HTML file. The markup looks like this.




stay connected...


some text here

The starting div is sidebar which will be the box that all our sidebar boxes sit in, the first class is the top bit of the sidebar. The h4 tag is our header 4 then theres the sidebar_main which will be our expandable area then last but not least the sidebar_bottom which is the bottom of our sidebar content box.

The styles to go with all this is also pretty much the same minus a few little options. The CSS looks like this.

/* SIDEBAR*/
#sidebar {
width:305px;
float:right;
}

.sidebar_top {
background:url(images/sb_top.png);
background-repeat:no-repeat;
width:305px;
height:40px;
}

.sidebar_top h4 {
font-family: Impact;
font-size: 30px;
font-weight: normal;
color: #5C5741;
padding-top:2px;
padding-left:20px;

}

.sidebar_main {
background:url(images/sb_main.png);
background-repeat:repeat-y;
width:305px;
padding-left:15px;
}

.sidebar_main p {
font-family: Verdana;
color: #A09484;
font-size:11px;
padding-right: 10px;
}

.sidebar_bottom {
background:url(images/sb_bottom.png);
background-repeat:no-repeat;
width:305px;
height:22px;
margin-bottom: 10px;
}
/* SIDEBAR END*/

The 1st thing to be styled is the div sidebar two simple styles, the width of our box in which the content boxes will sit, pretty easy that will be the same width as our images which are all 305px. Then we need to float it right so it will sit inline next door to our main content boxes. Sidebar_top and sidebar_bottom are pretty much the same apart from bottom has the margin as like the main content boxes. The class sidebar_main is the same as the others but again like our main content boxes it has no height and the background is repeated. Once you’ve added your code give it and preview it with F12. Heres mine.

Just copy the classes to add more boxes in your sidebar, the code for three boxes looks like this.




stay connected...


some text



whats new...


some text



monthly poll...!


some text

Now its time for the footer, the footer div should be placed outside the container div as we want the footer to be like the header and repeat all the way across. The footer code looks like this.



Copyright &amp;amp;amp;amp;amp;amp;copy; Yoursite.com | All Rights Reserved

DO NOT REMOVE THE LINK BELOW


Designed By HV-Designs.co.uk

Pretty simple just a simple div with a p tag for the text. The CSS for the footer looks like this.

/* FOOTER*/
#footer {
height:101px;
font-family:Verdana, Arial, Helvetica, sans-serif;
background-image:url(images/footer.png);
background-repeat:repeat-x;
background-color:#2F2519;
clear:both;
}

#footer p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #EAE5CF;
margin: auto;
text-align: center;
padding-top: 20px;

}
/* FOOTER END*/

The footer div has a height of 101 pixels as thats what the dimensions of the image is there is no width as we want the footer to span right the way across the browser, so we also set background repeat to x. The clear:both style is important, this means we dont want any items either side of our header. The footer p style is the styles for the paragraph which are pretty much self explanetry. Thats it all done, The only things left to do now is style things like rollovers if you want any, active, visited, rollover links, additional headers and font colors. Heres how mine looks in the browser.

Thank you for reading, dont forget to subscribe to our RSS feeds.

hv-designs » PSD Sitebuilds

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

Adding More Left Boxes

Right Content Box

The Footer

Dont Forget…

Dark Layout #2: Sitebuild

yourwebsite

lorem ipsum dolor

lorem ipsum dolor

lorem ipsum dolor

lorem ipsum dolor

lorem ipsum dolor

lorem ipsum dolor

My PROject: PSD To HTML

featured text here 01

a content title here

May 20, 2009

a content title here

May 20, 2009

a content title here

May 20, 2009

a content title here

May 20, 2009

Web Design Layout #9 SiteBuild

Portfolio Layout

What can i do for you?

Who am i?

BLOOpress CSS Template

Example Wordpress Title

Stay Connected...

Stay Connected...

Stay Connected...