Introduction

In this tutorial, you'll learn about how to make a profile layout by using <div> tag. This trick is almost the same as using slicing, used to make the layout of a profile. But this technically different. Here are some advantages of using <div> tag:

• No template slicing
  You don't need to slice the template you have. So, it will be easier for you to change the background. We will place the objects inside the template by specifying the <div> tag's position, size, and padding. You just need to place some <div> tags over an image.
  
  
• Piled up objects

  By specifying the <div> tag's position, we can also pile up an object with anothers. The objects must not be an image. It can also be text, table, embedded files, iframes, form, <select> tag... everything you want! For example, the two images at the right side. They can be piled up to be like this:

  
  

  And you can also add some text like the one in the right side. We can write anything over the images without converting them into background-images. It's cool, isn't it? There will be some tricks at the end of the explaination.

It's quite simple! Go to the Tutorial Section!

What will you need to do this trick?

HTML This one is the most important thing. If you haven't known about HTML, please read HTML Guide by Psoplayer-san or another HTML Tutorial.

CSS You can learn the basic of CSS in CSS Tutorial by Kiseno or another CSS Tutorial.

Graphic Program It is used to do your background or any images you put in your profile. It can be anything, shouldn't be able for slicing because you won't slice your background.

Notepad You will use this to edit your HTML file. But you can also use Macromedia Dreamweaver or any web design program.

Web Hosting Gendou is not a web hosting. You need a web hosting to make your profile looks nice. You can upload your HTML file to Freewebs or any web hosting.

Tutorial by link | Design by kiseno_sora | © 2008