Coding: Corporate WordPress Style Layout

In this tutorial you will learn how to code the Corporate WordPress Style Layout into xhtml and css. If you have any questions about this tutorial be sure to ask in the comments. Also, remember with all the tutorials, the source files are available for download.

Author:

Saad Sarfraz

Category:

Photoshop

Welcome to the first PSD to XHTML/CSS tutorial here at psdvibe. We will be converting our most popular layout, Corporate WordPress Style layout into valid xhtml/css which will be cross browser compatible.
Create a html file through Dreamweaver and choose XHTML 1.0 Strict.dtd from the doc type option – save it as index.html.

Create a CSS file through Dreamweaver and name it style.css – you can either place it in the same folder as your html file, or you can make a separate folder – I prefer a separate folder so I am saving my file in “scripts” folder.

Link the Stylesheet with your html document. We will only need a single stylesheet for this tutorial, but in most cases IE6 & 7 tend to mess around a bit so I always create separate stylesheet for them so we can sort out problems related to those browsers- the screen shot below will show you how to add those so that only the browsers they are intended for uses them.

Note: we have to reset our margin and padding if we want to completely control our layout without the interference of automatic margin and paddings which some elements posses so either attach another css file mostly known as reset.css (you can google it) or you can copy the code below in your CSS files

ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{
	margin:0;
	padding:0;
}

ul{
	list-style:none;
}

fieldset{
	border:0;
}

Create a folder named as “images” – all your images will go in this folder.

Ok all the base files are now complete – lets open up our PSD and before starting to cut it up we can study the design and plan a bit how we are going to do this. This design looks straight forward to me there aren’t a lot gradients in it most parts are solid colors so we won’t have to make a lot of slice. Ok then let’s start our conversion.

Our design consist of a fixed width content area- which will be fluid in nature (which means will extend in height according to the content in it. The only parts which are extending in width vise are header and footer – they will be extended across the screen no matter what resolution you are in.

So let’s slice the top part which will be across the screen. Please see the attached screen shot below of how I made the slice. There are 2 types of slice tools one is with the arrow other one is without the arrow. For slicing the first one in the list (without the arrow) will be used, after the slice is made when you will hover over the slice the slice tool will become selection slice tool – you can double click the slice to see its properties – give the slice its name you can see that the width of the slice is only 1px that’s because we will be repeating it through CSS. Go into File > Save for web & devices – from there click the selected slice – choose the image type you want it to be saved in and click save. Save it in the images folder.

Note: you can continue and make all slices in one go – and then carry on to create xhtml/css – its upto you how you prefer it. I will be doing it a bit differently I will be creating slices as I go along because I use the slice tool as measuring through different elements (could sound unorthodox – but it works for me)

Open your index.html file and styles.css file in dreamweaver choose the code view for both the files. (you can write the title of the page and meta description to your requirement – I am skipping that part)

Now what we have to do is make that top part of the page to expand from left to right – we already created the slice for it now the CSS comes into play, assign the background to the body selector in CSS after selecting the image type repeat-x so it repeats horizontally across the screen. We will also give the background color of the whole layout in this selector use your color picker to get the color of the background of the layout and give its value before the background link.

body {
position:relative;
background:#383d43 url(../images/body_bg.jpg) repeat-x;
color:#000;
font:62.5% Myriad Pro,Arial,sans-serif;
}

Note: there are other styles as well in the body selectors apart from ‘background’ these syles are common styles which will be common across the body of the page.

Now check in the browser you can see the top bar is there and the background of the whole screen has the same background color as are layout.

Now lets move onto the content – the layout is 943px wide. And it will be centered align in the browser. So we will create a div called ‘wrapper’ you can name it what ever you like – but as it behaves as a wrapper around the whole content so we can use that name. We will set the margin: 0 auto; so it aligns in center. It will automatically calculate the margin from left and right.

#wrapper{
width: 943px;
padding: 0px 0px 0px 1px;
margin:0 auto;
}

Note: though the content is 943px wide but we need the width to be 944px so it has the same difference from left and right. To make the width 944px we won’t increase the width itself, we will increase the padding 1px either from left or right because horizontal padding is added into the width of the div in our case by giving 1px padding from left our wrapper div will have 944px width.

Now the wrapper which will wrap our content is done lets make header – logo and search elements on our page. For header lets calculate the area (as already mentioned I use slice tool to calculate – you can use other ways) which is 65px high and 943px wide. Make a div for it – there are two elements in the header the telephone-number and the top navigation. Both have margins from top – left and right. So I would prefer that we give padding to the header div instead of those elements. Please see screen shot of how i measured that. Do keep in mind that after giving the padding you will have to adjust the width and height accordingly. Now write styles for the text and top navigation like this.

your styles will look like this

