A few people have asked for help making layouts, and I figured it would be better to explain how to make a layout than to just do it for people. So I'll go over how I make a layout bit by bit and try to explain what I'm doing. This will span over a couple posts, because it's easier for me to break it up into pieces, and it'll probably be easier to follow that way. I'll edit this post later and link directly to the next relevant post.

So before you read anything else that I have to say, read Zamiel's post here about making layouts. Ignore the part where he tells you not to make a layout if you don't know what you're doing, because that's where I come in. But everything else is pretty good advice.

Anyway, let's get started. First we'll start off with a div element for the background image. As far as you care an element always has both an opening and a closing tag. You should never forget to close your tags. So to begin, put the opening tag in your header:



Here's what that should look like.

Now we'll get to some styling. The first thing I do is choose the size of my layout. I want it to be as wide as my screen and 500 pixels tall (the limit according to the layout rules). So let's set the size of our background by changing the div that was in our header. It'll look like this:

Nice thread, and very useful... I ever wanted to make a layout by coding it by myself... (I used the coding that Gal used on a previous layout he made for me).

I'll start experimenting with this soon, thanks for help.

I wish more people would use width:100% instead of the actual width of their screen... Good thread.

Lazlo Falconi :

WAIT YOU MEAN YOU DONT LIKE IT WHEN PEOPLE STRETCH THE PAGE?

legacyme3 : Quit spamming in my forum you, or I'll report you to the locals globals Admin!

Lazlo Falconi : Yes, but he's your boss. Oh Snap! You just got pwned!

starwars293 : Spamming will not be tolerated.

while(legacyideas!=lazloideas){
fkmylife++;postspam++;}
header(Location: somewhere else besides here);
exit(thread);

JigSaw : Haha, post of the month!

JigSaw :

The irony. The bloody irony!

Yeah, this is a SUPER useful thread. I made most of my Lati layout based off of it. Now, all I need is the transparent box, and I think I'm done.

Before I say anything, I'm writing this at 4:00 AM and I'm too tired to proofread. If I say anything wrong or that just doesn't make sense, please let me know so I can fix it. I've been testing everything as I go, though, so it should be good.

Now onto how to make a text box. There's quite a lot than can be done here, and I'll do my best to cover as much as possible. But I'm bound to leave something off. So if there's something that you want to know about, or you think should be explained, and I leave it out, feel free to post and mention it.

Also, I won't be posting the code for the background image unless I need to. And when I do, I'll make sure to mention it. When I don't mention it, assume I'm talking about the code for the text box.

To start making the text box, we add a second div inside of the first. It'll look like this. Don't forget to put a second closing tag in the signature.

Next we'll add a border to the text box. This makes it easier to see how our positioning and dimensions look. Here's what my code looks like:

Test, Test Does this look good? I think it worked well for me. 

catfight09 :

I'd play around with the colors and get rid of the border I think, but that's just personal taste. As for parts of your code that need tweaking, you forgot the colon on your height attribute so it's not setting the height of your text box. You also misspelled the word position, so your text box is still just in the top left corner. And try to play around with the position values to get it in a nice spot. I chose the values for mine because I thought that was the best place to stick it.

soxfan849 : Did I make it right? I sorta doubt it because I feel as though something is still off. 

i guess this could help meh in da future

catfight09 :

You forgot the colon between the word height and the value 50%. Other than that it looks like everything in your code is right.

Alright, this looks about right. One more noobish question for ya:
soxfan849 : How to.... ergh..... put something as a signature. I tried but it wouldn't work. Does it perhaps need to go inside the 2nd

catfight09 :

You still haven't fixed the height of the text box. But for a signature you just type whatever you want to show up before the first

soxfan849 :
Sorry about that. See, I fixed it, but because the site was running so slow on my mom's laptop, I guess I forgot to save it. This should be good though.