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]

help..

^ Tell us what part you need help on? Help's not very specific

sorry well i need help on the whole thing...well the first thing do i design the layout first???

^ Yea that would be the easy way to design your layout first.
Then upload it and start your diving in myspace.

i'll be back when im done designing lol...thanks very much ur soo helpful!l lol well thanks i'll be back for quite a while i need to learn how to use the photoshop...

THANKS AGAIN lol

okay now im done with the layout... what do i do next?!?

You basically use the code provided in your myspace and follow the steps.
So like you would upload it and have

CODE

<style type="text/css">
.Main { position:absolute; left:50%; top:125px; width:800px; z-index:1; margin-left:-400px; padding:0px; border:0px; background-color:transparent;}
</style>

in about me and this in who'd I like to meet

CODE

<DIV class="Main"> <table style="width:800px; height:600px; cellpadding:0px; cellspacing:0px; border:2px solid silver; background-color:ffffff;}"> <tr> <td valign="top">
<img src="URLTOYOURDESIGN">
DIVS FOR CONTENT HERE
</td> </tr> </table> </DIV>

then go back to this tutorial and read how Sammi says to do the divs and then you play around in positioning those till you get them right. Just post the code were I wrote divs for content here.

Any other questions just pm me .

I'm kinda confused...so I should go make a div lay in psp or something...then upload it and put the url in the code next to img src?And then I have to mess around with the positioning to get it right?I mean where will I write all my content?Gah I wish there was a more simple way...I suck at this.

^ Yea you can do that.
You don't have ot position the image. You position divs. Then inbetween the "> and </div> you write all your content. So basically the divs are positiong your content.

ok thanks!!

Ok so ill just use the code in the first post of this thread and then upload the image and so on.....just checkin heh..coz how you have another code in the above post..

IT doesn't matter they end up doing the same thing. Making the div overlay.

Lol I just cant win...ah theres no submit button...and the div lay is sitting at the top.
who knows if i'll ever get it right

Argh I give up      

You make a manual submit button ..
http://www.createblog.com/forums/index.php?showtopic=84164