Coding: Design Lab TV Styled Layout

Welcome to another PSD to XHTML/CSS tutorial here at psdvibe. We will be converting the Design Lab TV Styled Layout into valid xhtml/css which will be cross browser compatible.
First thing you need to do is create a html file through Dreamweaver choose XHTML 1.0 Strict.dtd from the doc type option – save it as index.html.

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

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

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

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

Ok, now 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 straightforward to me. There aren’t a lot of gradients in it and most parts are solid colors, so we won’t have to make a lot of slices. Lets go ahead and start our conversion.

Time to analyze our design – it’s a fixed width and height design – center aligned – consisting of a main navigation – logo and the middle content which is a portfolio gallery along with navigational buttons. Not complicated at all. So lets sharpen our slice tool and start slicing.

First off, hide all layers apart from the background layer. This consists of the monitor and the black background. I don’t like big slices but I have to make a big slice over here. You can make that background 2 slices or how many you would like but I would rather make it a single slice which will be optimized for 80% quality so we can cut down the size of the image and not loose the quality (you can play with it more and turn down the quality a bit more to cut the size of the image, but it will compromise the quality) so I am sticking to 80% here to make the whole background as a big slice.

Now lets implement that slice in CSS – I will be giving this background in the body div which will be centered aligned with background color as black.

body{
	position:relative;
	background:#000 url(../images/body_bg.jpg) center top no-repeat;
	color:#000;
	font:62.5% Helvetica,Arial,sans-serif;
}

Now lets calculate our wrapper area which is 847px in width, but we need the wrapper area to be divisible by 2 so that it aligns in center. So let’s give padding of 1px from right or left to our wrapper div. So our wrapper has an 848px width in effect.

Now lets make a header area – calculate the area from top of the screen to the bottom of the navigation. I calculated 138px in height but our navigation and logo are a lot below than the top so lets use top padding which is 104px in height.

#header{
	width: 847px;
	height: 34px;
	padding: 104px 0px 0px 0px;
}

Now lets slice up the logo and slice the navigation background. We will be using sliding door technique by Douglas Bowman for the navigation. You can learn that technique from the author’s blog – I will be implementing that technique on our navigation, and you can use the guide there for directions on the sliding door effect. Please see how I sliced the navigation background.

Why we did it like this?
This is because our navigation is text. Some buttons have long words like “photo retouch” and some small like “home” – so we don’t want each button to have a background equivalent to there text – that will create 5 or 6 backgrounds, and more over, if in future you want to rename “photo retouch” to something else, say “perfect photo retouch” you would have to slice the background again so it covers all of the words, make sense?

Now the slicing part is done for the top elements so lets move to the CSS part. Create an id for logo and lets just not place it as an image and make it a link. We want that to be shown as text for SEO reasons. Although users will see an image in their browser, create an id named logo and write styles like below. Now implement in html like this.

#logo{
	display: block;
	width: 90px;
	height: 18px;
	float: left;
	margin: 10px 0px 0px 0px;
	background: url(../images/logo.jpg) no-repeat;
	text-indent: -9999px;
}

Now lets move to our navigation, which is the only complicated bit in this whole layout. We will be displaying <a></a> as a block within ul li and within that <a></a> we will have <span></span> as a block as well.

We will apply our left slice of the navigation to tag “<a>” which will be left aligned with no repeat and our right slice to “<span>”, which will be left aligned and will be repeated horizontally – please use padding from top left, and right for the exact adjustment as PSD – check how it’s done in CSS.

#header ul{
	float: right;
}

#header ul li{
	display: inline-block;
	float: left;
	height: 33px;
	margin: 0px 0px 0px 16px;
}

#header ul li a{
	display: inline-block;
	height: 33px;
	padding: 0px 0px 0px 2px;
}

#header ul li a span{
	display: inline-block;
	height: 23px;
	font-size: 13px;
	color: #fff;
	padding: 10px 6px 0px 6px;
}

#header ul li.active a{
	background: url(../images/left_door.jpg) no-repeat left;
}

#header ul li.active a span{
	background: url(../images/right_door.jpg) repeat-x right;
}

#header ul li a:hover{
	text-decoration: none;
	background: url(../images/left_door.jpg) no-repeat left;
}

#header ul li a:hover span{
	text-decoration: none;
	background: url(../images/right_door.jpg) repeat-x right;
}

Note: i have made an class named “active” for the active state as well.

This is how your HTML will look like.

Now lets slice our six portfolio designs and the left and right navigation buttons. Slice the hover designs for the navigation buttons as well, and make a single image of hover and normal state button like shown below – similarly do this for the right button as well.

Now implement those buttons in CSS like this.

a#left_button{
	display: block;
	width: 34px;
	height: 84px;
	float: left;
	margin: 149px 0px 0px 0px;
	background: url(../images/left_arrow.jpg) no-repeat;
	text-indent: -9999px;
}

a:hover#left_button{
	background-position: 0px -84px;
}

a.active#left_button{
	background-position: 0px -84px;
}

a#right_button{
	display: block;
	width: 34px;
	height: 84px;
	float: left;
	margin: 149px 0px 0px 0px;
	background: url(../images/right_arrow.jpg) no-repeat;
	text-indent: -9999px;
}

a:hover#right_button{
	background-position: 0px -84px;
}

a.active#right_button{
	background-position: 0px -84px;
}

Now lets move onto our main content – we have six thumbnails in our content. I am going to make them with the help of <ul><li>. Go ahead and slice all six thumbnails.

Take measurement from both sides for how much each box has margins between each other and write styles for them in CSS like this.

ul.gallery{
	width: 779px;
	float: left;
}

ul.gallery li{
	display: inline;
	width: 224px;
	height: 179px;
	float: left;
	margin: 0px 17px 30px 17px;
}

ul.gallery li a{
	display: block;
	width: 222px;
	height: 177px;
	border: 1px solid #cccccc;
}

ul.gallery li a:hover{
	border: 1px solid #fff;
}

Note: you can see on the design that every thumbnail has a grey border. We are not going to slice it, instead we are going to implement it through CSS so that we can make a hover effect. To make a hover effect just change the color or border on hover like this.

That’s it! I believe your design is done now.

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 these files (More info)