I don't understand how to make divs at all..., Can someone help me make one? Options

[gotryce22]

I'm new to this forum, and I read the pinned topics, but I don't understand a single thing they say. I want to make a page that has a pic of my choice as the background, my "About Me" info towards the right of the page, links towards the left of the page and maybe a flash from myflashfetish.com or something to the bottom of the links. If this isn't too much to ask, can someone help me with this?

[*SinfullySweet*]

I can help you with this. Which parts aren't you understanding?

[gotryce22]

Well, on this topic: http://www.createblog.com/forums/index.php?showtopic=142922

The second step redirects me to another page and I get completely lost there. That's the first thing that got me confused.

[*SinfullySweet*]

Okay. The second step in the pinned topic is all your css attribute. I.E. - how your fonts, links, and colors will look.

Since Insumountable recommended you use the third version of the css, I'm going to go ahead and use this for an example.

CODE

<style type=text/css>

body {
background-color: ######;
background-image: url("");
background-position: bottom right;
background-repeat: no-repeat;
background-attachment: fixed;
scrollbar-arrow-color:######;
scrollbar-track-color: ######;
scrollbar-shadow-color: ######;
scrollbar-face-color:######;
scrollbar-highlight-color:######;
scrollbar-darkshadow-color:######;
scrollbar-3dlight-color:######;}

table, tr, td {background-color: transparent; border: 0px; padding:2;}
table table {border: 0px;}
table table table table{border: 0px;}

{sets the default style for the body, table data, list data, divisions and text areas}
body,table, td, li, p, div, textarea  
{font:normal 9px arial; color:######; font-weight:none; border:0px; text-transform: none; line-height:12px;}

{class for the basic font for the page}
.text {font:normal 9px arial; color:######; font-weight:none; border:0px; text-transform: none; line-height:12px;}  



{This is how all anchor points will be displayed; anchor points appear before all links.}  
a{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase; }  
a:link{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a:active{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a:visited{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a:hover{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}


{Default Links}
a:link, a.man{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase; letter-spacing: 0px;}  
a:active{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}  
a:visited{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a:hover{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}

{bolded words}
.standard b, p b, B, strong {
font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase; }

</style>

Alot of the css given arent needed for a div overlay. So I'm going ahead and take out the ones that arent needed. (The codes may vary depending on whether you want a div with comments or not)

[gotryce22]

Okay, that clears up that part. What about the third step? I have a pic that's around 500 x 150 and I'd like that centered on the top of my page. I think I can put those measurements in for width and height, but what exactly does the "left" and "top" part of the code do?

[*SinfullySweet*]

CODE

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

Okay. The left property, its best that you either make it 50% or 0% Why? Making the left attribute 50% will make the div image centered in all screen resolutions. Since you want the image centered, you're probably going to want to use 50% for the left attribute.

Now to position the div. You have to use margins to position it, since you are using the absolute property. Use this in the div code

CODE

margin-left:##;

By adding positive numbers to the margin-left, you make the div image move to the right. For example. If you add 200px to margin-left:200px, it will make the div image move to the right, but if you want it move to the left, you have to use a negative number of pixels.


For the top property, that just means how far down the image will go, depending on how many pixels you add. For example.

This is the top property

CODE

top:90px;

By adding 90px, your div image will move down 90pixels from the top. You can adjust the top property as much as you want, just dont cover the myspace ad.

If you still dont understand

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

[gotryce22]

So now that all that is done, how do I start on making the text box for my info, and the links? Positioning these are the same as positioning the picture, correct?

[*SinfullySweet*]

Correct, the positioning is the same.

CODE

<div class="content" style="position: absolute; left:000px;  top:000px; margin-left:000px; width:000px; height:000px; overflow: auto; z-index:00;"><center>
CONTENT FOR DIV.
</div>

That is the code you should use.
I'm probably guessing you dont know what overflow and z-index are?

[gotryce22]

You guessed right...

[*SinfullySweet*]

LOL. Okay, the overflow tells the div content wether you want the div to scroll or not. For example.

http://www.createblog.com/layouts/preview.php?id=17980
Do you see the main content area? It has a scrollbox. To do that, you add overflow:auto, and you have to define your height. This means that the height is defined. For example. If you make the height of the div 200px, and make the overflow:auto, this means the div heigh will never get larger than 200px in height, and will inflate a scollbar as you add more content.

http://www.createblog.com/layouts/code.php?id=18677
Do you see the content area in this div? The content does not have a defined height, which wont make it have a scrollbox. I set the height attribute to height:auto (meaning when you add more content, and more text, the div will continue to get larger and larger, and will never have a scrollbox) To do this, you add overflow-x:hidden.

Now for the z-index.
The z-index basically tells the browser which div you to appear ontop of which div.

For example. Your div image should be set to z-index:0 (this means the div will appear under all other divs) Now, for your content div. You should add z-index:1. This means your content div will appear ontop of your image div.

[gotryce22]

All right, so that's done, but now I need to know how to make the links and position them to where I want. How exactly do I do that?

[*SinfullySweet*]

You can get the links by right clicking a defualt myspace layout contact table.

I'll just go ahead and do these for you

CODE

[home link]
http://home.myspace.com/index.cfm?fuseaction=user&MyToken=60dc99f6-d156-4343-8884-b25e3fab918f

[message link]
http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=xxxxxxxxxx&MyToken=60dc99f6-d156-4343-8884-b25e3fab918f


[add link]
http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=XXXXXXXXXX&MyToken=60dc99f6-d156-4343-8884-b25e3fab918f

[block link]
http://collect.myspace.com/index.cfm?fuseaction=block.blockUser&userID=XXXXXXXXXXX

[add comment link]
http://comment.myspace.com/index.cfm?fuseaction=user.viewProfile_commentForm&friendID=xxxxxxxxxx&MyToken=60dc99f6-d156-4343-8884-b25e3fab918f

[view all comments link]
http://comment.myspace.com/index.cfm?fuseaction=user.viewComments&friendID=xxxxxxxxxxx&MyToken=60dc99f6-d156-4343-8884-b25e3fab918f

[view friends link]
http://friends.myspace.com/index.cfm?fuseaction=user.viewfriends&friendID=xxxxxxxxxx

Of course, you can add and remove other links

You position the navigation links the same as you would position any other div.

editt// ooops,I forgot something.

To make the links turn into hyper links like this
http://myspace.com/

Use this

CODE

<a href="URL HERE"> This text is what will display </a>

[gotryce22]

Okay, I think I'm good to go. Thank you so much for all your help.

[*SinfullySweet*]

No problemo. If you need any more help, feel free to pm me.