hv-designs » PSD Sitebuilds

Coding The Creative Design Layout

Richard Carpenter — Thu, 01 Sep 2011 14: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;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.

Freelance Home Page Conversion

Aaron — Sun, 31 Oct 2010 20:25:07 +0000

Today I will be walking you through the process of turning our Freelance Home Page PSD into a working HTML / CSS template.

The Live Version

You can check out the Live Version of the template by clicking here. The template has been tested in the following browsers without any problems; however, due to our use of CSS3 the website will render a bit differently in each web browser that you choose.

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

Preparing Your Files

You will need to create a new folder on your desktop titled “Coming Soon”. Please create the following files: index.html, style.css, and a folder titled images. It should be set up like below:

Begin Slicing Your Images

Before we begin working on coding our website we need to slice our images. Since we can use CSS for most of our website we will only be slicing a few images to use in our website.

Start out slicing your logo image. Make a selection like below:

Hide your background layer and save it as logo.PNG

For our navigation we only need to slice a portion of the hover state, as the rest of it can be accomplished with CSS. Make a selection like below:

Now save your document as nav_hover.PNG

Your Search Bar is a little bit more difficult to do because there is an extra step added in there. You need to select your search box layer, right click, and choose “Convert to Smart Object”; like below:

Now hide your Search My Site Text Layer and your Search Icon. Make a selection like below:

Now save that as search_bg.png

Like I said this part is complicated because now we have to slice our input layers background. Unhide your Search Icon Layer. Now make a selection like below:

Now save is as search.png

Now leave your layers the way there were and make a selection like below:

Now save that selection as search_submit_bg.PNG

Time to start working on our Center Content. We will only need to slice two images for our center content; our image collage and our spacer.

For our image collage make a selection like below:

Now save that as center_images.png

For your spacers make a selection like below:

Now save that as center_spacers.PNG

Now we will be working on slicing our three icons. Make three selections like below:

Save as mailbox_icon.png

Save as pencil_icon.png

Save as gears_icon.png

We will now be slicing our white content background. Make a selection like below:

Now save this as white_box_overlay.png

For our last two images we will be slicing we will be working in the newsletter group. We will be slicing out our newlsetter input area and our submit button.

To slice your input layer you will need to right click your document again and choose “Convert to Smart Object” again. Now make a selection like below:

Save this as newsletter_input.png

Now make a selection like below for your submit button:

Save your image as newsletter_submit.png.

And we are done, that’s all we need to slice for our document. Time to start coding!

Set Up Main Document

To set up our main document we need to get our body and .container CSS setup as well as the beginning to our HTML file. The container class will have the width and height of our page. You can get this measurement from photoshop, but I always add a little bit more because things never add up exactly. You could also set the height to auto for right now, but your document will not be auto centered by our left and right auto margins until you set a definite height.

@charset "utf-8";
/* CSS Document */
body {
background-image: url(images/bg.png);
background-repeat: repeat;
}
.container {
height: 900px;
width: 1100px;
margin-right: auto;
margin-left: auto;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}

And our HTML:





My Freelance Home Page

Set Up The Logo

Setting up our logo is really simple. We get all our CSS measurements from our logo.png file and then we need to add a few other tidbits to make it work. Of course you can take out the Text Indent attribute if you don’t want to put any text in your logo and just want to stick to the title.

The CSS:

#logo {
background-image: url(images/logo.png);
float: left;
height: 53px;
width: 252px;
background-repeat: no-repeat;
text-indent: -999in;
margin-left: 20px;
margin-top: 15px;
}

The HTML:

My Freelance Home Page

The Upper Navigation

Our upper navigation is going to be where our CSS3 comes into play. In our photoshop document we had rounded corners for our navigation, and we can accomplish this with a simple snidbit of CSS. This will render without rounded corners in documents that don’t support CSS3 and may render differently between Safari, Firefox, Opera, and IE.

We will be using the ul and li attributes in CSS to create our navigation. Here is our full navigation CSS:

