Coding: Design Lab TV Styled Layout

In this tutorial you will learn how to code the Design Lab TV Styled 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 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)

Show Some Love
Thank you for your support

35 Responses

  • Matthew Heidenreich

    thanks for another tut Saad!

  • Justin Luey

    Thanks for the tutorial. I look forward to going through it.

    This blog post is not loading correctly in Safari. Just wanted to let you know.

  • Saad Sarfraz

    Thanks Justin for pointing that out.

    it should be fine on all browsers now.

  • Anto

    Way to long. Nice screencast would have been nice.

    But none the less, will help some people out there.

  • Matthew Heidenreich

    @Anto

    Yeah it is long, but it’s a good idea to explain what your doing, instead of just handing over the code ;)

  • Andi

    Nice tutorial. I love the design.

  • Anto

    @Matt
    Well a video right at the top of that explaining what the code does, and how it does it, it the most useful thing ever, there is nothing that beats it.

    None the less. Try and find someone who would be willing to do a screencast :P

  • Matthew Heidenreich

    yeah, I’ve been meaning to actually do screencast of previous photoshop tutorials….just never have the time :)

  • Sancke

    Hi there..I just love this site, great tutorials for both coding and photoshop. I’m wondering if you could share me some good websites that includes a tutorial on how to code a simple layout.

  • Matthew Heidenreich

    @Sancke

    You may want to check out hv-designs.co.uk

  • Abhisek

    Awesome!!!

  • mtgiri

    Thanks. This is an awesome tutorial.
    greetings from Argentina.
    Miguel.

  • dronix

    I finally decided to tackle this tuorial. I like the way it’s structured and explained. However, there are some things that were left unexplained and were just added unto the final downloadable css file. Thanks for the tutorial. Hope to see the next one soon.

  • Fabrizio

    Congratulations. A really well made tutorial. I was always curious to know the steps that led to the creation of a theme. Thank you very much

  • christina

    Nice tutorial.

  • john

    How are the other thumbnails loaded for the portfolio section. When you click on the arrows, how is that function executed?

  • Alex

    good tutorial, thanks, bookmarked!

  • Martin

    Nice, nice. Thanks for this tutorial.

  • Khantry

    nice tutorial..
    thanks..

  • otimização de sites

    Amazing tutorial!I´ll try to put these knowledges in pratice in my web site.
    Thanks.

  • Chris

    Good work. It is time to show people how it works correctly as they did work for a looooong time ;)

  • webdesign nürnberg

    thanx for sharing – this will improve my css knoweledge!

  • Link Building

    Thanks for sharing, very usefull and professional tutorial. More like this :)

  • Spiele

    Thanks for the tutorial. I look forward to going through it.

    This blog post is not loading correctly in Safari. Just wanted to let you know

  • Webdesign Erlangen

    Helpful tutorial. Many thanks!

  • Clay Jackson

    Thanks, this is a nice design.

  • Christiane from Nürnberg

    Good tutorial,thanks for sharing.

  • Chris Trick

    Congratulations! Super-made tutorial. I was always curious to know the steps that led to the creation of a theme. Did you thank you and more!
    cu

  • Alex, Nürnberg

    Very good tutorial.
    Greetings from Germany

  • keletso

    Thanx for the great tut, its much easy to follow.
    Greeting from South Africa

  • Tasos

    Awesome tutorial. I really find it very useful, and i’d like to thank you for the knowledge sharing with all of us!

    Yet, I have a question to make:
    Is this tutorial collaborate perfectly with Joomla!?? I mean, if I do all those things (techniques), and then upload my template on Joomla!, is that gonna work?? I’m pretty new to web design, so I’m trying to figure things out.

    Thanks in advance,
    Tasos

    P.S I would really appreciate If you responded via e-mail, so to know that I got an answer :P

  • Serg

    Great tutorial, just two comments if you will: I think will be great to add some words about header tags (h1-h6) and personally I don’t suggest my slicers to use tag “span” into tag “a” – I think it’s not correct semantically – better way to use tag “a” into tag “span” if required.

    Thank you in advance!

  • Bodenmais

    Really nice tutorial, for that effect it’s a really ‘simple’ stylesheet in my opinion.

  • Rob Busby

    This was a thoroughly explained tutorial. Very good information to have. Thank you.

  • Nicole

    Great idea, thank you for this article. I’ll test it out as soon as i get the time :)

Leave a Comment

Name (required)

Mail (required)

Website

Message

 

Sponsors