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

Live demo View it online Download Take the source files

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
« « Emerging New Design Trends
Showcase of 62 Superb Game Websites » »

10 Responses »

  2. Bryan Abad
    September 16, 2010 • 11:29

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

    Reply to this comment
  3. Designbyarm
    September 16, 2010 • 15:07

    Awesome Tutorial.

    Thanks you for share.

    Reply to this comment
  4. Wing Loon
    September 17, 2010 • 12:10

    Good tutorial for beginner like me, thank you 🙂

    Reply to this comment
  5. Amr ElGarhy
    September 18, 2010 • 15:32

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

    Reply to this comment
  7. Tumbleweed
    September 21, 2010 • 02:42

    Dude, charset before title. 🙂

    Reply to this comment
  8. pitso
    October 11, 2010 • 11:49

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

    Reply to this comment