div-overlay, I need help!!!!!aaaah! Options

[chauna1212]

hey everyone who takes their time to read this..okee i sorta understand how to make a div layer but im still confused i alredy went HERE....anyone wnt to explain it to me better?? or help sites?? plese and thnx sooooooooooooooooo much i rely wnt to learn!!!!

[*This Confession*]

for an extremely easy one
go here

http://overlay.bbzspace.com/

but that tutorial is actually really good..

CODE

<div class="bg" style="position: absolute; left:0px; top:0px; width:000px; height:000px; overflow: hidden;">
<img src="IMAGEURLHERE">
</div>

<div class="content" style="position: absolute; left:000px;  top:000px; width:000px; height:100%; overflow: visible;"><center>
lalalalala this is your content!
</div>

you can add more of the <div class="content" style="position: absolute; left:000px; top:000px; width:000px; height:100%; overflow: visible;"><center>
lalalalala this is your content!
</div>

those are the divs..
like each of the scroll boxes.. where different content can go in..

the first on in the code is for bg image..
like on my layout site.. http://www.myspace.com/thisconfession_designs

the whole image i used that to position
and in that forum thing you were at it showed how to position

Positioning

Code:
quick lesson on "position: relative"
top: -45px = moves up 45px
top: 45px = moves down 45px
left: -15px = moves left 15px
left: 15px = moves right 15px

quick lesson on "position: absolute"
top: 0% = moves to top of page
top: 50% = moves to middle of page
top: 100% = moves to bottem of page
left: 0% = moves to left of page
left: 50% = moves to center of page
left: 100% = moves to right of page
margin-left: -15px = moves left 15px
margin-left: 15px = moves right 15px
margin-top: 45px = moves down 45px
margin-top: -45px = moves up 45px

[chauna1212]

for an extremely easy one
go here

http://overlay.bbzspace.com/

but that tutorial is actually really good..

CODE

<div class="bg" style="position: absolute; left:0px; top:0px; width:000px; height:000px; overflow: hidden;">
<img src="IMAGEURLHERE">
</div>

<div class="content" style="position: absolute; left:000px;  top:000px; width:000px; height:100%; overflow: visible;"><center>
lalalalala this is your content!
</div>

you can add more of the <div class="content" style="position: absolute; left:000px; top:000px; width:000px; height:100%; overflow: visible;"><center>
lalalalala this is your content!
</div>

those are the divs..
like each of the scroll boxes.. where different content can go in..

the first on in the code is for bg image..
like on my layout site.. http://www.myspace.com/thisconfession_designs

the whole image i used that to position
and in that forum thing you were at it showed how to position

I WNT TO USE THE SECOND ONE BUT I DNT GET THE POSITIONING


CAN ENY1 HELP ME??

[freeflow]

You don't understand positioning?

Here read carefully.

Lets say I wanted a div to put stuff about me in . The first thing I would do is choose a name for the div. So I choose toya. (thats my name and I want that to be the name of my div). So the first thing I would do in about me would be

CODE

<style type="text/csS">
.toya{

I put the divname I chose and a . (you need the dot/period)

Next I would have to add the attributes of a div( these are for basic divs)

CODE

<style type="text/csS">
.toya{
position: absolute;
left:#px;
top:#px;
width: #px;
height:#px;
z-indeX:0;
}
</style>

{I added the closing </style> tag too just make sure you have it once you finish.}

Div Definitions

position: Leave it as absolute. It tells that your using absolute positioning.
left: Tells how many px left you will go. To go farther left put low numbers or negative numbers before the px. To go more right make the numbers higher.
top: Tells how many px you want to go up. The lower the higher. So if my number was 2px. Then it would be at the way top.
width: Self explanitory. Tells the width of the div.
height: Tells the height of the div. Self explanitory.
z-index: You don't need this but its a good feature. Basically just for each div change the number. Your first one would be 0 . Second would be 1. Third 2 . Fourth 3. And so on.


Now What you do is add diff numbers in top , left width and height till you are satisfied. (do not go by the myspace preview unless you put your divs in abou tme). Your numbers can be negatives and in the hungers (400, 500, 645, etc). Do this to all the parts where I put #.

Then once you get a position do
<div class="divname">
content
</div>

So for mine it would be

CODE

<div class="toya">
content
</div>

(without the dot)

I hope thats what you meant because I just typed all that out now


Once you get your first div just use this as your basis for the rest:

CODE

.divname{
position: absolute;
left:#px;
top:#px;
width: #px;
height:#px;
z-indeX:0;
}