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.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Your PROject - Welcome...</title><link href="styles.css" rel="stylesheet" type="text/css" /></head><body></body></html> |
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Your PROject - Welcome...</title><link href="styles.css" rel="stylesheet" type="text/css" /></head><body><div id="container"><!--CONTAINTER STARTS-->EVERYTHING GOES INBETWEEN HERE</div><!--CONTAINER ENDS--></body></html> |
Our next div will be our header div.
|
1
2
3
4
5
6
7
|
<div id="container"><!--CONTAINTER STARTS--><div id="header"><!--HEADER STARTS--></div><!--HEADER ENDS--></div><!--CONTAINER ENDS--> |
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<div id="container"><!--CONTAINTER STARTS--><div id="header"><!--HEADER STARTS--><div id="top-elements"><!--TOP ELEMENTS START--><div id="logo"><!--LOGO STARTS--></div><!--LOGO ENDS--><div id="nav-bar"><!--NAVIGATION STARTS--></div><!--NAVIGATION ENDS--></div><!--TOP ELEMENTS END--></div><!--HEADER ENDS--></div><!--CONTAINER ENDS--> |
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)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
|
/* ----------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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<div id="logo"><!--LOGO STARTS--><img src="images/logo.png" alt="Welcome To Your PROject" /></div><!--LOGO ENDS--><div id="nav-bar"><!--NAVIGATION STARTS--><ul class="navlinks"><li class="current"><a href="index.php">Home</a></li><li><a href="services.php">Services</a></li><li><a href="products.php">Products</a></li><li><a href="testimonials.php">Testimonials</a></li><li><a href="contact.php">Contact Us</a></li></ul></div><!--NAVIGATION ENDS--> |
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.
|
1
2
3
4
5
6
7
|
.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.
|
1
2
3
|
<!--[if IE 7]><link href="ie.css" rel="stylesheet" type="text/css" /><![endif]--> |
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
</div><!--TOP ELEMENTS END--><div id="featured"><!--FEATURED CONTENT STARTS--><div class="featured-text"><!--FEATURED TEXT STARTS--><h1 class="featured">featured text here 01</h1><p>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...</p></div><!--FEATURED TEXT ENDS--><div id="featured-image01"><!--FEATURED IMAGE STARTS--><div class="featured-buttons"><!--NEXT AND PREVIOUS BUTTONS STARTS--><div class="featured-btn"><img src="images/next_btn.png" alt="Next" /></div><div class="featured-btn"><img src="images/prev_btn.png" alt="Previous" /></div></div><!--NEXT AND PREVIOUS BUTTONS END--></div><!--FEATURED IMAGE ENDS--></div><!--FEATURED CONTENT ENDS--></div><!--HEADER ENDS--> |
We can now style our featured content area using the following styles. (please refer to commented code for each style).
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
/* ----------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.
|
1
2
3
4
5
6
7
8
9
10
11
|
<div id="content-left"><!--CONTENT AREA STARTS--><div class="box"><!--BOX STARTS--><div class="box-inside"><h2 class="boxtitle1">a content title here</h2><h2 class="boxtitle2">May 20, 2009</h2><p>SOME TEXT HERE</p></div></div><!--BOX ENDS--></div><!--CONTENT AREA ENDS--> |
The styles for our left content area look like this.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
/* ----------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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<div id="content-left"><!--CONTENT AREA STARTS--><div class="box"><!--BOX STARTS--><div class="box-inside"><h2 class="boxtitle1">a content title here</h2><h2 class="boxtitle2">May 20, 2009</h2><p>SOME TEXT HERE</p></div></div><!--BOX ENDS--><div class="box"><!--BOX STARTS--><div class="box-inside"><h2 class="boxtitle1">a content title here</h2><h2 class="boxtitle2">May 20, 2009</h2><p>SOME TEXT HERE</p></div></div><!--BOX ENDS--></div><!--CONTENT AREA ENDS--> |
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.
|
1
2
3
4
5
6
7
8
9
10
11
|
<div id="content-right"><!--CONTENT AREA STARTS (sidebar)--><div class="sidebar"><!--BOX STARTS--><div class="sidebar-inside"><h2 class="sidebar-title1">a content title here</h2><h2 class="sidebar-title2">May 20, 2009</h2><p>CONTENT HERE</p></div></div><!--BOX ENDS--></div><!--CONTENT AREA ENDS (sidebar)--> |
The css looks like this.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
/* ----------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.
|
1
2
3
4
5
6
7
8
9
10
11
|
</div><!--CONTAINER ENDS--><div id="footer"><!--FOOTER STARTS--><div id="footer-content"><!--FOOTER CONTENT STARTS--><p>Copyright © your project | All Rights Reserved</p><p>Design By <a href="http://www.richard-carpenter.co.uk">Richard Carpenter</a></p></div><!--FOOTER CONTENT ENDS--></div><!--FOOTER ENDS--></body></html> |
We then add our footer css styling like this.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
/* ----------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.