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

[x3_mr_mak]

wow great thanks! this will answer a lot of questions.

[DDOMINOO]

Good work "Headphones."

[*disco infiltrator*]

Thank you "DDOMINOO".

[D1SMANTLED]

I think this should be closed or else people are going to start asking questions in here.

Topic Closed.

EDIT: NVM

[*disco infiltrator*]

The whole point of having this is so there's not questions in topics in Myspace Help but they can ask here..

Topic reopened.

[YourSuperior]

What does 'Overflow' mean?

Your text or images will overflow.

[william]

ok..im stupid coz im new...but wat does "div overlay" mean?

div refers to div layer, which is kind of like a layer of html you "overlay" on your original profile so that you can completely customize your profile with whatever you want.

Quick Question, how do you hide the rest of your profile so that this works?

I tried using the script on the forums, but it didn't work.

you hide the original text classes and most of the tables, then make the div big enough so it covers what's left of your profile.

[snoox]

oh! domo. domoo. thanks "william"!

[*disco infiltrator*]

umm. ok im new at this but i wan to learn how to make a div layout. so does the image you make have to be a certain size or something?

What size would you make the MS Paint canvas?

It doesn't matter, any size you want that will cover the profile under it.

[toodlepops.]

Oh, thank you so much, Sammi.

[freeflow]

Sammi you are awesome!

[supjuls]

i read this thing over and over and over again, and i finally get it!!! haha yay :D just wanted to say thanx, this really helps!!!

[*disco infiltrator*]

hey sammi, is it possible to provide a div overlay layout code for myspace?

This is a div overlay layout code........

can you do image mapping on myspace?

Yes. Just use the same way to position as the way you position divs.

[FONT=Arial][SIZE=1]WOW SHEEESH THiS iS SUPER DUPER HARD!! i STiLL DONT GET iT BUHH YEA ANYONE WiLLiN TO HELP MEEE?? iF YA WANNA TAKE TiME TO HELP ME OUT STEP BY STEP iM ME @ AiM:sh0rtybmyname17 PLEASE YOUR HELP WiLL BE GREATLY APPRECiATED!!

It really isn't hard. This whole topic explains it step-by-step. What more could you need help with? Copy the code, position, change colors.....Really, it's not that hard.

[coolestdork12]

ahh this defenitely helps.

thank you sammi

[hotbabylisious]

wow thats realli helpfull

~*myspace*~

ill add u !!!!
i love commentting if u do to than maybe u shud add me

[william]

...this thread is open so you can ask specific questions petaining to this tutorial, not so you can ask someone to completely do it for you or to advertise your myspace.

[without a name]

i really dont get this can someone IM me and help me?


lilbabygurlkelly

[NotWorthMyTime9]

okay i just want to know if there is a div overlay for JUST getting rid of the main user picture/name/last login/country stuff?

[poisoncandygram]

I don't understand where to put the div code... If I start it above my content in "who I'd like to meet" and then [/div] it, it just multiplies my image over and over again and covers the entire background of the table. All I want is to position it over the extended network section... >_<

[lovescream]

whats the code to erase everything so you can make a div overlay?

Ehh.. http://www.createblog.com/forums/index.php?showtopic=87336 ?

Yeah completely covered the rest of my profile, so now i cant change it back

www.myspace.com/robbeh

Could someone help me?

^ Safe mode.

[hiddenanger]

ok i tried the code... but this is how my page turned out...

http://www.myspace.com/angerful

ok, i almost go the layout down... but... why is this happening?

[hottieondablock]

That is awesome! Thank you soo much! <3

[ihrtbz]

Hey, i used your code and everything. But i just can't put pictures and text on there. will you show me how?

use the image tags and just type text

like after your opening div tag
<img src="URL"></img>

or for text
<p> Blah blah blah.<br>Blah blah blah. </p>

[X_miss_kitty_X]

i'm really having a tough time with this...if anyone would like to coach me through it, please IM me on msn (very_berry_strawberries@hotmail.com) or yahoo (bad_kitty1638) i know i can do it if i just have a tiny bit of help

