Converting a clean magazine-style PSD template to HTML/CSS

Converting a clean magazine-style PSD template to HTML/CSS

Previous week on WeGraphics we went through the process of designing a clean layout in magazine-style with Photoshop. Now it’s time to convert the visual mockup in a working web page using HTML and CSS.
This tutorial will be an overview, with some tips and advices, on how to convert a psd to HTML; it won’t be a complete and specific explanation on HTML tags, CSS properties and techniques but a look to my entire process of getting from Photoshop the HTML layout.

The result of the previous tutorial was a modern and clean psd layout ready for coding. To refresh your memory, let us take a look at the design below.

Coding a clean layout in magazine style

Test the live preview in your browser to see how the template will look after the HTML conversion.

DOWNLOAD PSD + HTML/CSS TEMPLATE

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

The first step is the key to create a robust and optimized layout. Before starting with the code we need to understand the basic structure of our layout.

I’m not a great fan of schematic procedures, a creative process, in building a good web design, can surely start in Photoshop, without a wireframe. At any rate I’m sure that a logical scheme of the layout is really important also when the design borns directly in Photoshop without a sketch, especially when we have to code. For this reason I’ve noted the important elements on a sheet.

Coding a clean layout in magazine style

It’s evident that we are working on a centered layout with a fixed width, for this reason we have to wrap it in a #main_container and then centre that container.

The #header is out of the #main_container because its background will cover the entire width of the browser window. Within the #main_container there are: the #content (where we can place the featured articles and the lists with articles by categories), the #sidebar with the navigation menu and some useful “widgets” (popular posts, galleries and social media icons), finally, the #footer.

From PSD to HTML/CSS – The HTML code

We can start to code keeping in mind the general structure just seen.

Step 0

Create a new directory /htm_css_template; there you can put in the necessary files, index.html and style.css, and the directories for the images (/images and /images/photos). You can insert into the directory images/photos all the thumbnails and the images for the articles.

Coding a clean layout in magazine style

Step 1 – DOCTYPE, head and general HTML structure

We are ready to start. Open index.html into your favourite text editor (I usually work with Notepad++); define the DOCTYPE, we use XHTML 1.0 Strict that “contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font);” define the head of your document (that’s a container for all the head elements such as scripts meta information, and more) and then add the divs to build the basic 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>

You can note that we use #ID’s and .CLASSes, this to have the chance to target our element specifically, so that we can manipulate the specific element uniquely.
Remember that ID’s are unique and they have a special browser functionaly. If you add a URL like http://example.com/post-1#comments in your address bar, the browser will attempt to find the element with the ID “comments” and will automatically scroll the page to display that specific element.
Do you want learn more about ID’s and CLASSes and their differences? Read “The Difference Between ID and Class” by Chris Coyeir.

Step 2 – Header

As said, the #header is out of the #main_container because its background will have to cover the entire width of the browser window. We need, at this point, to add a new “wrapper” element for the header section that contains the header’s elements within 1000px, the .head_cont will perform this task. Then we create the divs for the logo (we use the <h1> tag – read definition and usage on W3Cschools.com – to display the logo, the most important heading tag) and the #right_header section where we place the unordered list <ul> for sign-up and login buttons. The simple search form is built using form, fieldset and input (defining the “type” attribute) tags.

<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="http://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>

The code 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” allows us to add a particular feature. When the user clicks on the text input the string “SEARCH FOR SOMETHING” will be deleted to adding a new string for the search, if the user re-clicks on the page without starting the search the string “SEARCH FOR SOMETHING” will be displayed again.

Step 3 – Content area

The #content is inside the #main_container, as you can see.

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

We can add the elements of this section in our index.html.

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

In .featured_articles section we don’t separate the top featured article from the others with a new container for the 2nd-to-5th articles, because we’ll use opportunely some CSS properties to reproduce the grid of the layout in a clever way. For the article titles we use the <h2> tag to mantain a good headings structure.

In the section called .other_articles we place four unordered lists of articles by categories. Note that we separate the lists on the left side from the lists on the right side (.article_list.article_list_r), this will allow us to place correctly the elements assigning them the right value of margins.

The lists of the artcicles by categories (.article_list) will be placed as floating element (using the CSS float property) and when a float is contained within a container box that has a visible background, that float does not automatically force the container’s bottom edge down as the float is made taller and the background will not visible. We use <div class=”clear”></div> at the end of the container to fix this problem (in the CSS file we will write the following line of code: .clear { clear: both; })

Step 4 – Sidebar

