1stwebdesigner

Posted by ryan | Posted on 17:54

(0) comments

1stwebdesigner

Convert 1st Ideas from PSD to HTML [Very Detailed]

Posted: 31 May 2011 03:00 AM PDT

In this article you will learn how to convert 1st Ideas: Stylish Design Agency Website from PSD to HTML in a detailed step-by-step tutorial. You will learn how to create this layout using CSS styles, some CSS3 styles and JavaScript. When you've completed this tutorial you'll have a valid HTML/CSS, cross browser compatible and dynamic layout. I hope that you can go through this tutorial and learn a few techniques that will help you in future projects.

Now, let's get started with this tutorial.

Links you will need to complete this tutorial:

Here's what we'll be creating (Click on image to view a full working demo).

You can also download this tutorial's source files here.

Step 1 – Preparation

If you read the Photoshop tutorial for creating this landing page you probably noticed that Michael mentioned that he didn’t use the 960 grid system for guidelines, so I will be not be using the 960 grid system in converting this layout to show you how you can create layouts without using frameworks.

You will also need a code editor; you can use a plain text editor such as Notepad. I always recommend you use a free code editor and get used to it, this helps you get things done faster.

During this tutorial you should test your layout in different browsers, you don't want to return to the beginning because of browser compatibility issues. In this tutorial I am using some CSS3 styles, but as you might know, not all browsers support CSS3 features. The CSS3 styles used in this tutorial have been tested with Firefox version 4, Chrome 8, IE8 and IE9.

Step 2 – Getting Your Files Ready

The first thing you should do is create a directory for your website. I usually create an /images/ directory for images and a /styles/ directory which will hold every style sheet (CSS) file and any other JavaScript files. The HTML file goes in the root directory.

Now if you aren’t using a framework to create your layout, you’ll need to use a CSS Reset. We use CSS Reset to avoid browser inconsistencies, or in other words to start fresh. In CSS Reset you simply set the styles of all elements to a baseline value and we avoid all browser’s defaults. You can find many CSS Reset codes on the web here’s the one I use.

Now, you need to create a new file in your root directory called index.html and create another file called style.css in /styles/ directory, you need also to create a new file called reset.css in /styles/ directory and paste the CSS Reset code inside it.

In this tutorial we need to export images from Photoshop to use in our HTML layout. You can export these images yourself if you have the layered PSD file from the original Photoshop tutorial, or you can just grab the source files with this tutorial and you'll find the images I created.

Step 3 – Simple Starter Layout

We need to start by creating a Simple HTML layout as the basis of our site to be. By looking at the Photoshop Layout you should notice a few things:

  1. The layout has a background image that repeats horizontally and another background image on top of it which represents the lines and it is aligned to the left.
  2. The layout has a 960px fixed width aligned to center horizontally.
  3. The layout has a header section that contains the logo, social icons, sign up and login buttons, the main menu and the search text box.
  4. The layout has two sliders one displaying services and we’ll call it featured slider, the other has the latest portfolio items and we’ll call it portfolio slider.
  5. The content section contains about, blog updates, testimonials and services.
  6. Finally, the layout has a footer section with links, logo, social icons and copyright text.

Now, based on these notes we create the following HTML layout.

 <!--DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> xmlns="http://www.w3.org/1999/xhtml"> <head>     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />     <span class="hiddenSpellError" pre="">1stIdeas</span>: Stylish Design Agency Website     css" href="styles/reset.css" rel="stylesheet" media="all" />     css" href="styles/tutorial.css" rel="stylesheet" media="all" /> </head> <body>     <div class="container header">         header content goes here.     </div>     <div id="featured_slider" class="container featured_slider">         featured slider content goes here.     </div>     <div class="container portfolio">         portfolio slider content goes here.     </div>     <div class="container content">         main content goes here.     </div>     <div class="footer">         <div class="container">             footer content goes here.         </div>     </div> </body> </html>