[*disco infiltrator*]

How much help could you all possibly need? This whole topic is walking you through it. I gave you the entire code needed, just change colors and positioning.

If you don't have basic HTML knowledge before trying to do this, then don't try to do this.

[YourSuperior]

^I agree! Go here for basic html: http://webmonkey.com

[CuteLilShortT]

[FONT=Arial][SIZE=1]WOW SHEEESH THiS iS SUPER DUPER HARD!! i STiLL DONT GET iT BUHH YEA ANYONE WiLLiN TO HELP MEEE?? iF YA WANNA TAKE TiME TO HELP ME OUT STEP BY STEP iM ME @ AiM:sh0rtybmyname17 PLEASE YOUR HELP WiLL BE GREATLY APPRECiATED!!

same here... my im is cutelilshortt n mi mispace is www.myspace.com/chadslilshortt

[YourSuperior]

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

It's fine where it is in my opinion. Because people can see it whenever they come to the help forum.

[*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.....

[blankminded]

yes it is. i jus used that site to shorten the URL. It was hella long. the same way u used to shorten image url's in code to make the code shorter. like int he pic page on myspace.

[*disco infiltrator*]

i have the overlay with my bg but i cant get the size right and when i do if i maximize it its not right. how to get it to stay the same size when its minimized and maximised?

^ Absolute positioning.

[Electrifying]

OoOOo Nice tutorial! Awesome Job!

[*disco infiltrator*]

All im confused about is the background. You just make it and put it in the code? How does it fit? I've tried this before and my profile was never covered. And by the way, how do you put tables on teh middle of your image, just that you can type it do you have to do positioning?

Then make your background bigger.
The tutorial says perfectly how to do the things you're asking to do..did you even read it? And do you have prior HTML knowledge?

lmao

yeah so anyway.

i ahve an overlay atm, but i want to add my comments to it, jsut below my comments box. Is this possible?

Http://www.myspace.com/antiprophet

I haven't figured out how to do it yet.

[partybiatch]

i used the "hide profil" script and the code in here to start with my div overlay but no image will show up at all :(

[AthenatheGrate]

I put in the code, and its fine in the preview but it wont show on my actual profile

[hiiyas]

i must be making this a lot harder than what it is. i feel like an idiot. i cant figure it out.

[heyyfrankie]

Thank you "DDOMINOO".

that just drew the FUNNIEST picture in my head

[*disco infiltrator*]

i cant get to the submit button.

and i cant figure out how to get around that.

Use the manual submit button.

[cc6699]

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

You mean like my profile does <a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendID=23829425">HERE</a>?

Let me know if you need any help

[krn05]

SO basically everything i need to make a Div Layout starts on page 1 of this thread? If so i'll try my best, i have another profile with a div layout but i didnt make it. I took me sometime to put in though because it was flawed so i basically know the whole profile top to bottom from having to read through it, i'll try my best.

* Dont want to be a pain, but i dont need dreamwever or any type of program like that. Im not that knowledable in coding and stuff but not an average myspace, who cant edit crap. I do have knowledable about photoshop.

[downsouthposted]

I really need help.
Everytime I get it down right it gets confusing again.



I put in the code to cover the default myspace and then I went on to add in the overlay script. Thats when bad things happen. There is this big white box over my layout and the background doesnt cover the whole page.


2 Questions-
1) How do I get rid of the big white box?
2) What is the reccomended size for the background? or how big should I make the MS paint canvas?



Thanks...
AIM if you see the need to further help me.
Menthol Clouds

[mysteriouscris]

awesome tutorial..the best i've come across. It helped me make my first div layout for myspace(link in my sig). It's really simple..THANKS!!

[*disco infiltrator*]

I played around with the codes, and look at my layout.  ROFL.  Thanks!