#header{
width: 886px;
height: 49px;
font-size: 14px;
padding: 16px 35px 0px 22px;
}

#header p{
float: left;
color: #525961;
}

#header span{
color: #bababa;
}

#header ul{
float:right;
}

#header ul li{
float: left;
margin: 0px 12px 0px 0px;
padding: 0px 0px 0px 12px;
background: url(../images/header_navi_bg.gif) left bottom no-repeat;
}

#header ul li.no_bg{
background: none;
}

#header ul li a{
color:#fff;
}

Your html will look like this.

Now slice the logo and the search button – take measure of the input section and write styles for them.

#logo{
display: inline-block;
width: 255px;
height: 34px;
float: left;
clear: both;
margin: 0px 0px 0px 21px;
background: url(../images/logo.jpg) no-repeat;
text-indent: -9999px;
}

form{
float: right;
}

input{
width: 171px;
height: 17px;
float: left;
padding: 5px 10px;
color: #a0a4a8;
border: none;
}

input#submit{
display: inline;
width: 66px;
height: 27px;
float: left;
margin: 0px 5px 0px 4px;
background: url(../images/search_button.gif) no-repeat;
}

Note: mostly people place logo as image in html or wrapped in a H1 tag which I don’t think is good for SEO – your xhtml should only have one H1 for SEO reasons and an image in an H1 tag won’t help that cause. So you can see in my styles how I have placed logo as a background image so search engine find it as a text not as an image.

Now lets slice the banner and put it in the banner div – you can put that image without the banner div if you want.

By now your html will look like this.

Now the fun part of making the main navigation of the website. Make a slice as shown in the image. Please note that the navigation container has gradient and left-right-bottom border as well (the top one is with the image) so make a slice of the navigation container background with the bottom border included. And give the left and right border using CSS. You could give the bottom border using CSS as well. But for some reason I chose not to. Give padding according to the requirement.

your style sheet will look like this.

#navigation{
width: 926px;
height: 52px;
float: left;
padding: 12px 0px 0px 15px;
background: url(../images/navigation_bg.jpg) repeat-x;
border-left: 1px solid #43474b;
border-right: 1px solid #43474b;
}

Now lets create that navigation. The navigation blocks have blue background which has a gradient make a 1px wide and full height slice of it. And implement it in CSS as seen below. A little overview of that how its done. The list item <”li”> are floating left and in the <”li”> items there is <”a”> tag which is doing the job of shaping that background. The <”a”> tag is behaving as an block element in which the background image is repeated horizontally and given necessary padding so it looks just like the PSD.

your CSS will look like this.

#navigation ul li{
display: block;
float: left;
height: 41px;
}

#navigation ul li a{
display: inline-block;
color: #cbd9e7;
height: 29px;
font-size: 14px;
padding: 12px 24px 0px 24px;
text-transform: uppercase;
}

#navigation ul li a:hover{
text-decoration: none;
background: url(../images/navigation_btn_bg.gif) repeat-x;
}

#navigation ul li.active a{
background: url(../images/navigation_btn_bg.gif) repeat-x;
}

Your html will look like this.

Lets move onto the main text area. You can see it’s a two column design and the background of both the columns are seamlessly together. Either the left column has more content or the right column has more content both the background should be parallel to each other. So firstly make a div called content. Make a slice from left to right of the content area. Which will be 1px in height and 943px wide (this could have been done in a different way as well of just making the slice of the right column background and positioning it to right and giving the background-color of the left column in the content div) though I just made it a one whole slice at the moment which is repeated vertically.

Now lets make a left column div and a right column div both will be floated left and wont have any backgrounds as we already gave backgrounds in the content div. you can see there styles below.

#content{
width: 943px;
float: left;
background: url(../images/content_bg.jpg) repeat-y;
}

#left_column{
width: 620px;
float: left;
}

#right_column{
width: 288px;
float: left;
padding: 18px 18px 0px 17px;
}

Your html will look like this.

Now lets concentrate on the left column at the moment. Make a div called “text” this will be a “class” rather than an “id” because in strict document only a class element can be duplicated. If you duplicate the “id” element the document wont remain valid any more. So its better to use class elements for the items you think you will be using again. Take measurement and write its style again you can either give padding to the div or margins to the elements in it. Write styles for the elements as well. <”h2″> – <”p”> – <”img”>.

.text{
font-family: Helvetica, Arial;
width: 552px;
float: left;
padding: 32px 38px 22px 30px;
}

.text h2{
font-size: 24px;
float: left;
margin: 0px 0px 12px 0px;
color: #fff;
}

.text p{
color: #bcc4c7;
width: 552px;
float: left;
clear: left;
font-size: 12px;
}

.text p img{
float: right;
margin: 0px 0px 0px 20px;
}

