From Psd to Xhtml: how to transform the layout in XHTML+CSS?

by  |  28 Jun 2010 |  in: Web, xhtml & css

7 comments

In the first part of this article we have seen how to export, using the instrument “sections” of Photoshop, the vary components of our layout “YIW Corporate“. Today “you’ll dirty your hands” with the code: we’ll see how to make the markup for this certain layout and the CSS associated..

So, let’s stop talking and begin!

The markup

Once you have completed the exportation of all the elements of the source file (in our case a PSD file created with Photoshop) it’s time to think about the markup that will be the backbone of our layout. As always reminded in the YIW articles, the contents of the page must be (at least in the beginning) maintained separated from the visual aspect. Once everything is defined, you can make and add changes to adapt the work to the graphic.

We’ll begin, like always, from an empty document, to which we have linked a CSS file:

<!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="it" lang="it">

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  <link rel="stylesheet" type="text/css" href="css/base.css" />

  <title>YIW Corporate - Your Inspiration Web</title>

</head>

<body id="body-home">
	<!-- here our content -->
</body>
</html>

We begin from the header of our layout: the logo will be the maximum level heading of our layout, while we’ll make the navigation  a unordered  list:

...
<h1 id="logo"><a href=".">YIW financial</a></h1>

<ul id="top_nav">

	<li><a href="#" id="home">Home</a></li>

	<li><a href="#">Profile</a></li>

	<li><a href="#">Services</a></li>

	<li><a href="#">Partner</a></li>

	<li><a href="#">Customer</a></li>

	<li><a href="#">Contact</a></li>

	<li><a href="#">Affiliate</a></li>

</ul>
...

...
<p>We are a young financial agency.We offer quality for your innovative and modern business. Your Inspiration Corporate, all around you.</p>
...

Now it’s the turn of the main contents of our homepage: the presentation of  the products. There are several possible approaches: I think that it’s significant to use a list (because we are presenting in fact a list of products):

...
<ul id="content">

	<li>

		<h2><span>YourInspiration</span> account</h2>

		<img src="img/contoYIW.jpg" width="300" height="116" alt="bancoYourInspiration account" />
		<p>The your inspiration account ...</p>

	</li>

	<li>

		<h2><span>YourInspiration</span>bank loan</h2>

		<img src="img/prestitoYIW.jpg" width="300" height="116" alt="Your Inspiration bank loan" />
		<p>Pensioners, employers, and unemployed</p>

	</li>

	<li>
		<h2><span>YourInspiration</span>loan</h2>

		<img src="img/mutuoYIW.jpg" width="300" height="116" alt="Your Inspiration loan" />
		<p>Your Inspiration loan...</p>

	</li>

</ul>
...

An interesting thing to note is that the elements in the list (title-image-description) don’t respect the visual order (image-title-description),  important thing  to repeat is that there’s flexibility, with  the CSS (and a bit of patience) to modify the predefined order of the browser as one likes.

The footer will be represented by two simply paragraphs:

...
<p><a href="#">Your Inspiration Corporate</a> - Banking & Financial solution - P.iva 012345678</p>
<p>Terms and conditions - Privacy policy - Contact us</p>
...

...
<body id="body-home">
	<div id="nav-outer">
		<h1 id="logo"><a href=".">YIW financial</a></h1>

		<ul id="top_nav">

			<li><a href="#" id="home">Home</a></li>

			<li><a href="#">Profile</a></li>

			<li><a href="#">Services</a></li>

			<li><a href="#">Partner</a></li>

			<li><a href="#">Customer</a></li>

			<li><a href="#">Contact</a></li>

			<li><a href="#">Affiliate</a></li>

		</ul>
	</div>
	<div id="featured">
		<p>We are a young financial agency.We offer quality for your innovative and modern business. Your Inspiration Corporate, all around you.</p>
	</div>

<ul id="content">

	<li>

		<h2><span>YourInspiration</span> account</h2>

		<img src="img/contoYIW.jpg" width="300" height="116" alt="bancoYourInspiration account" />
		<p>Il conto bancoYourInspiration ...</p>

	</li>

	<li>

		<h2><span>YourInspiration</span>bank loan</h2>

		<img src="img/prestitoYIW.jpg" width="300" height="116" alt="Your Inspiration bank loan" />
		<p>Pensioners, employers, and unemployed</p>

	</li>

	<li>
		<h2><span>YourInspiration</span>loan</h2>

		<img src="img/mutuoYIW.jpg" width="300" height="116" alt="Your Inspiration loan" />
		<p>Your Inspiration loan...</p>

	</li>

