DOWNLOAD PSD + HTML/CSS TEMPLATE [hidepost] [download id="106" format="1"] [/hidepost] Become a Premium Member and get unlimited access to source files and premium resources for only 7$/month. Click here to learn more

Understanding the general structure

From PSD to HTML/CSS - The HTML code

Step 0

Step 1 - DOCTYPE, head and general HTML structure

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>FOOTY - Football community redefinited</title> <link rel="stylesheet" href="style.css" media="screen" /><!--your CSS file for styling the layout--> </head> <body> <div id="header"> </div> <div id="main_container"> <div id="content"> <div class="featured_articles"> </div> <div class="other_articles"> </div> </div> <div id="sidebar"> <div class="categories_navi"> </div> <div class="social_icons"> </div> <div class="side_cont"> </div> <div class="side_cont_gallery"> </div> <div class="side_cont_gallery"> </div> </div> <div id="footer"> </div> </div> </body> </html>

Step 2 - Header

<div id="header"> <div class="head_cont"> <div class="logo"> <h1><a href="#">Footy, the largest football community</a></h1> </div> <div class="right_header"> <ul class="top_navigation"> <li><a href="#">Sign-up</a></li> <li><a class="blue" href="#">Login</a></li> </ul> <div class="slogan"> <h2>football community, redefinited!</h2> <form action="https://wegraphics.net/search" method="get"> <fieldset> <input type="image" src="images/search.jpg" value="Search" /> <input type="text" onfocus="if(this.value=='SEARCH FOR SOMETHING')this.value='';" onblur="if(this.value=='')this.value='SEARCH FOR SOMETHING';" name="keywords" id="search" value="SEARCH FOR SOMETHING" size="40" /> </fieldset> </form> </div> </div> </div> </div>

Step 3 - Content area

<body> <div id="header"> </div> <div id="main_container"> <div id="content"> <div class="featured_articles"> </div> <div class="other_articles"> </div> </div> ... </div> </body>