.text a.continue{
position: relative;
color: #65b8f9;
float: left;
clear: left;
font-size: 15px;
margin: 30px 0px 0px 0px;
}

your html will look like this

Now the second block of text has different background and top and bottom border as well. So lets make another class named “alternative” and give background and border syles in that.

.alternative{
background: #2a2d32;
border-top: 1px solid #26292e;
border-bottom: 1px solid #26292e;
}

html will look like this.

Now all the 3 blocks of text implemented in the left column div your html will look like this.

Lets move onto the right column. Measure it up give necessary paddings from left and right. Now the heading background will be the only thing used again in the right column so make a div through class and write it styles – padding etc.

.heading{
width: 260px;
height: 29px;
float: left;
padding: 12px 14px 0px 14px;
margin: 0px 0px 18px 0px;
background: url(../images/navigation_btn_bg.gif) repeat-x;
}

.heading h2{
font-size: 17px;
color: #ffffff;
float: left;
font-weight: normal;
}

.heading img{
float: right;
margin: 3px 0px 0px 0px;
}

The advertisement blocks are in <”ul”><”li”> list so make a class for ul give width and height of the blocks and float the list to left – give necessary margin. Please see the screen shot below for more understanding.

ul{
float: left;
margin: 0px 0px 39px 0px;
}

ul.sponsors li{
display: block;
width: 125px;
height: 125px;
float: left;
margin: 0px 0px 0px 10px;
background: url(../images/advertise.jpg) no-repeat;
}

Again the heading is repeated so copy that div and paste it beneath and change the text for the heading. Make styles for the list

ul li{
font-size: 14px;
color: #ffffff;
margin: 0px 0px 17px 11px;
}

ul li span{
color: #65b8f9;
}

Note: the third heading has a background as well. That’s an image floated to right.

Your html will look like this.

Now lets move to the footer. The footer is across the screen so this wont come in out wrapper div which you remember is only 944px wide. And we need the footer to be of 100% width. So we measure the height of the footer and write styles for it give the background. The footer has a top border too which is of different color but not that much of a difference. But I will still write styles for this as I don’t want any details to be lost in the design.
Now lets make a footer container which will be 943px in width and margin set to auto so it aligns in the middle. The navigation is floated to right same as the copyright text. The styles are same as the header navigation so you can copy that and rename the div.

#footer{
width: 100%;
float: left;
clear: both;
height: 120px;
border-top: 1px solid #3c4249;
background: #1e2329;
}

#footer_content{
margin: auto;
width: 943px;
padding: 46px 17px 0px 0px;
}

#footer_content ul{
float: right;
margin: 0px 0px 10px 0px;
}

#footer_content ul li{
float: left;
margin: 0px 0px 0px 12px;
padding: 0px 0px 0px 12px;
background: url(../images/header_navi_bg.gif) left bottom no-repeat;
}

#footer_content ul li.no_bg{
background: none;
}

#footer_content ul li a{
color:#fff;
}

#footer_content p{
float: right;
clear: right;
margin: 0px;
font-size: 12px;
color: #383d43;

Your html will look like this.

Remember if you have any questions or comments about this tutorial to leave your responses in the comments below and we will get back to you very quickly.

 
Get a commercial/public use licence for theses files (More info)

Show Some Love
Thank you for your support