#navigation {
float: right;
height: auto;
width: 400px;
}
#navigation ul {
list-style-type: none;
display: block;
}
#navigation li {
list-style-type: none;
display: inline;
}
#navigation li a {
color: #FFF;
text-decoration: none;
font-family: "Lucida Sans Unicode";
font-size: 16px;
padding: 3px;
margin-right: 25px;
}
#navigation li a:hover {
background-image: url(images/nav_hover.png);
background-repeat: repeat;
height: auto;
width: auto;
-moz-border-radius: 5px;
border-radius: 5px;
}

Now our html is going to be very simple. We will just be setting up our ul class and then the lines. Here it is:


Home
Portfolio
About Me
Hire Me

Set Up the Search Bar

Now we get a little bit complicated. We need to set up our overall search bar to be a bit taller and wider than our actual inputs so there are no discrepancies in our design. This will be accomplish with a simple bit of CSS, but we had to use a lot of trial and error to get it just right with the input and submit fields. Here is our CSS:

#searchbar_overall {
clear: both;
float: right;
height: 20px;
width: 210px;
background-image: url(images/search_bg.PNG);
background-repeat: repeat-x;
margin-right: 40px;
}
.searchbar {
background-image: url(images/search.PNG);
background-repeat: repeat;
float: left;
height: 18px;
width: 169px;
text-decoration: none;
padding-left: 5px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: #FFF;
}
.searchbar_submit {
background-image: url(images/search_submit_bg.PNG);
background-repeat: no-repeat;
height: 18px;
width: 32px;
float: left;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
text-indent: -999in;
}

Now our CSS is the full CSS styling for what we used. There are several areas, like the border style, that you could shorten to make less CSS code and faster load times while you are working on your own website.

The HTML for our inputs are very easy. We are not going to have a working Search Bar in this tutorial, but you can use a free one from Google or create on in PHP yourself and still style it simply with the CSS above and some slight additions.

Here is our HTML:

STOP! Lets see what you have so far!

I just wanted to stop here to make sure that your CSS and HTML is matching up so far. This is what you should have, so far, for both your CSS and your HTML:

@charset "utf-8";
/* CSS Document */
body {
background-image: url(images/bg.png);
background-repeat: repeat;
}
.container {
height: 900px;
width: 1100px;
margin-right: auto;
margin-left: auto;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#logo {
background-image: url(images/logo.png);
float: left;
height: 53px;
width: 252px;
background-repeat: no-repeat;
text-indent: -999in;
margin-left: 20px;
margin-top: 15px;
}
#navigation {
float: right;
height: auto;
width: 400px;
}
#navigation ul {
list-style-type: none;
display: block;
}
#navigation li {
list-style-type: none;
display: inline;
}
#navigation li a {
color: #FFF;
text-decoration: none;
font-family: "Lucida Sans Unicode";
font-size: 16px;
padding: 3px;
margin-right: 25px;
}
#navigation li a:hover {
background-image: url(images/nav_hover.png);
background-repeat: repeat;
height: auto;
width: auto;
-moz-border-radius: 5px;
border-radius: 5px;
}
#searchbar_overall {
clear: both;
float: right;
height: 20px;
width: 210px;
background-image: url(images/search_bg.PNG);
background-repeat: repeat-x;
margin-right: 40px;
}
.searchbar {
background-image: url(images/search.PNG);
background-repeat: repeat;
float: left;
height: 18px;
width: 169px;
text-decoration: none;
padding-left: 5px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: #FFF;
}
.searchbar_submit {
background-image: url(images/search_submit_bg.PNG);
background-repeat: no-repeat;
height: 18px;
width: 32px;
float: left;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
text-indent: -999in;
}





My Freelance Home Page




My Freelance Home Page

Home
Portfolio
About Me
Hire Me

Ok, now that everything is straight we can move on again :)

Setting Up Your Center Content