Here I’ve linked the style files in the header of the HTML file. I’ve also created five divisions inside body, each with either a class container or contains a division with this class which allows us to style this section with the layout’s fixed width and alignment. Each division has a unique class name to allow custom styling of each section. Now let's add the CSS as follows (all CSS should be added in style.css file):

 body {     color: #fff;     font-size: 13px;     font-family: Arial;     background: #2c3e4c url(../images/bg.jpg) repeat-x top; }      body:before {         content: "";         display: block;         width: 485px;         height: 697px;         position: absolute;         z-index: -2;         top: 10px;         left: 0px;         background: url(../images/bg_effect.png) top left;     }  a, a:link, a:active, a:focus {     outline: 0 none;     color: #fceba3; }  a:hover {     background: #fceba3;     color: #1c2730;     text-decoration: none; }  p {     font-family: Myriad Pro;     font-size: 13px;     padding: 0;     margin: 0; }  .clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:before,.clearfix:after{content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both}.clearfix{zoom:1}  .container {     width: 960px;     margin: 0 auto; }  .container.header {     height: 190px; }  .container.featured_slider {     position: relative; }  .container.portfolio {     height: 255px;     width: 963px;     overflow: hidden;     position: relative;     background: url(../images/portfolio_slider_bg.png) no-repeat bottom center;     margin-top: 40px; }  .container.content {     margin-top: 36px;     background: url(../images/content_light.png) no-repeat;     background-position: 473px -20px;     overflow: hidden; }  .footer {     width: 100%;     height: 300px;     background: #151d23;     overflow: hidden;     margin: 50px 0 0 0;     padding: 35px 0 0 0;     font-family: Tahoma;     font-size: 12px;     line-height: 18px;     border-top: 3px solid #0e1418;     -moz-box-shadow: inset -1px 0px 0px #2c3339;     -webkit-box-shadow: inset -1px 0px 0px #2c3339;     box-shadow: inset 0px 1px 0px #2c3339; }

In the CSS code above I styled the body element with white text color, a fixed font size and font weight, a background color and image that repeats horizontally. You’ll notice that there’s a style “body:before” this CSS selector is used to allow us to add content before any element, so we set content to nothing, display to block, a fixed width and height that matches the dimensions of the lines background image, set position to absolute so we can set where this will be displayed relative to browser’s edges, set z-index to -2 to make this display under any other content, then I set it 10px from the top, 0px from the left and finally set the background image with no-repeat.

Now, we set the style for the links and paragraphs to match what we have in the layout. There’s also a style added called “.clear” and “.clearfix” and we use these two classes to clear any floated elements. Now we style the container class with 960px fixed width and margin to “0 auto” to align it to center horizontally. The header class is styled with a custom height. The featured slider class is styled with relative position which will allow absolute positioning of elements inside it to its edges. The portfolio class is styled with fixed height and width, overflow is set to hidden, position to relative, a background image with no-repeat and a fixed top margin. The content class is styled with a fixed top margin, a background image with no-repeat which will be representing the light behind the blog updates section and overflow to hidden.

Finally, we style the footer class with 100% width to take all the browsers width area, a fixed height, a background color, overflow is set to hidden, zero margins except from top, zero padding except from top, font set to Tahoma, a fixed font size and line height, a top solid border of 3px and an inset box shadow which is a CSS3 feature and it will represent the footer inner glow. The result should be the same as the image below.

Step 4 – Adding Content to Header

Now we need to add the logo, social icons, sign up and login buttons, menu items and search text box. Here's the HTML for the header section.

 <div class="container header">     <h1><a title="1stIdeas" href="#">1stIdeas</a>     <div>         <ul class="social_icons">             <li class="facebook"><a href="#" title="Facebook">Facebook</a></li>             <li class="twitter"><a href="#" title="Twitter">Twitter</a></li>             <li class="rss"><a href="#" title="RSS Feed">RSS Feed</a></li>         <!--<span class="hiddenSpellError" pre=""-->ul>         <ul class="header_links">             <li><a href="#" title="Sign Up Today" class="selected">Sign Up Today</a></li>             <li><a href="#" title="Client Login">Client Login</a></li>         <!--<span class="hiddenSpellError" pre=""-->ul>     </div>     <div class="main_menu">         <ul>             <li><a href="#" title="Home" class="selected">Home</a></li>             <li><a href="#" title="Services">Services</a></li>             <li><a href="#" title="About Us">About Us</a></li>             <li><a href="#" title="Blog">Blog</a></li>             <li><a href="#" title="Contact">Contact</a></li>         </ul>         <div class="search">             <input type="text" value="Search for something" />         </div>     </div>     <div class="slider_shadow"></div> </div>

I’ve added an <h1> with a link inside it to represent the logo. I also added three main divisions: one for the social icons and sign up and login buttons, one for the main menu and search text box and a third one to hold the featured slider background shadow image. Now lets add the CSS for the header content.

 .container.header {     height: 190px; }      .header .slider_shadow {         position: absolute;         margin: 0 auto;         margin-left: -20px;         width: 1000px;         height: 410px;         background: url(../images/slider_shadow.png) bottom center;         top: 100px;         z-index: -1;     }      .header h1 {         float: left;         margin: 40px 0 0 0;     }          .header h1 a {             display: block;             width: 164px;             height: 68px;             background: url(../images/header_images.png) no-repeat;             background-position: 0 0;             text-indent: -10000px;             overflow: hidden;         }      .header div {         float: right;         width: 260px;         margin: 36px 20px 0 0;     }      ul.social_icons {         margin: 0 0 0 0;         float: right;         clear: both;     }          ul.social_icons li {             list-style: none;             display: block;             float: left;             text-indent: -10000px;             margin: 0 0 0 5px;             background: url(../images/header_images.png) no-repeat;         }              ul.social_icons li a {                 display: block;                 width: 32px;                 height: 32px;                 background: transparent;             }              ul.social_icons li.facebook {                 background-position: -166px 0;             }              ul.social_icons li.twitter {                 background-position: -204px 0;             }              ul.social_icons li.rss {                 background-position: -240px 0;             }      .header ul.header_links {         margin: 36px 0 0 0;         float: right;     }          .header ul.header_links li {             list-style: none;             display: block;             float: left;             margin: 0 0 0 5px;             font-family: Segoe UI;             font-size: 12px;             line-height: 33px;             text-align: center;             text-transform: uppercase;         }              .header ul.header_links li a {                 display: block;                 color: #fff;                 text-decoration: none;                 text-shadow: 0 -1px 0 #1c2730;                 padding: 0 20px;                 border: 1px solid #2b3b48;                 border-bottom: 0px none;                 background: url(../images/header_button.jpg) repeat-x top;                 -moz-box-shadow: inset 1px 0 0 rgba(255,255,255,0.1),                                 inset -1px 0 0 rgba(255,255,255,0.1);                 -webkit-box-shadow: inset 1px 0 0 rgba(255,255,255,0.1),                                     inset -1px 0 0 rgba(255,255,255,0.1);                 box-shadow: inset 1px 0 0 rgba(255,255,255,0.1),                             inset -1px 0 0 rgba(255,255,255,0.1);             }              .header ul.header_links li a:hover, .header ul.header_links li a.selected {                 text-shadow: 0 -1px 0 #b58742;                 background: url(../images/header_button_h.jpg) repeat-x top;                 border-color: #ba8537;                 -moz-box-shadow: inset 1px 0 0 rgba(255,255,255,0.1),                                 inset -1px 0 0 rgba(255,255,255,0.1);                 -webkit-box-shadow: inset 1px 0 0 rgba(255,255,255,0.1),                                     inset -1px 0 0 rgba(255,255,255,0.1);                 box-shadow: inset 1px 0 0 rgba(255,255,255,0.1),                             inset -1px 0 0 rgba(255,255,255,0.1);             }      .header .main_menu {         width: 958px;         height: 52px;         display: block;         overflow: hidden;         margin: 0;         background: url(../images/main_menu.jpg) repeat-x;         border-left: 1px solid #2b3b48;         border-right: 1px solid #2b3b48;         position: relative;         -moz-box-shadow: inset -1px 0 0 rgba(255,255,255,0.1);         -webkit-box-shadow: inset -1px 0 0 rgba(255,255,255,0.1);         box-shadow: inset -1px 0 0 rgba(255,255,255,0.1);     }          .header .main_menu:before {             content: "";             position: absolute;             background: url(../images/main_menu_highlight.png) no-repeat;             background-position: 0 1px;             top: 0;             left: 0;             width: 958px;             height: 27px;             z-index: 0;         }          .header .main_menu ul {             float: left;             margin: 0;             position: relative;             z-index: 1;         }              .header .main_menu ul li {                 list-style: none;                 margin: 1px 0 0 0;                 float: left;                 font-family: Segoe UI;                 font-size: 16px;                 line-height: 45px;                 text-align: center;                 border-right: 1px solid #2b3b48;                 border-left: 1px solid #485d6c;             }                  .header .main_menu ul li a {                     color: #fff;                     display: block;                     padding: 0 20px;                     text-decoration: none;                     text-shadow: 0 -1px 0 #1c2730;                 }                      .header .main_menu ul li a:hover,                     .header .main_menu ul li a.selected {                         color: #afdfff;                         background: url(../images/main_menu_h.png) repeat-x top;                     }          .header .main_menu .search {             float: right;             margin: 10px 11px 0 0;             position: relative;             z-index: 1;         }              .header .main_menu .search:before {                 content: "";                 position: absolute;                 z-index: 2;                 width: 21px;                 height: 30px;                 background: url(../images/search_icon.png) no-repeat center center;                 left: 10px;             }              .header .main_menu .search input[type=text] {                 background: transparent url(../images/search_bg.jpg) repeat-x top;                 border: 0 none;                 border-left: 1px solid #2c3d4a;                 border-right: 1px solid #2c3d4a;                 color: #ccc;                 float: left;                 width: 210px;                 height: 30px;                 line-height: 30px;                 font-family: Myriad Pro;                 font-size: 12px;                 font-style: italic;                 padding: 0 0 0 40px;                 -moz-box-shadow: 1px 1px 0 #5f6f79; /* FF3.5+ */                 -webkit-box-shadow: 1px 1px 0 #5f6f79; /* Saf3.0+, Chrome */                 box-shadow: 1px 1px 0 #5f6f79;             }

I started by styling the slider shadow division to be absolutely positioned, margin set to “0 auto” to center horizontally, a negative left margin to position it perfectly, a fixed width and height, a non repeating background image, 100px from top and z-index set to be under the content but above the background. I styled the logo’s h1 to some basic settings with a background image for the logo and hidden text using text-indent value of -10000px which will hide the text when viewed only in browser and this has some SEO benefits.

Now, I styled the division holding the social icons, sign up and login buttons to float to the right with a fixed width, a top and right margins. The social icons unordered list is styled to have no list style, to be floated to the right, with floated list elements to the left, with hidden list element text and a background image using CSS Sprites technique to position the background for each link separately. I styled the header links division to float to the right and with a top margin. Now, list items inside the header links division is styled with no list style, float to the left, a left margin to act as a separator between links, font family to Segoe UI, a fixed font size, a fixed line height value that equals background height to center text vertically, text align to center and transform text to uppercase. The link inside each list item from header_links is styled with white text color, no text decoration, a text shadow which is a CSS3 feature, a fixed left and right padding, solid fixed border except on bottom, a horizontally repeating background image and finally an inset box shadow from left and right to represent left and right 1px glow. The hover and selected states of the link has a different text shadow color, background image, border color and inset box shadows colors.

The main menu division is styled with fixed width and height, hidden overflow, no margins, a horizontally repeating background image, left and right solid border, relative position to allow absolutely positioned child elements to its edges and an inset box shadow. We also created a rule for main menu before selector with no content, position set to absolute, a non repeating background image for the main menu effect, 0px from top and left, a fixed height and width and z-index set to 0 to be under main menu items. The main menu list is floated to left, position is set to absolute, no margins and z-index to 1 to be on top of main menu’s before selector. Main menu list items and links is styled with no list style, floated to left, custom font family and font size, center text alignment, left and right borders, text shadow and finally the hover and selected states is styled with a horizontally repeating background image and a different text color. The result should be as the image below.

Step 5 – Adding Featured Slider Content, Style and JavaScript

Now, we are going to add the slider and for this I am going to use an already implemented script, which is Slidesjs. Slidejs. will be used for this slider and for the portfolio slider. I modified the script to make it suit our layout and now here's the HTML for the featured slider content.

 <div id="featured_slider" class="container featured_slider"> 	<div class="slides_container"> 		<div>             <img src="images/image.jpg" alt="" /> 			<div class="slide_text">                 <h4>Design Portfolio</h4>                 <p>                     Suspendisse vitae nunc mi, sit amet scelerisque nulla. Pellentesque auctor ante in elit tristique imperdiet.                 </p>             </div> 		</div> 		<div>             <img src="images/image.jpg" alt="" /> 			<div class="slide_text">                 <h4>Design Portfolio</h4>                 <p>                     Suspendisse vitae nunc mi, sit amet scelerisque nulla. Pellentesque auctor ante in elit tristique imperdiet.                 </p>             </div> 		</div> 		<div>             <img src="images/image.jpg" alt="" /> 			<div class="slide_text">                 <h4>Design Portfolio</h4>                 <p>                     Suspendisse vitae nunc mi, sit amet scelerisque nulla. Pellentesque auctor ante in elit tristique imperdiet.                 </p>             </div> 		</div> 	</div> </div>

Now, by looking at the code you will see that there’s the main division with id “featured_slider” which contains another division with class name “slides_container” that will hold all the slides. Finally, there’s three similar divisions with an image, an <h4> and paragraph inside a division with class name “slider_text”. Now let's add the CSS style for the slider content and script.

 .container.featured_slider {     position: relative; }      .featured_slider .slides_container { 	    width: 960px; 	    display: none;     }          .featured_slider .slides_container div { 	        width: 660px; 	        height: 300px; 	        display: block;         }          .featured_slider .slides_container .slide_text {             position: absolute;             bottom: 0;             right: 0;             height: 80px;             background: url(../images/slider_text_bg.png) repeat-y left;         }              .featured_slider .slides_container .slide_text h4 {                 font-family: Segoe UI;                 font-size: 16px;                 font-weight: normal;                 line-height: 20px;                 color: #fff;                 margin: 10px 0 6px 20px;             }              .featured_slider .slides_container .slide_text p {                 font-family: Myriad Pro;                 font-size: 13px;                 line-height: 15px;                 color: #ccc;                 margin: 0 0 0 20px;                 padding: 0;                 max-width: 400px;             }      .featured_slider .pagination { 	    list-style: none; 	    margin: 0; 	    padding: 0;         position: absolute;         top: 0;         right: 0;     }          .featured_slider .pagination li a {             width: 300px;             height: 100px;             display: block;             text-indent: -10000px;             overflow: hidden;             background: url(../images/featured_slider_nav.jpg) no-repeat;         }                  .featured_slider .pagination li a[href="#0"]:hover,                 .featured_slider .pagination li.current a[href="#0"] {                     background-position: -300px 0;                 }              .featured_slider .pagination li a[href="#1"] {                 background-position: 0 -100px;             }                  .featured_slider .pagination li a[href="#1"]:hover,                 .featured_slider .pagination li.current a[href="#1"] {                     background-position: -300px -100px;                 }              .featured_slider .pagination li a[href="#2"] {                 background-position: 0 -200px;             }                  .featured_slider .pagination li a[href="#2"]:hover,                 .featured_slider .pagination li.current a[href="#2"] {                     background-position: -300px -200px;                 }

The slides_container has a fixed width with display set to none, which is required by the script. Now, each slide division inside the slides_container is styled with a fixed width and height and display is set to block. The slide_text division is styled with absolute position so we can place it absolutely to the featured_slider division, 0px from bottom and right, a fixed height with a vertically repeating background image to act as a transparent overlay behind the text. The h4 is styled with font family set to Segoe UI, a fixed font size and line height, a normal font weight, white text color and some margins for spacing. The paragraph is styled with a different font family, font size, line height, with text color set to #ccc, a left margin, zero padding and a maximum width of 400px.

Now the rest of this code is to style the pagination which is automatically generated by the script. The pagination container is styled with no list item because it is assigned to a ul tag, no margin and padding, absolute position and 0px from top and right. The links inside each pagination list item is styled with fixed width and height, text indent set to -10000px to hide text in the browser, overflow to hidden and a CSS sprites background image. Now to style each list item number separately we use CSS Selectors, and in each one we match the href attribute to set a custom background position for normal, hover and current states.

Now let's add the required jQuery script in the header. You can find the script file in this tutorial source file or from the jQuery Scrollable script page. The HTML head section should be like this (which will be also used by the portfolio slider).

 <head>     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />     <title>1stIdeas: Stylish Design Agency Website</title>     css" href="styles/reset.css" rel="stylesheet" media="all" />     css" href="styles/tutorial.css" rel="stylesheet" media="all" />     <script type="text/<span class="><!--mce:0--></script>     <script type="text/<span class="><!--mce:1--></script> </head>

Finally, we need to add the JavaScript code that will allow the slider to work in our layout. You should add this script just before the closing tag of the body. Here's the JavaScript.

 <script type="text/javascript">     $(function () {         $('#featured_slider').slides({             preload: true,             effect: 'fade'         });     }); </script>

Now our layout should look like this.

Step 6 – Adding Portfolio Slider Content, Style and JavaScript

Here's the HTML for the portfolio slider content.

     <div class="container portfolio">         <h2>             Featured Project</h2>         <div id="portfolio_slides">             <div class="slides_container">                 <div>                     <div class="item">                         <a href="#" title="Portfolio Item">                             <img src="images/portfolio_1.jpg" alt="" />                     </div>                     <div class="item">                         <a href="#" title="Portfolio Item">                             <img src="images/portfolio_2.jpg" alt="" />                     </div>                     <div class="item">                         <a href="#" title="Portfolio Item">                             <img src="images/portfolio_3.jpg" alt="" />                     </div>                     <div class="item">                         <a href="#" title="Portfolio Item">                             <img src="images/portfolio_4.jpg" alt="" />                     </div>                 </div>                 <div>                     <div class="item">                         <a href="#" title="Portfolio Item">                             <img src="images/portfolio_1.jpg" alt="" />                     </div>                     <div class="item">                         <a href="#" title="Portfolio Item">                             <img src="images/portfolio_2.jpg" alt="" />                     </div>                     <div class="item">                         <a href="#" title="Portfolio Item">                             <img src="images/portfolio_3.jpg" alt="" />                     </div>                     <div class="item">                         <a href="#" title="Portfolio Item">                             <img src="images/portfolio_4.jpg" alt="" />                     </div>                 </div>                 <div>                     <div class="item">                         <a href="#" title="Portfolio Item">                             <img src="images/portfolio_1.jpg" alt="" />                     </div>                     <div class="item">                         <a href="#" title="Portfolio Item">                             <img src="images/portfolio_2.jpg" alt="" />                     </div>                     <div class="item">                         <a href="#" title="Portfolio Item">                             <img src="images/portfolio_3.jpg" alt="" />                     </div>                     <div class="item">                         <a href="#" title="Portfolio Item">                             <img src="images/portfolio_4.jpg" alt="" />                     </div>                 </div>             </div>         </div>     </div>

It has almost the same structure as the featured slider, we have a main container and inside it is a division with a unique id for the portfolio slider and inside it is the slides container. The main difference here is that each slide has four divisions each with class name item, a link and an image inside it. Now let's add the CSS style for the slider content and script.

 .container.portfolio {     height: 255px;     width: 963px;     overflow: hidden;     position: relative;     background: url(../images/portfolio_slider_bg.png) no-repeat bottom center;     margin-top: 40px; }      .portfolio h2 {         position: absolute;         bottom: 50px;         left: 45px;         height: 16px;         width: 161px;         background: url(../images/headers_text.png) no-repeat;         background-position: 0px 0px;         text-indent: -10000px;         z-index: 10;     }      .portfolio .slides_container { 	    width: 960px; 	    display: none;     }          .portfolio .slides_container div { 	    width: 960px;             height: 255px; 	    display: block;             overflow: hidden;         }          .portfolio .slides_container div.item {             float: left;             width: 150px;             height: 166px;             margin: 0 45px;             overflow: hidden;         }              .portfolio .slides_container div.item a {                 height: 155px;                 display: block;                 background: url(../images/portfolio_shadow.png) no-repeat;                 background-position: center -4px;             }      .portfolio .pagination {         list-style: none; 	margin: 0; 	padding: 0;         position: absolute;         z-index: 100;         top: 190px;         right: 45px;     }         .portfolio .pagination li {             float: left;             margin: 0;             padding: 0;         }              .portfolio .pagination li a {                 width: 20px;                 height: 20px;                 display: block;                 margin: 0 0 0 10px;                 text-indent: -10000px;                 background: url(../images/portfolio_bullets.png) no-repeat;                 background-position: -70px -9px;             }                  .portfolio .pagination li a:hover {                     background-position: -39px -9px;                 }                  .portfolio .pagination li.current a {                     background-position: 0px 0px;                     height: 37px;                     width: 37px;                     margin: -9px -7px 0 1px;                 }

First, we style h2 with absolute position, 50px from bottom, 45px from left, fixed height and width, a negative text indent to hide text, z-index set to 10 to be on top of all content and finally a background image from a CSS sprites which contains all the headers images. Now the slides_container and the slide division is the same as in the featured slider.

Now each item inside the slide has a fixed height and width, floating to left, a left and right margins and overflow set to hidden. The link inside each item has a fixed height and a background image to represent the shadow under each portfolio image. The pagination container is styled with no list style, zero margin and padding, absolute position, z-index set to 100, 190px from top and 45px from right. The list item is styled to float to the left with zero margin and padding. Finally, the link is styled with fixed height and width, a left margin, a negative text indent, a background CSS sprite image with a background position. The hover and current states have some different styles to display the part we want form the CSS sprite.

Finally, we need to add the JavaScript code that will allow the slider to work on our layout. You should add this script just before the closing tag of the body underneath the script we added for the featured slider. Here's the JavaScript.

 $(function () {     $('#portfolio_slides').slides({         preload: true     }); });

Now our layout should look like this.

Step 7 – Adding Main Content and Style

Now, let’s add the HTML content for “About 1stIdeas”, “Blog Updates”, “Client Testimonials” and “Our Services”.

 <div class="container content">     <div class="left">         <h2>             About 1stIdeas</h2>         <p>             Fusce pretium dictum massa malesuada eleifend. Mauris ac hendrerit sem. In eros             erat, adipiscing a congue eu, placerat a enim. Morbi eu leo odio. Nam placerat aliquet             nibh, eu varius enim pellentesque in. Pellentesque fermentum vestibulum justo, at             feugiat velit varius et. <a href="#">read more</a>         </p>         <div class="clear">         </div>         <div class="testimonials">             <h2>                 Client Testimonials</h2>             <div class="testimonial">                 <h4>                     <img src="images/image_1.jpg" alt="" />                     Michael John O. Burns <a href="#">www.burnstudio.deviantart.com</a>                 </h4>                 <p>                     Morbi eu leo odio. Nam placerat aliquet nibh, eu varius enim pellentesque in. Pellentesque                     fermentum vestibulum justo, at feugiat velit varius et. <a href="#">read more</a>                 </p>                 <div class="shadow">                 </div>             </div>         </div>         <div class="services">             <h2>                 Our Services</h2>             <ul>                 <li>WebDesign<br />                     Sed fermentum rutrum odio secleio                 <li class="second">XHTML - CSS<br />                     Sed fermentum rutrum odio secleio                 <li class="third">Vector Art<br />                     Sed fermentum rutrum odio secleio             </ul>         </div>     </div>     <div class="right">         <h2>             Blog Updates</h2>         <div class="posts">             <p>                 <img src="images/image_2.jpg" alt="" />                 <a class="title" href="#">Vivamus dignissim risus</a> <span class="date">March 31, 2011</span>                 non dolor convallis nec lacinia purus tempor. Cras auctor felis Nulla quam urna,                 mattis vitae hendrerit vitae, tincidunt non lectus. Duis consequat augue tortor,                 et facilisis tortor.                  <a href="#" title="Read More" class="read_more">Read More</a>             </p>             <p>                 <img src="images/image_2.jpg" alt="" />                 <a class="title" href="#">Vivamus dignissim risus</a> <span class="date">March 31, 2011</span>                 non dolor convallis nec lacinia purus tempor. Cras auctor felis Nulla quam urna,                 mattis vitae hendrerit vitae, tincidunt non lectus. Duis consequat augue tortor,                 et facilisis tortor.                  <a href="#" title="Read More" class="read_more">Read More</a>             </p>             <div class="shadow">             </div>         </div>     </div> </div>

I divided the content with two divisions one with a class name “left” which will contain “About”, “Testimonials” and “Services”. The other with class name “right” which will contain “Blog Updates.” The about content has an h2 and a paragraph, the testimonials section has a containing division with an h2 and a main division with class name “testimonial” which contains an h4 and a paragraph and then a division for the shadow. The services content has an h2 and an unordered list. Finally, the right division has an h2 and a main division with class name “posts” which contains paragaph with image, text and links. Now let's add the CSS style for the content.

 .container.content {     margin-top: 36px;     background: url(../images/content_light.png) no-repeat;     background-position: 473px -20px;     overflow: hidden; }      .content h2 {         height: 15px;         background: url(../images/headers_text.png) no-repeat;         text-indent: -10000px;         margin: 0 0 20px 0;     }          .content p a {             font-size: 12px;             font-style: italic;             padding: 0 3px;         }      .content .left {         float: left;         width: 600px;         margin: 0 0 0 20px;     }          .content .left h2 {             background-position: 0px -17px;             width: 141px;             margin-bottom: 30px;         }          .content .left p {             line-height: 24px;         }              .content .left .testimonials {                 margin: 60px 0 0 0;                 float: left;                 width: 290px;             }                  .content .left .testimonials h2 {                     background-position: 0 -49px;                     width: 183px;                     margin-bottom: 25px;                 }                  .content .left .testimonials .testimonial {                     position: relative;                     min-height: 199px;                     padding: 20px;                     margin-bottom: 18px;                     background: #34abe1;                     background: -moz-linear-gradient(left, #34abe1 0%, #2792c3 100%);                     background: -webkit-gradient(linear, left top, right top, color-stop(0%,#34abe1), color-stop(100%,#2792c3));                     background: -webkit-linear-gradient(left, #34abe1 0%,#2792c3 100%);                     background: -o-linear-gradient(left, #34abe1 0%,#2792c3 100%);                     background: -ms-linear-gradient(left, #34abe1 0%,#2792c3 100%);                     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#34ABE1', endColorstr='#2792C3',GradientType=1 );                     background: linear-gradient(left, #34abe1 0%,#2792c3 100%);                 }                      .content .left .testimonials .testimonial h4 {                         font-family: Myriad Pro;                         font-size: 13px;                         font-weight: normal;                         text-transform: uppercase;                         height: 50px;                         overflow: hidden;                     }                          .content .left .testimonials .testimonial h4 img {                             float: left;                             margin: 0 18px 0 0;                         }                          .content .left .testimonials .testimonial h4 a {                             text-transform: lowercase;                         }                      .content .left .testimonials .testimonial p {                         font-style: italic;                         text-align: justify;                     }                      .content .shadow {                         background: url(../images/box_shadow.png) no-repeat right bottom;                         width: 290px;                         height: 18px;                         position: absolute;                         bottom: -18px;                         right: 0px;                         z-index: -1;                     }              .content .left .services {                 float: left;                 width: 290px;                 margin: 60px 0 0 20px;             }                  .content .left .services h2 {                     background-position: 0 -65px;                     width: 119px;                     margin-bottom: 25px;                 }                  .content .left .services ul {                     margin: 0;                     border-bottom: 1px solid #455865;                 }                      .content .left .services ul li {                         list-style: none;                         margin: 0;                         display: block;                         height: 60px;                         padding: 18px 0 0 80px;                         border-left: 3px solid #192229;                         border-bottom: 1px solid #192229;                         border-top: 1px solid #455865;                         background: url(../images/service_icons.png) no-repeat;                         background-position: 10px 0px;                         font-family: Segoe UI;                         font-size: 18px;                         line-height: 18px;                         text-transform: uppercase;                     }                          .content .left .services ul li:first-child {                             border-top: 0 none;                         }                          .content .left .services ul li span {                             color: #fceba3;                             font-family: Myriad Pro;                             font-size: 12px;                             line-height: 15px;                             text-transform: none;                         }                      .content .left .services ul li.second {                         background-position: 10px -80px;                     }                      .content .left .services ul li.third {                         background-position: 10px -160px;                     }      .content .right {         float: left;         width: 320px;         margin: 0 0 0 20px;     }          .content .right h2 {             background-position: 0px -33px;             width: 126px;             margin-bottom: 17px;         }          .content .right .posts {             background: #151d23;             padding: 30px 25px 22px 20px;             font-family: Myriad Pro;             position: relative;         }              .content .right .posts p {                 font-size: 12px;                 line-height: 18px;                 text-align: justify;                 overflow: hidden;             }                  .content .right .posts p:first-child {                     margin: 0 0 25px 0;                 }                  .content .right .posts p img {                     float: left;                     margin: 0 12px 0px 0;                 }                  .content .right .posts p a.title {                     color: #afdfff;                     text-transform: uppercase;                     font-size: 13px;                     font-style: normal;                     line-height: 13px;                     text-decoration: none;                     margin: 0 0 6px 0;                     display: block;                 }                      .content .right .posts p a.title:hover {                         background: transparent;                         color: #afdfff;                         text-decoration: underline;                     }                  .content .right .posts p span.date {                     color: #6d6c6c;                     font-style: normal;                     line-height: 12px;                     margin: 0 0 8px 0;                     display: block;                 }                  .content .right .posts p a.read_more {                     float: left;                     clear: both;                     font-size: 11px;                     line-height: 11px;                     color: #fff;                     text-transform: uppercase;                     text-decoration: none;                     font-style: normal;                     margin: 20px 0 0 0;                     padding: 7px 13px;                     background: #2792c3;                     background: -moz-linear-gradient(top, #2792c3 0%, #34abe1 100%);                     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2792c3), color-stop(100%,#34abe1));                     background: -webkit-linear-gradient(top, #2792c3 0%,#34abe1 100%);                     background: -o-linear-gradient(top, #2792c3 0%,#34abe1 100%);                     background: -ms-linear-gradient(top, #2792c3 0%,#34abe1 100%);                     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2792C3', endColorstr='#34ABE1',GradientType=0 );                     background: linear-gradient(top, #2792c3 0%,#34abe1 100%);                 }

The CSS code may seem very long and difficult but when you look closely you’ll soon see that it’s only positioning and alignment. I am going to walk you through this code.

I started by setting the style for all h2 elements with a fixed height, a background CSS sprite image, a negative text indent and a bottom margin, now all other styles for h2 elements is written to change background position, width and margins. Next, I set the style for all the links inside any paragraph with fixed font size, an italic style and a left and right padding.

Now, the CSS style for the left division starts by first styling the left division with a left margin, a fixed width and floating to left. The testimonials division style is set with top margin, floating to left and a fixed width. The testimonial division inside the testimonials has a relative position, with a fixed min-height to make it look nice, a 20px padding, a bottom margin that matches the shadow image height, a gradient background and you can use this CSS Gradient generator to help you create this. Then, we style the h4 element with font family, font size and normal font weight, text transform to uppercase, a fixed height and overflow set to hidden. Then we style the image and the link inside the h4 element and the paragraph with simple styles.

Now, you notice that the shadow class name is styled inside the content class name directly and that’s because it will be used for both the testimonial shadow and the blog updates shadow. Now the services division is floated to left with a fixed width and a margin from top and left. The unordered list is styled with zero margins and a solid 1px bottom border. List items is styled with no list style, zero margins, fixed height, a top and left padding to make room for the background image, borders from left bottom and top, a CSS sprites background image which is positioned  using unique classes added to list items, a font family and fixed font size and line height with text transform set to uppercase. The first child of list items has no border from the top.

Next, we style the right division with float to left, fixed width and a left margin. The posts division is styled with a background color, padding, font family and relative position. The paragraphs have a simple styling to set font size, line height and text alignment. The same for the images. Next, we style the links with class name title with custom color, uppercase text transform, font size and normal style, fixed line height with no text decoration and a bottom margin. The hover state is styled with different color and an underline text decoration. The date class name is simply styled with color, font style, line height and margin. Finally, read more link is styled with gradient background, left floating, fixed font size and line height, white text color, uppercase text transformation, no text decoration, normal style and some margins and padding.

Now our layout should look like this.

Step 8 – Adding Footer Content and Style

Now let's add the content for the footer, here's the HTML for the footer.

 <div class="footer">     <div class="container">         <div class="links">             <ul>                 <li class="title">Quick Links</li>                 <li><a href="#">Home</a></li>                 <li><a href="#">Services</a></li>                 <li><a href="#">Portfolio</a></li>                 <li><a href="#">Blog</a></li>                 <li><a href="#">About Us</a></li>                 <li><a href="#">Contact Us</a></li>             </ul>             <ul>                 <li class="title">Testimonials</li>                 <li><a href="#">Client Testimonials</a></li>                 <li><a href="#">Other Testimonials</a></li>                 <li class="title">Login</li>                 <li><a href="#">Client Login</a></li>                 <li><a href="#">Register</a></li>             </ul>             <ul>                 <li class="title">Services Offered</li>  	<li><a href="#">Web / Grahpic Design</a></li>                 <li><a href="#">PSD - CSS Conversion</a></li>                 <li><a href="#">Vector Art</a></li>                 <li><a href="#">Packaging</a></li>                 <li><a href="#">Branding</a></li>             </ul>             <ul>                 <li class="title">What New On Blog</li>  	<li><a href="#">Web / Grahpic Design</a></li>                 <li><a href="#">PSD - CSS Conversion</a></li>                 <li><a href="#">Vector Art</a></li>                 <li><a href="#">Packaging</a></li>                 <li><a href="#">Branding</a></li>             </ul>             <ul class="last">                 <li class="title">Social</li>                 <li class="twitter"><a href="#" title="Twitter">Twitter</a></li>                 <li class="facebook"><a href="#" title="Facebook">Facebook</a></li>                 <li class="rss"><a href="#" title="RSS">RSS</a></li>             </ul>         </div>         <div class="footer_logo">             <img src="images/footer_logo.png" alt="" />             <ul class="social_icons">                 <li class="facebook"><a href="#" title="Facebook">Facebook</a></li>                 <li class="twitter"><a href="#" title="Twitter">Twitter</a></li>                 <li class="rss"><a href="#" title="RSS Feed">RSS Feed</a></li>             </ul>         </div>         <div class="clear"></div>         <div class="copyright">             © 2010 - 2011 1stIdeas. All rights reserved.         </div>     </div> </div>

The footer has three main divisions one with class name “links” the other with class name “footer_logo” and the last one with class name “copyright”. The links division has unordered lists with normal list items and some list items with class name “title.” The footer logo division has an image and a unordered list item for social icons that is exactly similar to the one in the header both in HTML and CSS style. Now let's add the CSS style for the footer content.

 .footer {     width: 100%;     height: 300px;     background: #151d23;     overflow: hidden;     margin: 50px 0 0 0;     padding: 35px 0 0 0;     font-family: Tahoma;     font-size: 12px;     line-height: 18px;     border-top: 3px solid #0e1418;     -moz-box-shadow: inset -1px 0px 0px #2c3339;     -webkit-box-shadow: inset -1px 0px 0px #2c3339;     box-shadow: inset 0px 1px 0px #2c3339; }      .footer a {         color: #cccccc;         text-decoration: none;     }          .footer a:hover {             background: transparent;             text-decoration: underline;         }      .footer .container .links {         float: left;         width: 760px;     }          .footer .container .links ul {             float: left;             margin: 0;             padding: 0 35px 0 0;             border-right: 1px solid #486277;             min-height: 155px;             list-style: none;         }              .footer .container .links ul.last {                 border: 0 none;                 padding: 0;             }              .footer .container .links ul:first-child li {                 margin-left: 0;             }              .footer .container .links ul li {                 margin-left: 30px;             }              .footer .container .links ul li.title {                 font-size: 13px;                 font-weight: bold;                 color: #afdfff;                 line-height: normal;                 margin-top: 25px;                 margin-bottom: 12px;             }              .footer .container .links ul li.title:first-child {                 margin-top: 0;             }      .footer .container .footer_logo {         float: right;         width: 125px;     }          .footer .container .footer_logo img {             float: left;             margin: 0 0 20px 0;         }      .footer .container .copyright {         color: #afdfff;         font-weight: bold;         margin: 30px 0 0 0;     }

The links inside the footer are styled with custom color and no text decoration, with a hover state that has a transparent background and underline text decoration. The links division is floated to left with a fixed width. The unordered lists is styled with floating to left, zero margin, right margin, solid 1px right border, a min-height to make it look even in heights and no list style. The unordered list with class last has no border and zero padding.  The list items has 30px left margin. The list items class name title is styled with bigger font size, bold font weight, custom text color, normal line height, top and bottom margin. The first child has no top margin.

The footer logo division is floated to right with fixed width. The image is styled with left floating and bottom margin. Finally, the copyright division is styled with custom color, bold font and top margin.

If you followed this tutorial correctly then you should have a full working HTML/CSS layout from a PSD that looks exactly like this.

Conclusion

So that's it. In this tutorial you learned how to convert a layout from PSD to a fully working HTML/CSS website, don't forget to validate and check for browser compatibility (the layout will not validate because of JavaScript & CSS3 styles, remove both to validate properly). If there is a part of this tutorial you didn't understand, or you have a better technique, feel free to share with everyone by commenting below.

Comments (0)

Post a Comment

Subscribe to: Post Comments (Atom)