34 Responses

  • Matthew Heidenreich

    great job, nice work Saad

  • Josh Morris

    Nice, well done. Very helpful specially for me!

  • dev.My

    OMG, u really teach it, now i know how to do it already even though it take long time but still really want to say THANK YOU coz u give me the answer that i really want to know long time ago.

    THANK YOU.

  • Brochures

    It does take a long time, it always tends to be the case when coding. You have to be very meticulous. Thanks for sharing this awesome tutorial!

  • Saad Sarfraz

    Thank you every one – next tutorial coming soon as well.

  • Christoffer

    Nice tutorial… Thank you very much…

  • OrcaDev

    Great tutorial, i did like the original PSD tut, and this finishes it off.

    Just a few niggles for me:

    1) The Header didnt work for me until I used a Reset.css file to null the margins/padding

    2) WordPress seems to have duplicated some of you Float texts, like rightright, the first and last code statements are the worst and there are a few in between

    3) The section for the title is cut off, it just ends with <span… vital to know what the end is

    4) Maybe just me, but i would prefer the HTML coding to come first followed by the CSS, then with Coda/Dreamweaver using live view you can code the CSS a step at a time and see what it does to the webpage…

    Hope this is constructive for you to work with :-)

  • Saad Sarfraz

    @OrcaDev

    1)yes you have to null the margins and paddings of elements. though i have them in the final style.css but i some how skipped them in tutorial – will make sure ill do it next time and edit this one as well.

    2)yes the plugin is messing up a bit. though in when you view it plane its all right – so haven’t paid attention to it really.

    3)ill replace that image so it isn’t cut.

    4) after slicing – i write styles in CSS and then work on html – so i have tried to post in the same sequence.

  • Nick

    I was wondering If It would be possible for me to get the PSD for this file?

    Im still having a bit of trouble understanding how some of the stuff works. But this tutorial will be a complete life saver If I can indeed figure it out.

  • Saad Sarfraz

    @Nick

    sure you can download PSD from here:
    http://psdvibe.com/2009/01/20/corporate-wordpress-style-layout/

    let us know if you have any other problem regarding this tutorial – we will surely try our best to help you out :)

  • Hiren Modi

    awesome tut thanks for the information provided here.

  • Shane - Inspiring your Success

    This is a really useful tutorial! Bookmarked.

  • Sico

    Hey nice tutorial, but i’m used to Copy a layer CTRL+N from selection and paste and save =P

    This is also a method, but there are alot.. :)

    Thanks!

  • mr b

    This looks like a great tutorial but I cannot get through it. I am new to this and found you often just assumed we knew things and skipped through. How many things did you slice altogether? Also for some reason when I was doing my slices all the intersecting parts created slices which I didn’t even want to do.

    I don’t suppose you could do a simpler one with the steps more thoroughly explained could you?

    Thanks

  • Saad

    i make slices as i go through the design (because i use slice tool for measuring – unorthodox – YES)

    mostly people first make all the necessary slices and then start xhtml/css.

    finally when you are saving slices make sure you select “user slices” so it only saves the slices which you have made.

    your feedback is valuable to us and in our next Tutorial we will try our level best to make it more explanatory – so look out for the next Tutorial coming soon.

  • Ron

    Thank you for the awesome tutorial! Much appreciated.

    Quick question regarding the CSS portion, is each CSS section to be saved as separate CSS file?? One for header, for footer, sidebar etc.??

    Forgive my ignorance here, I’m a total n00b when it comes to dynamic site/blog creation ha….

    Looking forward to your reply ;-)

  • Saad

    @ Ron

    No only one CSS file(apart from the ones for ie6 & ie7) only a single css file will contain all of your stylings.

    Please download this tutorial’s files so you can understand better.

  • Ron

    Will do Saad, thanks for the quick reply!

  • Jacob

    Hi, thanks so much for the great tutorial – I’ve just been working through it now.

    I’ve encountered a bit of a problem though, the site I’m making has a border, so I’m not sure how I can slice things/work the css in order to make it so this shows up properly… I guess I need to have 3 slices (left, centre, right), but not sure how to put that together. Any advice?

    Thanks, and keep up the good work!

  • Saad

    @jacob

    if the border is in solid color then you can give the border using
    border-right and border left.

    e.g “border-right: 1px solid #efefef;”

    or you can slice a 1px (height) from left to right and use it as a background and repeat-y it so it repeats as the container extends.

    e.g “background: url(image/whatever.jpg) repeat-y;”

    hope it helps :)

  • xiondre

    hi, can this be converted to a wordpress layout?:D i wanted to use wordpress as a base.:D

  • Saad

    yes off course this can be converted into a wordpress layout.

  • Davie

    Is there an easy way to convert this to a wordpress layout?

    I followed the directions from here:http://www.jestro.com/web-design/convert-xhtml-css-to-wordpress/

    dividing the original index.html page into header.php, index.php, footer.php and sidebar.php

    and wordpress is still having trouble with it.

  • keffir

    this is a great tutorial.
    My daughter will love this because she is a big fan of the corporate theme.

    thank you very much

  • Ceena

    thanks! ive used the theme before. this will come in handy

  • Ana

    I still don’t understand how to do a template from a costum layout from a psd :(

  • CandyA

    This tutorial assumed things and skipped steps. What were we supposed to include in the banner DIV? While you’re at it, go back to grammer school …

  • Gladys Clerfius

    I’m really trying to learn CSS on my own and would like to know where’s the best place to start. Although I’m more on a design perspective I’m a bit lost when it comes to coding.

  • camella

    oh man, I love this one! fantastic tutorial. However, I’m not using dreamweaver, just a plain notepad++. I hope you feature this type of tutorial using nvu or any other free software.

  • Naina

    This is the great tutorial. i learn many css code. but i confused display:unline, inline:block plz tell me whats the use of these tag………

  • Bill Bartmann

    There is obviously a lot to know about this. There are some good points here.

  • Shahriat Hossain

    I got another one to capture the knowledge from the scratch which will help me a lot. Thanks for sharing your knowledge with us.

Leave a Comment

Name (required)

Mail (required)

Website

Message

 

Sponsors