Convert A Content Box Design Into XHTML and CSS
Today I am going to convert a content box with an orange heading design into markup using XHTML and CSS.
The inspiration for this tutorial came from a comment asking how to code the content box. This is going to be fun so let’s get started.
Step 1 – Slice the PSD
I don’t use the Slice tool in Photoshop whenever I chop off a design. What I do is use the Rectangular Marquee Tool to select the graphic I need to slice then go to Image Menu and Crop (F2).
For this tutorial we only need to chop three design elements… the orange header, the rounded content box and the separator for each menu (you can also apply a CSS bottom border in place of the separator if you like).
You should chop a longer content box if you think you’re going to have a longer list of links. This will bulletproof your markup in case you decided to put in more links.
Step 2 – Write A Solid Structure (XHTML)
We only need a header and a menu list inside our content box division. Very simple.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Content Box</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> /* CSS here */ </style> </head> <body> <div id="content-box"> <h2 id="site-menu">Site Main Menu</h2> <ul id="menu"> <li><a href="#">Home</a></li> <li><a href="#">News</a></li> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact Us</a></li> </ul><!-- #menu --> </div><!-- #content-box --> </body> </html>
Step 3 – Apply Basic Body Styles
For the purposes of this tutorial we’re going to apply some basic styling. We’re just changing the background to black and setting our font face.
body {
background:#000;
font-family:Arial, Verdana, sans-serif;
}
Step 4 – Content Box Styles
Set the background for our content box. The graphic’s width is going to be the width for our content box division.
#content-box {
width:300px;
margin:100px auto 0;
padding-bottom:30px;
background:transparent url(images/content-boxbg.gif) no-repeat center bottom;
}
Step 5 – Header Styles
We apply the orange header for the background. The key here is the relative position of the header so we can shift it to the left with a negative value giving us that “out of the box” effect.
h2#site-menu {
width:330px;
height:79px;
background:transparent url(images/menu-header.gif) no-repeat;
position:relative;
left:-15px;
text-indent:-99999em;
}
Step 6 – List Styles
Remove the bullets from the list and apply the separator as background for each individual list elements.
ul#menu {
list-style-type:none;
padding:0 0 0 10px;
margin:0 0 0 7px;
}
ul#menu li {
width:265px;
text-indent:10px;
background:transparent url(images/separator.gif) no-repeat center bottom;
}
Step 7 – Link Styles
We then finish off by styling the links. Here we apply a color and adjust the padding for each links. We also styled the hover state.
ul#menu li a {
color:#aaa;
font-size:14px;
font-weight:bold;
display:block;
padding:15px 0;
text-decoration:none;
}
ul#menu li a:hover {
color:#fff;
}
Conclusion
I enjoyed doing this tutorial and if you’re a web designer who doesn’t code, I do hope this article will encourage you to learn XHTML and CSS.
Articles on converting a design into markup will be a part of my blog so stay tuned as I roam around PSD tutorial sites and provide answers on how to convert designs. Thank you for reading.
Thanks a ton!
Great tutorial !! I can read code better than I can speak/write. Today, I just learned something new. Cheers.
very nice article…keep on the good work
very nice article…keep on the good work
Thanks for this great tutorial, this is really helpful. We have also collected a resource of 20 best PSD to XHTML/CSS tutorials. You can check the list at http://www.bestpsdtohtml.com/20-best-psd-to-xhtml-css-tutorials/
I am searching this type of tutorial for a long time.. Thanks for sharing
thanks a lot. i found slicing tools boring sometime.i do try the technique using Rectangular Marquee Tool to select the graphics and then crop and its better coding all above.
thanks again for the post
your presentation is very good simple way to express thanks for sharing, the tutorial is very informative.
Wow your great… your the man, thank you thank you for sharing this very interesting article. Keep up the good work.
Thanks for tutorial. Now, I have more ference about website coding.
thanks for share
Thanks & Regards,
Designing Studios
{PSD to HTML, XHTML, CSS, Web2.0 Designer, Slicing Service and PSD TO HTML Service Providers}