^ Holy hell.
...
:[
I made the tut and yours is better than mine.

[carolinegamboa]

this is just a quick question. is all this div overlay stuff just like making a Xanga overlay? I had tons of experience with that, so I assume it was the same. Message me back if anyone has the answer_

[dragncore]

...well this helped me get started with div overlays on myspace, but I see in some overlays how they have there blog plugged right in so you dont actually have to load the blog page seperately Whats the code for that...? I can't find any reference to it anywhere... any help?

Safe Journeys...

This Has probably been asked before, but.
I'm a little tired so I'm not going to read through.
I used a DIV layout on my myspace, and I can't edit it.
Is there some way I can do a manual edit button like I did the submit?

...ummm have you tried to edit your profile in safe mode? When you log into home none of your custom layout should be showing at all... That work worked for me when I had that problem I think your having...

[x_bang_x]

...ummm have you tried to edit your profile in safe mode? When you log into home none of your custom layout should be showing at all... That work worked for me when I had that problem I think your having...

Eh.
Yeah.
People had been telling me about safe mode.
and.
I couldn't figure out what the hell they were talking about.
xD
But.
I figured it out.

[carolinegamboa]

this is just a quick question. is all this div overlay stuff just like making a Xanga overlay? I had tons of experience with that, so I assume it was the same. Message me back if anyone has the answer_

uhh, i would like some feedback if you guys know about this.

[xix_inu_xix]

uhh, i would like some feedback if you guys know about this. 

yes and no myspace has it's own way of coding like xanga has its own

[newfoundikaika]

thanks for the tutorial..
i finally did my first overlay...

ikaikas myspace

[Jane Doe.]

I was wondering if you were able to make a layout with all the given categories for a MySpace in photoshop and then slicing it, would you be able to make it work on your MySpace using Div Overlay?????

Yes. If you change the output settings, of course. And get rid of the '#' in the DIV's you get after having saved it.

Ok, I'm not exactly sure if this is what I'm looking for but...simple question: Is this the box that you can use to invade someone's myspace? Like you know, you put the seperate writing or something like that in it....Just wondering. Need it desperately if it is. I tried the code but I'm not sure I used it right...

Invade?

[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

[akele]

will someone look at my profile and tell me how to fix it?

This is the site that it works on Dummy Site
and this is my Real site that isnt right...

[freeflow]

i added the code to my page.
and i put my content where it says to
but when i view my page i can't see it.

any suggestions?

^ Where there is all the 000 you actually have to put numbers in there. and play around with those numbers soo you get the content in the right spot.

[lilskylinechic]

hey i need help again....... i entered a text code and i dont see it

[duplicatex0x0x0]

heres da link....
myspace
im trying to make it for my sister soo yea...

it suppose to say something in one of the stars but yea i dont see it

You would have to set the large main picture to the background DIV, and have the words in the one star set to a new DIV level.

[renier]

whoa.
extremely helpful!!!

THANKS

[freeflow]

ok. [yes i am stupid and take long to grasp on to things]

so my div is on top of my picture correct?

^ Yes but you might have to position it a bit to get it directly over it. If you mean your default picture.

i meant the background picture

Yea your content divs will be ontop of your bg picture.

[zoe_loves_you]

^thankyou!

ok. so i tried it but the profile isnt hidden [with the code given to me] and the content is going to the far right overlapping the extended network which is supposed to be hidden.

EDIT: nvm i figured it out

=( i've tried with a div layout so many times,it's not fair grr!And every time it turns out looking wrong,i'm hopeless.I just don't see what i'm doing wrong each time..

what is your myspace profile you are using to make the div layout? maybe i can see what's wrong.

also i have a question myself; im trying to move some content for a div to the left but even when i change the dimensions so that it goes to the correct place it wont budge, it wont go any farther then left:100px idk if thats just how it works or if i can do something so that it goes farther to the left..

[freeflow]

okay, ive read through this whole thread a couple of times and no one has really answered the same question that i have...:

how do you get the bg-overlay to cover the whole page?

www.myspace.com/kahlk252
*i admit that i do not have much prior html knowledge, i just wanted to try doing this.
---nvm now, i have a grasp on everything now. thanks!

^ Use the hide profile script
http://www.createblog.com/forums/index.php?showtopic=87336 is one way.

What is the suggested size of the image for the overlay layout?

^ It doesn't really matter to me I would atleast use a 800x600 .

[duplicatex0x0x0]

^^ no less than 800px in width, nor 600 px in height, to cover the default profile.

[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.

[missp0ptartx]

blahh i've tried this code millions of times.. and i see there are some positive reactions so it MUST work.. but i DONT understand how?!?!?!

and i'm not new to myspace codes etc. it just makes no sense to me.
can't someone just give an example of one.. like the code they used to make their layout & then post what it looks like?!

i think that would help lots..

[s0.inn0c3nt]

^^^ i kno wat u mean

[freeflow]

i have a question I try to move my comments & friend where i wanted them but Im stuck.. can someone be kind and walk me through this? ..
Thanks for your time

^ http://www.createblog.com/forums/index.php?showtopic=116833

[Jane Doe.]

Topic Pruned.
I edited in the poster's question along with the poster's answers. So your replies aren't gone. Just wanted to clean it up a bit.

[freeflow]

I've tried looking through all of everyone else's questions/replies, and I've read the tutorial, and I do have some html knowledge, but I just can't understand about div overlays.. like I can get the background picture in it, but how do you add comment boxes and etc. over it?

Try doing it this way. Use this code to hide your profile:
http://www.createblog.com/scripts/download.php?id=45
Then in the code in who'd I like to meet where it says add your content here just put <img src="imgurltobghere">
Then add the following code everytime you want to add content like a comment box etc:

CODE

<div class="content" style="position: absolute; left:000px;  top:000px; width:000px; height:000px; overflow: auto;"><center>
lalalalala this is your content!
</div>

[x_MiChElLe_xo]

ok, i think i understand now. thanks!

[flipboa185]

Yah, uhh that link to how to create a manual submit button isn't work...(>_>) So now what? [Attempts to search it up]

[freeflow]

Yah, uhh that link to how to create a manual submit button isn't work...(>_>) So now what? [Attempts to search it up]

http://www.createblog.com/scripts/download.php?id=130

[flipboa185]

Now then...I can't seem to make the second div scroll or even have a background color/ border of its on, is there something wrong with it?

And thanks by the way for the link.

[freeflow]

Now then...I can't seem to make the second div scroll or even have a background color/ border of its on, is there something wrong with it?

And thanks by the way for the link.

By second div do you mean this code:

CODE

<div class="content" style="position: absolute; left:000px;  top:000px; width:000px; height:000px; overflow: auto;"><center>
lalalalala this is your content!
</div>

as long as your have more text than the desired width then it will automaticall scroll.

For a border:

CODE

<div class="content" style="position: absolute; left:000px;  top:000px; width:000px; height:000px; overflow: auto; border: 1px 000000 solid"><center>
lalalalala this is your content!
</div>

[flipboa185]

I have to give you props for that really fast reply. If you want you can check my test page, www.myspace.com/flip_stylz1 and check my source.You can tell that I attempted to see if it would scroll. Unfortunately, erm...It didn't. [sigh]

Btw, I didn't attempt at putting the code here, (Kinda noob right now so I don't know much about forums) thinking it'd do something when posted.

[freeflow]

I have to give you props for that really fast reply. If you want you can check my test page, www.myspace.com/flip_stylz1 and check my source.You can tell that I attempted to see if it would scroll. Unfortunately, erm...It didn't. [sigh]

Btw, I didn't attempt at putting the code here, (Kinda noob right now so I don't know much about forums) thinking it'd do something when posted.

Where it says "this layout is being....." it does scroll.

[flipboa185]

so one fast question.
if i use this div layout will people be able to comment on my pictures?

If you provide some sort of link to your picture page...That's the simplest way.

[insanepanda]

ok i've read through this a few times, and i do have some html knowledge. but i still need help. i've read the code over a thousand times but i still need help with it. my profile isn't right...at all... i need help, bad. can someone please help?

aim: whitejuicebox

so i got the picture up, and some content...but...

when i look at my page on various types of internet...types... (internet explorer, safari, etc.) it's offline every time!!

how do i make it stay in the right place for every type of internet?

Posts merged
- Julie.

This post has been edited by Julie.: Apr 2 2006, 05:50 PM

[smrkangl]

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?

[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

[leifiram]

I still don't understand the entire process of this. I have tried it all, step-by-step, exactly as the directions say, but it doesn't turn up right because some things are still there. Could someone please provide a step-by-step tutorial with an example ? That would really help. Thank you.

[neko]

didnt want to create a new topic, so i thought it would fit in here.

so heres the scenario.

normally when you use the 'delete profile' code, the profile turns white. is there some way to change that color using just codes, or do i need a whole different overlay thing?

sorry if its kinda vague.. i hope some of you can understand my gibberish ><

edit: figured it out. =]

[Jane Doe.]

can someone help pleeeaasee?? i've followed the tutorial thing at the beginning of this topic and i have 3 content divs, and a background div, but you can scroll the whole page down and see the rest of my old unedited page!! how do i stop this happening? pleease help me! if you dont understand what i mean lookee at it

myspace

1. Empty out everything on your profile that is used for content [ex: The "!"s you have]
2. Use this to hide friends and comments:
http://www.createblog.com/scripts/download.php?id=67
3. Try the coding on the second line to hide the left side:
http://www.createblog.com/forums/index.php...dpost&p=1933930

Reading through this has been amazingly helpful, but I'm stuck now.

http://www.myspace.com/smexiliciouslayouts

What do I do to get rid of the 3 boxes on the left?

You can't get rid of them. You can, however, take out the borders.
In your "about me" you have this:

table table table {
border-width:2px;
border-color:FF0099;
border-style:solid;
}

I suggest you take out the bolded, so the tables have no border, and thus "disappear".

[thestolenkiss]

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

i did this, and its taken away all the stuff on the left hand side, but also now the divs aren't working am i meant to put the code to remove the left hand side stuff somewhere special or not? at the moment its at the begining of the interests section.

EDIT: dont worry, i was a clever bean and played around and i found out how to make it work =] thanks for all the help you gave me though

[x-vampire-heart-...]

CODE

<DIV class="Main"> <table style="width:900px; height:600px; cellpadding:0px; cellspacing:0px; border:2px solid silver; background-color:ffffff;}"> <tr> <td valign="top">
<img src="[url="http://i1.tinypic.com/sfib02.jpg"]URL[/url]">


DIVS FOR CONTENT HERE


</td> </tr> </table> </DIV>

where is says URL... is that the url you want as your background or the box you made to put stuff in. gah. this is so confusing



and what do you put in the DIVS FOR CONTENT HERE ??



thanks.

-x-

p.s. that code is on my who id like to meet

[Pulchritude]

That link doesn't seem to be working.. Would there be any way someone could tell me how to do it, or at least re-direct me to where it is??

heres the code for the comments in a div
- http://www.createblog.com/forums/index.php?showtopic=122450
and the manual submit button
- http://www.createblog.com/forums/index.php?showtopic=122792

This post has been edited by Julie.: Apr 2 2006, 05:49 PM

[duplicatex0x0x0]

i dont understand how to submit this layout there is no button anywhere. please help me im going nuts

http://www.createblog.com/contribute.php

but there is not SUBMIT BUTTON.. how can you submit the code if there is no submit button??

java script:document.forms[1].submit();

or if you have a custom comment box use this one;

java script:document.forms[2].submit();

(java script w/ no spaces!)

[x-vampire-heart-...]

i dont understand how to submit this layout there is no button anywhere. please help me im going nuts

use the manual submit button



http://www.createblog.com/scripts/download.php?id=130



-x-

[emmalee89]

i would highly suggest that everyone make a manual submit button before dealing with a lot of div coding & whatever.

to do this:
- click on favorites in your internet explorer and click add to favorites.
- type in "Submit" or "Submit button" or something of the sort as the title and click ok.
- click on your favorites list again and right click on the "Submit" you just made
& click on properties
- type in this as the url, only without the space after the j, and click okay
j­ avascript:document.forms[1].submit();

now, whenever you go to make a change in your profile & there is no submit button, you can simply click on your favorites and click the Submit link you've just made.

[bByJ_x3]

mmmmkayy..
thanks for the code...it helped..sortof?? =D

hahah
srry
but i created my own table, and placed a div overlay thingyy..
but the table wont come out properlyy..
and you can still see my comments.. info.. and everything...
what do i do?

[*This Confession*]

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

and for simple things in photoshop
go to graphics

http://www.createblog.com/forums/index.php?showforum=76

Okay, so I've got my whole div overlay sorted with all the content (on my dummy profile HERE)

Understood it all fine, its just that I've got a problem with profile songs. I've added one but its always sitting on top of the div.

I tried using some code that apparently would position the player to where I wanted it but that didnt work.

Can anybody help?

Thankzzzz :]

