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]

CODE

Some issues.

I've got the code, and when  go to preview before I submit, it shows everything in order.
Then I actually submit the code, and nothing shows up on my page whatsoever.
Just my CSS.

Any ideas?

Add your divs too your css example:
.divnamehere{
settings;
settings;
setting;

then in who'd I like to meet add
<div class="namehere">stuff</div>

ok, so i got rid of all the comments, but when i came to trying to get rid of the left hand panel bit, i put the codes into where it told me to... but i couldnt click submit as there was no button to click! how do i overcome this?

ps thanks for helping =]

you do it in safe mode. OR http://www.createblog.com/scripts/download.php?id=130

Okay. I'm new here.
And I'm new to the DIV stuff.
I know I'm going to feel really stupid after I'm through with this.
But I need some major help.
I kind of understand how this works,
But how do you get all the other stuff your profile has to go away?
As in... How do you get the backgruond or whatever that covers your profile?
Or do you do something else for it?
And how do you make the background or whatever, and then put other boxes inside it for your content?
I hope you can understand what I'm talking about because this is all really confusing to me.
If anybody can help I'd greatly appreciate it.

http://www.createblog.com/scripts/download.php?id=45
You make the background in a program such as paint, flash , gimp , phooshop, paint shop pro. You use DIVS! to put your content there.

Ahh thank you!

Another problem now..

The last part of my background is being cute off.. help!

What's showing up --> www.myspace.com/smexiliciouslayouts

What should be showing up --> http://img433.imageshack.us/my.php?image=smexilaybg10wm.gif

Find this in your code
<div class="bg" style="position: absolute; left:125px; top:120px; width:992px; height:1090px; overflow: hidden;">
<img src="http://img433.imageshack.us/img433/9964/smexilaybg10wm.gif">
</div>

Make the height long enough till the whole image shows.

hmm.
btw great tutorial!!

just a little thing.. ive coded it all right and stuff is excellent but ive got one problem..my layer always appears REALLY tiny. is that supposed to happen or idk. ive resized it on photoshop so its big, but it keeps appearing really small. is it because im uploading it on photobucket or something, im sooooooooooo confused but i really wana get this right cuz ive been trying for so long!

xoxo.

photobucket shrinks images.
http://imageshack.us

I have read and re-read the section on the overlays... I sort of get it, but I won't ask questions until I have COMPLETELY exhausted my efforts. Anyways... the only thing I'd like to know is if you have to put your pictures and positioning in BEFORE you submit the div overlay code for it to work. I instered the code, looked fine on the edit page and when I viewed my profile, NOTHING!! I have been working at this for 3 days and NOTHING so far. I am so exhausted. lol.

It might not work if you didn't do it in this format:

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

thanks for the code. i have a question:
if i wanted to cover my profile to start from scratch, is there still a way to diplay my comments?


im assuming you use a div overlay for that.

To cover your profile use:
http://www.createblog.com/scripts/download.php?id=45

EVERYONE!

If you guys want to place your comments into a div or just want a edit and submit button when your image is covering it, go to this tutorial that I've made to do so.

EVERYONE HAPPY?!

awwwwwww you got me all excited but i clicked your link and its broken.

To put comments in a div use:
http://www.createblog.com/scripts/download.php?id=74

i'm new at p.s so could anyone give me some ideas of a plain div without any coding?

If you don't code anything its not a div.
Ps is just for your design you can learn hw to make diff styles by using http://good-tutorials.com