Time to start working on setting up our main content. We will accomplish most of the main content through CSS with only two images being placed into the document (via the CSS). Our CSS for all parts should look like this:

.center_content_container {
clear: both;
float: left;
height: 246px;
width: 1100px;
margin-top: 34px;
background-color: #CE8B32;
}
#content_images {
background-image: url(images/center_images.png);
background-repeat: no-repeat;
float: left;
height: 243px;
width: 349px;
margin-left: 50px;
}
#content_spacer {
margin-left: 95px;
background-image: url(images/center_spacers.png);
float: left;
height: 237px;
width: 9px;
margin-top: 3px;
}
#content_text {
float: left;
height: 220px;
width: 500px;
margin-left: 40px;
color: #FFF;
font-family: "Qlassik Bold";
font-size: 20px;
margin-top: 15px;
}
#content_text h1 {
padding: 0px;
font-size: 38px;
margin: 0px;
}

And the HTML will be even easier. We have our container div, our two empty image divs, and then our div to display our text. Now we have used the font Qlassik but have found that it does not render well with the web so you may want to change it.





Lorem ipsum dolor sit
amet just lectus.
lorem impsum dolor sit amet just lectus. lorem impsum dolor sit amet just lectus. lorem impsum dolor sit amet just lectus. lorem impsum dolor sit amet just lectus. lorem impsum dolor sit amet just lectus. lorem impsum dolor sit amet just lectus. lorem impsum dolor sit amet just lectus.

Setting Up Our Main Business Content

Now we are going to start working on our three boxes, with our three icons. I see these boxes being used to draw attention to the three most important things that you want to draw attention to on your website (ie. pricing, cms/wordpress, development). The CSS for our main content is simple CSS that will bring everything within a container div.

The CSS:

.middle_content {
float: left;
height: 135px;
width: 1100px;
margin-top: 25px;
}
.three_boxes {
float: left;
height: 135px;
width: 270px;
margin-left: 40px;
font-family: "Qlassik Medium";
font-size: 11pt;
color: #FFF;
margin-right: 50px;
}
#mailbox_icon {
background-image: url(images/mailbox_icon.png);
background-repeat: no-repeat;
float: left;
height: 135px;
width: 60px;
margin-right: 15px;
}
#pencil_icon {
background-image: url(images/pencil_icon.png);
background-repeat: no-repeat;
float: left;
height: 135px;
width: 60px;
margin-right: 15px;
}
#gears_icon {
float: left;
height: 135px;
width: 77px;
background-image: url(images/gears_icon.png);
background-repeat: no-repeat;
margin-right: 15px;
}
.three_boxes h1 {
font-family: "Qlassik Medium";
font-size: 20px;
color: #FFF;
margin: 0px;
}

And the HTML:




Lorem Ipsum Dolir
lorem ipsum dolir lorem ipsum dolir lorem ipsum dolir lorem ipsum dolir lorem ipsum dolir lorem ipsum dolir lorem ipsum dolir lorem ipsum.


Lorem Ipsum Dolir
lorem ipsum dolir lorem ipsum dolir lorem ipsum dolir lorem ipsum dolir lorem ipsum dolir lorem ipsum dolir lorem ipsum dolir lorem ipsum.

Lorem Ipsum Dolir
lorem ipsum dolir lorem ipsum dolir lorem ipsum dolir lorem ipsum dolir lorem ipsum dolir lorem ipsum dolir lorem ipsum dolir lorem ipsum.

The Blog Post and Contact Box

Our “White Box” as we call it is an area on our home page where we can show off our Latest Blog Post so that people can see and drive more traffic to the website and blog. In this tutorial we will not be creating the PHP to show you how to accomplish this and will be merely placing static content in the container.

We can accomplish the styling we need on this with just one image and the rest will be CSS and HTML. Here is our CSS:

