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

[freeflow]

what is a div ?

EDiT -
or how do you make a div to cover up your bottom links ?

^ Use the hide your profile code in scripts and edit the settings to make your top to bottom links covered.

or

Make the image you use for your div go all the way down to cover those links, by hiding most of your profile then it will be easier for your div layout to hide them.


A div overlay is like having your own design cover up the original myspace ones. Look in myspace layouts + showcase for some examples.

my overlay....is...half way good. haha I just...am lacking stuff...idk anyway
this is a pretty cool way to explain this stuff. I got my info from elsewhere and I didn't get it really..but now I do.
thanks a million

oh, and my top links wont cover all the way. does anyone know a code for that? like I tried using a code and it wouldnt work. is there one specially made for an overlay?

^ http://forum.myspace.com/index.cfm?fuseact...oupID=100636674
Maybe?

heh thats one of the ones i've tried
maybe I'm doing it wrong..
I would put them in my style tags, correct? I did and nothing happened.

Correct. There has been a problem with hiding the bottom links maybe the same goes for the top as well?
My only other suggestion would be if you used the "Hide your profile" code then you can just move it up as far as you can to cover the links, but that may set your divs off a bit.

Okay so i really want to make my profile div overlay, but im so confused

help?

^what parts don't you get. If you don't get absolutely NONE of it then just make a topic about it so its easier to help you out :).

Could someone show an example or explain what you're supposed to do with this code? im so confused, but i really want to customize my myspace using a div overlay

For examples you can look under myspace layouts for the divs ones.
The codes are divs. So say you made your layout in a program then coded it then you get your div layout.

ok im really bad at making div and stuff but im learning.. may I ask what photoshop or program do you people use to make it?

I use photoshop lots of people use the following:
- Photoshop (recommended)
- Paint shop pro
- Gimp (free program similar)
- Flash
- Flash studio

do you have like any sites to get 30 days Photoshop 7.0? o.O and tutorials for making a website .. I know its in book resources but can you be kind enough and give me the site?

Um photoshop 7: http://www.soft32.com/download_346.html maybe?
BBOR: http://www.createblog.com/forums/index.php?showtopic=14636
Good tutorials: http://good-tutorials.com
^ Has great tutorials.

omfg i love you thanks alot ! i'll try to learn it ^^

Your welcome, I know how to use photoshop so if you need any help feel free to pm me.