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

[billyspvy]

ooooo thanx for posting the codes. i want to to make a DIV overlay, and this would get me started.

[lexiemai]

Helped me bunches!

[flaymzofice]

Just so I'm completely clear, the difference between this thread and the other thread explaining div overlays it that the other one goes through it step by step? Or are there different types of div overlays...?

[GREASEbaby]

The other one just goes through it step by step. No, there aren't two types of div overlays for you to learn. Don't worry

[jasface]

i need help with my div layering .. is it possible for me to put like a flash player on my div .. just curious ..

code removed

thats the code for the flash player i want to include .. i cant figure out how to make it into a div so i can have it on my site... maybe im trying to attempt the impossible .. idk .. if someone could help that would be greatly appreciated

[freeflow]

Put the whole code in a div.

[prncsheathr]

No advertising

This post has been edited by toyo loco: Oct 3 2006, 06:10 PM

[sstranger]

so im trying to find how to hide myspace comments so you have to click a link to see them- but this seems more interisting- i dont know what ccs or div overlay even mean but can someone tell me how to learn more? thanks-

[freeflow]

^ Make a topic next time. Right click on your view more comments link. Go to properties and copy the url.

CODE

<a href="PUTTHEURLHERE">View my comments</a>

Put that wherever you want the link to be. Then you hide your comments: http://www.createblog.com/scripts/download.php?id=61

[XSummerLovinX]

Ok...After all that, I'm still not sure I get it...I try and try to make the DIV codes and they mess up my whole page! Anyone care to hit up my page and see?? myspace.com/a_little_bit_of_summer THANKS! :]

[freeflow]

^ Post a topic and try listing whatever you find wrong. Please and thankyou.

[*IVIike*]

thanks for posting this it really helped me when i started

[lex16]

I cant seem to make the words come out, like they are behind the cover thing.

help meh please!

[freeflow]

^ You need to put them in a div and position it for them to show out on top. You may also want to make a topic if you don't get it.

[adafsdfasdfadasd...]

I cant seem to make the words come out, like they are behind the cover thing.

help meh please!

Um... huh? If you have a question about div's it would be make a new topic in the main section [Myspace Help] / rather then a reply in this post... if you scroll down the page [@ Forums / Resource Center / Myspace / Myspace Help /] you will see the New Topic button

[Intercourselyts]

^I don't want to be rude or anything ximonolithix but perhaps read the posts before replying constantly. Toya posted the same thing pretty much in the post right above yours replying to the same person.

[rachel_890]

Okay, im having trouble with the coding..i can code a normal layout but this is just confusing me...i made the overlay in photoshop and its got all my boxes where i want everything..so thats right? so i put it in the code and it works find but then the rest of background is grey.....ive changed every colour and nothing ever changes that and im just kind of confused as to where the text and stuff will go...can someone plz help me out..thanks soo much

[*Intercourse.*]

^make your own topic in myspace help and post your codes please.

[choombawamba]

I'm using the script provided for the image and 2 other content divs, but it misaligns on other resolutions. Is there anyway to fix this?

[*Intercourse.*]

^more than likely know. What kind of positioning are you using? Relative or absolute?

[andyisasian]

im tryign to learn how to do the div layout designs
do u recomend any programs i should use to make a div layout?

an how do u know where to postion the div boxes on the page?

[freeflow]

^ Photoshop, paint shop pro, or gimp. And you know by playing around with the numbers till you find the right spot. Read old topics and this thread.

[andyisasian]

:] thanks alot,i will do
umm btw wht internet provider do u recomend to do scirpting
like internt exploer, fire fox etc?

[freeflow]

Personally I would suggest using either or. Just make sure that you double check the other one to make sure it looks the same.

[babyolly566]

i found a rlly good code on here for a div and everything looks great, but now i want a background color for the layout because the greyish bg rlly doesnt wrk well w/ my lay..i tried adding it in & i must be typing the wrong words or putting iit in the wrong place bc it didnt wrk. can sum1 plz show me where i type in "background color" or whatever so that i can change the back ground color. also i need way more than 1 content box for this lay so how do i write it in? im new to this whole writing in more own stuf [[been usin bbzspace overla gen but want to get more creative]] help will be much apprecated...sry 4 the long xplanation

heres the code:

CODE

<div class="bg" style="position: absolute; left:100px; top:0px; width:850px; height:1000px; background-color:000000; overflow: hidden;">
<img src="http://i10.photobucket.com/albums/a111/babyolly566/2MUCH4U.jpg">
</div>

<div class="content" style="position: absolute; left:150px;  top:580px; width:353px; height:389px; overflow: auto;"><center>
<font size=5 color=white><b>lalalalalalalalalalalalalalalalalalalalalalalalalalalalalal this is your content! lalalalalalalalalalalalalala this is your content!lalalalalalalalalalalalalalalalalalalalalalalalalalalalalal this is your content! lalalalalalalalalalalalalalalalalalalalalalalalalalalalalal this is your content!  lalalalalalalalalalalalalalalalalalalalalalalalalalalalalal this is your content! lalalalalalalalalalalalalalalalalalalalalalalalalalalalalal this is your content! lalalalalalalalalalalalalalalalalalalalalalalalalalalalalal this is your content! lalalalalalalalalalalalalalalalalalalalalalalalalalalalalal this is your content! lalalalalalalalalalalalalalalalalalalalalalalalalalalalalal this is your content! lalalalalalalalalalalalalalalalalalalalalalalalalalalalalal this is your content! </b></font>
</div>

and heres my layout so you can see what i mean w/ the background:
http://profile.myspace.com/index.cfm?fusea...endid=129272860