.white_box_overall {
float: left;
height: 185px;
width: 1100px;
background-image: url(images/white_box_overlay.png);
background-repeat: repeat-x;
margin-top: 35px;
}
.blog_post_overall {
float: left;
height: 165px;
width: 750px;
margin-top: 10px;
margin-left: 15px;
}
#blog_post_title {
font-family: Nyala;
font-size: 24px;
color: #000;
float: left;
height: auto;
width: auto;
}
#blog_post_date {
float: left;
height: auto;
width: auto;
font-family: Nyala;
font-size: 11px;
color: #CCC;
padding-top: 10px;
padding-left: 15px;
font-variant: small-caps;
}
.blog_thumb_post_overall {
clear: left;
float: left;
height: 130px;
width: 745px;
margin-top: 8px;
}
#blog_thumb {
float: left;
height: 120px;
width: 160px;
background-color: #000;
padding: 5px;
}
#blog_post{
float: left;
height: auto;
width: 560px;
margin-left: 15px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 13px;
color: #000;
font-variant: small-caps;
margin-top: 5px;
}
.contact_overall {
float: right;
height: 190px;
width: 260px;
}
#contact_header {
font-family: "Qlassik Bold";
font-size: 30px;
height: auto;
width: auto;
float: left;
}
#contact_subheader {
font-family: "Qlassik Medium";
font-variant: small-caps;
color: #CCC;
float: left;
height: auto;
width: auto;
margin-top: 15px;
margin-left: 20px;
}
.contact_phone_overall {
clear: left;
float: left;
height: 25px;
width: 200px;
margin-top: 15px;
margin-left: 20px;
font-family: Nyala;
font-size: 24px;
}
#contact_phone {
font-family: Nyala;
font-size: 24px;
color: #000;
float: left;
height: 24px;
width: 60px;
margin-right: 8px;
}
.contact_email_overall {
clear: left;
float: left;
height: 25px;
width: 240px;
margin-top: 15px;
margin-left: 10px;
font-family: Nyala;
font-size: 14px;
}
#contact_email_main {
float: left;
height: auto;
width: auto;
font-family: Nyala;
font-size: 24px;
margin-right: 5px;
}
#contact_email_text {
margin-top: 5px;
float: left;
width: auto;
}
.contact_address_overall {
clear: left;
float: left;
height: 50px;
width: 240px;
margin-top: 15px;
margin-left: 10px;
font-family: Nyala;
font-size: 14px;
text-align: center;
}
#contact_address {
font-size: 24px;
float: left;
height: auto;
width: auto;
margin-right: 5px;
}



Your Latest Blog Post Here
posted on oct 6, 2010 by me


lorem impsum dolor sit amet just lectus. lorem impsum dolor sit amet just lectus. lorem impsum dolor sit amet just lectus. lorem impsum dolor sit amet just lectus. lorem impsum dolor sit amet just lectus. lorem impsum dolor sit amet just lectus. lorem impsum dolor sit amet just lectus lorem impsum dolor sit amet just lectus. lorem impsum dolor sit amet just lectus. lorem impsum dolor sit amet just lectus. lorem impsum dolor sit amet just lectus. lorem impsum dolor sit amet just lectus. 



Contact
Get In Touch With Me


Phone:
xxx-xxx-xxxx


Email:
[email protected]


Address:
Your Address Here
Your City, State and Zip

Time For Our Footer

Now our footer will be set up in two different areas, the Bottom Navigation and the Newsletter.

Our Bottom Navigation will be using the ul and li attributes in CSS as well and will be full CSS styling, no images. To get the proper color we used our color picker tool in Photoshop to grab the right Hex Code for our bottom navigation. Here is our bottom nav CSS:

.bottom_navigation {
float: left;
height: 30px;
width: 400px;
padding: 0px;
margin-top: 45px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 35px;
}
.bottom_navigation ul{
}
.bottom_navigation li{
list-style-type: none;
display: inline;
color: #b47004;
font-family: "Qlassik Bold";
font-size: 20pt;
margin-right: 20px;
}
.bottom_navigation li a {
text-decoration: none;
color: #B47004;
}

And our HTML:


Home
About
Portfolio
Hire Me