</ul>
<div id="footer">
	<p><a href="#">Your Inspiration Corporate</a> - Banking & Financial solution - P.iva 012345678</p>
	<p>Terms and conditions - Privacy policy - Contact us</p>
</div>

Styles: let’s give a form to the contents

Now all we have to do is  apply the CSS to this markup, to realize our layout. For this project we’re going to use  960 grid system,  as Sara planned the whole layout following the disposal grid of this framework. As explained  from Nando in his article on 960gs,  we have to download the framework from the official website and link  the several CSS file to our project, in order to have a solid base from which to begin.

First of all, we apply some default  styles for the layout, like the font and the colour of the links:

...
body{font:100%/1.5 "Trebuchet MS", sans-serif;}

h1{font-size:150%;}
h2{font-size:135%;}
h3{font-size:110%;}

a:link, a:visited {
	color:#DF9615;
	text-decoration:none;
}
...

Now let’s put in order the layout’s structure, following the grid: we’ll use the one made of 12 columns, so we should add the class “container_12” to the elements that build the skeleton of our layout. Certainly the logo and the list of navigation must extend to all the width, even to the list of the products should have a class added. Sicuramente il logo e la lista di navigazione dovranno estendersi per tutta la larghezza; anche alla lista dei prodotti dovrà essere aggiunta la classe. As regards of the div “featured” and “footer“, unfortunately  we have to add a div,  since the repeated backgrounds extend for over  960 pixel of the standard width of the grid. So, our markup will change like this:

<div id="nav-outer">

<h1 id="logo" class="container_12"><a href=".">YIW financial</a></h1>

	<ul id="top_nav" class="container_12">

		<li><a href="#" id="home">Home</a></li>

		<li><a href="#">Profile</a></li>

		<li><a href="#">Services</a></li>

		<li><a href="#">Partner</a></li>

		<li><a href="#">Customer</a></li>

		<li><a href="#">Contact</a></li>

		<li><a href="#">Affiliate</a></li>

	</ul>

</div>

<div id="featured">

	<div id="slogan" class="container_12">
		<div id="slogan-inner">

		<p>We are a <em>young</em> financial agency. <br />We offer quality for your innovative and modern business. <br /><em>Your Inspiration Corporate</em>,  all around you.</p>
		</div>

	</div>

</div>

<ul id="content" class="container_12">

	<!-- list's elements -->

</ul>
<div id="footer-outer">
	<div id="footer" class="container_12">
		<p><a href="#">Your Inspiration Corporate</a> - Banking & Financial solution - P.iva 012345678</p>
		<p>Terms and conditions - Privacy policy - Contact us</p>
	</div>
</div>

The next step is to add the classes  to the elements of the list containing the products of  the society: as there are three element side by side and we have chosen a grid of twelve columns, every element must be width four columns. This effect is obtained by adding  the class “grid_4” to the elements:

...
<ul id="content" class="container_12">

	<li class="grid_4 alpha">

		<h2><span>YourInspiration</span>account</h2>

		<img src="img/contoYIW.jpg" width="300" height="116" alt="Il conto bancoYourInspiration" />
		<p>YourInspiration account saves you <strong>10% on the yearly price</strong> and it makes you gain <strong>0,5%</strong> on deposit money. Flexible, convenient and stable: discover our offers.</p>

	</li>

	<li class="grid_4">

		<h2><span>YourInspiration</span> bank loan</h2>

		<img src="img/prestitoYIW.jpg" width="300" height="116" alt="Il conto bancoYourInspiration" />
		<p>Pensioners, employers, but also unemployed, students and housewives. Your  Loans Inspiration you give economic independence and financial freedom with <strong>rates starting at just 45 euro.</strong></p>

	</li>

	<li class="grid_4 omega">
		<h2><span>YourInspiration</span>loans</h2>

		<img src="img/mutuoYIW.jpg" width="300" height="116" alt="Il conto bancoYourInspiration" />
		<p>Your Inspiration loan at cut rates offers many <strong>incentives for young couples</strong> and for those who want to invest in real estates.<a href="#">Request a free meeting with our consultants </a>.</p>

	</li>

