HV-Designs.co.uk

October 14th, 2009 in PSD Sitebuilds by Richard Carpenter

Hosting Layout #2: Sitebuild Pt.2

• Share

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.

<div class="content-top">
<img src="images/content_top.png" />
</div>

<div class="content-middle">
</div>

<div class="content-bottom">
<img src="images/content_bottom.png" />
</div>

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

<div id="sidebar">
<h2 class="plan">Plan<span class="plan-color2">One</span></h2>
</div><!--SIDEBAR ENDS-->

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

<ul class="plan-list">
<li>100MB Webspace</li>
<li>1.5GB Bandwidth</li>
<li>15 Mailboxes</li>
<li>1 Database</li>
<li>1 Domain Name</li>
<li>24 Hour Support</li>
</ul>

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.

<li class="learn-more"><img src="images/learn_more.png" alt="Learn More" class="learn-more-image" /></li>

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.

<div id="sidebar">
<h2 class="plan">Plan<span class="plan-color2">One</span></h2>

<ul class="plan-list">
<li>100MB Webspace</li>
<li>1.5GB Bandwidth</li>
<li>15 Mailboxes</li>
<li>1 Database</li>
<li>1 Domain Name</li>
<li>24 Hour Support</li>
<li class="learn-more"><img src="images/learn_more.png" alt="Learn More" class="learn-more-image" /></li>
</ul>

<h2 class="plan">Plan<span class="plan-color2">Two</span></h2>

<ul class="plan-list">
<li>100MB Webspace</li>
<li>1.5GB Bandwidth</li>
<li>15 Mailboxes</li>
<li>1 Database</li>
<li>1 Domain Name</li>
<li>24 Hour Support</li>
<li class="learn-more"><img src="images/learn_more.png" alt="Learn More" class="learn-more-image" /></li>
</ul>

<h2 class="plan">Plan<span class="plan-color2">Three</span></h2>

<ul class="plan-list">
<li>100MB Webspace</li>
<li>1.5GB Bandwidth</li>
<li>15 Mailboxes</li>
<li>1 Database</li>
<li>1 Domain Name</li>
<li>24 Hour Support</li>
<li class="learn-more"><img src="images/learn_more.png" alt="Learn More" class="learn-more-image" /></li>
</ul>

</div><!--SIDEBAR ENDS-->

Creating The Content Area

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

<div id="main-content">
</div><!--MAIN CONTENT ENDS-->

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.

</div><!--CONTAINER ENDS-->

<div id="footer">
<p>Copyright Yourwensite | All Rights Reserved</p>
<p>Design By <a href="http://www.richard-carpenter.co.uk">Richard Carpenter</a></p>
</div><!--FOOTER ENDS-->

</body>
</html>

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.

• Share