Below you can see the HTML code to fill the #sidebar section with the widgets that we planned during the creation of the PSD mockup.

<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

Add the following code to create our footer section. We add two divs, within the #main_container and just below the #sidebar, to reproduce the navigation menu (logo – about us – authors – contact us) and the cresdits (“FOOTY is not responsible for the content of external sites. This is a blog/magazine template with a fresh and clean design. Enjoy it!”).

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

We can test in our favourite browser the result of our efforts.

Coding a clean layout in magazine style

Coding a clean layout in magazine style

Click here if you want to take a look at the complete HTML code.

From PSD to HTML/CSS – Styling the page

In this part of the post we will see some techniques for adding the style to our template. It’s clear that we can’t describe how each single CSS property works, but we will take a look at the process that will bring us to our goal, that’s to create a complete HTML/CSS web page. At any rate you can solve all your doubts on how a specific CSS property works reading W3Cschools.com – CSS References

Step 6 – Exctract images from PSD

Another important step, in converting the PSD mockup in a real web page, is the extraction of the necessary images from the PSD. Usual this operation is easy and very intuitive, you can play with layer visibility to “isolate” the layers and you can use the Selection Tool and Copy Merged (shift+ctrl+c), to copy all visible layers within the selection, or Copy (ctrl+c), to copy the active layer within the selection, for pasting the correct image in a new document. Finally save it for Web & Devices (alt+shift+ctrl+s), it’s clear that if you have an image with a transparent background you have to save it as PNG and not JPG.

Coding a clean layout in magazine style

Coding a clean layout in magazine style

Coding a clean layout in magazine style

Coding a clean layout in magazine style

Coding a clean layout in magazine style

Step 7 – CSS Reset

Open style.css in your text editor and start with a little, custom, 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

Now we have to work on the general structure. First of all we place the structural elements where they should be.

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; }

We use float: right; width: 320px; for the sidebar and float: left; width: 680px; for the content, this for two reasons: we don’t need to add explicit margins (between the content area and the sidebar) and we’ll have all the necessary space to add the feature articles from the 2nd to the 5th.

Coding a clean layout in magazine style

Coding a clean layout in magazine style

Step 9 – CSS for the header

Below you can take a look at the CSS code useful to reproduce all elements of 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; }

Using the properties background and background-position for .logo h1 a and .logo h1 a:hover (:hover is a pseudo class that adds a style to an element when you mouse over it) we can create a super-repsonsive hover effect. This technique is known as “CSS Sprites”, it allows us, using unlimited number of images combined into one and correct values of background-position, to create responsive buttons.

Learn more about “CSS Sprites” reading Building Faster Websites with CSS Sprites

Coding a clean layout in magazine style

Step 10 – CSS for the content

Add the following lines of code for the classes of the #content section.

#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; }

We use position: relative (that generates a relatively positioned element, positioned relative to its normal position) to place titles and categories at the middle of the image.

The box-shadow is a CSS3 property. It is not a standard yet, but we can use right now some CSS3 properties because all modern browsers render CSS3 excellently.

Coding a clean layout in magazine style

Step 11 – CSS for the sidebar

Now we can add the style to the navigation menu and to the other widgets of 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; }

Coding a clean layout in magazine style

Coding a clean layout in magazine style

Step 11 – CSS for the footer

Finally we can add some lines of code for the footer elements.

.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; }

Coding a clean layout in magazine style

Coding a clean layout in magazine style

That’s all, folks! We have our valid HTML/CSS template.
Stay tuned beacause the next week we will release a WordPress Theme based on this tHTML/CSS template.

DOWNLOAD PSD + HTML/CSS TEMPLATE

Become a Premium Member and get unlimited access to source files and premium resources for only 7$/month. Click here to learn more.

[ Images credits: marlon.net, joncandy, fakelvis, peacecup ]

Related Posts

high quality vectors

2500+ premium design resources for only $7!

We do the best to provide high-quality products that you can use in your commercial projects.
You bet!

take a tour

piervix

From a little city in the South of Italy, a web designer, a coder, a blogger. This is Piervincenzo, just a guy who has a great love for creativity and enjoys making high-quality stuff and sharing good information about web design and development. Now he works to make WeGraphics the best place to find design resources

60 Comments