</ul>
...

As you can notice, I also added  the classes “alpha” and “omega” to  characterize the first and the last element,  so that to zero both the left and right margin. We have now completed the changes to the markup: our layout starts building up a form, but there are still many things to arrange. Let’s start from the heading.

Header

Let’s start by hiding the text of the title, changing it with the logo of the company:

...
#logo{

	background: transparent url("../img/logo.png") 0 0 no-repeat;

	height:114px; /* height for the image to replace */
	text-indent:-999em; /* hide the text */

}
...

Obtaining this result . As you can notice the logo, which is supposed to be a link to the homepage, isn’t visualized like that, since we have hidden the text that represented the extension of the link. For this reason we must  determine manually a width and a height:

...
#logo a:link, #logo a:visited {
	display:block;
	height:114px; /* width of the logo image */
	width:380px; /* height of the logo image */
}
...

Making in this way clickable the whole  area of the logo.

Now we’re going to pass on settling the links of the menu. the first thing to do is to put the list in a horizontal way:

#top_nav li {

	float:left;

}

As you can see the lower paragraph will be sided to the links . To eliminate this bad effect  we add the class “clearfix” to the list of the links in the markup, in this way:

...
</div>

<ul id="content" class="container_12 clearfix">
...

And we fix a height for this element: I decided to set it at 42 pixel as this the height of the factor that we will include later:

...
#top_nav {

	height:42px;

}
...

Now all we have to do is apply the styles for every single link:

#top_nav a:link, #top_nav a:visited {
	color:#354B52;
	display:block;
	font-size: 90%;
	height:27px;
	line-height:27px;
	margin: 0 25px;
	text-align: center;
	width:69px;
}

We’ve determined  colours and size of the font and the margins. The most important rules of this group are the ones that fix the width and the height (obtained by the dimensions of the background image for the selected links) and the dimension of the ‘line-height’: this is set up at the same value of the height,  this way the text is balanced also in vertical.

All we have to do is insert  the background and we can say that the header is complete:

#nav-outer{

background: #f3f3f0 url("../img/bg_top_nav.png") 0 0 repeat-x;

}

Section “featured”

The next step is to realize  the intermediate section, containing the presentation paragraph and the team’s photo. This section can be realized in many ways, some simplier and others more experimental. Talking about it, it came up a  proposal to realize one unique background image very long and then to position the paragraph rightly. For this example although I thought to present a  more experimental realization ,using more images and the relative positioning.

Meanwhile, the images that we need are two: one that will be repeated horizontally , and the one with the team that will be positioned on the right of the introduction paragraph. We’ll begin with positioning the first image, as background of the div “#featured“:

#featured {

background:#FFF url("../img/bg_featured.png") 0 0 repeat-x;
margin-bottom:24px;
overflow: hidden;

}

Afterwards we modify  the paragraph’s aspect and formation, changing the colour, the dimension and the width:

#slogan-inner p{
	color: #FFF;
	font-size: 130%;
	width:458px;
}

#slogan-inner p>em{
	color:#FBC508;
	font-style:normal;
}

Let’s pass now to the “experimental” part of this layout, that is the positioning of the image of the team. The easiest thing is to put it as background to the  div “#slogan“:

#slogan {

background:transparent url("../img/gente.png") 0px 0 no-repeat;
height:256px;
}

This the obtained result: as you can see there are problems with the alignment of the image  and of the paragraph, that superimpose it.  To avoid this inconvenience, we should  “push” to the right the div “#slogan“:  you can obtain this effect by using the relative positioning . So the previous block will be:

#slogan {

background:transparent url("../img/gente.png") 0px 0 no-repeat;
height:256px;
left:200px; /* moves div right 200 pixel */
position:relative;

}

We moved all the div“#slogan” 200 pixel to the right, in this way though the paragraph moved also. We have put in its place this element. the line of reasoning is the same, it’s just that we have to bring back 200 pixel to the left the div“#slogan-inner”

#slogan-inner {
	left:-200px;
	margin:0 auto;
	padding-top:71px;
	position:relative;

}

This time we have used a negative value of 200 pixel, to restore the correct positioning of the paragraph, adding at the same time rules for the margins and for the padding.