yea post this in the myspace help forum make your own topic with your problem

try

CODE

<style type="text/css">
embed {position:absolute; margin-top:-500px; margin-left:-1000px; height:150px; width:70px;}
</style>

you can resize it.
also move it.
it does work.
or atleast should

um, i dont meen to bother you i meen honestly there is alot of questions you already have to deal with

but is it possible to put a myspace video in a div?

yea^ i'm pretty sure you can
its like putting a youtube video in one.

This post has been edited by toyo loco: Jun 17 2006, 08:02 PM

[GREASEbaby]

Okay. So I'm next to this DIV thing.
I just know the basics. Nothing too fancy.

I found this layout I liked and used it.
But my page is completely effed up.
See for yourself:

www.myspace.com/bryspace666

How would I go about, to get rid of the old,
Default Myspace page? I know I could hide
it somehow. I just don't know the code.
Any help would be cool.

In about me:

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 Who I'd 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">All of your content goes in here, whether it be tables, flash, or whatever!</td> </tr> </table> </DIV>

Okay, I tried that.

And it almost kinda didn't fix my page.
Where you said put all the content, you
meant as in put what people would usually
put in their "About Me".

I don't know.

I'm in a pickle with this thing.


Look at my page now.


www.myspace.com/bryspace666

Yeah, where it says put the content, you put it as you would with your about me.

