In this tutorial we’ll be learning how to code this web layout, which I wrote a tutorial on how to make, which you can find by clicking this incredibly long link. Hopefully it’ll be good practice for anyone who doesn’t really know how to use XHTML and CSS. Moreover, this tutorial acts as a great introduction to CSS and XHTML.
First things first, open the psd file for the web layout, or, if you don’t want to bother with the tutorial you can download the psd file for the template right here. Once you’ve got that we can start. So you’ll see (or hopefully you’ll be able to see) that there are, overall about 6 parts to this design. Here’s an image to show you what these are:
The objective is to make each of these parts (or blocks) usable so we can add content to them individually. Then we’ll add all the fancy images and what not.
Okay, so if you’re new to (x)html, there are quite a few rules to get down. We’re going to be using XHTML 1.0. Every HTML document, regardless of type, starts with a doctype. With all the buzz surrounding HTML 5, I thought I’d fit a bit on it into this tutorial. If you want this document to be XHTML 1.0 valid, you need to start it like this:
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Website.net</title> </head> <body> </body> </html> |
Let me break it down for you.
1 2 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"> |
As I’ve mentioned, every HTML document starts with a doctype. So the first line here is just a doctype telling the browser that this is indeed, xhtml 1.0. Since XHTML 1.0 is sort of a merge between XML and HTML, we need to include some crazy XML properties in our HTML code. That’s why we dont start with simply a regular tag as we would in html 5 or 4. These first two lines are a headache to remember, so don’t worry if you can’t recite them off by heart, because if you can, you’re some sort of HTML God. I’ve been using them for a few years now, and I still have to use google to get them. However, if you were going to do this in HTML 5, all you would have to do would be change the first two lines to this:
1 2 | <!DOCTYPE html> <html> |
As you can see, this is a lot easier to remember. It’s been said so many times now, but this was done on purpose, to make developing HTML apps easier for people (less time spent googling, more time spent producing).
1 2 3 4 | <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Website.net</title> </head> |
Okay so if you didn’t know, each html tag has a closing tag. The closing tag is just the original tag with a slash at the front, i.e. . It XHTML however, if there is no closing tag, such as in meta, img and link tags, we use a slash at the end of that opening tag, as shown in the meta tag above. I should also mention if you’re new to HTML that there are two sections in an HTML document. There is the head section, which isn’t really seen directly on the page, and the body section, which is were all the content that appears to the user goes. For instance, usually in the head section you will include all the scripts and css that you want to use on that HTML page. The title also goes in the head section. The title is the bit that appears at the very very top of your browser, where all the options to control that window go. Still with me? Good. Oh, I nearly forgot, the meta tag which is in the head section above just defines what character set we’re using. It isn’t necessarily compulsory, however it’s a nice touch if you’re trying to be standard compliant.
1 2 3 4 | <body> </body> </html> |
I think this part speaks for itself. All we’re doing is starting the body section, ending it, and ending the html section (the whole thing). So that’s pretty much our base for this tutorial. Go ahead and make a new document, call it index.html (or whatever you want, as long as it’s .html or .htm), and paste that into it. You could even try writing it yourself, to get practice.
For this to work we’re going to use CSS in the design. Make a new document and call it style.css. Now in the index.html file, put this line in the head section:
1 | <link type="text/css" href="style.css" rel="stylesheet" /> |
Anywhere will do really, as long as it’s in the head section. This will include the CSS document in your HTML document, allowing you to style it as you see fit.
First on the agenda, lets sort out the background. Go ahead and open up your style.css document, and do the following:
1 2 3 4 5 6 | body { padding: 0px; margin: 0px; background: url('images/background.gif') repeat-x #369abc; text-align: center; } |
Never used CSS? Well let me explain. CSS allows you to style documents. Sounds pretty easy, right? If we’re going to apply CSS elements to a tag in an html page, we write the tag folloed by a curly bracket, and another curly bracket at the end. Now, we’re applying these elements to the “body” tag. Basically, what we’re saying is “apply the following elements to all the body tags in the html document”. Now, there is only one body tag, but if there was two (which there shouldnt be, by the way), these elements would be applied to each. Let’s explain the elements:
1 2 3 4 | padding: 0px;
margin: 0px;
background: url('images/background.gif') repeat-x #369abc;
text-align: center; |
Padding is the space between the edge of the tag and the content in it. We set this to 0px, as we don’t want a big gap between the edge of the page and the elements in it. Margin is similar, it’s the space around the outside edge. We also want this to be zero, because we want no spaces at all. Finally we have the background tag, which is a great tag. In the background tag, we’re linking to the background image we want to use, which is background.gif, which you can see below. Then what we’re saying is “repeat-x”, as in, repeat along the x-axis. Then the #369abc is the color we’re using for the parts of the page were there is no background image being repeated. I’ve also added in “text-align: center;”. This is so that the elements further into the code will be centered in IE. Here’s the image I used for background.gif:
So go back to your html document and put the following in your body section (at the top)
1 2 3 4 5 | <div id="menu">
<div class="main">
1. Menu
</div>
</div> |
This is going to be our future menu section. You probably know what a div is if you’re familiar with html. It’s just a block, that you can put stuff in. That’s all. What you will notice however is the “id” and “class” elements in the div tags. This has something to do with CSS. So go back to your CSS document, and let me explain how it works. In CSS there are two ways to define specific traits for a certain tag or tags. We can use a hash sign, or a dot in front of the name we want to call those set of traits. There is a big difference, depending on which you use. So lets see what I’ve got so far:
1 2 3 4 5 | #menu { } .main { } |
If we use the hash symbol in front of the name, it means this element is one of a kind, and we only use it once per page it is in. A dot, however, means that we can use it multiple times in one page. Since there is only one menu, I’m using the hash. However, since there will be more than one “main”, I’m using a dot. In HTML, if you’re using the hash, always use “id=””. If you’re using a dot, use “class=””. Okay, so lets put some traits into these css elements:
1 2 3 4 5 6 7 8 9 10 11 12 13 | #menu { background: #2c3133; height: 25px; padding: 20px 10px 10px 10px; text-align: left; border-bottom: 5px solid #4b889d; } .main { width: 1000px; margin: 0px auto; text-align: left; } |
in the #menu element, I’ve defined a few things. I’ve said what the background color is, the height of the element and the padding, for starters. For the padding element this time we have applied 4 attributes (20px 10px 10px 10px) each representing top, right, bottom and left padding respectively. I’ve set the text-align to the left, and a 5px solid border along the bottom using border-bottom. There are many things you can do with a border, but lets not get into that, lets continue with the code! I’m using the main element to center the code. To do this, I set the width to 1000px, and margin as 0px auto. I’ve also set text-align to left, so that it’s not centered (as we applied center to the body tag). Now that you understand the basics of this, the rest of the code should be pretty straight forward. After the menu in the html document, I added this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <div class="main">
<div>
2. Header
</div>
<div id="content1">
3. Content Area 1
</div>
<div id="content2">
4. Content Area 2
</div>
<div id="warning">
</div>
<div id="leftcontent3">
5. Content Area 3 Left
</div>
<div id="rightcontent3">
5. Content Area 3 Right
</div>
<div id="footertop">
<img src="images/topfooter.gif" alt="" />
</div>
<div id="footer">
6. Footer
</div>
</div> |
There are quite a lot of css elements in there that we haven’t applied anything to, (notice the id and class attributes) so lets get round to that. Hopefully you understand what’s happening above. We’re just defining the elements which we will put the future content into. You’ll probably also notice the image I used for the topfooter block. Here it is (below) if you want to save it. Put all the images in this tutorial in a directory called images, in the same directory as your style.css and index.html files. If you don’t know how the img tag works, basically the src=”" bit defines where the image is, and the alt=”" bit is what will appear if the image cannot be found. Both are required to be XHTML valid.
So lets get to the CSS. I’ll explain it, element by element:
1 2 3 4 5 6 7 8 9 10 11 12 | #content1 { width: 629px; background: #8e1743; float: left; border-top: 2px solid #a3d1e1; } #content2 { width: 371px; background: #242729; float: left; border-top: 2px solid #a3d1e1; } |
In the diagram at the start of this tutorial, these elements are number 3. and 4. Most of these elements should be straight forward to you. The only thing that could cause any trouble is “float: left”. Normal divs go under each other. However, by using the float: left; tag, we’re able to make them go side by side, and that’s all the float: left; element does here. Apart from that, all we do is give each element a border, width, and background color.
1 2 3 4 5 | #warning { background: url('images/warning.gif') repeat-x; border-bottom: 1px solid #c7be84; height: 60px; } |
Okay so this is the little warning box in the design. The background image can be found below. I also set a height, padding and a border.
Okay, so the next two css elements are quite similar to the #content1 and #content2 elements, in that they both use the float property again:
1 2 3 4 5 6 7 8 9 10 11 12 | #leftcontent3 { float: left; width: 530px; padding: 10px; background: url('images/bottomleft.gif') bottom left no-repeat #ffffff; } #rightcontent3 { float: left; width: 430px; padding: 10px; background: url('images/bottomright.gif') bottom right no-repeat #ffffff; } |
Okay, again, all pretty straight forward, right? You know what float does now (makes div line up side by side), and then we applied width, padding and a backgrund. In the background we also applied where we want the background image to appear. As in, the bottom right or bottom left, and not to repeat. Here are the images I used for bottomright.gif and bottomleft.gif:
Finally, we have the footer:
1 2 3 4 5 6 7 | #footertop { margin: 50px 0px 0px 0px; } #footer { background: url('images/bottomfooter.gif') bottom no-repeat #1d1e19; padding: 0px 10px 10px 10px; } |
in footertop I have set the margin to 50px along the top, and 0px everywhere else. This was to set a gap between the footer and the content area. then in footer ive set the bottom footer image to the bottom, not to repeat, and a background color on top of that, and then, of course, some padding. You should have all the basic elements now, let’s continue adding some HTML.
Lets add some more detail to this design. Go back to the #menu element in CSS, and add this to the bottom of it:
1 2 3 4 | font-family: Arial, Helvetica, sans-serif; color: #ffffff; font-weight: bold; font-size: 14px; |
This applies some font settings to it. In the font-family setting, we’re saying that the font should be Arial, and if the user doesnt have arial, helvetica, or a sans-serif font if the user doesnt have either. The font color is #fff, and the weight is bold. We’ve also defined its size. I then continued by changing the background attribute in the #menu element to this:
1 | background: url('images/menu.gif') repeat-x #2c3133; |
You should pretty much understand what’s happening here. Here’s that image:
Then, in your HTML document, change the contents of the menu element from “1. Menu” to this:
1 2 3 4 5 | <span class="selected">home</span>      
floppy disks      
history      
services      
contact us |
just adds a really long space. You’ll also notice I’ve included a “span” tag in there. Span is mostly used to add content to a piece of text without altering it in anyway. So go back to your CSS document, and add this:
1 2 3 4 5 6 | .selected { background: center bottom url('images/selected.gif') no-repeat; display: block; float: left; height: 39px; } |
The image I’m using can be found below. The background element is pretty basic now. We’re also using display: block;. This just makes the span element think it’s a block element, like div. Since it’s a block now, we have to add float: left; or everything will go everywhere. I also set a height, so that the background image aligned with the design.
Now for a pretty basic step, add the logo. Go to your html document and find the “2. Header” text and replace it with this:
1 | <img src="images/logo.gif" alt="" /> |
Here’s the logo I’m using, but you might have a different one:
Now, lets work on the two content areas, i.e. number 3. and 4. Find the text, “3. Content Area 1″, and replace it with this:
1 | <img src="images/purple.gif" alt="" /> |
And again, here’s the image I’m using:
If you try your design now you’ll probably notice that it’s a bit messed up, with the warning area below Content Area 2. This is easily fixed, just go to your CSS file again, and find #content2. We’re going to add a few elements here.
1 2 3 4 5 | height: 198px; font-size: 16px; font-family: Georgia, "Times New Roman", Times, serif; font-weight: bold; color: #fff; |
We’ve defined a height here, so that we don’t have the problem with the warning sign being directly below this element. I’ve also defined some basic font traits, and the color of the font.
Change the background attribute to this:
background: url('images/blackbg.gif') repeat-x #2e3335;
Here’s the image I used:
Now you may be wondering “Where did the warning box go”. Well wonder no longer. Add these two lines to the #warning element in your css:
1 2 | float: right; width: 1000px; |
and it should appear again. Now in your html find the #content2 div, and change its contents to this:
1 2 3 | <span class="blacksel">The Purpose</span>
<span class="nonselb">How We Do It</span>
<span class="nonselb">We Love You</span> |
Now go back to CSS and add these two elements to the end of your css document:
1 2 3 4 5 6 7 8 9 10 11 | .blacksel { background: url('images/blacksel.gif') repeat-x; display: block; padding: 23px; height: 22px; } .nonselb { display: block; padding: 23px; } |
Now there is nothing particularly new there, so I’m not going to explain what’s happening. Refer to earlier in the tutorial if you don’t understand. It’s coming along quite nicely now, isn’t it? Now as much as I’d love to teach you how to put together a jQuery function in order to allow you to swtich between these tabs in AJAX, i think that’s another tutorial. Moving on, I think now would be a good time to finish off the warning box. We’re going to have to alter this. I’m teaching this tutorial as I have done it, rather than just pasting some code for you to copy and paste. This way you can see how web development isn’t all cut and dry. You have to go back, alter things, until it works, and looks right. I’ve changed the #warning element to this:
1 2 3 4 5 6 7 8 9 10 | #warning { background: url('images/warning.gif') repeat-x; border-bottom: 1px solid #c7be84; float: right; width: 960px; height: 20px; padding: 20px; color: #5d5520; font-family: Georgia, "Times New Roman", Times, serif; } |
So I added a few elements and altered the width and height. I also added some padding. It was a pretty straight forward alteration. Next thing I noticed was that the footer was touching the content area. I messed around in CSS for a while trying to find a suitable solution, and then decided just to change the image I was using, to something with some blue at the top, giving the impression that there was a space. Here’s the image I replaced “topfooter.gif” with. Just overwrite it.
Now it’s really just a case of adding some styles to the footer. Find the #footer element in your CSS code. I added the following elements to my CSS:
1 2 3 | color: #ffffff; font-family: Tahoma, Geneva, sans-serif; font-size: 14px; |
And then added some text in my html file to the footer div:
1 2 3 4 5 6 7 8 9 10 11 12 |   home     floppy disks     API     contact     about     business     terms     privacy     blog     status     twitter     more     |
I decided to show you how to do inputs as well, since a lot of people find those tricky. Find the menu div, and inside, (inside the main div too), add this code after all the text:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <div class="searchbar">
<div class="floatl">
<img src="images/leftsearch.gif" alt="" />
</div>
<div class="floatls">
<form action="">
<input type="text" value="Search for Something here.." class="search" />
</form>
</div>
<div class="floatl">
<img src="images/rightsearch.gif" alt="" />
</div>
</div> |
Okay this looks pretty complicated but we’ve done it all before. There is nothing new above, except for the form and input tags. These are pretty simple though. In the form tag, the action is merely the page you want the form to go to when the user presses enter or submit. The rest is pretty basic HTML. There’s a few CSS elements here that we don’t have, so go on over to your CSS document, and add the following elements:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | .searchbar { float: right; } .search { background: url('images/searchbg.gif') repeat-x; width: 200px; border: 0px; height: 16px; padding: 10px; position: relative; bottom: 10px; float: left; font-family: Arial, Helvetica, sans-serif; font-style: italic; color: #858585; } .floatl { float: left; position: relative; bottom: 10px; } .floatls { float: left; } |
The only new things in this which you haven’t seen before in this tutorial is position relative, and “bottom”. If you set position to relative, you can move the element around the page by using the top, bottom, left, and right attributes. If we say bottom: 10px, it means the element will move up by 10px. I used this so that the form would fit in nicely. We have to set border to 0 or else your input will have a big border around it that we don’t want. That’s about it. I haven’t covered the main content areas as I would like you to mess around with them yourselves, to find out what you like. Also, since its the main content area it’s not really up to me to decide what goes in them.
I don’t have that many hints and tips for you, but here’s some of the dos and don’ts of web development.
1. Use Images Sparingly to quicken loading times
2. Don’t use the style=”" attribute in html too often, instead, use a CSS document to speed up load times.
3. Try and keep your code as tidy as possibly, and make sure it is valid
4. Stay up to date with what’s happening in the web development community, so that you don’t end up stuck in a timewarp
5. HTML has a hierachy. The tag is obviously the highest in the hierchy, then body, and then blocks. You must follow this hierachy, so you can’t put a div inside an tag, or a div inside a tag. That’s the equivilent to putting the html tag inside the body tag.
6. Never use tables in a layout. Only use them when you’re making a table. It is considered bad use to use tables when coding a web layout. As tempting as it is sometimes, you can do as much with divs as you can with tables, if not more.
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Website.net</title>
<link type="text/css" href="style.css" rel="stylesheet" />
</head>
<body>
<div id="menu">
<div class="main">
<span class="selected">home</span>      
floppy disks      
history      
services      
contact us      
<div class="searchbar">
<div class="floatl">
<img src="images/leftsearch.gif" alt="" />
</div>
<div class="floatls">
<form action="" method="get">
<input type="text" value="Search for Something here.." class="search" />
</form>
</div>
<div class="floatl">
<img src="images/rightsearch.gif" alt="" />
</div>
</div>
</div>
</div>
<div class="main">
<div>
<img src="images/logo.gif" alt="" />
</div>
<div id="content1">
<img src="images/purple.gif" alt="" />
</div>
<div id="content2">
<span class="blacksel">The Purpose</span>
<span class="nonselb">How We Do It</span>
<span class="nonselb">We Love You</span>
</div>
<div id="warning">
Warning
</div>
<div id="leftcontent3">
5. Content Area 3 Left
</div>
<div id="rightcontent3">
5. Content Area 3 Right
</div>
<div id="footertop">
<img src="images/topfooter.gif" alt="" />
</div>
<div id="footer">
  home    
floppy disks    
API    
contact    
about    
business    
terms    
privacy    
blog    
status    
twitter    
more    
</div>
</div>
</body>
</html> |
style.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 | body { padding: 0px; margin: 0px; background: url('images/background.gif') repeat-x #369abc; text-align: center; font-family: Tahoma, Geneva, sans-serif; } #menu { background: url('images/menu.gif') repeat-x #2c3133; height: 25px; padding: 20px 10px 10px 10px; text-align: left; border-bottom: 5px solid #4b889d; font-family: Arial, Helvetica, sans-serif; color: #fff; font-weight: bold; font-size: 14px; } .main { width: 1000px; margin: 0px auto; text-align: left; } #content1 { width: 629px; background: #8e1743; float: left; border-top: 2px solid #a3d1e1; } #content2 { width: 371px; background: url('images/blackbg.gif') repeat-x #2e3335; float: left; border-top: 2px solid #a3d1e1; height: 198px; font-size: 16px; font-family: Georgia, "Times New Roman", Times, serif; font-weight: bold; color: #fff; } #warning { background: url('images/warning.gif') repeat-x; border-bottom: 1px solid #c7be84; float: right; width: 960px; height: 20px; padding: 20px; color: #5d5520; font-family: Georgia, "Times New Roman", Times, serif; } #leftcontent3 { float: left; width: 530px; padding: 10px; background: url('images/bottomleft.gif') bottom left no-repeat #ffffff; } #rightcontent3 { float: left; width: 430px; padding: 10px; background: #fff; background: url('images/bottomright.gif') bottom right no-repeat #ffffff; } #footertop { margin: 50px 0px 0px 0px; } #footer { background: url('images/bottomfooter.gif') bottom no-repeat #1d1e19; padding: 0px 10px 10px 10px; color: #ffffff; font-family: Tahoma, Geneva, sans-serif; font-size: 14px; } .selected { background: center bottom url('images/selected.gif') no-repeat; display: block; float: left; height: 39px; } .blacksel { background: url('images/blacksel.gif') repeat-x; display: block; padding: 23px; height: 22px; } .nonselb { display: block; padding: 23px; } .searchbar { float: right; } .search { background: url('images/searchbg.gif') repeat-x; width: 200px; border: 0px; height: 16px; padding: 10px; position: relative; bottom: 10px; float: left; font-family: Arial, Helvetica, sans-serif; font-style: italic; color: #858585; } .floatl { float: left; position: relative; bottom: 10px; } .floatls { float: left; } |
Comments
Thanks to author! nice tutorial..
I got each and every point cleared but just having one doubt shamefully..
How to break your PSD into no. of different images?
Heh, it’s okay, To do that you use the slice tool, or what I do (which is probably looked down upon) is to crop the bits that I want to use as images, save them and then undo.
Anyway, if you’re looking to use the slice tool, simply grab the slice tool and draw round the bits you want to become seperate images. I think you can find it under the crop tool (sorry I don’t have photoshop at the moment). Then go to File » Save for Web. If I remember correctly from memory, what should happen is the images will be saved into a folder called images in the same directory as your psd file. Hope this helps. =]
why would anyone waste their time trying to create his images? Just right click and save image. Makes life much simplier.
2 comments? PFT!
This tutorial is AMAZING, perfect for what a lot of us aspiring web developers need.
Nice tutorial!
p.s you have two closing HEAD tags in your code at the top of the page (“Step 2. Making a Base”)
Thank you, it’s been fixed. =]
Brilliant tutorial, but could you put a demo link there too? So that we can see it as a fully functional layout, without having to create it ourselves?
Yeah, totally, I’ll add it later. :D
Brilliant! Now, what’s brilliant about it?
First of all, it’s clean and simple. It’s good CSS and validated XHTML 1.0 Transitional which is good. Another good thing is that it’s so specific and almost over explained which basically means my grandmother could code using this guide. So props to you Jonathan, and please, continue making theese tutorials. Perhaps next you will explain more in-depth of the thinking behind. Such as how you link your sites. Do you create index.html contact.html with same code as index although changed content, or do you use a header/content/footer and include using PHP? – That sort of tutorials with this level of description and this just might be the best place on the net to learn.
I would like to know how to create boxes like GOOD.is has, and how to make them work irrelevant of height and such.
Best regards,
DRSK
Nice of you. Thank you for a very clear explanation.
Nice, clean and simple tuturial. – Thanks.
You are such a great person. This is the type of stuff I dream about having.
“Now as much as I’d love to teach you how to put together a jQuery function in order to allow you to swtich between these tabs in AJAX, i think that’s another tutorial.”
I know nothing about AJAX and all that, a tutorial would be AMAZING.
Thank you.
I’ve learned so much by doing this. Kep it up, cause I’ll be back.
Simply amazing. It’s so clean :)
Thank you! Very helpful for a beginner like me.
One thing I’d like to see more of is html 5 explanations throughout. You have a little at the beginning but that’s it. For instance, use of the header and footer tags instead of divs, etc.
Hey Tim. I’ll be sure to do a HTML 5 tutorial at some point. Glad you enjoyed the tutorial. :)
Кому интересно пишите
‘ve been looking for exactly something like this, ‘am glad to have found you.
It looks useful, I will be trying it out on a habbo layout! (Habshout.com for an example) Instead of paying people to make me a layout! Looks wonderful and good comments :D
amazing tutorial…
great work
Just awesome. Im gonna print it and read it in my class again. thank you very much.
Nice one… Keep Rocking…
Thanks & Regards,
Designing Studios.com
Nice tutorial, very easy to follow. I wonder why the PSD is narrower than your design though, you’re missing bottomfooter so I was trying to slice it myself from your PSD, and it’s too narrow!
Otherwise great tutorial.
Oh, I almost forgot… I think there’s one big flaw in your tutorial, and it’s not using a reset css sheet. Since this is a tutorial for beginners, you should really include that, and do the markup first, then CSS. That’s the way it should be done for increased productivity anyway.
Thanks for the tut. I’m still confused on how to structure multiple pages. For example, I have a style.css and an index.html file for the home page, where would i put the html for the “about page”? I can put the css for all pages in the same style.css file, correct?
Hey Ryan, I’m going to do a tutorial on structuring your website’s files soon, so you might wanna check that out.
To answer your question, separate pages go in separate html files, i.e. about.htm, index.htm. All CSS can go in one file, you just have to include it in all the HTML files.
I appreciate the quick reply. I look forward to that TUT.
Nice tutorial. Thanks for the tips.
I was hoping someone could help me with an issue I’m having. I mocked up a document on my own and have an image with a box next to it. When I test it in the browser and make my browser smaller, the box that was next to the image moves below the image. Basically I’m wondering how I can make it so the box stays next to the image without moving (when browser is minimized.) Thanks!!
Surround the two divs that you’re floating with another div with a width equal or greater than the combined two divs. For instance:
<div style="width: 1000px;"> <div style="float: left; width: 500px;"> Content here </div> <div style="float: left; width: 500px;"> Content here </div> </div>I was wondering if anyone might know what might be happening here. I noticed when I made another design based off the coding on this one it didn’t work the same. For instance, the floating elements (content area 1 & 2) on this web page stay together when the browser is resized (thank you again Johnny for helping me with this) but I had to contain my div’s in an outer div tag so they wouldn’t move around. Also, I noticed when my page is reduced, the text in the menu moves with the browser (all the text shifts left if the page is being resized) but this didn’t happen with the code in this tutorial and the code was typically the same. Hmm…
Nice tut..
Is there a link to the working example on here?
Consider this site bookmarked.
Keep up the good work.
This has just inspired me to write a tutorial of my own! Thank you for this, thumbs up!