How to code a pricing menu template in html
In this tutorial we are going to see how to code a pricing menu template in html. In the end of this tutorial, you can learn css positioning and some css3 techniques. For this purpose, i am going to use Eli’s pricing table design.
Step1
First, download the psd here.
Step2
When you open the psd, you can see three sets of pricing table placed together. We are going to slice only one set from it and thus it is better to hide the other two.
Hide the 2 layer groups “Group 1 copy” and Group 1 copy2″ and make sure the center menu is visible. For now, switch off the visibility of the “Shadow layer” also. Of course, we will switch it On later.
Step3
Select the rectangle shape in the “shape 1″ layer using “Direct selection” tool and then select all the four bottom nodes in that shape. Once selected, move the nodes downwards up to some extent. You can extent it to whatever height that you need in your case.
Step4
Now hide all the text layers, signup button layer and the background layer. So you will have a blank price menu with transparent background.
Now crop the rectangle and save it as a png image. Hope you got something like below.
Step5
Now switch off all the layer’s visibility except the shadow layer at the bottom. You can do that simply by holding the alt key(windows) + click the eye of “shadow” layer.
Step6
Crop the shadow and save it as as a png image.
For the last step of slicing, crop and save the arrow and the signup button. So we will now have all the images necessary to code the pricing menu template.
Let we start coding the design.
Step7: Start with id#wrapper
Put a div with id “wrapper” which will enclose all our pricing table elements inside it. Add some css to center it and add the shadow image.
body {
background: #444;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
p {
margin: 10px 0
}
#wrapper {
width:810px;
height: 450px;
margin: 100px auto;
position: relative;
background: url(images/shadow.png) bottom center no-repeat;
}
Step8: Add the first pricing menu
You see all the pricing menu sets are visually same, except the text contents. So it is enough to code one set and then we will duplicate the same for the remaining.
Below are the html code for a single menu set.
#pricemenu1, #pricemenu2, #pricemenu3 {
//the width, background image and position type are all same for all the 3 menu sets.
width: 276px;
background: url(images/price_menu_bg.png) top no-repeat;
//shows the top portion of the image
position: absolute;
}
#pricemenu1 {
height: 330px;
z-index: 10;
top: 30px;
left: 0;
}
.bottom {
background: url(images/price_menu_bg.png) bottom no-repeat;
//shows the bottom portion of the image.
height: 15px;
margin-top: -3px
}
So, what i’ve done above? Added the first pricing menu, attached the background, absolute positioned it and moved it down by 30px.
And you may also noticed that i have used the background image price_menu_bg.png in the top and bottom divs. The purpose is to provide a vertically expandable menu in respect to the height of menu contents.
Step9: Styling the inner elements
Now we will proper align the inner elements of the pricing menu by adding more css.
.top {
padding: 5px 20px 0;
height: 121px;
}
.content {
padding: 17px 30px;
}
h1, h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 36px;
color: #f1f1f1;
text-align: center;
text-shadow: #aaa 2px 2px 1px;
line-height: 55px;
margin: 0;
}
h2 {
font-weight: 300;
}
.heading {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
color: #81a000;
text-shadow: #e5e5e5 0 1px 1px;
text-align: center;
padding: 5px;
}
.content ul {
margin: 0;
padding: 0;
}
.content ul li{
list-style: none;
background: url(images/bullet.png) left center no-repeat;
padding-left: 25px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #666;
line-height: 30px;
}
.content p {
font-size: 12px;
text-align: justify
}
a.signup { //bottom signup button
width: 137px;
height: 34px;
display: block;
background: url(images/button.png) no-repeat;
outline: none;
text-decoration: none;
text-align: center;
color: #536701;
font-weight: bold;
line-height: 34px;
text-shadow: #e5e5e5 0 1px 0;
margin: 15px auto 0; //Center positioning the button
}
The result:
Step10: Duplicate the finished pricing menu
We are in the final step of creating the pricing menu template.
Duplicate the div #pricemenu1 by 2 times and change the ids of the duplicated div to pricemenu2 and pricemenu3 respectively.
So you will have the html code like this:
We shall add some css to move the other divs towards right in order to make all the divs visible.
#pricemenu2 {
height: 395px;
z-index: 100;
top: 0;
left: 266px;
}
#pricemenu3 {
height: 330px;
z-index: 10;
top: 30px;
left: 532px;
}
The Result
I hope you enjoyed this tutorial.
its quite easy code. Thanks for sharing it.
With this tutorial I would like to thank the new images in my designs interactive lessons in different languages​​, this alone would be able to make the very best