If you need further help, I would suggest posting a topic.

[freeflow]

Okay, I tried that.

And it almost kinda didn't fix my page.
Where you said put all the content, you
meant as in put what people would usually
put in their "About Me".

I don't know.

I'm in a pickle with this thing.
Look at my page now.
www.myspace.com/bryspace666

You don't do it like about me unless you don't have a div image.

where it says content here you put your divs ,div images etc.

hiya. Im trying to use a new myspace background but its telling me i need to add my friend id. Where exacly should i add it? and also where should i add the comment box?
Please help!!

For a background? Post the code
You add the comment box where you want it . Thats what you have ot add your friends id too.

I entered the myspace layout code from this website into my about me section but what section of code do i have to delete to be able to havethe full picture in the extended network table?

Thats not a div.. Thats just adding a pic in extended network
http://www.createblog.com/scripts/download.php?id=93

Ok..so, I wanted to start from scratch and cover my entire profile and place an image in the center. I used http://www.createblog.com/scripts/download.php?id=45 that code, however, it only does part of the page. How do I make it to fit the entire profile?

First if you keeping your bg color white then do

CODE

<style>
body, tr ,td{
background-color: FFFFFF;}
</style>

Also hide anything that can be hid such as friends, comments, blogs , contact box and details if they show.

Then if it still doesn't hide edit this part of the hide your prof code:

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>