Now our Newsletter is a matter of an overall container, an input container, two simple inputs, and a right aligned submit button. All will be accomplished with CSS and background images. Again we will not be actually setting up the PHP for the newsletter form, but you can find a nice mail form on our Coming Soon PSD to HTML Tutorial.

The CSS:

.newsletter_overall {
float: right;
height: 105px;
width: 270px;
font-family: "Qlassik Bold";
color: #FFF;
font-size: 20pt;
margin-top: 15px;
}
#newsletter_text {
float: left;
height: auto;
width: auto;
margin-bottom: 10px;
}
#newsletter_input_overall {
float: left;
height: 60px;
width: 180px;
clear: left;
}
#newsletter_input {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
background-image: url(images/newsletter_input.png);
background-repeat: no-repeat;
float: left;
height: 22px;
width: 178px;
margin-bottom: 10px;

}
#newsletter_two_input {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
background-image: url(images/newsletter_input.png);
background-repeat: no-repeat;
float: left;
height: 22px;
width: 178px;
margin-bottom: 10px;
}#newsletter_submit {
background-image: url(images/newsletter_submit.png);
background-repeat: no-repeat;
float: right;
height: 30px;
width: 68px;
margin-right: 20px;
margin-top: 15px;
text-indent: -999in;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}

Now in our final HTML to finish out the newsletter we will also need to close out our main container div. Here is our HTML:


Newsletter

The Copyright

The copyright for our website will actually be placed in its own div, outside our main container div. You will see most of the same styles from our container div used in our copyright CSS. Overall though the copyright is one simple CSS class and one simple line of HTML coding.

The CSS:

.copyright {
font-family: "Qlassik Bold";
font-size: 14px;
color: #FFF;
height: 20px;
width: 215px;
margin-right: auto;
margin-left: auto;
margin-top: -15px;
}

The HTML:

Copyright Aaron Nichols and HV-Designs

Conclusion

As you can see you can use CSS to create a good majority of most sites you design in Photoshop. Having to rely less on images and more on CSS will greatly improve your page load speeds. Keep the HTML short and to the point, not adding in meaningless tidbits of HTML.

This document is fully compliant. You can view that here.

Before we begin working on coding our website we need to slice our images. Since we can use CSS for most of our website we will only be slicing a few images to use in our website.

Start out slicing your logo image. Make a selection like below:

Hide your background layer and save it as logo.PNG

For our navigation we only need to slice a portion of the hover state, as the rest of it can be accomplished with CSS. Make a selection like below:

Now save your document as nav_hover.PNG

Now hide your Search My Site Text Layer and your Search Icon. Make a selection like below:

Now save that as search_bg.png

Like I said this part is complicated because now we have to slice our input layers background. Unhide your Search Icon Layer. Now make a selection like below:

Now save is as search.png

Now leave your layers the way there were and make a selection like below:

Now save that selection as search_submit_bg.PNG

Time to start working on our Center Content. We will only need to slice two images for our center content; our image collage and our spacer.

For our image collage make a selection like below:

Now save that as center_images.png

For your spacers make a selection like below:

Now save that as center_spacers.PNG

We will now be slicing our white content background. Make a selection like below:

Now save this as white_box_overlay.png

For our last two images we will be slicing we will be working in the newsletter group. We will be slicing out our newlsetter input area and our submit button.

To slice your input layer you will need to right click your document again and choose “Convert to Smart Object” again. Now make a selection like below:

Save this as newsletter_input.png

Now make a selection like below for your submit button:

Save your image as newsletter_submit.png.

And we are done, that’s all we need to slice for our document. Time to start coding!

Digital Curriculum Vitae: PSD Conversion

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

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

The Live Version

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

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

Preparing Your Files

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

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

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

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

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

Setting Up The HTML File

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

Digital Curriculum Vitae - Richard Carpenter - HV-Designs.co.uk

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

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

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

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

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

Slicing The Background Image

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

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

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

