simple div overlay Options

[*disco infiltrator*]

Here's a simple Myspace div overlay.

For your CSS, use one of the CSS stylesheets already provided. Put that in your "About Me".

For your content, you can use this. Put it in "Who I'd Like to Meet":

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:000px; overflow: auto;"><center>
lalalalala this is your content!
</div>

For the image, you only need to change the width and the height to fit your image.

For the content, you can change the class of the div, the left alignment, top alignment, width, height, and overflow. If you want the div to have a scrollbar, use this div code. Open the image in Microsoft Paint to get the alignments.



If I wanted the div to begin where the black dot is, I would use the paintbrush tool and place it where I want the div to begin. Keep the mouse there, and look in the bottom right corner for two numbers separated by a comma. The first number is your left alignment, and the second is your top.

If I wanted a div that continues down the page until it runs out of content, this would be my div code:

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>

The only things that are changed are the height and overflow. Now all you need to worry about is the left alignment, top alignment, and width.

There you have it.

The following was contributed by tcunningham1589.


Description:

This code is used to make your simple div on your profile, whether you are using it for content, or a ghetto way to cover somthing up.



Code:

{ code used in INTERESTS section }
<style>
.div1 {
background-color:000000; color:000000;
border:0px solid; border-color:silver;
width:400px; height:100px; overflow:auto;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-250px; margin-top:150px;
visibility:visible;}
</style>

{ code used in MUSIC section }
<div class="div1">
content
</div>

*everything in bold is changeable

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

For Myspace Band/Music Profiles:
http://www.createblog.com/forums/index.php...t&p=2624671

This post has been edited by digitalfragrance: Jul 12 2007, 01:04 AM

[*disco infiltrator*]

Hi I'm not sure if this has been answered yet...but I'm trying to position an embedded flash object that has set pixels already using a div overlay...is that possible? I did it with my friends and comments thing...but I'm not sure how to do it with flash...someone help? thx =]

http://www.myspace.com/guitarshred

I don't think you can do set pixels with flash..

Perhaps try putting div tags around the object?

You should post this in the tutorials area. That will answer a heck of a lot of questions! Thanks for sharing, though.

The reason it was put here in the first place was to prevent "HOW DO YOU MAKE A LAYOUT?!!?" topics.

is it possible to put your comments into your div? as in like, the comments people send to you.

I think I've seen it done somewhere, but I don't remember where, and I
haven't figured out how to do that.

where are some sites i can go to  customize my own overlays for myspace?? im comp.illiterate so i need help.. please.. any tips are appreciated.

^ What are you talking about? A div overlay is the ultimate customization..

im new to this and im tryin these overlay codes. how would i go about makein this type of overlay. http://fyad.org/4gs7.  i was told to make the image in photoshop or something and overlay it. if i was to do that how would i add the links and text?

^ That's..not..a Myspace.....