Edit the width, and margin-left, and top numbers to random other numbers (in the hunders no thousands) till its gone.

I still dont get it its not making any sense

Then you should make a topic or something and we can explain step by step which parts you don't get. Before though search through old topics about it AND read this whole topic its been explained a few times I think.

[*StanleyThePanda*]

I'm probably not paying attention....i just need a quick answer....if I got a DIV photo off of a site (bigoo.ws) and want to move it around on my page (as far as putting it a little to the right) how do I do that? I've already tried typing in the command, and it's not quite working...

^ Well the image should be in a code like this:

<div class="bg" style="position: absolute; left:0px; top:0px; width:000px; height:000px; overflow: hidden;">
<img src="IMAGEURLHERE">
</div>

And you change the numbers, that I bolded, to move it around
Make sure to put the correct width adn height of the image

[coldtrance]

i dont get it. this is how to make your OWN CUSTOM layout right? so whats a div?

this is a tutorial for making a myspace profile that does not have the myspace look and feel. a div overlay is a special layout that covers you entire layout and allows you to make cutom tables and images and it allows you to place them anywhere you want.

okay. I made my layout and everything seems to be right ,but when i put my coding in myspace and i click view profile..theres coding in the background and i can see my friend lists and comments...my whole orginal myspcace is behind my layout..how do i get rid of it? I already tried that code to hid ur profile but it didn't work..ne suggestions?
thanks
karina