<div id="content"> <div class="featured_articles"> <div class="top_article"> <a href="#"><img src="images/photos/top_article_img.jpg" title="top article title" alt="top article" /></a> <h2 class="b_tit_serie_a"><a href="#">Match Review: Juventus versus Sampdoria</a></h2> <span class="cat cat_bck_serie_a"><a href="#">Serie A</a></span> </div> <div class="single_feat_article"> <a href="#"><img src="images/photos/top_article_img_02.jpg" title="article title" alt="article image 02" /></a> <h2 class="b_tit_training"><a href="#">We need to improve our defending skills to win</a></h2> <span class="cat cat_bck_training"><a href="#">Training</a></span> </div> <div class="single_feat_article"> <a href="#"><img src="images/photos/top_article_img_03.jpg" title="article title" alt="article image 03" /></a> <h2 class="b_tit_liga"><a href="#">It was a good performance from the team and they won</a></h2> <span class="cat cat_bck_liga"><a href="#">Liga</a></span> </div> <div class="single_feat_article"> <a href="#"><img src="images/photos/top_article_img_04.jpg" title="article title" alt="article image 04" /></a> <h2 class="b_tit_training"><a href="#">We need to improve our defending skills to win</a></h2> <span class="cat cat_bck_training"><a href="#">Training</a></span> </div> <div class="single_feat_article"> <a href="#"><img src="images/photos/top_article_img_05.jpg" title="article title" alt="article image 05" /></a> <h2 class="b_tit_liga"><a href="#">It was a good performance from the team and they won</a></h2> <span class="cat cat_bck_liga"><a href="#">Liga</a></span> </div> </div> <div class="other_articles"> <div class="sec_tit"><h4>All entries</h4></div> <div class="article_list"> <h4 class="b_tit_basket"><a class="cat_bck_basket" href="#">Basket</a></h4> <ul> <li class="bck"><a href="#"><img src="images/photos/article_img_01.jpg" title="another article title" alt="bottom article image 01" /></a><h3><a href="#">Team had keeper's heroics to thank for salvaging them a point</a></h3><span class="read_more"><a href="#">read more</a></span></li> <li><a href="#"><img src="images/photos/article_img_02.jpg" title="another article title" alt="bottom article image 01" /></a><h3><a href="#">Team had keeper's heroics to thank for salvaging them a point</a></h3><span class="read_more"><a href="#">read more</a></span></li> <li class="bck"><a href="#"><img src="images/photos/article_img_03.jpg" title="another article title" alt="bottom article image 01" /></a><h3><a href="#">Team had keeper's heroics to thank for salvaging them a point</a></h3><span class="read_more"><a href="#">read more</a></span></li> <li><a href="#"><img src="images/photos/article_img_04.jpg" title="another article title" alt="bottom article image 01" /></a><h3><a href="#">Team had keeper's heroics to thank for salvaging them a point</a></h3><span class="read_more"><a href="#">read more</a></span></li> </ul> </div> <div class="article_list_r"> <h4 class="b_tit_liga"><a class="cat_bck_liga" href="#">Liga</a></h4> <ul> <li class="bck"><a href="#"><img src="images/photos/article_img_05.jpg" title="another article title" alt="bottom article image 01" /></a><h3><a href="#">Team had keeper's heroics to thank for salvaging them a point</a></h3><span class="read_more"><a href="#">read more</a></span></li> <li><a href="#"><img src="images/photos/article_img_06.jpg" title="another article title" alt="bottom article image 01" /></a><h3><a href="#">Team had keeper's heroics to thank for salvaging them a point</a></h3><span class="read_more"><a href="#">read more</a></span></li> <li class="bck"><a href="#"><img src="images/photos/article_img_07.jpg" title="another article title" alt="bottom article image 01" /></a><h3><a href="#">Team had keeper's heroics to thank for salvaging them a point</a></h3><span class="read_more"><a href="#">read more</a></span></li> <li><a href="#"><img src="images/photos/article_img_08.jpg" title="another article title" alt="bottom article image 01" /></a><h3><a href="#">Team had keeper's heroics to thank for salvaging them a point</a></h3><span class="read_more"><a href="#">read more</a></span></li> </ul> </div> <div class="article_list"> <h4 class="b_tit_training"><a class="cat_bck_training" href="#">Training</a></h4> <ul> <li class="bck"><a href="#"><img src="images/photos/article_img_08.jpg" title="another article title" alt="bottom article image 01" /></a><h3><a href="#">Team had keeper's heroics to thank for salvaging them a point</a></h3><span class="read_more"><a href="#">read more</a></span></li> <li><a href="#"><img src="images/photos/article_img_07.jpg" title="another article title" alt="bottom article image 01" /></a><h3><a href="#">Team had keeper's heroics to thank for salvaging them a point</a></h3><span class="read_more"><a href="#">read more</a></span></li> <li class="bck"><a href="#"><img src="images/photos/article_img_06.jpg" title="another article title" alt="bottom article image 01" /></a><h3><a href="#">Team had keeper's heroics to thank for salvaging them a point</a></h3><span class="read_more"><a href="#">read more</a></span></li> <li><a href="#"><img src="images/photos/article_img_05.jpg" title="another article title" alt="bottom article image 01" /></a><h3><a href="#">Team had keeper's heroics to thank for salvaging them a point</a></h3><span class="read_more"><a href="#">read more</a></span></li> </ul> </div> <div class="article_list_r"> <h4 class="b_tit_serie_a"><a class="cat_bck_serie_a" href="#">Serie A</a></h4> <ul> <li class="bck"><a href="#"><img src="images/photos/article_img_04.jpg" title="another article title" alt="bottom article image 01" /></a><h3><a href="#">Team had keeper's heroics to thank for salvaging them a point</a></h3><span class="read_more"><a href="#">read more</a></span></li> <li><a href="#"><img src="images/photos/article_img_03.jpg" title="another article title" alt="bottom article image 01" /></a><h3><a href="#">Team had keeper's heroics to thank for salvaging them a point</a></h3><span class="read_more"><a href="#">read more</a></span></li> <li class="bck"><a href="#"><img src="images/photos/article_img_02.jpg" title="another article title" alt="bottom article image 01" /></a><h3><a href="#">Team had keeper's heroics to thank for salvaging them a point</a></h3><span class="read_more"><a href="#">read more</a></span></li> <li><a href="#"><img src="images/photos/article_img_01.jpg" title="another article title" alt="bottom article image 01" /></a><h3><a href="#">Team had keeper's heroics to thank for salvaging them a point</a></h3><span class="read_more"><a href="#">read more</a></span></li> </ul> </div> <div class="clear"></div> </div> </div>