Slicing The Transparent Rectangle

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

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

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

Slicing The Template Title

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

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

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

Slicing The Navigation

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

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

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

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

Slicing The Page Background

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

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

Slicing The Bullet Points And Divider Line

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

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

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

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

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

Slicing The Social Icons

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

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

The Background CSS

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

body {
}

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

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

body {
background-image: url(../images/bg.png);
background-repeat: repeat-x;
background-attachment: fixed;
margin-top: 35px;
}

Styling The Container

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

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

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

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

Styling The Transparent Rectangle

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

Repeat the same for the frame btm DIV.

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

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

#frame-top, #frame-btm {
float: left;
height: 25px;
width: 861px;
}

Styling Frame Middle DIV

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

#frame-middle {
background-image: url(../images/frame_middle.png);
background-repeat: repeat-y;
float: left;
width: 861px;
}

Styling The Page DIV

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

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

#page {
float: left;
width: 809px;
border: 1px solid #FFFFFF;
}

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

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

Adding Some Content

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

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


Save
Print
Contact

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

Web Designer / Developer

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

INTRO TEXT GOES HERE

Styling Our Header Content

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

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

h1 {
height: 47px;
width: 334px;
margin-bottom: 10px;
float: left;
margin-left: 30px;
}

Styling Our P Tag Classes

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

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

p.job-title {
color: #b1b1b1;
font-size: 20px;
letter-spacing: -1px;
font-style: italic;
clear: both;
margin-left: 30px;
}

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

p.intro {
font-style: italic;
color: #646464;
font-size: 12px;
margin-top: 20px;
text-align: justify;
margin-left: 30px;
margin-right: 30px;
line-height: 18px;
}

Styling The Navigation

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

ul.right-nav {
float: right;
margin-right: 30px;
}

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

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

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

.right-nav li {
float: left;
margin-left: 22px;
}

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

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

li.save a, li.print a, li.contact a {
background-image: url(../images/right_navigation.png);
background-repeat: no-repeat;
}

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

li.save a {
background-position: 5px top;
}

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

li.contact a {
background-position: -101px top;
}

Adding The Divider

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

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

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

Adding Your Section Titles

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

Technical Skills

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

h2 {
margin-left: 30px;
font-size: 25px;
color: #414141;
letter-spacing: -1px;
margin-bottom: 15px;
}

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

Adding Your CV Details

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

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



XHTML & CSS - 4 Years, Intermediate to Advanced

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



XHTML & CSS - 4 Years, Intermediate to Advanced

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



XHTML & CSS - 4 Years, Intermediate to Advanced
TEXT GOES HERE

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



XHTML & CSS - 4 Years, Intermediate to Advanced
TEXT GOES HERE



Adobe Photoshop - 8 Years, Advanced
TEXT GOES HERE

Styling Our Details

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

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

ul.details {
float: left;
margin-left: 30px;
margin-bottom: 10px;
}

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

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

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

.details li p {
margin-right: 30px;
text-align: justify;
color: #646464;
font-size: 12px;
line-height: 18px;
}

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

Adding Your Custom Font With CSS3

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

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

@font-face {
font-family: 'MyriadProRegular';
src: url('myriadpro.eot');
src: local('Myriad Pro'), local('fonts'), url('myriadpro.ttf') format('truetype'), url('myriadpro.svg#MyriadPro-Regular') format('svg');
}

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

font-family: MyriadProRegular, Verdana, Arial;

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

Take care and thanks for reading.

Personal vCard Pt.2

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

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

Setting Up Our Local Files

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

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

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

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

Linking Our Stylesheets

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

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.

Your PROject Pt.3: 4 Additional Pages

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

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

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













Home
Services
Products
Testimonials
Contact Us







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
















THIS IS WHERE YOUR NEW CODE WILL GO





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

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



a content title here
May 20, 2009
SOME TEXT HERE

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

/* ----------SERVICE'S PAGE STYLES---------- */

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

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

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

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

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

