In this article you will learn how to convert THISandTHAT: Vintage Website Template from PSD to HTML in a detailed step-by-step tutorial. You will learn how to create this layout using CSS styles and some CSS3 styles. 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).
Step 1 – Preparation
You will 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.5+, Chrome 8+, Opera 10, 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 freebie article, 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:
- The layout has a repeatable background pattern image.
- The layout has 4 main sections: header, intro, content and footer
- The header, intro and footer sections each has a full page width with a repeatable background image.
- The content section has a fixed width.
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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>THIS and THAT: Free Vintage Website Template by Ahmad Hania Blog</title>
<link type="text/css" href="styles/reset.css" rel="stylesheet" media="all" />
<link type="text/css" href="styles/text.css" rel="stylesheet" media="all" />
<link type="text/css" href="styles/style.css" rel="stylesheet" media="all" />
</head>
<body>
<a name="top"></a>
<div class="header">
<div class="header_container">
header goes here.
</div>
</div>
<div class="intro">
<div class="intro_container">
intro content goes here.
</div>
</div>
<div class="content">
main content goes here.
</div>
<div class="footer">
<div class="footer_container">
footer content goes here.
</div>
</div>
</body>
</html>
Here we linked all the CSS style files in the header section. In the body we’ve added four main divisions each with a unique class name and some content inside. Now let’s add the general CSS styles as follows (all CSS should be added in style.css file):
body {
color: #333;
font-size: 13px;
font-family: Arial;
background: #f5f5ed url(../images/bg.jpg) repeat left top;
text-shadow: 1px 1px 0px #fff;
}
body.alternate_bg {
background: #f5f5ed url(../images/alternate_bg.jpg) repeat;
}
*::-moz-selection {
background: #e53d32 none repeat scroll 0 0;
color: #fff;
}
*::selection {
background: #e53d32 none repeat scroll 0 0;
color: #fff;
}
a, a:link, a:active, a:focus {
color: #e53d32;
outline: 0 none;
}
a:hover {
text-decoration: overline underline;
}
a:visited {
opacity: 0.5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
}
p {
text-align: justify;
line-height: 15.2px;
padding: 5px 0;
margin: 0 0 5px 0;
}
h1, h2, h3, h4, h5, h6, ul, ol {
font-family: Lucida Fax;
margin-bottom: 10px;
font-weight: normal;
}
h2 {
font-size: 34px;
line-height: 34px;
margin-bottom: 0px;
}
img {
border: 4px solid #edede3;
display: block;
margin: 0 auto;
}
img.float_left, img.float_right {
margin: 10px;
}
We’ve added some general styles that will keep our template as we want. I’ve set font type, color, shadow and size in the body style along with a repeating background position. You should also notice that there’s another body class “alternate_bg” which only changes the repeating background to the alternate one you have in the PSD. Then we’ve added some other styles for selection, links, paragraphs, headers and images. Now let’s add the CSS style for our basic HTML structure.
.header {
width: 100%;
height: 80px;
background: transparent url(../images/header_bg.png) repeat-x top;
overflow: hidden;
position: relative;
z-index: 4;
}
.header .header_container {
width: 980px;
margin: 0 auto;
height: 80px;
}
.intro {
background: #fff url(../images/intro_bg.jpg) repeat-x top;
position: relative;
z-index: 1;
width: 100%;
height: 186px;
margin: -17px 0 0 0;
}
.intro .intro_container {
width: 980px;
height: 186px;
margin: 0 auto;
}
.content {
width: 980px;
margin: 0 auto;
margin-top: 20px;
overflow: hidden;
}
.footer {
width: 100%;
height: 300px;
background: #323232 url(../images/footer_bg.jpg) repeat-x top;
overflow: hidden;
}
.footer .footer_container {
width: 980px;
height: 300px;
overflow: hidden;
margin: 0 auto;
padding: 40px 0 0 0;
color: #fff;
font-size: 12px;
line-height: 14px;
text-shadow: 0 0 0 #333;
}
Let’s start with the header class name which is styled with full width, fixed height, a horizontally repeating background image, overflow set to hidden, position set to relative so we can use and apply z-index which is set to 4. The header_container has a fixed width and height with margins “0 auto” to center it horizontally in the page. The intro class name is styled with a repeating background image, relative position, z-index set to 1, full page width, fixed height and a top margin of -17px. The intro_container class name has the same style as the header container with height value changed, this also applies for the content class name with an added overflow set to hidden. The footer class name is styled with full page width, fixed height, a horizontally repeating background image and overflow set to hidden. Finally, the footer_container class has same styles as other containers but height value is changed, overflow set to hidden, top padding of 40px, font size set to 12px, line height set to 14px and text shadow is switched off. The result should be the same as the image below.
Step 4 – Adding and Styling Header Content
Now, that we have a basic HTML layout we can start by filling the main divisions with the content we want. The header content is added inside the division with class name header_container. Basically, it’s an <h1> tag with link inside it with is used for the logo, an unordered list which will display the main menu and a division with links which will hold the social icons. Here’s the HTML markup for the header division.
<div class="header">
<div class="header_container">
<h1 class="logo">
<a href="#" title="THIS and THAT: Free Vintage Website Template by Ahmad Hania Blog">THIS and THAT</a>
</h1>
<ul class="main_menu">
<li><a href="#" title="Portfolio">Portfolio</a></li>
<li><a href="#" title="About">About</a></li>
<li><a href="#" title="Contact">Contact</a></li>
<li><a href="#" title="Blog">Blog</a></li>
</ul>
<div class="social_icons">
<a href="#" title="Twitter" class="twitter">Twitter Profile</a>
<a href="#" title="Facebook" class="facebook">Facebook Profile</a>
</div>
</div>
</div>
Now, we need to add the CSS styles for the header content. Here’s the CSS code.
.header .header_container h1.logo {
text-indent: -10000px;
float: left;
width: 165px;
height: 30px;
background: url(../images/logo.png) no-repeat center center;
margin: 20px 0 0 0;
}
.header .header_container h1.logo a {
display: block;
}
.header .header_container ul.main_menu {
float: left;
margin: 22px 0 0 40px;
padding: 0 3px 3px 0;
overflow: hidden;
}
.header .header_container ul.main_menu li {
font-size: 14px;
font-weight: bold;
font-style: italic;
font-family: Arial;
text-transform: uppercase;
list-style: none;
margin: 0 0 0 10px;
float: left;
}
.header .header_container ul.main_menu li a {
color: #fff;
text-shadow: 1px 1px 1px #d33b30;
text-decoration: none;
display: block;
padding: 2px 10px;
}
.header .header_container ul.main_menu li a:hover,
.header .header_container ul.main_menu li a.selected {
background-color: #d72f26;
-moz-box-shadow: 1px 1px 2px #f7968f;
-webkit-box-shadow: 1px 1px 2px #f7968f;
box-shadow: 1px 1px 2px #f7968f;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
background-image: linear-gradient(top, #d72f26, #d93228);
}
.header .header_container .social_icons {
float: right;
width: 56px;
height: 24px;
background-color: #d72f26;
-moz-box-shadow: 1px 1px 2px #f7968f;
-webkit-box-shadow: 1px 1px 2px #f7968f;
box-shadow: 1px 1px 2px #f7968f;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
margin: 22px 14px 0 0;
background-image: linear-gradient(top, #d72f26, #d93228);
}
.header .header_container .social_icons a {
text-indent: -10000px;
width: 14px;
height: 17px;
float: left;
margin: 5px 5px 0 15px;
}
.header .header_container .social_icons a.twitter {
background: url(../images/twitter.png) no-repeat center center;
}
.header .header_container .social_icons a.facebook {
background: url(../images/facebook.png) no-repeat center center;
margin-left: 0px;
margin-right: 0px;
}
The h1 with class name logo is styled with text indent set to -10000px which will hide the text when the page is displayed but will be available for search engines to find it which will benefit your SEO, float set to left, fixed height and width to match the logo dimensions, a non repeating background for the logo and a top margin of 20px. For the link inside h1 we simply set display to block to take all the logo space.
The main_menu class or unordered list is styled with float set to left, a top and left margins, right and bottom margins and overflow set to hidden. for the main menu list items we set font size, weight, style and font type then we set text transform to uppercase, list style to none, a left margin to make horizontal space between menu items and float to left. We then set the links styles for the normal, hover and selected states. We’ve added text shadow some padding for the normal state. Set box shadow, rounded corners and gradient background styles for hover and selected states.
The social_icons class is style with float set to right, fixed height and width, background color set to #D72F26, box shadow, border radius and gradient background similar to the one’s we used in the main menu links with a fixed top and right margins. Now the links is styled with negative text indent value, fixed width and height, float to left and some margins for spacing between icons. To add the icon images we’ve added a unique class name for each social icon with its relative icon image as background.
The result should be as the image below.
Step 5 – Adding and Styling Intro Content
Now, let’s add the HTML markup for the Intro content. This will be added inside the division with class name intro_container and it consists of two divisions one with class name ribbon and the other with class name intro_content with an h2 inside and some paragraph with text.
<div class="intro">
<div class="intro_container">
<div class="ribbon">Huge Savings</div>
<div class="intro_content">
<h2>
Hello
</h2>
<p class="italic">
“ Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit accumsan ipsum at faucibus. Nunc vel eros orci. Vivamus dictum congue metus, a tincidunt metus interdum id. Maecenas suscipit sapien in erat consequat sed vestibulum velit ornare. ” <a href="#" class="no_decoration normal">- Lorem</a>
</p>
</div>
</div>
</div>
Now, let’s add the CSS code to style the intro content.
.intro .intro_container .ribbon {
width: 89px;
height: 162px;
background: url(../images/ribbon.png) no-repeat center top;
display: block;
float: right;
text-indent: -10000px;
}
.intro .intro_container .intro_content {
padding: 65px 119px 0 0;
}
The above CSS code simply sets the ribbon style to fixed height and width, a non repeating background image, display set to block, float to right and negative text indent to hide text. The intro_content is style with some padding from top and right. The result should be as the image below.
Step 6 – Adding Main Content Markup and Style
Now, before adding the markup for the content you may think that it is complicated but it isn’t. It consists of some divisions with class name either one_column or two_column which is obvious what they do from their names and each division has image, links or other normal HTML markup and content.
<div class="content">
<div class="one_column">
<h2>Projects</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit accumsan ipsum at faucibus. Nunc vel eros orci. Vivamus dictum congue metus.
<br /><br />
A tincidunt metus interdum id. <a href="#">Maecenas</a> suscipit sapien in erat consequat sed vestibulum velit of this
rnare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit accumsan ipsum at faucibus. Nunc vel eros orci. Vivamus dictum congue metus ipsum dolor sit amet.
</p>
</div>
<div class="two_columns no_margin">
<div class="thumb_link">
<a href="#">
<img src="images/image1.jpg" alt="" />
</a>
<a href="#" class="full_preview" title="Full Preview">Full Preview</a>
<span class="image_ribbon">
<span class="title">title here</span>
</span>
</div>
</div>
<div class="clear"></div>
<div class="one_column">
<div class="thumb_link margin">
<a href="#">
<img src="images/image2.jpg" alt="" />
</a>
<span class="image_ribbon">
<span class="title">title here</span>
</span>
</div>
<h2>Column</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit accumsan ipsum at faucibus. Nunc vel eros orci. Vivamus dictum congue metus.
<br /><br />
A tincidunt metus interdum id. Maecenas suscipit sapien in erat consequat sed vestibulum velit of this
rnare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit lorem psum at faucibus. Nunc vel eros orci. Vivamus dictum congue metus ipsum dolor sit .
</p>
</div>
<div class="one_column">
<div class="thumb_link margin">
<a href="#">
<img src="images/image3.jpg" alt="" />
</a>
<span class="image_ribbon">
<span class="title">title here</span>
</span>
</div>
<h2>Column</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit accumsan ipsum at faucibus. Nunc vel eros orci. Vivamus dictum congue metus.
<br /><br />
A tincidunt metus interdum id. Maecenas suscipit sapien in erat consequat sed vestibulum velit of this
rnare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit lorem psum at faucibus. Nunc vel eros orci. Vivamus dictum congue metus ipsum dolor sit .
</p>
</div>
<div class="one_column no_margin">
<div class="thumb_link margin">
<a href="#">
<img src="images/image4.jpg" alt="" />
</a>
<span class="image_ribbon">
<span class="title">title here</span>
</span>
</div>
<h2>Column</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit accumsan ipsum at faucibus. Nunc vel eros orci. Vivamus dictum congue metus.
<br /><br />
A tincidunt metus interdum id. Maecenas suscipit sapien in erat consequat sed vestibulum velit of this
rnare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit lorem psum at faucibus. Nunc vel eros orci. Vivamus dictum congue metus ipsum dolor sit .
</p>
</div>
<div class="clear"></div>
<div class="one_column no_background">
<div class="thumb_link">
<a href="#">
<img src="images/image5.jpg" alt="" />
</a>
<a href="#" class="full_preview" title="Full Preview">Full Preview</a>
<span class="image_ribbon">
<span class="title">title here</span>
</span>
</div>
</div>
<div class="two_columns no_margin no_background">
<h2>News</h2>
<p>
A tincidunt metus interdum id. <a href="#">Maecenas</a> suscipit sapien in erat consequat sed vestibulum velit of this rnare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit accumsan ipsum at faucibus. Nunc vel eros orci. Vivamus dictum congue metus ipsum dolor sit amet.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit accumsan ipsum at faucibus. Nunc vel eros orci. Vivamus dictum congue metus.
<br /><br />
Sapien in erat consequat sed vestibulum velit of this rnare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit accumsan ipsum at faucibus. Nunc vel eros orci. Vivamus dictum congue metus ipsum dolor sit amet erat consequat sed.
</p>
</div>
<div class="clear"></div>
<div class="one_column no_background">
<div class="thumb_link">
<a href="#">
<img src="images/image6.jpg" alt="" />
</a>
<a href="#" class="full_preview" title="Full Preview">Full Preview</a>
<span class="image_ribbon">
<span class="title">title here</span>
</span>
</div>
</div>
<div class="two_columns no_margin no_background">
<h2>News</h2>
<p>
A tincidunt metus interdum id. <a href="#">Maecenas</a> suscipit sapien in erat consequat sed vestibulum velit of this rnare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit accumsan ipsum at faucibus. Nunc vel eros orci. Vivamus dictum congue metus ipsum dolor sit amet.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit accumsan ipsum at faucibus. Nunc vel eros orci. Vivamus dictum congue metus.
<br /><br />
Sapien in erat consequat sed vestibulum velit of this rnare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit accumsan ipsum at faucibus. Nunc vel eros orci. Vivamus dictum congue metus ipsum dolor sit amet erat consequat sed.
</p>
</div>
<div class="clear"></div>
<a href="#top" class="to_top">• Back to top</a>
</div>
Now, to make believe that the content is very simple let’s add the CSS styles which isn’t complicated.
.content .one_column {
float: left;
margin: 0 40px 0 0;
padding: 30px 0 30px 0;
width: 300px;
background: url(../images/sep.png) repeat-x bottom;
}
.content .one_column.no_margin {
margin: 0px;
}
.content .one_column.no_background {
background: transparent none;
}
.content .two_columns {
float: left;
margin: 0 40px 0 0;
padding: 30px 0 30px 0;
width: 640px;
background: url(../images/sep.png) repeat-x bottom;
}
.content .two_columns.no_margin {
margin: 0px;
}
.content .two_columns.no_background {
background: transparent none;
}
.content .thumb_link {
position: relative;
display: block;
color: #fff;
}
.content .thumb_link.margin {
margin-bottom: 15px;
}
.content .thumb_link .full_preview {
width: 20px;
height: 20px;
text-indent: -10000px;
background: url(../images/full_preview.png) no-repeat center center;
position: absolute;
top: 10px;
right: 10px;
}
.content .thumb_link .image_ribbon {
position: absolute;
left: 4px;
bottom: 11px;
height: 22px;
line-height: 19px;
padding: 0 17px 0 0;
margin: 0 0 0 0;
font-size: 10px;
text-transform: uppercase;
font-weight: bold;
font-style: italic;
text-shadow: 1px 1px 0px #c9362d;
background: url(../images/img_ribbon_e.png) no-repeat top right;
}
.content .thumb_link .image_ribbon .title {
background: url(../images/img_ribbon_b.png) repeat-x top;
display: block;
padding: 0 7px 0 7px;
}
.content .to_top {
float: right;
margin: 10px 0;
font-size: 12px;
}
The CSS code simply defines the style for one_column and two_column classes along with no margin or no background for each class, thumbnails and image styles to make the ribbons appear on the images and finally some style for back to the top link. Now, let’s dig a little more in details.
The one_column class is styled with floating to left, right margin, top and bottom padding, fixed width and a background image to represent the separator. The two_column class has the same style as one_column with a different width value.
Now, you should notice that images has a “plus” icon in the top right corner and a ribbon that contains some information text. To style this we placed the image, the “plus” icon [or as I called it full_preview] and image_ribbon inside a division with class name thumb_link. This class is styled with position set to relative, display to block and font color set to white. The full_preview class is styled with fixed height and width, negative text indent, background image for the plus icon, position set to absolute which will relative to the parent thumb_link, 10px from top and right. The image_ribbon class is styled with relative position, 4px from the left, 11px from bottom, fixed height and line height, left padding, zero margins, some font styles and text shadow with a background image for the ribbon end cut. The title class is styled with a horizontally repeating background image to complete the ribbon look with left and right padding. Finally, the back to top link is styled with floating to right, top and bottom margins and 12px font size. Now our layout should look like this.
Step 7 – Adding and Styling Footer Content
Now, let’s add the HTML markup for the footer content which will be added inside footer_container division.
<div class="footer">
<div class="footer_container">
<div class="column">
<h3>About us</h3>
<p>
Lorem ipsum dolor sit amet, consectetur elit. In suscipit accumsan <a href="#">adipiscing</a> ipsum at faucibus. Nunc vel eros orci. Vivamus dictum congue metus.
<br /><br />
A tincidunt metus interdum id. Maecenas suscipit sapien in erat consequat sed vestibulum velit of this
rnare. Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing elit. In suscipit accumsan ipsum at faucibus. vel eros orci. Vivamus dictum congue metus ipsum dolor sit .
</p>
</div>
<div class="column">
<h3>Latest tweets</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur #<a href="#">adipiscing</a>. In suscipit accumsan ipsum at faucibus. - <span class="underline">13 hours ago</span></li>
<li>@<a href="#">Maecenas</a> suscipit sapien in erat consequat sed vestibulum velit of this amet elit metus sapien rnare. Lorem ipsum dolor sit amet. . - <span class="underline">21 hours ago</span></li>
<li>Nare. Lorem, consectetur adipiscing elit. In suscipit accumsan ipsum at faucibus. - <span class="underline">2 days ago</span></li>
</ul>
</div>
<div class="column no_margin">
<h3>Next events</h3>
<div class="event">
<div class="date">
<span class="day">21</span>
<span class="month">jun</span>
</div>
<p>Lorem ipsum dolor amet sit amet, consectetur adipiscing elit. In suscipit accumsan ipsum at faucibus. Nunc vel eros orci.</p>
</div>
<div class="event">
<div class="date">
<span class="day">16</span>
<span class="month">apr</span>
</div>
<p>Lorem ipsum dolor amet sit amet, consectetur adipiscing elit. In suscipit accumsan ipsum at faucibus. Nunc vel eros orci.</p>
</div>
</div>
<div class="clear"></div>
<p class="copyright">
© 2011 All Copyrights reserved to <a href="https://www.ahmadhania.com" title="Ahmad Hania Blog - Design, Development & Inspiration Articles" rel="Bookmark">Ahmad Hania Blog</a>, designed by <a href="http://www.tutegate.net/">Scott Rollo</a>.
</p>
</div>
</div>
We simply added three divisions with class name column with some content inside with a clear division after them and a copyrights paragraph. Now let’s add the CSS style for the footer content.
.footer .footer_container h3 {
font-size: 24px;
}
.footer .footer_container .column {
width: 300px;
float: left;
margin: 0 40px 0 0;
}
.footer .footer_container .column.no_margin {
margin: 0px;
}
.footer .footer_container ul {
list-style-position: inside;
}
.footer .footer_container li {
font-style: italic;
font-family: Arial;
text-align: justify;
border-bottom: 1px dashed #515151;
margin: 0 0 5px 0;
padding: 0 0 5px 0;
}
.footer .footer_container li:last-child {
border: 0 none;
}
.footer .footer_container .event {
display: block;
border-bottom: 1px dashed #515151;
margin: 0 0 5px 0;
padding: 0 0 5px 0;
overflow: hidden;
}
.footer .footer_container .event:last-child {
border: 0 none;
}
.footer .footer_container .event .date {
float: left;
margin: 3px 5px 0 0;
width: 40px;
text-align: right;
}
.footer .footer_container .event .date .day {
color: #e53e32;
font-size: 31px;
line-height: 31px;
font-family: Lucida Fax;
display: block;
margin: 0 auto;
}
.footer .footer_container .event .date .month {
font-size: 14px;
line-height: 14px;
font-family: Lucida Fax;
letter-spacing: 3px;
display: block;
margin: 0 auto;
text-transform: uppercase;
}
.footer .footer_container .event p {
float: left;
width: 255px;
}
.footer .footer_container p.copyright {
text-align: center;
margin: 30px 0 0 0;
}
The column class is styled with fixed width, float to left, and a right margin of 40px. Then we added some styles for the list items inside the footer. Now to style the events inside the third column we start by styling the event class with bottom border, equal bottom margin and padding, block display and overflow set to hidden. The last-child pseudo is used to hide the border at last event. Now we set the date class style with floating to left, top and right margin, fixed width and text align set to right. For the day and month classes we set some font, text and letter styles to make them look exactly as in the PSD. Finally, we style the paragraphs inside the events and the copyright paragraph.
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 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 in comments below.
subscribe to my RSS feed
follow me on Twitter
