How to Convert a Slick PSD Design to XHTML/CSS

Styling the #content‘s Service Sections

Each one of our service items will get roughly 23%(235px[s]) of our container, this is so that we can add margins between them so its not so crammed and touching each other. Then we have a images that have to be 223px in width so we can apply a nice CSS only frame around it ((5px*2) + (1px*2) = 12px). Then underneth we will have a heading with a font of 14px bold Verdana. Lastly, we need to make sure the last child(last service block) does not have a right margin and breaks the page(HTML5-Shiv.js will fix this not working in IE).

#content ul li {
	float: left;
	margin: 0 28px 0 0;
	width: 235px;
}

#content ul li img {
	background: #F1EEEE;
	border: 1px solid #DCDEDE;
	padding: 5px;
}

#content ul li h4 {
	color: #474747;
	font: bold 14px Verdana;
	line-height: 30px;
}

#content ul li:last-child {
	margin: 0;
}

Checkpoint

Your page should now look like this.

checkpoint 5

Styling the #footer Widgets

The footer widgets are really just some basic CSS, we add the background, have a good 40px padding on it to make it form to the background, add some text styling for the attributes and your done.

#footer {
	background: #171717 url('layout/footer.png') no-repeat center top;
	height: 250px;
}

#footer ul {
	padding: 40px 0 0;
}

#footer ul li {
	float: left;
	margin: 0 28px 0 0;
	width: 235px;
}

#footer ul li h5 {
	color: #CCCDD2;
	font: bold 14px Verdana;
	padding: 0 0 10px;
}

#footer ul li p {
	color: #7E7E7E;
	font: bold 11px Verdana;
	line-height: 20px;
}

#footer ul li ul {
	margin: 0;
	padding: 0;
}

#footer ul li ul li {
	color: #7E7E7E;
	font: bold 11px Verdana;
	line-height: 20px;
}

#footer ul li ul li a {
	color: #7E7E7E;
}

#footer ul li ul li a:hover {
	color: #9E9E9E;
}

#footer ul li:last-child {
	margin: 0;
}

Styling the #footer‘s Copyright/Back to Top

Again, if you know basic CSS this shouldn’t be hard. Just add the copyright font attributes along with colors to give it a nice seperated look.

#footer #copyright {
	border-top: 1px solid #424242;
	font-size: 11px;
	width: 100%;
}

#footer #copyright span {
	color: #424242;
	float: left;
	line-height: 30px;
}

#footer #copyright a {
	color: #63961A;
	float: right;
	line-height: 30px;
}

Checkpoint

Your page should now look like this.

checkpoint 6

Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14

This entry was posted on Thursday, September 16th, 2010 at 07:06 and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Cody Robertson is a 19 year old freelancer. He is currently attending university, but loves to write and create beautiful websites whenever he can. He ranges with a large spectrum of coding languages, all the way from Objective-C to HTML. Follow Cody on Twitter

About the author Published by Cody Robertson

10 Responses »

  1. Brilliant tutorial I will have to try it out asap.
    Thanks alot ^^

  2. Awesome Tutorial.

    Thanks you for share.

  3. Good tutorial for beginner like me, thank you :)

  4. Very good tutorial, It covered a lot of things, thanks

  5. Dude, charset before title. :)

  6. i’m going to have to take time on this one.thanks for sharing

Leave a Response

We do love friendly, well-constructed and respective comments. We do not love bitchy, stupid and disrespectful comments. Find something wrong in this post?, feel free to send us a note and we will fix the issue asap.