Service #1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Service #2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Service #3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Service #4 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Service #5 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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

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

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

.service-list li{
	padding-left: 10px;
	font-size: 0.7em;
	color: #FFFFFF;
	margin-left: 40px;
	line-height: 18px;
	margin-top: 10px;
	margin-bottom: 10px;
}

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

My services page looks like this.

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

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



product #1 here
product short info
CONTENT HERE

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



product #1 here
product short info
CONTENT HERE





product #1 here
product short info
CONTENT HERE





product #1 here
product short info
CONTENT HERE

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



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

Service #1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Service #2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Service #3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.



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

Service #1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Service #2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Service #3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.



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

Service #1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Service #2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Service #3 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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

/* ----------PRODUCT'S PAGE STYLES---------- */

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

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

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

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



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

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

/* ----------TESTIMONIAL'S PAGE STYLES---------- */

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

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

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

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

.rating img{
	float: right;
}

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

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



contact us
get in touch using the contact form below
CONTENT HERE

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



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

  
  
  
  

  
  
  
  

  
  
  
  

  
  Information:

The css for our contact form looks like this.

/* ----------CONTACT PAGE STYLES---------- */

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

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

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

Your contact page should now look something like this.

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

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

Other Parts To This Project

Download The FREE Template

You can download the FREE CSS Template by clicking HERE.

My PROject Pt.2: PSD To HTML

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

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

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

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





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.

Other Parts To This Project

Download The FREE Template

You can download the FREE CSS Template by clicking HERE.

Web Design Layout #9 SiteBuild

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

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

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

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

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

hv-designs » PSD Sitebuilds

Coding The Creative Design Layout

Welcome...

Content Box One

Content Box One

Content Box Two

Content Box Three

stay connected...

stay connected...

whats new...

monthly poll...!

Freelance Home Page Conversion

The Live Version

Preparing Your Files

Begin Slicing Your Images

Set Up Main Document

Set Up The Logo

The Upper Navigation

Set Up the Search Bar

STOP! Lets see what you have so far!

Setting Up Your Center Content

Lorem ipsum dolor sit amet just lectus.

Setting Up Our Main Business Content

Lorem Ipsum Dolir

Lorem Ipsum Dolir

Lorem Ipsum Dolir

The Blog Post and Contact Box

Time For Our Footer

The Copyright

Conclusion

Digital Curriculum Vitae: PSD Conversion

The Live Version

Preparing Your Files

Setting Up The HTML File

Slicing The Background Image

Slicing The Transparent Rectangle

Slicing The Template Title

Slicing The Navigation

Slicing The Page Background

Slicing The Bullet Points And Divider Line

Slicing The Social Icons

The Background CSS

Styling The Container

Styling The Transparent Rectangle

Styling Frame Middle DIV

Styling The Page DIV

Adding Some Content

Styling Our Header Content

Styling Our P Tag Classes

Styling The Navigation

Adding The Divider

Adding Your Section Titles

Technical Skills

Adding Your CV Details

XHTML & CSS - 4 Years, Intermediate to Advanced

XHTML & CSS - 4 Years, Intermediate to Advanced

XHTML & CSS - 4 Years, Intermediate to Advanced

XHTML & CSS - 4 Years, Intermediate to Advanced

Adobe Photoshop - 8 Years, Advanced

Styling Our Details

Adding Your Custom Font With CSS3

Personal vCard Pt.2

Setting Up Our Local Files

Linking Our Stylesheets

Drafting Some Div’s

Slicing Our Main Images

Bringing It Together With Some CSS

Creating Our Sidebar And Content Div’s

Creating The Sidebar Menu

Adding Our Textual Content

Richard Carpenter Front-End Web Developer

Richard Carpenter Front-End Web Developer

Hello, Welcome...

Done

Hosting Layout #2: Sitebuild Pt.2

Slicing And Marking-Up The Content Area

Creating The Sidebar

PlanOne

Creating The Sidebar Plan Lists

PlanOne