making a layout
please read
i made this tutorial simple and easy to understand. this is just the basics of coding, once you get the hang of it, you can coustomize, add as many codes you like to your css stylesheet.


step 1// making the layout: first you will need to make your own layout. so open your photoshop, paint shop pro, idk whatever program you normally use to create your stuff. normally this is how a web layout looks like: click here

so finish making your layout, once you are done, save it as header. NOW crop the bottom part so it would look like this. and save it as "columns" or whatever you like. (remember this part cause we will get to it in a bit)

step 2// stylesheet:
A. (backround) - now lets beging working with the style sheet. this part is not as difficult as it looks. its pretty fun and easy to do. first lets begin with adding the backround: you will need this css code:

remember you saved the cropped out part of your layout? well you will need to add it to this code. ^ ^
the "columns" part is the backround of your layout.
add the color code of the backround you are using in your layout. for example if your backround is black, the hex code will be #000000. (never take off "#"!!. because that allows to show the color in firefox.)
also "repeat-y" allows your layout backround to only go vertically! if you want your layout to go horizontal, then you will need to change it to "repeat-x". simple, right? =D

B. (font style) - its time for the font part ;] this is the next part of your coding, you will need this code:

this code provides the font style, size, and color. including the hover codes.
please make sure you choose a decent font style. i know that there might be a cute font you want to use, but not everyone might have it. click here for more info.

C. (headers) - this is a really easy and fun part to do. you can customize these headers how ever you like to your choice of style, for it you will need this code:

edit all you want.

D. (bold,italic,underlined, etc.) - this is a really easy and fun code too

all you gotta do is edit the different colors you want for special text and resize your textarea box.

E. (hover bars) - this is basically everone's favorite part. haha. this code allow you to hover a link and see a cute backround color on it. you will need this code:

you can edit the colors how ever you like.

F. (coding) - ahh the annoying part. haha. this is where you have to code your layout! and you will need this code:

so you wont get confused, i will explain ever detail ;]
#header - means your layout header ;] you do not move positions for this code, you can just leave as it is., unless you want to center it more. than that's up to you. #sidebar - this is the part of the layout where your navigation links, cbox, idk small things go;] #content - && this is where your blogging, content, resources go.

top:___px; - where ever you want your stuff to start showing up, if your content starts from the very top, then it will be about a 0 to 10. so depending how low the content goes, the higher the number goes. left:___px; - if you want your content to start from the very edge, you will do the same, start from zero. depending how apart they go, the number also goes higher. width:___px; - this just means the width of the bar. you can size it to your choice.

G. (the whole code) - if you want this whole code, here it is


btw: i coded a layout with this same code, so there shouldnt be any problem with the stylesheet. click here to see a layout i coded with the same css.

if you need more website help you can go here

if this helped you, i would really appreciate it if you would give credit somehow, and a few cmnts would be appreciate it. email me at contact@sourpopave.com




-----------------------------------------------------------------------------------------------------------------




Back | Forward | Back to Top.
contact | f.a.q.'s | bookmark | link me | myspace
Copyright © sourpopave.com 2007-2008. All Rights Reserved.