Main Contents and the footer

Now all that remains to do is work on the description of the three products: since we have used the classes of 960gs to create the columns, we just have to re-position the images. I remind you that in the original  layout the images were before the title , while in the markup we put them after to respect the semantic order. The solution is very simple: we impose the property  “position:absolute” for the images, and moving them up: in this way they’re will be extracted from the flux of the page and will cover the the text that has to be moved lower with the padding. In code:

...
#content{
	margin-bottom: 25px;
	position:relative; /* set the limit for absoluted positioned elements */

}

#content > li > img {

	position: absolute;
	top: 0; /* make the superior edge fit with div #content */

}

#content h2 {
	margin-top: 146px; /* moves the title down 146pixel
	                      that is image's height. */
}
...

To this property , we’ll add the others to modify the visual aspect, becoming:

#content{
	color:#354B52;
	margin-bottom: 25px;
	position:relative;

}

#content > li > img {

	position: absolute;
	top: 0;

}

#content h2 {
	color:#B8CAD0;
	letter-spacing:-1px;
	margin-top: 146px;
	text-transform: uppercase; /*makes title uppercase */
}

#content h2 > span {
	color:#407587;
}

The last step is to add the background to the footer and centre the text:

...
#footer-outer {
	background-color:#407587;
	clear: both;
}

#footer {
	color: #FFF;
	font-size:90%;
	padding: 10px 0;
	text-align:center;
}

At this point we can say that we have finished our layout.

Conclusions

In these two articles I wanted to demostrate  a way to think that can be at the base of  the construction of a layout starting from  a psd file. Clearly,  like I have often repeat, there is no best method. An important point, I think, is the fact that from same  graphic layout , developers can obtain good results following different ways, applying  metholodologies more or less vanguard, or strange hack from obscure codes.

I think that it’s beautiful side of this job: the possibilities of improvement are illimitated and it depends on the developers  to make different every coding instead of easygoing on the apprehended and consolidaded techniques. I think that innovation is the password. And we, that live in this changeable media that is the Web, have to be innovators on the front line.

download
Versione: 1.0
Pubblicato: 22 June 2010
Dimensione: 208.08 kB
Download: YourInspirationCorporate-Template

*****************************************
L'immagine principale dell'articolo è stata fornita da @Fotolia

Download PDF
Tags: ,

The Author

Fond of web design, takes delight in creating (X)HTML+CSS layouts. A maniac of polished and tidy codes, the type of person you find in your house straightening the paintings hanging on the wall. He has made his mind of becoming a web designer with a capital “w”, and spends entire nights awake in order to make his dream come true.

Author's web site | Other articles written by

Related Posts

You may be interested in the following articles:

7 comments

  1. Wirral Web Design
    June 28, 2010 at 5:55 am
    # 1

    Very nice tutorial, well written and illustrated. Just one thing: I think you mean an ‘un-ordered’ list as opposed to a ‘dis-ordered’ list which is something else entirely…

    Just me being pedantic I suppose. Apart from that an excellent tut :)

    Reply
    • sarah
      June 28, 2010 at 6:12 pm
      # 2

      Thanks for your advice, maybe our translator was tired and confused :)
      i’ve replaced “disordered” with “unordered”, thank you so much :)

  2. fajarfaqih
    July 7, 2010 at 2:51 pm
    # 3

    Thanks JustB, its very useful for me as new web designer.
    Before, i was confusing about it. And now, i have better technique :)

    Reply

Trackback e pingback

  1. Tweets that mention From Psd to Xhtml: how to transform the layout in XHTML+CSS? | Your Inspiration Web -- Topsy.com
    [...] This post was mentioned on Twitter by V. Tavares (E-Goi), Tom Bangham. Tom Bangham said: From Psd to Xhtml: ...
  2. From Psd to Xhtml: how to transform the layout in XHTML+CSS? | PhotoshopDaily.info
    [...] See the original post here: From Psd to Xhtml: how to transform the layout in XHTML+CSS? [...]
  3. TUT: From Psd to Xhtml with the framework 960 grid system | mmc blog
    [...] http://www.yourinspirationweb.com/en/from-psd-to-xhtml-how-to-transform-the-layout-in-xhtmlcss/ [...]

Leave a Reply