Step 4 - Sidebar

<div id="sidebar"> <div class="categories_navi"> <ul> <li class="cat_navi_liga"><a href="#">Liga <span class="n_posts">(120 articles)</span></a></li> <li class="cat_navi_world_cup"><a href="#">World Cup <span class="n_posts">(80 articles)</span></a></li> <li class="cat_navi_serie_a"><a href="#">Serie A <span class="n_posts">(41 articles)</span></a></li> <li class="cat_navi_basket"><a href="#">Basket <span class="n_posts">(20 articles)</span></a></li> <li class="cat_navi_training"><a href="#">Training <span class="n_posts">(12 articles)</span></a></li> <li class="cat_navi_fantasy_game"><a href="#">Fantasy Game</a></li> </ul> </div> <div class="social_icons"> <ul> <li class="rss"><a href="#">RSS</a></li> <li class="buzz"><a href="#">Google Buzz</a></li> <li class="facebook"><a href="#">Facebook</a></li> <li class="twitter"><a href="#">Twitter</a></li> </ul> </div> <div class="side_cont"> <h4 class="simple_title">Most popular</h4> <ul> <li><h3><a href="#">We need to improve our defending skills to win</a></h3></li> <li><h3><a href="#">We need to improve our defending skills to win</a></h3></li> <li><h3><a href="#">We need to improve our defending skills to win</a></h3></li> <li><h3><a href="#">We need to improve our defending skills to win</a></h3></li> <li><h3><a href="#">We need to improve our defending skills to win</a></h3></li> </ul> <div class="more"><a href="#">Do you want more articles?<br /> Click here and go to the category</a></div> </div> <div class="side_cont_gallery"> <ul class="gallery_list"> <li><a href="#"><img src="images/photos/photo_arch_01.jpg" title="photo archive title" alt="archive image 01" /></a><h3><a href="#">Match photogallery: Arsenal vs Man Utd</a></h3></li> <li><a href="#"><img src="images/photos/photo_arch_02.jpg" title="photo archive title" alt="archive image 02" /></a><h3><a href="#">Match photogallery: Arsenal vs Man Utd</a></h3></li> <li><a href="#"><img src="images/photos/photo_arch_03.jpg" title="photo archive title" alt="archive image 03" /></a><h3><a href="#">Match photogallery: Arsenal vs Man Utd</a></h3></li> <li><a href="#"><img src="images/photos/photo_arch_04.jpg" title="photo archive title" alt="archive image 04" /></a><h3><a href="#">Match photogallery: Arsenal vs Man Utd</a></h3></li> </ul> <div class="more_photo"><a href="#">Do you want more photos? Click here and go to the category</a></div> <h4 class="photo">Photo</h4> </div> <div class="side_cont_gallery"> <ul class="gallery_list"> <li><a href="#"><img src="images/photos/video_arch_01.jpg" title="photo archive title" alt="archive image 01" /></a><h3><a href="#">Match photogallery: Arsenal vs Man Utd</a></h3></li> <li><a href="#"><img src="images/photos/video_arch_02.jpg" title="photo archive title" alt="archive image 02" /></a><h3><a href="#">Match photogallery: Arsenal vs Man Utd</a></h3></li> <li><a href="#"><img src="images/photos/video_arch_03.jpg" title="photo archive title" alt="archive image 03" /></a><h3><a href="#">Match photogallery: Arsenal vs Man Utd</a></h3></li> <li><a href="#"><img src="images/photos/video_arch_04.jpg" title="photo archive title" alt="archive image 04" /></a><h3><a href="#">Match photogallery: Arsenal vs Man Utd</a></h3></li> </ul> <div class="more_video"><a href="#">Do you want more videos? Click here and go to the category</a></div> <h4 class="video">Video</h4> </div> </div>