try going to mygen.com and look for his code to hide your entire profile, that one might work better for you

I put in a DIV layout on my MySpace and it looked fine. I got rid of my comments and top 8, but I can't get rid of my extended network banner. I've tried looking around for codes to hid it but they won't work. What do I do? Is there a certain code? Or do I have to resize my layout? If so, how? Help please!

can i see your profile so i can help?

Here's the link:

http://profile.myspace.com/index.cfm?fusea...b2-85596ec4fad4

it looks more like you just need to move your div over to the right a bit more

[freeflow]

Ok, this topic has been cleaned up a bit. So when you guys help people out try to quote the post of the person your helping. Thanks.

[robinbanks13]

Do image maps work with div's?

[freeflow]

Do image maps work with div's?

Yes but you have to map them in this format:
http://collect.myspace.com/index.cfm?fusea...oupID=100033089
I suggest you just slice the layout. It would be much easier.

[robinbanks13]

Yes but you have to map them in this format:
http://collect.myspace.com/index.cfm?fusea...oupID=100033089
I suggest you just slice the layout. It would be much easier.

how do you slice with Gimp?

can anyone help me with this code?

CODE

<div class="bg" style="position: absolute; left:0px; top:0px; width:360px; height:300px; overflow: hidden;">
<div class="bg" style="position: absolute; left:0px; top:0px; width:360px; height:300px; overflow: hidden;">

<body>

<div>

<img src="http://img523.imageshack.us/my.php?image=part14ju.jpg" alt="" usemap="#part 1" style="border-style:none" />

</div>

<div>
<map id="part 1" name="part 1">
<area shape="rect" alt="" coords="214,57,279,126" href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=9348728" title="" />
<area shape="rect" alt="" coords="211,136,315,198" href="http://mail.myspace.com/index.cfm?fuseaction=mail.message&friendID=9348728" title="" />
<area shape="rect" alt="" coords="208,215,305,276" href="http://comments.myspace.com/index.cfm?fuseaction=user&circuitaction=viewProfile_commentForm&friendID=9348728&name=Drew+is+Deadly&MyToken=663f38c1-a023-4705-b675-932034f44ae4" title="" />
<area shape="poly" alt="" coords="9,55,182,55,182,281,9,281" href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewPicture&friendID=9348728&MyToken=663f38c1-a023-4705-b675-932034f44ae4" title="" />
<area shape="default" nohref="nohref" alt="" />
</map>
</div>
</body>

</html>


</div>

nvm
i think i figured out what i was doing wrong

[duplicatex0x0x0]

What is the code suppose to look like? what needs "fixing"

[rdubya]

It doesn't have much on it yet but it's a start. myspace.com/raw_

Thanks for the help, peace!

[TheFlaw]

Hey all I was wondering if I could get some help. I made a layout in PS, sliced and dived it up, but it seems I'm having a bit of trubble with divs beeing displayed. I'm trying to make a div with scrollable content but its just not working. The content WILL show up but only if its NOT inbetween a div tag. Sound weird? I know...

Take a look:
http://www.myspace.com/those_lovers_are_liars

See where it says "getting there..." well there is sopose to be a bunch of links abbove it that arent being displayed and I dont know why. When I preview the section in safe mode it shows up tho. Any help would be great.

Thanks