I get asked this a lot, so I made a tutorial for all to use. If you do not understand or are confused, please do contact me. I will try my best to help you.
Step 1: You need to have an image for your layout already done.
like this
Step 2: Crop the very bottom of the layout so that you can make the layout extend as far as your content does.
like this
Step 3: Now on to actually building the website code!
Step 4: Lets start with the the very basic coding. You'll need to put in the head and style tags.
Put your site name where it tells you too. All the steps to follow need to be placed in between the style tags.
Step 5: The Background part of the code. Just follow what the code says. Insert the colors that best match your layout. Put the font that you want to be displayed. And in the background image, put the cropped part of the image for your layout.
Step 6: Font Style & Header. This is place together because I have the codes intertwined in my layout codes. This is a BIG section.
The first part of the code is the bold, italicized, and underlined font colors, fill in the colors you want like.
The next part is for the entire text of your page. Fill in the color you would like.
3rd part; This is my main header for the main part of the page[not the sidebar]. Put in your color code. If you want a border on the bottom, fill a color in for that. If not just remove the words and leave in blank.
4th; This is the hover for the header.
5th: This is editing the headers for the sidebar. Follow the same for the other header.
6th: This is the hover for the sidebar.
End the style tags here. The following DO NOT go inside the style tags.
Now for the content boxes!
Step 1: There will be 2 columns.
The first side is the layout image. You most likely do not need to position this so do not worry.
Step 2: The sidebar. You most likely will have to change the position of the div to fit your layout.
You can continue to add more of these by putting. These must be inside the div tags.
Step 3: The main content area.
You can once again add more headers here. Must be inside div tags.
Last step of the entire process: Place this at the end. Make sure they are at the beginning too!
And now your layout should be done and complete and work. It would be nice if you credited me, especially because this took me a long time to complete and make. Thank you for using! :]