Step 5 - Footer

<div class="side_foot"> <p>FOOTY is not responsible for the content of external sites. This is a blog/magazine template with a fresh and clean design. Enjoy it!</p> </div> <div id="footer"> <ul> <li class="logo_small"><a href="#">Home</a></li> <li class="about_us"><a href="#">About Us</a></li> <li class="authors"><a href="#">Authors</a></li> <li class="contact_us"><a href="#">Contact Us</a></li> </ul> </div>

From PSD to HTML/CSS - Styling the page

Step 6 - Exctract images from PSD

Step 7 - CSS Reset

html, body, div, span, h1, h2, h3, h4, h5, h6, p, img, ul, li, fieldset, form, label { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } ol, ul { list-style: none; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } :focus { outline: 0; } a { text-decoration: none; }

Step 8 - Wrap the main elements

body { background: #eee url(images/ball_bck.jpg) no-repeat 14% 6%; font: 12px "Lucida Sans Unicode", sans-serif, Verdana; line-height: 1.5em; color: #1d1d1d; } #main_container { width: 1000px; margin: 0 auto; background: url(images/illustration.png) no-repeat bottom right;} #header { background: url(images/head_bck.jpg) repeat-x; } .head_cont { background: url(images/head_shadow.jpg) no-repeat bottom; height: 160px; width: 1000px; margin: 0 auto; } #content { float: left; background: url(images/cont_bck.jpg) no-repeat; width: 680px; } #sidebar { float: right; width: 320px; } .side_foot { width: 200px; float: left; margin-top: 85px; } .side_foot p { color: #fff; } #footer { clear: both; padding: 10px 0; margin-bottom: 80px; }

Step 9 - CSS for the header

#header { background: url(images/head_bck.jpg) repeat-x; } .head_cont { background: url(images/head_shadow.jpg) no-repeat bottom; height: 160px; width: 1000px; margin: 0 auto; } .logo { float: left; margin-top: 20px; } .logo h1 a { background: url(images/logo.png) no-repeat 0px 0px; display: block; width: 397px; height: 104px; text-indent: -9999px; } .logo h1 a:hover { background-position: 0px -104px; } ul.top_navigation { float: right; margin-top: 20px; } ul.top_navigation li { display: inline; } ul.top_navigation li a { display: inline-block; background-color: #97bd0e; font-size: 14px; text-transform: uppercase; color: #fbfbfb; font-weight: bold; padding: 6px 10px; margin-left: 10px; text-shadow: 1px 1px 1px #7d9d0c; } ul.top_navigation li a:hover { background-color: #b5dd27; color: #fff; } ul.top_navigation li a.blue { background-color: #029de0; text-shadow: 1px 1px 1px #0184bc; } ul.top_navigation li a.blue:hover { background-color: #20b4f4; color: #fff; } .right_header{ float: right; } .slogan { float: right; clear: both; margin-top: 25px; background: #000; height: 43px; width: 580px; } .slogan h2 { float: left; background: url(images/slogan.jpg) no-repeat; text-indent: -9999px; display: block; width: 231px; height: 14px; margin: 15px 10px; } .right_header input[type="text"] { color: #b3b3b3; padding: 6px 10px; float: right; margin: 8px 12px 0 0; font-size: 12px; border: none; } .right_header input[type="image"] { float: right; margin-top: 6px; }

Step 10 - CSS for the content

#content { float: left; background: url(images/cont_bck.jpg) no-repeat; width: 680px; } .featured_articles { margin: 40px 0; } .top_article { height: 335px; } .single_feat_article { float: left; height: 241px; width: 311px; margin-right: 29px; margin-bottom: 25px; } .top_article img, .single_feat_article img { border: 10px solid #fbfbfb; -moz-box-shadow: 0px 0px 5px #c6c6c6; -webkit-box-shadow: 0px 0px 5px #c6c6c6; -khtml-box-shadow: 0px 0px 5px #c6c6c6; box-shadow: 0px 0px 5px #c6c6c6; } .top_article h2 { position: relative; top: -150px; left: 10px; background: #fbfbfb; padding: 10px 8px 12px 8px; width: 290px; } .featured_articles h2 a { color: #1d1d1d; } .featured_articles h2 a:hover { color: #898988; } .top_article span.cat { position: relative; top: -160px; left: 285px; padding: 2px 10px; font-size: 10px; text-transform: uppercase; } span.cat a { color: #fff; } .single_feat_article h2 { position: relative; top: -120px; left: 10px; background: #fbfbfb; padding: 8px 5px 11px 5px; width: 235px; font-size: 16px; } .single_feat_article span.cat { position: relative; top: -130px; left: 220px; padding: 2px 10px; font-size: 10px; text-transform: uppercase; } .b_tit_serie_a { border-bottom: 2px solid #67bcf5; } .cat_bck_serie_a { background: #67bcf5; } .b_tit_training { border-bottom: 2px solid #5bcc49; } .cat_bck_training { background: #5bcc49; } .b_tit_liga { border-bottom: 2px solid #e7aa11; } .cat_bck_liga { background: #e7aa11; } .b_tit_basket { border-bottom: 2px solid #98ba1c; } .cat_bck_basket { background: #98ba1c; } .other_articles { background: #fbfbfb; padding: 10px; -moz-box-shadow: 0px 0px 5px #c6c6c6; -webkit-box-shadow: 0px 0px 5px #c6c6c6; -khtml-box-shadow: 0px 0px 5px #c6c6c6; box-shadow: 0px 0px 5px #c6c6c6; width: 631px; clear: both; } .sec_tit { background: url(images/line.gif) no-repeat right; margin: 10px 0 15px 0; } .sec_tit h4 { color: #b3b3b3; font-size: 14px; } .article_list, .article_list_r { width: 290px; float: left; margin: 10px 0; } .article_list_r { margin: 10px 0 20px 45px; } .other_articles ul { position: relative; top: -10px; } .other_articles ul li { clear: both; height: 60px; margin: 10px 0; padding: 14px 0px; } .other_articles ul li:hover, .other_articles ul li.bck:hover { border-right: 2px solid #e5e5e5; } .other_articles ul li.bck { background: #f2f2f1; } .other_articles h4 a { padding: 2px 10px; font-size: 10px; text-transform: uppercase; color: #fff; position: relative; top: 10px; z-index: 100; } .other_articles h3 a { display: block; } .other_articles h3 a:hover { color: #898988; } .other_articles img { float: left; margin: 0 12px; } span.read_more { float: right; font-size: 10px; margin: 10px 8px; } span.read_more a { color: #5bcc49; } span.read_more a:hover { color: #379029; } .clear { clear: both; }

Step 11 - CSS for the sidebar

#sidebar { float: right; width: 320px; } .categories_navi { position: relative; top: -9px; } .categories_navi ul { width: 322px; border-right: 1px solid #fff; height: 105px; -moz-box-shadow: 2px 2px 0px #d6d6d6; -webkit-box-shadow: 2px 2px 0px #d6d6d6; -khtml-box-shadow: 2px 2px 0px #d6d6d6; box-shadow: 2px 2px 0px #d6d6d6; } .categories_navi ul li { display: inline; float: left;} .categories_navi ul li a { width: 145px; height: 24px; display: inline-block; text-transform: uppercase; font-size: 11px; border-left: 1px solid #fff; border-bottom: 1px solid #fff; color: #fff; padding: 10px 0 0 15px; } span.n_posts { font-size: 8px; } .cat_navi_liga { background: url(images/cat_navi_1.jpg) repeat-x 0px 0px; } .cat_navi_world_cup { background: url(images/cat_navi_2.jpg) repeat-x 0px 0px; } .cat_navi_serie_a { background: url(images/cat_navi_3.jpg) repeat-x 0px 0px; } .cat_navi_training { background: url(images/cat_navi_5.jpg) repeat-x 0px 0px; } .cat_navi_basket { background: url(images/cat_navi_4.jpg) repeat-x 0px 0px; } .cat_navi_fantasy_game { background: url(images/cat_navi_6.jpg) repeat-x 0px 0px; } .cat_navi_liga:hover, .cat_navi_world_cup:hover, .cat_navi_serie_a:hover, .cat_navi_training:hover, .cat_navi_basket:hover, .cat_navi_fantasy_game:hover { background-position: 0px -34px; } .social_icons { padding: 20px 0 9px 9px; } .social_icons ul li { display: inline; } .social_icons ul li a { display: inline-block; width: 48px; height: 48px; text-indent: -9999px; margin-left: 20px; } .rss a { background: url(images/rss.jpg) 0px 0px; } .rss a:hover { background-position: 0px -48px; } .buzz a { background: url(images/buzz.jpg) 0px 0px; } .buzz a:hover { background-position: 0px -48px; } .facebook a { background: url(images/facebook.jpg) 0px 0px; } .facebook a:hover { background-position: 0px -48px; } .twitter a { background: url(images/twitter.jpg) 0px 0px; } .twitter a:hover { background-position: 0px -48px; } .side_cont, .side_cont_gallery { background: #fbfbfb; -moz-box-shadow: 0px 0px 5px #c6c6c6; -webkit-box-shadow: 0px 0px 5px #c6c6c6; -khtml-box-shadow: 0px 0px 5px #c6c6c6; box-shadow: 0px 0px 5px #c6c6c6; padding: 25px 20px; margin: 20px 0;} .side_cont h4.simple_title { background: #000; padding: 5px 10px; font-size: 12px; color: #fff; margin-bottom: 15px; display: inline-block; text-transform: uppercase; } .side_cont ul li { font-size: 14px; border-bottom: 1px solid #d9d9d9; padding: 10px 4px; } #sidebar h3 a { display: block; } #sidebar h3 a:hover { color: #898988; } .more, .more_photo, .more_video { width: 200px; margin-top: 20px; font-size: 10px; line-height: 15px; } .more a { color: #daa215; display: block; } .more a:hover { color: #aa821e; } .more_photo, .more_video { border-top: 1px solid #d9d9d9; clear: both; margin-left: 20px; padding-top: 10px; } .more_photo a { color: #67bcf5; display: block; } .more_video a { color: #5bcc49; display: block; } .more_photo a:hover { color: #4c91bf; } .more_video a:hover { color: #379029; } .side_cont_gallery { padding: 25px 0; margin: 30px 0 93px 0; } .side_cont_gallery ul.gallery_list li { border: none; display: inline; float: left; width: 133px; margin: 0 0 25px 19px; } .side_cont_gallery h4.video { display: block; position: relative; bottom: 49px; left: 36px; float: right; width: 139px; height: 139px; background: url(images/video_tit.png) no-repeat; text-indent: -9999px; } .side_cont_gallery h4.photo { display: block; position: relative; bottom: 46px; left: 36px; float: right; width: 139px; height: 139px; background: url(images/photo_tit.png) no-repeat; text-indent: -9999px; }

Step 11 - CSS for the footer

.side_foot { width: 200px; float: left; margin-top: 85px; } .side_foot p { color: #fff; } #footer { clear: both; padding: 10px 0; margin-bottom: 80px; } #footer ul { margin: 20px 0; } #footer ul li { display: inline; float: left; margin-right: 20px; } .logo_small a { display: block; width: 101px; height: 50px; background: url(images/logo_small.png) no-repeat; text-indent: -9999px; } .logo_small a:hover { background-position: 0px -50px; } .about_us a { display: block; width: 100px; height: 36px; background: url(images/about_us.jpg) no-repeat; text-indent: -9999px; } .about_us a:hover { background-position: 0px -36px; } .authors a { display: block; width: 133px; height: 36px; background: url(images/authors.jpg) no-repeat; text-indent: -9999px; } .authors a:hover { background-position: 0px -36px; } .contact_us a { display: block; width: 175px; height: 36px; background: url(images/contact_us.jpg) no-repeat; text-indent: -9999px; } .contact_us a:hover { background-position: 0px -36px; }

DOWNLOAD PSD + HTML/CSS TEMPLATE [hidepost] [download id="106" format="1"] [/hidepost] Become a Premium Member and get unlimited access to source files and premium resources for only 7$/month. Click here to learn more