(+add yours)
  1. Great article and template.!!!

  2. nice tutorial Piervincenzo, following the previous one Design a clean sports web layout in magazine-style with Photoshop

    Grazie e bravo!

    • Thank you, dear Nikola. I hope you’re having nice days ;)

  3. Danny Peters

    Loved the article but how long has positionate been a word? :o

  4. This great tutorial, following previous tutorial on designing. As Sebastiano said, your not only template machine but also code machine.

    Thanks!

    • Eheh… thank you for the comment Fandy, appreciated!

  5. Great read, thanks for another quality tutorial.

    • Thank you dear friend!

  6. perfect one, this is the one I need, so no need to pay for convert my psd s :)

    • It’s the time to learn… you can convert your PSD templates without troubles. Thank you very much for your comment, I hope the post will help you ;)

  7. thanks mate enjoyed it. Great site by the way, looks amazing.

  8. Very nice layout. Clean & creative :)

    • Happy to see you here, dear Sarah. Thank you!

  9. Very detailed tutorial like the other ones.
    Great work piervix ;)

    • Thanks for your support, dear Fabio!

  10. Nice tutorial. Not sure if a sprite for each item was the best move, but overall this is quite a well written one!

    • Thank for your comment, dear Agilius.

      In my opinion css sprites have a lot of advantages, this technique makes a web interface more responsive in the modern browsers.

  11. John

    Thank you so much for posting this tut. I found it very informative!!!!!!

  12. chieund

    thank you!

  13. Wow! Such a beautiful attractive theme.

    Please convert this to wordpresss and sell it on themeforest.net!

  14. Marianne

    Hi, the tutorial has been very useful, thank you! But I can’t seem to find the article about converting the HTML/CSS to WordPress. Could someone point me in the right direction? Thanks!

  15. Thank You.

  16. Hey Piervix nice tutorial. I think its really helpful for newbies like me who have difficulty in converting psd to html. Anyways I learned how to understand the layout and will land here again if I need more assistance.

  17. wow thanks for template :)

  18. Mile

    One of the best tutorials i have ever seen, thanks for this.
    Waiting for wordpress version ;)

  19. I had been browsing for ideas for my blog site and stumbled
    upon ur article, “Converting a clean magazine-style PSD template to HTML/CSS”, do
    you really care in the event I personally use many
    of your own ideas? I am grateful ,Ronnie withsuperiorwholesaleblindsinc.
    com/betterthan-phifer-sheerweave-screen

  20. Thank You Very Very this awesome tutorial but how I can convert this template to .xml for blogger please tell me in my email thanks ^_^.

  21. ????????Urbandillo????????????????????????????????????????

  22. ?????????????????????????????????????????

  23. Definitely believe that which you said. Your favorite justification
    seemed to be on the web the easiest thing to be aware of.

    I say to you, I certainly get annoyed while people think about worries
    that they plainly do not know about. You managed to hit the nail upon the top and also defined out the whole thing without having side effect , people could take a signal.
    Will likely be back to get more. Thanks

  24. For most up-to-date news you have to visit world-wide-web and on internet I found this web site as a finest web page for most recent updates.

  25. Hi this is somewhat of off topic but I was wondering if
    blogs use WYSIWYG editors or if you have too manually code
    with HTML. I’m starting a blog soon but have no coding know-how so I wanted to get advice
    from someone with experience. Any help would be enormously appreciated!

  26. Howdy! Would you mind if I share your blog with my facebook group?
    There’s a lot of folks that I think would really appreciate your content.

    Please let me know. Many thanks

  27. Great job! you have provided information regarding psd to html conversion. I like the way in which you have written the post and cleared everything. so i can say that you have done tremendous work by describing coding as well as along with screen shots.
    I am also a professional in converting psd to html template.
    Take a look here also : http://www.psdtoconvert.com/services/psd-to-html/

  28. n te damos algunos ejemplos de las mejores
    cremas que est. The greatest boon for the modern society is that the ambulance fly
    in air does not take much time to reach to the destination.
    Why would you expect to change your entire way of thinking
    or your body in a day.

  29. We made our way to the bars that she recommended and I was not
    disappointed. Sexual assault and murder and this killer
    will be out on work release in just a couple of years. Press Ctrl+V to paste the copied digit into
    the card number field.

  30. ????? ????? ? ?????? ?????? ????? ???????
    ???? ?? ????? ????? ? ?????????????
    ??????? ? ????????
    ???? ?????? ?? 24 ???? ? ???? ??????
    ? ???? ??? ???? ?? ???????? ?????? ?? ????? ?????????? ???? ????, ? ????? ??????????
    ?????? ?? 24 ????, ??????????? ?? ???? ????????????? ?????? ??? 399 ??, ????? ? ???????? ???????? ,
    ?????? ? ??????? ?? ?????????? ?? ???????, ????????????
    ?? ?????? ??????, ?????? ?????? ?? ????? ???????? ?? ???-???????
    ??????, ??????????, ?????? ? ?????? ??????
    ?????? ?? ?????????????? ? ??????? ?? ??????, ??????? ??????????.

  31. Greetings! I’ve been reading yohr site for a while now and finally got the
    courage to go head and give you a shout out from Austin Texas!
    Just wanted to tell you kep up the fantastic work!

  32. When you wish to unlock your accomplishments honorably,
    you can do so by taking part in towards an established staff.

    They also by no means made mention of my previous glory with other clubs
    or my good results as being a highway player.
    After you feel your skills will be ready compete, start to look for a tournament to learn in.

  33. Read more about hostgator coupon at hostgatorcouponandreview.

    Some coupons can offer you more than just a discount and you could
    take advantage the hands down offers. Whether you choose to subscribe for VPS plan or any other plan with hostgator,
    you can use this coupon code.

  34. Only released our special Clash of Clans Hack device,
    cheats plus triche. so make sure you make your copy these
    days. We have a huge number of visitors on a daily basis all looking to purchase them.
    Therefore there would have to be a way to get rid of it to help reward
    people who were able to put in a slight effort to
    help us by completing a minimum of one from the gives. As an alternative to selling
    this particular application lets you take advantage of free endless gems, all
    of us decided to allow it to become readily available for free so anyone by any area of the universe should have an equal potential for getting it.

  35. Isabel Marant Perkins Sneakers La poesia di uscire dal mainstream e
    la testa per l’East Village per ascoltare la parola dei poeti di guerra a Nuyorican Poets Cafe.
    Questo bar, caffetteria e musica dal vivo e parlata posto la parola è stato in giro in varie incarnazioni dal 1973,
    ma è rimasto nella posizione attuale dal 1980. Isabel Marant Betty Sneakers Sale Mia madre rideva,
    era felice di vedere il suo ragazzo così innamorato!
    Ho mantenuto la sciarpa per un ulteriore anno,
    fino a quando mio nonno è andato, con il mio bene più favorito
    è dato a lui per il suo passing.It dopo che ho
    scoperto che ha dato mia madre i soldi per la tassa per il traghetto,
    e il denaro per queste scarpe scuola, sapeva o forsee il giorno per me come un bambino, o figlia di mia madre?

    O entrambe le cose? Io uso ancora le vecchie scarpe nuove scuole ingombranti, dal
    negozio elegante (al momento) scarpe nuove, essi
    saranno sempre, la prossima generazione, così come il primo.
    Saranno sempre nuova, ma già indossato in qualche parvenza di una generazione precedente.
    Isabel Marant Betty Sneakers Abiti di moda guardare meglio,
    sono meglio sulle facce più piccole. Le dimensioni dei campioni sono sempre taglia 00!
    Beh, forse il numero di casi deve essere cambiato. Buy Isabel Marant
    Sneakers Online Supra Vaider Verde Abbiamo anche avuto una conversazione
    su Winterlude, in quanto si tratta di un festival
    straordinario. Contrariamente a permettere agli uomini e alle donne di combattere con un link per il duro inverno, è il più vicino alla strada e intorno al canale
    al volo l’opportunità di godere delle cose meravigliose che devono fornire l’inverno.
    Cheap Isabel Marant Boots PRLog (Comunicato stampa) 10 agosto 2012
    StyleshopUSA EH meglio conosciuto per la scoperta di alcuni prossimi designer
    e provenienti di tutto il mondo i clienti e la loro presentazione uh celebrità di
    Hollywood. L’esperto di moda Jane Linter dice Renee
    Solomon SZTV unica collezione vibrante e audace
    Fili Solomon er prendiamo di nuovo un’occhiata prossima p E
    ‘sicuramente uno Look Up! Nel corso di una Mercedes Benz Fashion Week Swim
    a Raleigh Hotel, modelli di pista a piedi IFRT Fili Solomons armbnd sensazionale creato in esclusiva per
    complimentarmi collezione Bohemian costumi da bagno ispirata.
    Are Isabel Marant Sneakers Still In Style Scopriamo abbiamo bisogno del
    proprietario del sito web per ringraziare per questo.
    Tutte le illustrazioni che hai fatto, menu semplice blog, le
    relazioni vostro sito rendono più facile promuovere la scabbia presero incredibile, e
    lasciate P figlio e la famiglia ritengono che l’articolo non è così eccezionalmente
    qualcosa di giusto indispensabile soddisfacente. Shop
    Like Isabel Marant Sneakers L’guanti volpe polsini puro complimento
    tutti i tipi di abiti. Guanti con pelle extra morbida nera e lavorato
    fodera in pelle disponibile in XL, L, M, e piccoli.. Isabel
    Marant Shoes Price Utilizzando diodi emettitori di
    luce (LED di potenza in tecnologia), non è così potente che
    sbiancare i denti velocemente varie sfumature carrello. A volte noto come sbiancamento laser, questo in realtà non comporta laser.
    Isabel Marant Sneakers Looks Isabel Marant Style Sneakers

  36. Woah! I’m really digging the template/theme
    of this site. It’s simple, yet effective. A lot
    of times it’s hard to get that “perfect balance” between user friendliness and visual appearance.

    I must say you’ve done a very good job with this.
    In addition, the blog loads extremely quick for me on Safari.
    Excellent Blog!

  37. I want to to thank you for this excellent read!!

    I definitely enjoyed every little bit of it. I have got you bookmarked to check out new stuff you post…

  38. Thanks foor finally writing about >Convertkng a
    clean magazine-stylePSD template to HTML/CSS <Liked it!

  39. Awesome tutorial for PSD to HTML conversion. You have nicely described in step by step process that how one can convert his psd design into wordpress who have knowledge about it. I also have converted my design into HTML design with http://www.psdtoconvert.com/services/psd-to-html/. And their results are very much reliable.

  40. That kind of educational freedom is empowering’ for both teachers and students.
    1-For thosewho are unsure about Carbon Copy Pro and are wondering if it
    is a legitimate home based business, this article is specifically for you.

    Chose subject material or which you feel confident readers
    is going to be interested in.

  41. Hi, i think that i saw you visited my website thus i came to “return the favor”.I
    am trying to find things to enhance my web site!I suppose its ok to use some of your
    ideas!!

  42. Just released our distinctive Clash of Clans Hack application, cheats as well as triche.

    so be sure to get the copy right now. We have many visitors day after day all
    wishing to purchase them. So , there must be a way to get rid of it to be
    able to reward individuals that were ready to invested a small effort to help us with just one or more of the gives
    you. As an alternative to selling the following
    application that allows you to take advantage of
    free infinite gems, most people decided to enable it to be available for free in
    order that anyone coming from any section of the globe should have the same opportunity of getting it.

  43. Just released our unique Clash of Clans Hack program,
    cheats and triche. hence you should ensure you get your copy today.
    We have thousands of visitors every day all planning to
    have them. Therefore there would have to be a way to get rid
    of it to be able to reward individuals who were prepared to invested a slight effort to help us when you fill out a minimum of one of your
    gives. Rather than selling this particular application that allows you
    to take advantage of free unrestricted gems, most people decided to allow it to be accessible for free
    so anyone out of any the main earth should have the same prospects for received
    it.

  44. Hello, for all time i used to check blog posts here early in
    the dawn, for the reason that i enjoy to learn more and more.

  45. ??? !

    ?????????

    . . . .

    ????? ??????????????

  46. Hi! I’ve been following your website for a while now and
    finally got the bravery to go ahead and give you a shout out from Lubbock Texas!
    Just wanted to say keep up the good work!

  47. Undeniably believe that which you said. Your favourite justification appeared
    to be on the web the easiest factor to be mindful of. I say to you, I certainly get annoyed at the same time as folks consider issues that they plainly do not realize about.
    You controlled to hit the nail upon the highest as neatly as outlined out
    the whole thing without having side effect , other folks could take a signal.
    Will probably be again to get more. Thank you

  48. Hi there, every time i used to check website posts here early in the morning, since i love to learn more
    and more.

  49. Howdy! I know this is kindra off topic nevertheless I’d figured I’d ask.
    Would you be interested in exchanging links or maybe guest writing a blog article or vice-versa?
    My sitte coverss a lot of the same topics aas yours and
    I believe we could greatly benefit from each other.
    If you might be interested feesl free to shookt mme an email.
    Ilook forward to hearing from you! Awesome blog by the way!

  50. Nice post. I learn something totally new and challenging on sites I stumbleupon on a daily basis.

    It will always be useful to read articles from other authors and use something from other sites.

  51. Good answers in return of this question with firm arguments and telling all on
    the topic of that.

  52. Very good information. Lucky me I came across
    your website by chance (stumbleupon). I’ve book-marked
    it for later!

Leave your comment

© Copyright 2010 WeGraphics.net - All rights reserved. Design and code by WeGraphics Team