There's nothing like building an entire site to show you a good overview of how a CSS layout should work. Over at PSDTUTS we've got a tutorial where you design up a sleek, high end web design. In this tutorial we're going to take that PSD file and build it with some nice clean HTML and CSS.
Demo and Source Code
Step 1
So here's the design we're going to be building. As mentioned you can follow the tutorial over at PSDTUTS to build this design from scratch. In this tutorial we're only going to build this homepage, however using that as a base you would be able to build interior pages following the same layout.
Step 2
The first thing to do is decide how we are going to structure our build. This process gets easier over time as you learn how CSS layouts can work. For this design I think we can get away with a very simple build which uses quite a bit of absolute positioning and a large background image.
What is Absolute Positioning?
When you place an HTML element on a page (e.g. a <div>, <p> and so on) it has a natural position which is determined by what came before it. So for example if you put a <p></p> down with some text in it, and then you place another <p></p> it will naturally appear just below the first <p>. It will just flow on relative to the last element.
Absolute positioning is different in that you are specifying an exact placement for an object and taking it out of the regular flow of elements. So if you had your first <p></p> just as before, but for your next <p></p> you gave it an absolute position of left:500px; top:500px; Then it would appear precisely in that location regardless of the previous <p>.
You set the absolute position of something like this:
.className {
position:absolute;
top:0px;
left:0px;
}
Drawbacks to Absolute Positioning
The main problem with using absolute positioning is that your elements don't really relate to one another. So for example if you have one block of text near the top of your page, and another block of text a bit further down, it might look great when each block of text is short. But if the top block were to have a big essay in it, then instead of pushing the next block of text down, it will just go over the top. This is because you are taking the elements out of the natural flow of the page.
So Absolute Positioning is only really useful for objects that you know will always be a certain size, and which don't really need to interact with other elements.
Why it's useful to us today
The good thing about Absolute Positioning, is that it's really, really easy! You tell the browser where to put something and that's where it appears! To top it off, there are far fewer browser compatibility issues when you position things absolutely. After all 100px is 100px whether you're in Firefox, Internet Explorer, or Safari.
SOOO our layout
So the way we are going to make our website is:
- Have a large background image
- Absolutely position the logo, menus, and heading panel precisely where they are meant to appear
- Have all our content appear in a regular <div> tag, but give it so much padding-top that the content is pushed all the way down to where it's meant to be
- Have our footer sitting underneath
If that doesn't make a whole lot of sense yet, don't worry it will as you see the site take shape!
Step 3
Now in terms of background images, we need two. One is going to be gigantic, and in fact after I saved it as a JPG it is about 56kb in size. There used to be a time where that would have been a bit too big, but these days it's not a big deal.
So that's the main area, then we need a second background image which will be a thin slice. This slice will repeat over and over off to the right so that when the browser window is dragged open it tiles out.
(Note the logo shouldn't be showing below in the background image, that was just some bad screenshotting, sorry!)
You can see the two images I've created here and here.
Step 4
OK so now let's start our HTML. First we lay out some basics:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>PSD vs NET</title>
<link rel="stylesheet" href="step1_style.css" type="text/css" media="screen" />
</head>
<body>
<div id="outside_container">
<div id="container">
<!-- The Main Area -->
</div>
</div>
<div id="footer">
<img src="images/footer_logo.jpg" />
<span id="footer_text">
Made for a PSDTUTS and NETTUTS tutorial by Collis!
See the <a href="http://psdtuts.com">Photoshop Tutorial</a>,
see the <a href="http://nettuts.com">Web Tutorial</a>
</span>
</div>
</body>
</html>
As always it's best to work from the outside in with our layout. So what I've done here is place three major <div>'s. The first two are the outside_container / container and the other is the footer. This requires a little explaining:
- I've created the outside_container and container because I need a double background image. That is I need a tiling background image, and then on top of that I need that large background image. So in the outside_container I'll place the tiling background, then on the container <div> which will appear on top of the outside container, I'll have that big main background.
- The footer needs to be outside the containers because if the browser window were stretched lengthwise, the footer should go on and on. Since it has its own background, it can't be in the containers - if it were and you stretched at some point you'd see the container background and not the footer!
Also you'll see I've added some content inside the footer, that's just the mini logo, and the text. I've wrapped the text in a <span> tag so that I can manipulate it. There's no reason to give the <img> tag an id or a class, because we can just say #footer img and since it's the only image in there, we can call it that way. This keeps our HTML a little simpler.
Step 5
Now the CSS for our code so far:
body {
margin:0px; padding:0px;
background-color:#11090a;
font-family:Arial, Helvetica, sans-serif;
}
#outside_container {
background:url(images/background_slice.jpg) repeat-x #000000;
}
#container {
background:url(images/background_main.jpg) no-repeat;
min-height:800px;
}
#footer {
border-top:1px solid #3f2324;
padding:30px 50px 80px 50px;
}
So going through one at a time:
- First we are redefining the body tag. This is almost always the first thing I do. We get rid of any default margin and padding, set a background color and a font-family for the page. Notice that the background colour is in fact the footer background colour. As I mentioned previously this is so that if you stretch the browser window vertically you'll keep seeing footer.
- Next we have the outside_container tag. I've given it that slice background, it's going to repeat only along the x axis (i.e. from left to right) and wherever there's no background image we'll see straight black (#000000). So basically as the page gets longer the tiles won't keep going because we said to only repeat left-right, instead we'll get the black background. This is perfect because our tiling image fades to black!
- Next we have the container. Here we have the gigantic background image set to not repeat - so it only appears once. Notice we didn't specify a background colour, if we had it would have covered our outside_container over. That's because this <div> tag is inside the previous one, and will automatically be stretching out to fill it up completely. So our background image appears on top and then outside that area you can see the outside_container background showing through.
- I've also given the container a minimum height, this is just so that when we look at the HTML page at this point you can see roughly how it's going to look when there is content. Later on our content will produce the minimum height anyway.
- The footer is basically just a single line border and some padding. There's no need to give it a background colour, because we set that in the <body> earlier. Remember with the padding definitions it goes like this: padding: top right bottom left (clockwise!)
Here's where we are up to now...
View The Site So Far
Step 6
Next we'll finish off that footer by adding a few extra styles like this:
/*
Footer
*/
#footer {
border-top:1px solid #3f2324;
padding:30px 50px 80px 50px;
color:#674f5d;
font-size:9px;
line-height:14px;
}
#footer img {
float:left;
margin-right:10px;
}
#footer span {
display:block;
float:left;
width:250px;
}
#footer a {
color:#9e8292;
text-decoration:none;
}
#footer a:hover { color:#ffffff; }
So here I've added a few bits to our #footer class and created a few more classes. Let's go through it one piece at a time:
- First of all the bits between /* and */ are CSS comments. It's nice to have comments in your CSS file as it really breaks it up and helps keep things intelligible. Actually on larger projects I find CSS files can get pretty out of control if you're not careful. So it's really good to try to get into good habits early: name your selectors well, add comments, keep like things together, break into multiple CSS files for larger projects and so on.
- In #footer I've added a font color, font size and line-height to our previous definition. Line-height is a really useful text attribute as it helps you space out your text. Without good line-height text can look bunched up and harder to read. Too much line-height and the text will be so spaced out it looks weird. So you might want to experiment to find the right heights for different fonts and sizes. Here 14px seemed like a good fit.
- Next I've set the #footer img and #footer span to both float:left. Because they are both set to float left, they end up in columns next to each other. I'll talk more about floating and columns later in this tutorial.
- Finally we tell the browser what to do with <a> tags (i.e. links) that appear in the footer. Namely that they shouldn't be underlined, and should change color when you hover over with a mouse.
So with the addition of the footer here's where up to:
View The Site So Far
Step 7
Now with the footer out of the way, let's add some more content to the page inside the main container areas. First we need two new images that we make out of our PSD file:
Notice that I've used an image for the big text block. In general it's best to use text for these things as it makes the page much more searchable and is good practice. But it would have been much harder to do as we'd need to use a bit of Flash and SIFr to achieve that effect. So since this is a fairly straightforward tutorial I've opted to just use a big image :-)
Here's a snippet of our HTML code - just the containers bit:
<div id="outside_container">
<div id="container">
<a href="#"><img src="images/logo.jpg" id="logo" /></a>
<ul id="menu">
<li><a href="#">Retouching</a></li>
<li><a href="#">Digital Effects</a></li>
<li><a href="#">Web Work</a></li>
</ul>
<ul id="right_menu">
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<img src="images/panel_home.jpg" id="panel" />
<div id="content">
<!-- THE CONTENT GOES IN HERE -->
</div>
</div>
</div>
So inside the container area we've added five things:
- Our logo: It's linked, so clicking it should take you to the homepage, and has id="logo"
- Main menu: This is simply an unordered list with id="menu"
- The right hand side menu: This is the same as the other menu, just different id="right_menu"
- Big text panel image: This is our main heading text saved as an image, id="panel"
- Content Div: And this is where we are going to place all our page content later on. I've left it empty right now except for an HTML comment.
So before we start styling it up, it's worth having a look to see how the page looks with just everything dumped on like this:
As you can see we're going to have to do some serious shifting around to get everything into place. As you'll recall we're going to use Absolute Positioning to do this quickly and easily.
Step 8
Here's the CSS we add to make our elements start to fit into place:
#container {
background:url(images/background_main.jpg) no-repeat;
min-height:800px;
width:1000px;
position:relative;
}
/*
Logo / Menu / Panel Positioning
*/
#logo { position:absolute; top:58px; left:51px; }
#panel { position:absolute; top:165px; left:51px; }
ul#menu {
margin:0px; padding:0px;
position:absolute; top:145px; left:75px;
}
ul#right_menu {
margin:0px; padding:0px;
position:absolute; top:145px; right:75px;
}
So again let's go through each bit piece by piece:
- First of all, you'll see an old bit of our code - the container. I've shown this as I've added two more lines to it now. It now has a width:1000px and position:relative. This is important because when you set position to be relative, anything absolutely positioned inside, is done so relative to that container tag. So this means I can position things inside this box, using the fact that I know it's 1000px wide. Namely I'll be using that for the right_menu.
- Next because this is a new set of CSS, I've sectioned it off with a comment
- With the logo and panel I've given both an absolute position on the page. How do I know what numbers to use? Simple go back to the original Photoshop document and measure out where they are meant to be! You can see it's a really simple class definition, which is why absolute positioning is so easy.
- Next with the two menus, these are also absolutely positioned, but here I've also given them margin:0px; padding:0px; definitions to make sure we clear away any default margins and padding which unordered lists have.
- Next notice that on the right_menu when I have specified the absolute position to be right:75px. This means that it will appear 75px away from the right hand side of its container. Ordinarily that would be the browser window, but because remember earlier I set the container to have position:relative that means it will be 75px away form the right hand side of <div id="container"></div>.
Now you might be thinking, well what's the point, can't I just position things using left only? Well you can, but with our menu, if you were to add extra menu items you would need to reposition it again and again so that it was still 75px away from the right hand side. Whereas by using right the extra menu items flow left when you add them. Try it and see!
So here's where we are at:
Step 9
As you can see in the previous image, the logo and heading element are now looking like they are in the right position. But the menus are looking kinda weird. Before we style those, a quick word on the logo / image panel. You might be wondering, if they are both images, why not make them part of the background image?
The answer is that the logo we want to make linkable, so that clicking it will take you back to the homepage (makes the site more usable), and the main text panel, well that would probably change from page to page. So by having it a single image, we can have lots of HTML pages using the same CSS stylesheet but simply positioning a different image there with different text.
Now let's style the two menus and make our page really start to take shape. To do that we need the following CSS:
ul#menu {
margin:0px; padding:0px;
position:absolute; top:138px; left:75px;
}
ul#right_menu {
margin:0px; padding:0px;
position:absolute; top:138px; right:110px;
}
ul#menu li, ul#right_menu li {
margin:0px; padding:0px;
list-style:none;
margin-right:10px;
font-size:9px;
text-transform:uppercase;
display:inline;
}
ul#menu li a, ul#right_menu li a {
text-decoration:none;
color:#bd92b2;
}
ul#menu li a:hover, ul#right_menu li a:hover {
text-decoration:none;
color:#ffffff;
}
The first two bits of this code are the same as before (although I adjusted the positions a little to make them look right after styling). Notice that these two definitions are separate as they have different positions, but after that we've combined the two into the same class definitions as the menu items themselves should look the same. The format for defining two classes together is:
.myClass, .myClass2 { ... }
This is very different from this definition:
.myClass .myClass2 { ... }
Because the second definition says, all elements with class="myClass2" inside an element with class="myClass".
Anyhow so back to our styles, let's go through some important points:
- We've set the <ul> elements themselves to 0 margin and padding, and absolute positioning, as we discussed previously
- Then we've said for all <li> elements inside those <ul>'s we want them to have no list-style (i.e. no bullet points), we want them to 9px, all upper case, and importantly they should display:inline. Inline display means instead of being blocks that appear one below the next, these will appear next to each other!
- The next definition says that for <a> link tags that appear inside an <li> tag that are inside <ul id="menu"> or <ul id="right_menu">, they should be a certain colour and have no underline.
And with that, our page is now looking pretty good!
View The Site So Far
Step 10
Next it's time to add some content! First let's add some dummy text, set up so that we can make columns. Here's the HTML:
<div id="outside_container">
<div id="container">
<a href="#"><img src="images/logo.jpg" id="logo" /></a>
<ul id="menu">
<li><a href="#">Retouching</a></li>
<li><a href="#">Digital Effects</a></li>
<li><a href="#">Web Work</a></li>
</ul>
<ul id="right_menu">
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<img src="images/panel_home.jpg" id="panel" />
<div id="content">
<div class="column1">
<h2>a sleek design</h2>
<p>Dummy Text: This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
<p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
<p>This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
<p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
</div>
<div class="column2">
<h2>tutorials</h2>
<p>Dummy Text: This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
<p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
<p>This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
<p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
</div>
<div class="column3">
<h2>recent work</h2>
<p>Dummy Text: This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
<p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
<p>This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
<p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
</div>
</div>
</div>
</div>
OK so in this snippet, you can see I've added 3 new <div>'s inside the content area. Each one has a <h2> title element and them some text. They have class names column1, column2 and column3. The reason I've added all the extra text is to show you something about making columns.
First let's add some CSS to make them appear like columns:
/*
Content
*/
#content {
padding-top:435px;
padding-left:85px;
width:815px;
color:#674f5d;
font-size:13px;
line-height:20px;
}
.column1 { float:left; width:230px; margin-right:30px; }
.column2 { float:left; width:230px; margin-right:30px; }
.column3 { float:left; width:270px; }
As usual I've sectioned off our new bit of CSS with a comment. Then I've set some styles for #content. Notice how much padding-top there is ... 435px! This is to make space for all those absolutely positioned elements earlier. Unlike those elements this content area is in the normal flow of the page.
It needs to be in the regular flow because as you add more content to it, it should push the footer down. If this was absolutely positioned it would just go over the top of the footer.
Now the three column classes, notice they are each set with a width and with float:left. This tells them that they should drift to the left of the page aligned next to any other left floating elements. I've given the first two a right margin so they aren't stuck to each other.
Floating an element makes it drift to the left or right, and tells everything else to wrap around it. When the other elements are also floated, they form into columns. Generally any time you see a column layout, it's using floats.
Unfortunately there is one weird problem with floats. Namely that they have a problem with their containers. Instead of pushing the next elements down, they just drift over the top. The way to solve this problem is to have an element that comes after them which has the property clear:both.
The Clear property says to stop wrapping stuff around the floating <div>'s. It's a bit hard to explain, so let's look at what happens with and without the clearing.
Without Clearing
Here is how the layout looks as is:
See how the columns have drifted over the top of the footer, and the footer itself has started wrapping around them. That's not right!!
With Clearing
The solution is reasonably simple, we need to add a <div> after the three columns like this:
<div id="content">
<div class="column1">
<h2>a sleek design</h2>
<p>This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
<p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
<p>This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
<p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
</div>
<div class="column2">
<h2>tutorials</h2>
<p>This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
<p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
<p>This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
<p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
</div>
<div class="column3">
<h2>recent work</h2>
<p>This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
<p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
<p>This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
<p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
</div>
<div style="clear:both"></div>
</div>
See the <div style="clear:both"></div> down the bottom? It's just an empty <div> that says to clear out the three columns. And it fixes our problem,
View the Site Here.
A Few Last Words on Floats & Clearing Them
You might be wondering why I didn't place the "clear:both" into the <div id="footer"> definition, but unfortunately that doesn't work out because of the background we're using ... here's a screenshot:
Apparently there is a solution that doesn't involve inserting a useless <div> tag, and you can read about it at QuirksMode. Personally I've been using this method for a while, and it works well and consistently so I keep doing it.
Step 11
OK, almost there now!! The main layout is all sorted, all we have to do is add and style our content. Here's the HTML for it:
<div id="content">
<div class="column1">
<h2>a sleek design</h2>
<p>This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>
<p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>
</div>
<div class="column2">
<h2>tutorials</h2>
<p>Psdtuts and nettuts provide tutorials on the following topics (sorta):</p>
<img src="images/adobe.jpg" />
</div>
<div class="column3">
<h2>recent work</h2>
<ul class="work">
<li>
<a href="">
<img src="images/work_1.jpg" />
<h4>Working Within Limitations to Achieve Great Designs</h4>
Sean Hodge
</a>
</li>
<li>
<a href="">
<img src="images/work_2.jpg" />
<h4>Create a Slick Tabbed Content Area using jQuery</h4>
Collis Ta’eed
</a>
</li>
<li>
<a href="">
<img src="images/work_3.jpg" />
<h4>Creating a PayPal Payment Form</h4>
Collis Ta’eed
</a>
</li>
</ul>
</div>
<div style="clear:both"></div>
</div>
It's basically the same structure as previously except in the third column I've created an <ul> element to contain the recent work. Notice that in this <ul> element I've set it up so that there is a link <a> tag wrapping up the image, the heading and the text. So the whole thing will become a block link. That means if you roll over the image, the text associated with it will still change colour.
So here's the CSS for our content:
#content h2 {
font-family:Georgia, "Times New Roman", Times, serif;
color:#dbaa70;
margin:0px 0px 20px 0px;
font-weight:normal;
}
ul.work {
margin:0px; padding:0px;
}
ul.work li {
list-style:none;
margin:0px; padding:0px;
clear:both;
}
ul.work li a {
color:#e0b882;
display:block;
padding:5px 10px 5px 10px;
text-decoration:none;
font-size:10px;
}
ul.work li a img {
float:left;
margin-right:20px;
margin-bottom:20px;
}
ul.work li a h4 {
color:#674f5d;
margin:0px;
font-weight:normal;
font-size:13px;
}
ul.work li a:hover, ul.work li a:hover h4 { color:#ffffff; }
Lets go through the classes one by one:
- First we are redefining what <h2>'s that appear inside <div id="content"> look like. We could have just redefined all <h2>'s, but you never know when we might have a <h2> that appears somewhere else, so it's good practice to be reasonably specific. All I've done here is change the colour, font, weight and margins to make it look the way I need.
- Then we have the <ul class="work"> definitions. The first <ul> definition just gets rid of the margin and padding.
- Then the <li> definition says there should be no list-style (i.e. no bullet point). It also says clear:both. As you recall from the last step this is to clear floating elements. And if you scan down a little you will notice that the img definition later on has a float. So here we're saying each new list element <li> should be clear and not wrapping around parts of the last one.
- Next in the <a> part, we're saying that the <a> tag should display as a block. That is to say we want our links to be a big block that encloses the image and text. We give it some padding to flesh out the block and set some styles for how text should appear.
- Next we say that the <img>'s inside our <a>'s should float over to the left with a bit of a margin.
- Finally we define the colour of the text in the <h4> bits.
And that's it! We're done!
Finished!
And with that the site's homepage is complete. You can download a ZIP of the site files to look through - it contains the HTML for different stages of this tutorial. And of course you can see the final HTML document:
View the Final Page Here
Internet Explorer
Now you should always be doing cross-browser testing. Alas I have just switched from Windows to a nice new Mac and haven't got a Parallels/Win install yet, so I can't! I did a quick check via BrowserShots.org and can see it's mostly working fine in IE6/7, however there is a problem with the three columns forcing the footer much further down than they should. Anyhow should be an easy fix, but until next week when I've installed Windows, IE users you're on your own :-)
I will update here once I've had a chance to iron out the crinkle but I didn't want to hold off publishing until then!
Related Posts
Check out some more great tutorials and articles that you might like
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )Adam April 25th
Great Stuff!! I have been looking for a tut like this for a long time.
( )Gino April 25th
This is so incredibly helpful! I’ve been trying to brush up on my coding skills and this has helped a ton!
( )Andrew D April 25th
Great tutorial
( )Constantin Potorac April 25th
Great Tutorial Collis. Thank you
( )Brian April 25th
You guys should do one that explains the other types of positioning in the future too! I would LOVE to read it. I’ve been making all of my pages in iWeb because I can’t seem to grasp how the positioning works. GREAT TUT though….
( )Shane April 25th
As I’ve just commented over at psdtuts.com, thought I’d have a look over on nettuts! Another great tutorial
Thanks.
( )Diego April 25th
good job great tutorial
( )Razvan April 25th
Thanks for the tutorial, coding isn’t really my thing..
( )Manuel Merz April 25th
Good stuff Collis but why not making it valid? I mean you’ve used a simple and good structure so don’t get stuck on things like this. I think its important to tell beginners that they should check their code with the validator to correct and fix errors. It’s also important for further SEO checks,
Another thing is to use the three images on the “recent work” as background images and use a span tag for the textlink to give them a padding with the size of the image. There are most of the warnings/errors coming from…
Regards
( )Manuel
Lamin Barrow April 25th
Very nice. Thank you for all the design and coding effort.
( )Qbrushes April 26th
coding isn’t really my thing but its made so simple in these tutorials that its fun and just great to see the outcome.
( )Shawin April 26th
hey there.
( )thanks a lot. I’ve been looking for a complete photoshop to CSS/HTML tutorial for a long time to help me start with CSS.
university only taught me html, slicing and tables and I hated that.
now I can finally start making websites again.
cheers.
LongyZ April 26th
Really great tutorial! I’ve never tried HTML code before but this tutorial has inspired me to give it a go!
( )macias PL April 26th
psd / html / css - excellent 4 me … thx a lot…
( )HDCase April 26th
Thanks guys!
( )This one is the best tut i’ve ever seen. Period.
mike April 26th
Excellent coverage of the basics. Where were you when I needed you? My own site will be going live this weekend or early next week. Only thing I would like to point out is that for something like a portfolio site that would be regularly updated it is probably best to build it on a CMS platform, perhaps Drupal or Joomla or even Wordpress, but then I suppose that is a whole other tutorial.
( )Nice one!
Ben Griffiths April 26th
That looks cool - way better than my portfolio!
( )Markus April 26th
You are god!!
( )Mark Provan April 26th
Nice tutorial
Thanks
( )Harry April 26th
I have not done it yet but it will be awesome!
( )Hendri April 26th
Great Tuts Collis! we love u
( )David April 26th
I cannot wait to try this material out. I’m not skilled in CSS or the coding end of things, so this is way exciting…
( )1984 April 26th
This tutorial is finally complete.
You showed how we as creates the design and then how this design incorporated through XHTLM and CSS.
I do I say that this tutorial will be highlighted on both sites ! PSDUS and NETTUTS.
Again thank you !
( )giackop April 26th
thanx.. the most useful tutorial ever.. love it
( )Misa April 26th
this looks awesome. if I create a wordpress theme using this tutorial, would you mind? I mean, regarding copyright and that stuff.
( )Daniel April 26th
Great tutorial here, very useful! thanks a lot collis !
( )arnaud April 26th
Very good thx
( )Nick April 26th
AWESOME! Thank you for starting to do these!!!
( )tony April 26th
Great work! I really hope you’ll make a similar tutorial for the “Designing a family of websites” tutorial. Thanks,
( )will April 26th
Very nice.
A few things I would change about this though:
The large image (panel_home.jpg) with the text “By keeping a sharp polished…”.
Instead of using an image here I would have used an H2 tag and used image replace methods to hide the text but still leaving it visible to search engines and use the image as a background for the H2.
For example:
h2{
display:block;
width:851px;
height:199px;
text-indent:-5000px; /*Hides the text*/
background:url(/images/panel_home.jpg);
}
The second thing is the use of a ul for the work. I would suggest using a dl (dynamic list) which supports the dt (title) and dd (content) tags. It makes more sense that way as each work item has a title and then content.
Will
Engage Interactive - Web Design Harrogate
( )Ali April 26th
This is an excellent tutorial, very helpful
( )D. Carreira April 26th
Thanks!
David Carreira
( )Bryan April 26th
Seriously helps me understand everything I’ve been trying to teach myself. Thank god I kept up on PSDTUTS!
( )Ben April 26th
Amazing! Thanks so much for posting this.
( )daniel lopes April 26th
Hello Collis, please open up to contributions. I had hundred topics to write about CSS, XHTML, FLASH, FLEX and Javascript.
Great tutorial, bye.
( )Nate April 26th
Collis strikes again! Thanks bro for this awesome tutorial, it will definitely come in useful.
( )Chris Voll April 26th
Have you tried ies4osx? It’s basically Internet Explorer running on a Mac under Darwine. The IE7 port is still a bit buggy, but it works well nonetheless, doesn’t require a PC (or Windows, for that matter) to use, and, best of all, it’s free.
http://www.kronenberg.org/ies4osx/
( )endorphine April 26th
I personally think the logo should be and the panel a styled .
( )Having raw text hidden will help you with search engines.
Still a very good tutorial
TheMystical April 26th
Very nice, thank you.
( )Mantero April 26th
Great Tutorial! Thank you so much!!
Hope u can work for wordpress themes coding tutorial next time..
Thanks a lot
( )Nico April 26th
Awesome! Thank you!
( )Doug Avery April 26th
You’ve done a great service to new web designers with this post. Good job!
( )Kyle April 26th
Great job. Especially like the integration between PSDtuts and NETtuts.
Please, do some more collaboration tutorials.
( )Kakumei88 April 26th
WOW!!! I have been needing a CSS tutorial! I thank you A LOT, and I mean A LOT! I am going to have to get to work on making that website for my friend!
( )Michael Castilla April 26th
Fabulous tutorial Collis. Really great work and nice design
( )ZaFaR April 26th
Really awesome work collis! Very much interested nice work! great work at right time, thank for sharing,
( )Hats off to collis.
godonholiday April 26th
Great!!
Just a note to those who say you should build this around a CMS… well that is not always the case, you can look at building your own CMS with some basic PHP and MySQL…..
and a recently linked site cushyCMS…. this option is great for those who are new to web design and content management systems.
this was such a great tutorial i cant wait to see how everyone bends it to suit their needs….
would be cool to have a flicker pool for these?
( )Andrei Constantin April 26th
I have to admit that nettuts already starts to look hot, and not that i had any doubts about it
however i would like to see a tut about slicing up a psd 
( )Derek April 26th
Should you really have used absolute positioning?
( )It seems like it would have been simpler and easier to add things later if you hadn’t…
ashvin April 26th
thanx a lot man! you rock!
( )Gale April 26th
Great Staff! Thank you for publishing it!
( )Lukas Orgovan April 26th
Pretty cool tutorial, you really make things so clearly and light and simply so powerfull… Just amazing.
But I have one question. Why you created the ‘outside_container’, when you could easilly add background to the body??? I think, it was needless.
( )Anselmo April 26th
Great explanation and result.
Thanks
( )Sean April 26th
Thank you, Thank you, Thank you! Great work!
( )gen April 26th
Very nice tutorial Collis! We need more practical full-length tutorials like rather than the theoretical stuff you find about building beautiful sites.
( )ud2008 April 26th
Collis mentioned that he was planning on installing Parallels and I a, wondering which people preferred to use on their Mac , parallels or fusion?
Thanx.
( )Taylor Satula April 26th
WOW great keep up the psd css lovin.
( )Catherine April 26th
Thanks so much! I was just wrestling CSS on a project this week where your footer explanation would have come in handy! I’ll definitely organize my next project pages this way–it’s great to have the entire PSD through CSS/HTML workflow explained, especially for those of us who take site projects all the way through on our own. Bravo!
Also, I did the pc to mac upgrade and did get Parallels. But you still can’t view/test in IE locally from Dreamweaver. The site has to be loaded live to view in IE. (Which I do my stashing it on a hidden file in my site, but what a pain!)
( )Aminur RAHMAN April 26th
nice tut,
( )DT April 26th
Damn good one Collis! I have been looking for something like this!
( )Josh April 26th
first off, Nice tut!
wouldnt it be much easier and also less space if you just used CSS to make the background color black (or what ever the color of your thin slice) than use the slice that is repeated?
-Josh
( )Erika April 26th
Nice work, guys.
( )Sam Wieck April 26th
Very cool tutorial! Would love to see how one would work a design like this to fit in with Wordpress! Using page templates etc.
( )Jonno April 27th
Not a bad design but your coding leaves a lot to be desired. Noobies will get a kick out of it though.
( )Tim April 27th
Very nice result! Very professional looking =)
There are a minor few things I would add:
The logo would be more semantically correct if it were placed in a h1 with the span element hiding the text.
html:
Logo text
css:
h1
{
height: 100px;
background: url(”/images/image.jpg”) no-repeat;
}
h1 span
{
display: none;
}
Also using:
* { padding: 0; margin: 0; }
..at the start of your means you don’t have to keep typing margin:0; padding:0; for everything
–
( )Tim
Tim April 27th
ok the form seems to have stripped my html out, it should read:
html:
[h1][span]Logo text[/span][/h1]
( )Robin April 27th
Not how I would have positioned or laid things out to be honest.
You will find that the only way to get everything looking the same in every browser, is to use floats. Left floats. With a fixed width, adding up to the same width as the main content. Especially if you are center aligning something.
I wont bad mouth absolute positioning because it is quite useful when you’re working with a element inside a relative positioned element.
I like the design but it doesn’t seem very practical. Black on white is pretty much the only thing corporate business want these days, and if it doesn’t look and the same in all browsers then you can kiss your contract/paycheck goodbye.
( )Sam April 27th
Really nice, great guide from start to finish.
( )Roberto April 27th
Absolutely stunning work and for free, definitely one of the most useful tutorials I found in the net. Thanks so much for sharing!
( )Johan April 27th
Thumbs up!
( )Acronyms April 27th
Great one for all those who are learning.
( )Ariful Khan April 27th
Great!! I was looking for such type of tutorial. I must practice this after my exam. Carry on….
( )sebastian April 27th
i agree, great tutorial. Been looking for a tutorial like this for a while too.
( )Brandon April 27th
Another gem! Keep ‘em comin’!
( )Liam Morley April 27th
absolute positioning + pixel-defined font sizes = bad accessibility/design, the last thing you want to highlight in a portfolio. as someone else commented, not specifying everything absolutely and letting things naturally flow around each other actually might save you time in the long run, it just requires you to think more about how things relate to each other.
( )Fubiz April 27th
Impressive tips !!
( )RedesignYourBiz.com April 27th
Thank you soooooooooooooooooooooooooooooooooo much
very well written tutorial.
http://www.redesignyourbiz.com
( )Nikhil April 27th
Way da Go!!
( )Following this up!!
Rolando Murillo April 27th
Really cool stuff my friend! This kind of design is what I like in websites.
( )Action discrète April 27th
And the level goes up.
( )Inspiration Up April 27th
I like the way you code the CSS its very clean and the class names are make sense.
( )James De Angelis April 27th
Great tutorial to cover the basics. However, as others have mentioned it would be great if you were more mindful of accessibility. Replacing chunks of text with images without an option for those with CSS/images turned off is not a good lesson for the kids.
( )drumkeyjw April 27th
Great tutorial! Thanks!
ud2008,
I’ve used both Parallels and Fusion and I like Fusion a lot better. Plus I believe it’s about half the cost as well. I only need it for basic stuff. I think Parallels has more features, but Fusion works for me just fine…
( )GeminiArt April 28th
great tutorial
thxxxxxxxxxxx
( )Alberto April 28th
This cross-site thingy is really great. From scratch to final result. Neat!
( )Danny April 28th
Hello
Nize one, but why do you use 2 different classes for colomn one and two, they are exactly the same (correct me if i’m wrong) . I would say give them the same class, that should be the purpose of xhtml and css I guess.
( )Tom April 28th
Thanks for this gorgeous double tutorial which gonna help me a lot !
( )Chris April 28th
Great kickstart to the new site!
It’s always interesting to read up on the methods of others to pick up some new tips.
Chris
( )Tom April 28th
Nice tutorial and good looking design, but you should validate the markup.
Details have great importance, for example the logo and the big intro text don’t have a text alternative.
It’s a great starting point anyway, keep up the good job!
( )wolfcry911 April 28th
The extra space in IE can be eliminated by giving your clearing div a small height (1px). As you mentioned, there are other methods to clear or contain floats. I strongly believe we should not be adding extraneous mark-up to accomplish this. I find that overflow: hidden; works fine for most situations.
( )Ade April 28th
Thank you! I have been looking something like this!!
( )Sindre April 28th
Hey nice tuts. Could i recommend you make a tutorial showing us how to make this webpage be dynamic with php or jsp maybe? Oh well would be awsome.
Thanks!
( )Peteman April 28th
Nice tute!… I’d prefer the CSS to be in it’s own file though!.. easily done if you find a great tute!!…
( )Christian Mejia April 28th
PSDtuts & NETtuts, I LOVE YOU!
( )Josh April 28th
Thanks for the double tutorial. These sort of tutorials are incredibly helpful for someone like me, who needs a kickstart into coding. After reading a lot of the user comments, I have some more homework after completing this. I’m sure this site will become an invaluable resource as I learn the ins and outs of coding.
( )Kim Dolleris April 28th
Cant wait to see more! Thx alot!
( )rob April 28th
Thanks a bunch. I can see that the NETTUTS site will come in handy.
( )Jesus A. Salazar April 28th
Hey Collis, congratulations, it’s a nice tutorial. There are a lot of comments on how you shouldn’t use absolute positioning and what not, but I believe you were quite clear on why you were using it and why sometimes it’s not a good idea. Obviously this tutorial is more intended to help people that are starting out with xHTML and CSS, and you did a great job at that.
( )If you are interested, the IE bug (the extra space between the columns and the footer) has to do with the clearing before the footer. Somehow IE makes that div really big. The solution is to simply remove the inline styling and give it a class () and within your stylesheet add the following:
.clear {
clear: both;
height: 1px;
overflow: hidden;
margin-top: -1px;
}
That will remove the problem in IE6 & 7 and will remain compatible with all other browsers.
Cheers and congrats once again on this tutorial.
Hip Hop Makers April 28th
Great tutorial. I love this site
( )Kurt Cruse April 28th
YES! YES YES YES! 1+1=3 So great to see the two sites working together.
( )Niall Doherty April 28th
Regarding the clearing of floats, simply add “overflow: auto” to the CSS for your content div. Works every time, cross-browser.
Also, this site is off to a great start, but I’d love it if you guys could start preaching validation for XHTML and CSS. It’s very important.
( )Aftab Vahanvaty April 28th
For a newbie - this tutorial is very easy to understand and gives a new dimension to world class design - something I have been looking for a long, long time.
( )Savant April 28th
I have been looking for this tutorial for ever!
You made it look so easy. Awesome job! Do you see a css layout converted to WordPress theme will be in the near future? I sure hope so. Awesome execution and consistency of awesomeness from psdtuts.com developing to here.
The only thing left would be the flatuts.com. Anyways awesome stuff!
( )tihoimas April 28th
It’s a great tutorial for me because I’m very new to learning web design, so thank you so much for this tutorial. But, I’m having a little problem, I can’t get rid of the lines around the logo. I’m sorry I’m such a beginner but I would love some help.
( )tihoimas April 28th
sorry sorry sorry, I got it. It was border:none; it wasn’t in the tute but it was obvious enough.
( )Jonathan Solichin April 28th
I don’t know if it’s just me but the result doesn’t seem to be centered. I think you need to wrap the whole content with a and then apply css to with “margin: 0 auto;”. I could be wrong. Sorry if I am. cheers
( )Gerben van Dijk April 29th
Step 9, line 7 needs a minor correction
rightright:110px;
For the rest, great tut, i always like to see how other people work
( )Fady April 29th
its really nice! thank you “collis” for this great site and for the great effort.
( )Easily Amused April 29th
I really like how this tutorial puts everything together.
Also the typography on here is quite nice, too.
One of the things that’s making me happy with the web is typographical awareness.
People and designers are getting creative with type, and are really starting to make it an intregal part of their web designs.
The fact that this tutorial puts a nice emphasis on the type, well, it makes my heart swell.
Now, what about adding more typefaces to the web?
That would either be really great, or just horrible, horrible, horrible.
James Caruso
( )Easily Amused Inc.
sumit April 29th
you are a very organized man
( )thanks man
John April 29th
Web development has consistently been my downfall, I’m a dirty coder and not proud of it. But this tutorial has cleared up a wave of issues I’ve had. I used this new knowledge to clean up a clients site and I was finally proud of my web work.
Can’t wait to see more. Keep it up!
( )that graphic guy April 29th
great tut… Please keep up the great work!
( )Mike April 29th
I like the design but the coding is kind of iffy. There isn’t really any reason to use absolute positioning. It could have been done by simply using margins. I dunno, might just be my personal preference.
( )Rob April 29th
Guys, I hate to be grump but do you really think you’ve got a good design when the web page itself is so dark that you can scarcely see how it’s laid out? It almost looks as though we’re looking at a picture that’s hanging on a wall in a very dark room. Just my $.02.
( )2clicks April 29th
Thanks for this so clear TUTORIAL. I´ve been woring with CSS for a while… and with this tutorial I fully understood some things (like the position:relativo… inside ABSOLUTE position RELATIVE to the first) and a couple of very useful tips.
( )TAHNKS A LOT, GUYS!
Bintey April 29th
awesome tutorial. thank you
( )baobaz April 30th
wow.. very nice tutorial.
( )Terry April 30th
everything you people criticized was explained in the beginning of the tut.
and to be honest, none of you agree on an answer, which tells me you dont care about the tut, you just want to show of little bit of esoteric “fixit” knowledge you have over someone else.
good for noobs, which is what this was for.
( )Shance April 30th
Complimenti! Tutorial ben fatto.
( )hi April 30th
Great design, it really looks vivid and breaks the “flat” feel most pages have.
On the negative its not very standard compliant, though with a bit of work it can be.
( )Danny April 30th
Wow both this and PSDTUTS combined. What a spectacular 2-part tutorial!
( )Dave April 30th
great article guys, thanks!!
( )Travis McCrea April 30th
As an avid hater of the background image that “makes the site” I was atfirst displeased with this, but I tried it myself and found that I liked the simplicity of it… however, I would suggest to anyone else creating something like this, use it as a template to show your client, and if they like it, code it for real.
This can be done with the following in css:
opacity
borders
maybe a bit of javascript to do any extra effects.
http://www.geeksparadox.com/index.php is my current work in progress, I am going to convert it into an actual design and not use the absolutes.
( )Paul May 1st
Tried to use this with LightWindows but there seems to be a conflict somewhere.
( )A Lightwindow won’t launch from within any of the content areas.
If I get time and resolve this will post back
max239947 May 1st
I love the template, but it could be coded much better. I don’t really think that absolute positioning is really necessary here, and it doesn’t render well with IE, so I would try to make that cross-browser. Other than that, I would use line-height for the navigation at the top instead of individual absolute positioning.
Sorry for the negative input,
( )Max
Paul Szymula May 1st
Really nicely done, but I wouldn’t use absolute positioned div’s and static background. Just think - you’re designing a website with absolutes and static background — it’s cool, but in the perfect maybe you’ll have to add more body text (more paragraphs or headings for better SEO) and then what? You’ll just HAVE TO change the code and background graphic.
Despite what i’ve wrote above, you’ve done really nice css/xhtml and graphic design job.
Cheers,
( )Paul
Paul Szymula May 1st
“…it’s cool, but in the perfect maybe…”
Perfect = future
Dunno why wrote perfect instead of future
( )genericIT May 1st
Thank you for this nice tutorial. It’s great to see, how to create a site in a professional way.
( )Pitrus May 1st
Which software did you use to do this site? i hope you’ll answer soon
Regards..
Pitrus
( )Pitrus May 1st
Did you use Dreamweaver?
( )Joefrey Mahusay May 1st
Very interesting Thanks a lot.
( )jeremy May 3rd
In regards to the IE Fix that Jesus A. Salazar recommended.. I tried it, didnt work. so I used this:
IE6/7 seemed to not like
( )Ben May 4th
Great Tut! Very helpful for someone just getting into it.
( )Cheers!
BenRulz May 5th
great tut collis….. but i hav a question…. does anyone know wich editor is being used in this tutorial..?
( )i cudnt find it..!! if someone knows please temme me….a noob to coding …!! my first coding project …heh..!! thnks again..!!
Mukund May 6th
Cool work Collis!!
Now I hope you’ll follow this up by letting us know how to port such a design to Wordpress! I believe that’s what you use for your websites!!
Nice beginning to this site!!
( )Kim May 6th
This is great! I’ve been looking for a tutorial on this for ages. Great post!
( )Blackblade May 6th
Nice tut 4real!!
@BenRulz: Try out Notepad or Notepad++ or sth. like that. l
( )brett May 6th
as was said before, absolute positioning should be avoided when possible. flexibility is of paramount importance in web design.
( )Jorge Diaz May 7th
It can be done with notepad or text edit or any text editor your have, just save the file as a css file. And for the graphics, he uses photoshop.
You can use dreamweaver or textmate to acomplish the same result. It’s not a matter of software, it depends on your coding skills, that are well laid out by Collis.
Nice tutorial.
( )jamie May 7th
Nice Article.
( )more and more Helpfull
Lance Knadle May 10th
Thank you for this PSD/NET combo tutorial!
Check out my rendition, I coded it a little different and it validates! http://www.lanceknadle.com/200N8/index.html
You will notice I made use of the and tags for the logo and the quote images. The header text has been shifted far off the view port with CSS.
For the work section I opted for the definition list, , and added some style to the thumbnail images.
Is absolute positioning really so bad for this particular design? Perhaps I should try to arrange things by setting margins.
( )Austin May 11th
I do have a question. Why would you include the boxes as a part of the background instead of incorporating them as a separate background in their respective ’s that way you don’t have to do exact positioning with the image elements like the text?
( )JD May 13th
Wow i’m doing a tutorial for ps and this is really inspirational!
( )Thanks for all the hard work!
Sam P. May 14th
Nice site, a simple insite to using photoshop to make a website. Can’t say it’s perfect but then I am being forced to view it from IE6 (stupid school, do they not know anything?) :/
( )Orama May 14th
I finally got around to doing this tutorial from PSD to XHTML/CSS. Keep em’ coming Collis!
( )Raj May 16th
gr8 tutorial Collis. thanx a million.
( )creative mrityunjay May 17th
u are too good for designers .Thanks for this huge helping tuto.Please give us more tuto for designers…..
( )Hudson Afonso May 21st
no amazon images!!!!!
( )berehel May 22nd
yes! this is was I searching for thank you.
( )Aimee May 23rd
This is one of the best tutorials I have read. Thank you for all the time it took to break down the thought process and to include all the code illustrations and site-in-progress samples. It as really appreciated.
Question: why is the text on the footer being broken into multiple lines? I don’t see any breaks or widths indicated.
( )Ilias May 23rd
If you put “a{outline:none}” in the css you can get rid if the ugly dashed border that’s around the links and very annoying in dark designs like this one. Visible in firefox. Example : http://iliasjohri.be/omt/outline.png
( )Darcy May 25th
say Lance Knadle, would you mind giving us all the code for your IEdivFix class? i am a VERY new coder and i would greatly appreciate it. thank you.
BTW Collis, great work man. thank you very muchos.
( )Danny June 1st
Just came back to see this one again…. It’s so great
( )Benny June 2nd
Awesome
( )Scott June 12th
The use of absolutes here makes this tut a bad learning tool for beginners. Please people check out some other tutorials before making this your go to guide. Check out much better learning guides at places like http://www.w3schools.com, http://www.alistapart.com/, http://webtypography.net/ and the great artices on http://www.sitepoint.com. While this tutorial is nice if i was just learning CSS for the first time I WOULD NOT reccomend this as my introduction. Learn how to position thing correctly and how and why things effect each other. These are building blocks of css.
( )Alan June 19th
Gret tutorial. I couldnt properly get my head around HTML and CSS using books so this has been a massive help.
However, i seem to have missed the section that removes the blue outline from the logo and also is there any update to the IE issue of pushing the footer way down the page?
I use PSD, Met and now Vector tuts all the time so keep up the excellent work.
( )Khawla June 30th
Great tutorial! Thanks!
( )mazzy June 30th
how do you center this?
( )Ziya July 2nd
Excellent coverage of the basics. Really Great..
( )Thanx a lot dear…thanx
Kasper Skov July 8th
Thanks! i love the way you explain every code you do! Great outcome and works in all browsers i’ve been testing it on. I had a bit trouble understanding Absolute and Relative position, but now it all makes perfect sense to me. I’m really looking forward to do another of your tutorials
THANKS!
( )Yeaahh!! July 15th
YEEEAAAHHH!!! Awesome tut! I Haven’t read it, but it looks like there’s a lot of words to read! Great job on adding so many words to your tut!
( )Dave Ladner July 17th
Great tutorial!
I cannot find info regarding how to use the same content area for different content. A great tut would be to show how to do that.
You see it everywhere. Click on a menu item and content relative to that menu item appears in the same space as the previous content.
Is this the DOM? Why can I not see the methodology when I look at a site using Firebug? This confuses me tremendously.
I currently use an iframe for this concept. I know it can be done more elegantly…
Thanks!
( )ericb July 20th
NOW THAT’S WHAT YOU CALL A TUTORIAL! Easy enough for not only beginners to follow but to understand how things are done. Keep posting some more noob-friendly tutorials! THANKS!!
( )Soumya July 24th
Wow! This is very very helpful! Thanks a lot!
( )jojo August 8th
with #content div, what is the reason you use padding instead or margin to move the div down?
( )Chris August 18th
Awesome, this is a good looking page and a well crafted tutorial. Maybe someone has mentioned it already but, perhaps a simple image replacement on the big text block would be useful.. You could still use the image to maintain the look and feel of the text but also have words in the HTML to be seen by search engines..
Cheers
( )Evan August 25th
I’ve been trying to put some of this tutorial to work in my own web site but I’m running into some problems with the menu. I can’t for the life of me get the font for my navigation bar to change to Helvetica. Currently the css looks like this:
ul#menu li, ul#right_menu li {
margin:0px; padding:0px;
list-style:none;
margin-right:10px;
font-size:13px;
text-transform:uppercase;
font:Helvetica;
display:inline;
}
Does anyone have any ideas as to why this isn’t working?
-I’m using Dw 8 if thats pertinent
( )Jeffrey Way August 25th
@Evan - My guess is that you have a specificity problem. Do you have any other fonts in your stylesheet? If so, just add a bit more weight to your selector. - font-family: helvetica;
( )Chelsea August 27th
Hey, wow this looked like a good tutorial, but ive never really done web design, so im SUPER lost, can anyone help me??
( )Zoomrix August 27th
This is a monster! It’s great to see a full on coding tutorial with a really nice looking template as an example as well.
( )Thank you so much!
Casey August 30th
How are you ripping the images from your PSD? You need to explain that a bit more for beginners.
( )Windows Themes September 4th
That`s rally awesome. Thank you!
( )Manuel Minino September 7th
Muchas thank-you very mucho Amigo!! Amazing tut!! i’ve just finished and works great!!
/* WARNING: THIS IS NOT FOR BEGINNERS */
i tried to do it myself like a month ago, when I knew nearly nothing about CSS and just a lil of HTML… NO WAY JOSE!!!
Still today i’m a little confused about some obscure things in ul class=”work”, i’ll have to study that case a lil’ bit closer…
plus: you gotta have some skills on slicing the psd and saving for web the images to do this tut.
/* TIP */
I left the logo on the background image and created an empty, transparent .gif image over to place the url link, so i did’nt have to mind about slicing and matching the background colour and the placement of the logo!!
again…. THNX a lot! GREAT TUT!!
( )Manuel Minino September 15th
update:
it seems not to render ok in IE… you have to scroll down a lot to the footer…. why web designers insist on doing things that look good on only in mac, Firefox and Safari?
In the REAL WORLD, REAL CLIENTS that pay REAL MONEY $$$$ use Windows, Internet Explorer and worship Bill Gates as a God.
does anyone out there can help me fix the “bug” of the footer in IE?? here’s a link of my try… looks cool on FF, the footer goes way down in IE:
( )DJ Delos Santos September 30th
Now that’s what I call SPOONFED WEB SKILLS! I really like how Colis do his tutorials. Thanks
( )insic October 1st
i miss this kind of tutorial in nettuts.
( )Seye Kuyinu October 17th
Wonderful tutorial
( )Odeena October 24th
Great tutorial for a designer who’s still stuck with iframes and basic CSS. (Yes, there are still that kind of people around, especially in Japan!). I’m giving it a shot tonight and I’ll post my results later on. Two thumbs up - you guys deserve it!
( )Kyle October 26th
Thanks a lot! Great attempt on my part.
I failed around step 7 when you started on the nav text for some reason i think I messed up on the code.
Thanks though I learnt a lot hope to see more of this in the future!
( )EdpeppeRs October 27th
great! wonderful! so helpful tut, man! thx a lot!
( )but, like “insic”, I miss great tuts like that here in nettuts!
Abhi.. October 27th
Extremely inspirational-cum-motivational tutorial !!
( )love it !! keep up the good work…
sriganesh November 9th
great man
( )CyberFox November 11th
Great Resource!
( )Many Thanks!
das boot November 15th
simply magnificent! Thank you psdtuts and nettuts
( )Nathan November 25th
Thank you for the great tutorial.
( )kareem November 27th
this is wonderful tutorial i will put acopy of this lesson on
( )my site here
http://www.as7ap4you.com
Edge November 28th
thanks so much! this was awesome.
( )Web design December 9th
Really Great!
Thanks.
( )Eric Shafer December 11th
Tracked back to from here: http://www.presidiacreative.com/the-most-helpful-psd-to-xhtml-and-css-tutorials/
( )Mike D December 17th
This looks awesome. I need to learn this. I hav always steered clear of coding, but I think it’s time that I bite the bullet.
( )Thanks.
Greg December 20th
brilliant! thank you.
( )macias December 23rd
i already did this great tut but there is one problem with validate
with s, in columne “Recent Work” links
> validator does not allow alement in this place
did anyone know how solve the problem…?
( )thx
macias December 23rd
sorry mistakes > again >
——————————
i already did this great tut but there is one problem with validate
with H4 s, in columne “Recent Work” links
> validator does not allow H4 alement in this place > A tags
did anyone know how solve the problem…?
( )thx
Sandeep December 27th
This is absolutely precise and perfect. Thanks much.
( )stawek December 30th
As I can see in comments black SEO rules, yeah people - pretty nice techniques for tutorial: hide some text here and there, who cares about standards only most important thing is first place in search engines.
( )Kid C December 31st
Superb tutorial.
I think the whole network of your sites are astonishingly good, and also practice what they preach.
Brilliant resources.
All the best for ‘09!
( )Benjamin January 7th
Nice design…but it doesn’t really lend itself to future growth.
You’ve rather painted yourself in a corner in regards to flexibility.
( )Vivek Hegde January 8th
Brilliant tutorial!!! It’s explained so well that even an amateur web design enthusiast can start making beautiful, professional-looking sites! Thanks a ton!
( )robi January 8th
thanx a lot….
( )Justin January 12th
Can anyone post a method to fix the IE bug?
( )I realize some people has posted css that has like .clear but where do i define that. Like where in the HTML do i give something the .clear class?
Programmer January 14th
This is a very helpful tutorial. Now I understand absolute and relative positioning. Keep up the good work, Collis
( )Mike January 15th
Any of the naysayers complaining about this tutorial needing to show how to validate the markup (whatever the hell that is) or increasing accesibility might like to write their own tutorial explaining what on earth they’re their problems are instead of whining in the comments.
( )Well written, comprehensive and easy to follow, thanks Collis Ta’eed!
Y.Long January 23rd
太有才了 厉害
( )Niquelle January 29th
thank you so much, this tutorial was really helpful for me, this was my frist time trying out this type of layout because a lot of my layouts arent up to par and I needed to figure out how to make them better especially due to the fact that I’m looking for a job and need to update my portfolio. But thank you very much, my version of this tutorial came out really nice.
( )adrian February 1st
wow this is one of the best tutorials i’ve ever seen
( )this helphed me a lot
thankx
Kat February 3rd
i have been doing the photoshop and this tutorial today and had great fun!
i loved being able to create, design and code a site from start to finish. it definitely helped me to develop my currently humble design and coding abilities further.
thank you so much for doing all this work and making these tutorials so well-structured and well-explained!
( )Tutorials February 24th
Thanks you help me so far !
( )Sam March 11th
Nice! I needed to build a portfolio site quickly, and I wanted to use a different process than PS and slicing it into tables and such. I like lean code, and this is good for a beginner like me. It’s been a while since I worked with any code outside of Maya Embedded Language, but it’s all similar to a point.
I utilized the tip in the comments to remove the box around links, but I haven’t been able to remove the gap between the footer and main container in IE. It’s only a small gap, so it isn’t that noticeable.
However, IE was positioning my text 6 pixels up the page than in Firefox, so I made two different .css files for the page, with different values for the menu positions. One would be for IE, the other Firefox, and I put in a couple lines that I learned from this page:
http://tinyurl.com/6pwtj9
What this will do is read a different .css file depending on whether IE or Firefox is used.
I also centered my main content with this code in the #outside_container definition:
width: 1000px;
margin-left:auto ;
margin-right:auto ;
POSITION: relative;
This will keep your content centered on the page. So if someone is looking at it with a widescreen monitor, it will be centered.
I learned it from here: http://tinyurl.com/5mt3mm
You can put this in the ‘body’ definition of the .css, and it will center the whole page, footer and all. However, the border of the footer will only go as far across as your container. Either way, you might have to redo part of your background image to blend better with the background color.
I centered the outside_container only. In the #footer span definition, I just added these lines only:
margin-left:auto ;
margin-right:auto ;
POSITION: relative;
Then, while your main container is centered, your footer will still take up the whole bottom of the page, no matter what size the window is.
You can see the changes I made at my website samprus.com. As I am writing this, the changes haven’t gone live yet, but they will be up by the end of today, March 11.
Cheers! And thanks to the Tut sites for helping us learn! I will give credit in the colophon of my website, for sure.
( )Laneth Sffarlenn April 2nd
This and other PSD Tuts have had me enthralled since around 2pm this afternoon - it’s now 10pm.
Thanks so much to everyone, esp. ye Collis - this has helped me and my confidence SOOO much!
When I get the $, I’ll be coming back here to donate and probably sign up.
( )joe April 4th
this was awesome! Great Job.
( )Hassan April 6th
I always read and learn from tutorials and rarely comment them…but I couldn’t let this one just go like that.
REALLY NICE WORK !
Thanks a lot,
Keep up :]
( )steven April 15th
Tks you post.
have a error in line # position:absolute; top:145px; right right:75px;
Just a clerical error,there is double right word!
# ul#right_menu {
# margin:0px; padding:0px;
# position:absolute; top:145px; right right:75px;
# }
have a error in line # position:absolute; top:145px; right right:75px;
( )Narshada April 16th
Well explained and presented. A great beginners tutorial, but something in there for more intermediate users too. I’d like to some more along the same lines, with increasing complexity/difficulty.
( )Sefat April 19th
this is a great help for the starters…!
( )Graeme April 21st
I’m quite confused!, I followed the photoshop tut looking really good and now when it comes to HTML and CSS i couldnt figure out how to slice my photoshop file the way needed for the HTML??? am i missing something?
I dont want to skip this part by downloading the source files i would really like to learn this step as i think it will be useful
thanks
( )loto April 22nd
that is what I am looking for.. Great tutorial. awaiting more to come..
( )jose April 22nd
nice!! thk!
( )Kimmmmaaaayy April 27th
This is redankulous.
( )Natasha April 27th
For those IE users! You have to remove the
( )and it will get rid of extra spacing, you ll also have to add the height to the container. It worked for me
mskLife April 30th
Like it .. it’s sooooo clear and perfect.
( )and your explanation is really really precise.
Thank you a lot^.^
Tateihuari May 1st
Great tutorial! Thanks a lot man you rock!
( )Yorgos May 5th
Havent done the whole thing yet (only the photoshop part) but this is by far the best tutorial i’ve ever seen on making websites… amazing designs with fantastic instructions.. well done and many thanks for sharing
( )rino.e May 10th
hi, there, really nice and useful tut… but i have a question… is there a way to put a .swf file instead of a .jpg??…
a really apreciate ur help..
see ya
( )bebopdesigner May 18th
Have I come too late? Still, this tut is brilliant! Thanks a million!
( )nic May 23rd
what program do i write all this stuff into?
( )great stuff
flashfs May 24th
I did the Photoshop part and the code. Very nice work!
( )R. Shawn Williams May 28th
Great Tut! Thanks for posting.
( )Ian Jones June 1st
Very simple. I learnt a lot. Thanks.
( )KcK June 1st
A SHAWEET TUT….
( )Broq June 9th
Swet i made my onw version and its so easy.
( )Btw if u want to add more info to the site, you forgot about putting overflow:auto;
Anthony Alexander June 10th
It’s not that good, for all the gloating i mean
( )Aravindan June 16th
I have searched a lot of places for an easy tutorial for PSD->HTML and i must say, this the best written and easiest tutorial for beginners.
( )Thanks a lot !