I wasn't sure exactly what to put as the program. Sorry.
Anyway, some of you might have seen this same exact tutorial at MilkySmooth. It's just that I've been getting complaints that you have to register at MilkySmooth to see it, and it's starting to get annoying, so I'm submitting it here. (Basically, I'm copying and pasting. I'm lazy. So sue me.)
Divs......... what the heck is that? :huh: Well, I'm going to explain some of that here, and hopefully, it'll help solve any layout problems you have.
There are several different kinds of layouts. Divs and Tables are the most common. There are also Iframes and Popups. I prefer to use divs because
[1] I'm not exactly sure what an Iframe really is
[2] I hate popup layouts and
[3] I do
not get tables. Which, as you can see, leaves divs.
Divs are mainly used to position things on the site. For example, if I have a custom module, I'll use a div to position it and place it where I want it, and another div to position/place the blogspace. The very basic div looks like this:
That is the most basic form of a div.
<div> marks the beginning of the div and
</div> marks the end of the div (anything with / before it means
end. So </div> is like "end div." Just like /b means "end bold." Got it?).
<div> and
</div> are called
tags. Basically, anything that starts with < and ends with > is a tag. Anything between the two tags goes in the div and shows up on the website.
Now we'll get into specific properties. Properties of a div include it's width, it's height, how far it is from the top of the page, etc. Let's take a code from my layout, Wish Upon A Star.
Code:
<div style="overflow: visible; width: 500px; margin-top: -430px; margin-left: -186px;">
Let's take each part of the code and go through it.
You see
<div, meaning the beginning of the div. The
div style (<div style=) shows the properties of the div. Everything between the two quotation marks is included in the div style. Each property of the div style is separated by a semicolon ( ; ) to avoid mixing up the codes.
Width (obviously) shows how wide the div will be. In this case, it's 500px (pixels). Sometimes, there'll also be a property defining the length of the blog. Why does this one not have
length: ###px? Well, it has to do with the overflow of the div.
overflow: visible is kinda tricky to explain. Basically, it tells whether or not the div will have a scrollbar. "Visible" means you can see the div go on; therefore, it will not have a scrollbar. So the only way to scroll down to see the rest of what's in the div is to use the scrollbar waaaayyyyyy on the right of the page -- the scrollbar that scrolls for the whole site. (I hope that made sense......) Since there is no limit to how far the div goes,
there is no length for the div.
There's another way to make the overflow tag. Instead of overflow: visible, you can have
overflow: auto, which will give the div a scrollbar. The div will only go as far as the width and length specified in the div will allow it to go.
Next, we have margins.
Margin-left shows how far the div is from the left side of the screen, while
margin-top defines how far from the top of the page the div will be. This property in particular is used to position the div. In this case, the div is -186px from the left of the page and -430px from the top of the page.
Now, how can that be? If the div was -430px from the top of the page, it should be completely off the page itself! Negative numbers move the div upwards, while positive numbers push it down. And how can the div be -186px from the left of the page? You wouldn't be able to see the left part of the div!
Well, the answer has to do with two things: alignment, and the way codes work. Let's start with alignment.
In xanga, the alignment of the page is defined on the Look & Feel page. If you code a layout, and set the alignment to left on your xanga, and someone else takes the same exact code, but sets the alignment to center,
the layout will look completely different. That's why alignment is so important. In this particular layout, the alignment should be
center. Therefore, instead of starting at the left side of the page, everything is shifted to the center.
There is almost always an image on the layout. If you just list divs one right after the other, they'll start where the previous div (or picture) ended. So technically, the div for the blog doesn't start on the top of the page, it starts where the main image ended.
The same thing goes if you list divs one right after another. Let's say I make a layout, and in my custom module, I have 20 friends and links to their websites. I code and position the layout so that it's just right. Then, when I'm done using it, I give the code to my friend. She changes the custom module so that her 40 friends and links to their sites are on it. When she sees her layout, the blogbody is pushed further down the page. Instead of starting at the top of the box on the image, it starts in the middle of the box. Why is that?
Well, if you list divs one right after the other, the latter divs start exactly where the previous divs end. If you have two divs, and you add more to the first div, the second div is pushed down because
it is affected by how much is in the first div. If you add more stuff into the first div, the second div will be continually pushed down. If you take out stuff in the first div, the second div will be moved up.
This is the major cause of disalignment problems and confusion with xanga layouts.
Normally, there would be a code that prevents the divs from doing that. That code is
position: absolute. It's a property that can be added to the div style (div style="position: aboslute;"). The problem is, that code doesn't work on Xanga. You can put it in, and it'll act as if the code isn't there. I don't know why or how that works. It's a Xanga thing, I guess.
The problem is pretty easy to fix. Basically, you have to find the div for the blogbody (which is easy, because in Xanga codes, blogbody divs are never closed. They don't have </div>. Otherwise, your entries wouldn't show up. In all of my codes, the blogbody is the very last thing in the code, so it's easy to find it in my layouts.) Then you mess around with the positioning of the div. Most likely, you'll be editing the
margin-top property of the div. The best way to do it is by guess and check. Start with intervals of 100 pixels, then cut it down to 20px, 10px, etc., until you have it where you want.
I hope this helped to solve a lot of the problems people have with my Xanga layouts.
If you are having trouble with a layout or don't understand a part of what I've said above, feel free to PM me or leave a comment.
Good luck with your layouts. ^_^
---------------------------------------------------------------------------------------------------
tutorial copyright dreamstar7 @ blogring.net
<div align="center">
ONLY POST IF YOU HAVE A QUESTION OR SUGGESTIONS IN ADDITION TO THE TUTORIAL.</div>
It shows that you are unregistered. Please register with us by clicking Here
Linear Mode
