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.
<title>Personal vCard - HV-DESIGNS.CO.UK By Richard Carpenter</title>
Next we need to link our stylesheets the first one we’ll link will be our main one “styles.css”.
<link href="stylesheets/styles.css" rel="stylesheet" type="text/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.
<!--[if IE 7]> <link href="stylesheets/ie.css" rel="stylesheet" type="text/css" /> <![endif]-->
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(/files/includes/quot-reset.css-quot-.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.
<body> <div id="container"> </div><!--CONTAINER ENDS--> </body>
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.
We draft the DIV’s out like this.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<body><div id="container"><div id="vcard-top"></div><!--VCARD TOP ENDS--><div id="vcard-middle"></div><!--VCARD MIDDLE ENDS--><div id="vcard-bottom"></div><!--VCARD BOTTOM ENDS--></div><!--CONTAINER ENDS--></body> |
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.
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_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.
|
1
2
3
4
5
6
7
8
9
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
#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.
|
1
2
3
4
5
6
|
<div id="vcard-middle"><div id="sidebar"></div><!--SIDEBAR ENDS--></div><!--VCARD MIDDLE ENDS--> |
The styles for our sidebar DIV look like this.
|
1
2
3
4
5
|
#sidebar {float: left;width: 162px;margin-left: 15px;} |
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.
|
1
2
3
4
5
6
7
8
9
|
<div id="vcard-middle"><div id="sidebar"></div><!--SIDEBAR ENDS--><div id="content"></div><!--CONTENT ENDS--></div><!--VCARD MIDDLE ENDS--> |
The CSS for our content DIV looks like this.
|
1
2
3
4
5
|
#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.
|
1
2
3
4
5
6
7
8
|
<div id="sidebar"><ul class="navigation"><li class="about"><a href="#" title="About Me">ABOUT</a></li><li class="work"><a href="#" title="My Online Portfolio">WORK</a></li><li class="social"><a href="#" title="My Social Network">SOCIAL</a></li><li class="contact"><a href="#" title="Contact Me">CONTACT</a></li></ul></div><!--SIDEBAR ENDS--> |
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.
|
1
2
3
4
|
.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.
|
1
2
3
4
5
6
7
8
9
|
.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.
|
1
2
3
4
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
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.
|
1
|
<h1>Richard Carpenter <span class="slogan">Front-End Web Developer</span></h1> |
On the next line underneath our H1 tag we’ll add an H2 tag with our welcome message.
|
1
2
|
<h1>Richard Carpenter <span class="slogan">Front-End Web Developer</span></h1><h2>Hello, Welcome...</h2> |
To finish off the page we’ll add the rest of our text wrapped in P tags.
|
1
|
<p>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.</p> |
The CSS for our H1, H2 and P tags 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
|
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.