Printable Version of Topic

Click here to view this topic in its original format

Forums _ MySpace Support _ Making a DIV Overlay Layout

Posted by: This Confession Jul 15 2006, 05:28 PM

Note:This thread was updated and cleaned out on Febuary 26, 2007. Try to quote the post you are helping. Also please if you don't understand any of the steps, then please post a topic and don't reply in this one. If you just have one simple question (on a step or two) feel free to post it here.

Making a div

Version 1.0

Level : Step By Step
Written By: ~~This Confession - Infinite.-Intercourse.~~ Insurmountable

First:

Hiding your profile.

If you would like to have comments in your div. Please use this code.
http://www.createblog.com/scripts/script.php?id=376

If you wouldn't like comments to show use this code to hide your profile.
http://www.createblog.com/scripts/script.php?id=368

This will hide your whole profile, except for the ad.
Do not hide your ad, its against myspace rules. =]

Also yes, this coding and all of the coding can go in to your about me or who I'd like to meet

Second:

Customizing your profile.
http://www.createblog.com/forums/index.php?showtopic=84325

I suggest using the 3rd one down, it explains what all parts do and such.
But mostly all you need to do is do the background color, scrollbar colors, border colors.
and link colors and text properties.

Third:

Making your div's. [the fun part ]

Putting up your main image.
Upload it at http://www.imageshack.us

and then put it into this

CODE

Change the top and left to position where the image is.
And change the width and height to the same as the image.

I suggest making the top about 160-170px
So its right under the navigation bar more than likely.
Really Just mess with the numbers and such and you'll get the hang of it

Forth:

Other Div area's

CODE

<div class="content" style="position: absolute; left:000px; top:000px; width:000px; height:000px; overflow: auto;"><center>
CONTENT FOR DIV.
</div>

You can have as many of these as you want,
this is for all your other content.
Change the left and top for the positioning once again, you may want to make a estimate
and then just go check and see how much further it is away. Thats what most people do,
Just have patience and you'll be fine.

Change the width and height for how big it is. Most of the time I just crop out one of the places
in photoshop off the image and then get the image size so I can see how big it is instead of roughing it.

PS- you can get rid of the <center> Its just there to center your text if you want it to be centered.

Fifth

Final Touches

For this you may just want to make some final touches
Putting the comments in to your div.
http://www.createblog.com/scripts/script.php?id=74

For the comments in to your div, a lot of people have problems with it.
Make sure you don't have anything that hides stuff, such as bottom links or
top links or it won't work. [it sucks but you get use to it]

Also, if your using the myspace player. Then you may want to hide it so it isn't peeking through any of your divs and covering some important stuff.
http://www.createblog.com/scripts/download.php?id=409

Any other questions, just ask

But please if you have your problem on a myspace, then please provide a link and make sure your profile isn't private, if your profile is private then you won't recieve any help.

Positioning made easy?

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

further explanation to someone that asked
http://www.createblog.com/forums/index.php?showtopic=157773

Posted by: This Confession Jul 16 2006, 02:14 PM

QUOTE(angelalwayz @ Jul 16 2006, 10:59 AM)

Thank you so much for posting that tutorial. The other ones I had been reading were so confusing but yours is in lamins terms. thank goodness. lol. anyways I was wondering, because I have been working really hard to do my page, if you knew how to use adobe photoshop, or what you would use to edit pictures, to remove the background of the picture so only the person shows, put to pictures in one picture, things like that.

Well I suggest you go to graphics help for photoshop, I know how to mess with all tha stuff but go to graphics for more help

lol, thanks.

QUOTE(ahottttertouch @ Jul 17 2006, 3:30 PM)

This is a very nice tutorial

It was simple and pretty easy to understand. I am just having one little problem... for some reason I can't change the background color. I don't know if something else is just preventing it from working, or what, but it just doesn't work.

Also for the background color problem try adding..

CODE

QUOTE(WalkAlone @ Jul 25 2006, 5:58 AM)

Hey, it's a great tutorial, thanks for that.

I'm still new and confused to the whole making layout things, so I followed the instructions, and all I've got is this..

http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=93595486

Help maybe?

^okay ehm
you have a normal profile
so you need to ehm
go back to step one and hide your profile

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

then just skip step two because you already have a layout in.
then follow all the other steps

QUOTE(xbabyboo @ Aug 3 2006, 12:15 PM)

Oh yeah.
oh this part of the code.
<div class="content" style="position: absolute; left:000px; top:000px; width:000px; height:000px; overflow: auto;"><center>
CONTENT FOR DIV.
</div>
do we have to keep the <center> ?

no
Sorry I always center everything it seems on myspace

I'll go say something about that now. Thanks Ada.

You can get rid of it.

QUOTE(s_c_c_r11 @ Sep 1 2006, 11:29 AM)

[size=7][font=Lucida Console]I am confused... where do you put the code. about me or who id like to meet.

Doesn't it say where to put it in the tutorial

no, now it does.

But yes all the coding can either go in to your about me or who id like to meet.

Most of the time I put step 1 and 2 in to my about me and all the other steps I put in to my who id like to meet.

QUOTE(twinkle915 @ Sep 6 2006, 3:24 PM)

the friends and comments in a div link wont work :[

Hiding your profile and still have comments:
http://www.createblog.com/forums/index.php?showtopic=148089

Comments in div:
http://www.createblog.com/forums/index.php?showtopic=122450

Comments in div:

ABOUT ME:

CODE

.comments{visibility:visible;width:500px; height: 400px;position:absolute;top:120px;left:0px;
overflow:auto;background-color:COLORHERE;
border:black 1px solid;z-index:2px;}
</style>

WHO ID LIKE TO MEET:

CODE

In the About me code you can change the top and left to position it and change the width and height to change the size of the div table.

Posted by: defrag Jul 20 2006, 12:22 AM

QUOTE(Caitlinnn @ Jul 19 2006, 8:05 PM)

This is a great tutorial!

I'm having one problem though. My content wont show up. I put the code in the "Who I'd like to meet" section and I've played around with the posistioning but it still wont show up.

EDIT - Ok. I refreshed my page and I saw the content for a second but tjhen it disapeared. So it's underneath my background image. How do I get it to come overtop of it?

set the z-index to a layer that would be above the background.

CODE

0 should be the bottem most layer

1 would be your content

QUOTE(Caitlinnn @ Jul 19 2006, 9:36 PM)

I dont have a z-index in my code at the moment. Where do I put the z-index in my code?

Posted by: mona lisa Aug 29 2006, 01:30 PM

QUOTE(Zubi @ Aug 29 2006, 2:08 PM)

Hey this is a Good Tutorial but i cant get Step 4...the content ...Huh i am frustrated

...i wanna make a DIV layout but i cant make it.

Content refers anything you place within your div: an 'about me' section describing yourself, a navigation, comment area, etc. in the same or separate DIVs.

QUOTE(Zubi @ Sep 7 2006, 2:36 AM)

Hey How to slice them...and in wht program do we make them..in Photoshop??

^You can slice images in Adobe Imageready, which you should have if you have Photoshop. Click http://www.hoelter.net/ai/gd321/week05/imageready_slicing.pdf#search=%22how%20to%20do%20image%20slicing%20in%20imageready%22 for an excellent tutorial.

QUOTE(In Love With a Boy @ Sep 8 2006, 12:31 AM)

Please help. I am obsessed with myspace but new at the div layouts. i just used one by Panicked and i dont know how to put a picture of me in it where it says "your picture here" in a gray box on my myspace. help please i can show you the html for it if you need to see it.

thanks

here is my myspace:
http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=46543044[color="#cc0000"][/color]

Your profile is set to private.

Upload your photo to an online image host (like http://hostanimage.org/ or http://www.imageshack.us/). In the codes, find the area where the image is placed. Replace that URL with the direct-linking URL of the photo you uploaded.

QUOTE(In Love With a Boy @ Sep 8 2006, 1:41 AM)

i made my profile public :)

here is the photo

http://img75.imageshack.us/my.php?image=1000884xlo9.jpg

Looks at though you got it to work.I see your photo. :)

QUOTE(Zubi @ Sep 8 2006, 6:23 AM)

Hey the Link u gave me is not working ...its opening in Notepad and something wired language is there.I cant understand.

It's a PDF so you need Adobe (Acrobat) Reader to view it. If not, there is another tutorial: http://www.dwphotoshop.com/photoshop/slicing.php. Ignore the part about adding the URLs/links if you just want to slice images and not use them as links.

Posted by: Intercourse. Sep 20 2006, 05:12 PM

here it is.

http://www.createblog.com/layouts/download.php?id=14240

Ehm, can we have the link to your profile. And that layout is called a Div Overlay, which is what this tutorial covers.

Did you even put enough content in the div to make it have a scroll bar?

If your talking about the table that has a music player in it in the preview: if you go to that div in the coding. Get rid of this
overflow-y: hidden;

Hi, this is a great tutorial, but I was wondering, since I am putting an image as my background, blah blah blah, how do I prevent people from right clicking the background and saving it as their own?

^There isn't a really good way to do that, since anyone can just steal all your coding and get a hold of it. I suggest writing your name on the image.

But you can use this, so when someone right clicks on your image they'll actually save a blank image

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

Hehee can i div that codeu gave me? or I mean position it?

:( unfortunately I dont think that helped all the way =/ I was actually talking about how my code doesnt work :( because in internet explorer the divs dont appear over the bg image.

I aplogize for double posting but whether that script was inteded too help solve my ie.e problem or not.. it did lol. it loads in i.e once i put that script in... how very very bizzare I must say.

Okay, give me a link to your profile so I can perhaps see what your talking about.

Okay. I pretty much fixed it.

my demo page is. myspace.com/deffpoetic

Um now i just need to find out how to customize the comment box.
Confession do you have a screen name? you seem like you know your stuff, and I'm coding newbie :)

My question would be that I want to put a comment box on the left side where u see the setup looks like a text area, and 2 rectangles for a submit and clear area. I imagine the css code is supposed to be altered to change the appearence of the buttons? and box? can I div the buttons tho to make them fit there? all good questions im sure, just need a good answer :)

^okay your problem is solved because I helped you on AIM

How do you put music on a div

Matters what type of player you want. If you just want the myspace player just add more, if your using a div more than likely it will cover up something so simply just hide the music player.

You can also have other players such as these:
http://www.createblog.com/forums/index.php?showtopic=143271

http://www.myflashfetish.com/myspace-mp3-players/

[i]I've noticed some controversy over the "hide profile" codes. Before I start my DIV, I want to make sure I understand everything. If I want a div that shows my comments and I use the "hide profile" code you've provided...will it cover everything but the comments or will some other things still show through?
[/i]

^It will hide everythinggg except for the comments and friend which they will be in a div already [scrollbox] like in this screen shot preview, this is also a the code to hide your profile:

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

The only other thing it won't hide in the ad at the top because its against myspace rules to do this.

Hey. Okay, I used a div overlay on my profile and it's all awesome.. buuuuut I want my comments to show up in a scrollbox that I can position to be on top of the overlay. At the moment, it's just below the overlay, and I can't seem to get it to move or into a scrollbox or anything..so yeah.

Help please?

=[

http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=120672317&MyToken=c96f2095-346a-4e41-b1cc-723e7dd0535e
That's the link to it by the way.
(It's a seperate account so I wouldn't screw up my personal one =])

Please please help =[ =[

^You used a generator and you can't figure it out I suppose you pick what you want on those, did you choose to show your comments in a div? Also if you did then theres tags all through the layout from what I've just seen telling you what to edit, also they give you instructions if you botherd to read them.

Truflip- The 3rd step is if you have a background image such as on my profile:
http://www.myspace.com/thisconfession The image with the boxes and everything would be what would go in to the 3rd step. If you do not have a background image to put up then just continue to the next step.

[i]Put in the url, change the position and size to suit, and leave the z-index alone.

CODE

Oh, I forgot what I came in here for...I can't get my comments to work on any layer other than 1. My background was too big to upload so I broke it into smaller images and used DIV's to place them. My tables had to be on layer one and my comments won't show up on layer two. I'm using the code to hide my profile given on the first post of this topic plus a code to hide my friends in case that helps anyone undertsand this. Is there any way to make them show on another layer or do they HAVE to be on 1?
[/i]

^Yea may we have a link to your myspace?

Ok just one quick question:

I just noticed myspace changed the top part of the pages lately so that the ads are located at the very top and directly underneath them is a search bar with a drop down menu next to it. In Fire Fox the hiding of all contents and creating a background div covers everything, but in IE this annoying drop down box is still there. Is there a fix for this?

link to profile so you may take a look at what I am talking about:

http://www.myspace.com/bfallgren

Hopefully its not just me seeing this, lol

Thanks for any help

^add this:

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

If anyone is still confused after reading this tutorial, perhaps go here and read the post on it:
http://www.createblog.com/forums/index.php?showtopic=157773

hmmm so i've hidden my profile and such and added my image
but my image doesn't seem to show up, but the content still does
what's happening?

well can we have a link to your myspace, or something.

Perhaps the image wasn't uploaded right, try http://www.imageshack.us

yes that's right
i used photobucket, then tried imageshack and problem solved!

Yay, good

sorry if you've already answered this its just that there were a lot of pages.

Ok my content text is black when i changed them all to blue. (It looks fine in IE though)

Other than that thanks for a great tutorial

http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=138581479&MyToken=9075dd13-861b-4634-8c22-2a01a2d0b4d1

ItsKathy, I tried changing all your coding and it just wouldn't ever work. So the only thing I think you will be able to do is right before the text you want to be blue put

<span class=text> TEXT YOU WANTED BLUE </span>

Make sure to put the </span> at the end of what text you want to be blue..

kay so thanks to whoever made this tutorial..cause im new with divs and i already made three of them..hehehe=)..tnx!

^The person that created the tutorial is the person that posted the topic.

The Infinite. person..

this was a great tutorial! but i just don't know how to make my default picture show up? i also have like a couple plain white boxes floating aorund. ? ahh idk

^May I see a link to your myspace please? If its to big of a problem that may need a lot of explaining, feel free to make a topic in myspace help as well

i`m trying to learn how to make divs for my layout site
i made my layout on paint shop and i made the boxes for it in paint shop but when i put it on myspace i don`t know how to put the words on it.

^Then you need to make extra divs for the words, make sure to make a normal myspace layout as well.

It seems that you've already done step one now you need to go do step 3, so you need to go back and do step 1 & 2 & 4. Perhaps provide a myspace link so we can see what you have as far as well.

^it looks like you already have words coming up and stuff, now you need to postion divs into where the boxes are so the words come up in the right places. Also I suggest moving
[quote name='imsoDOPEyo' post='2432281' date='Jan 26 2007, 10:03 AM']
here's the link:
http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=152492148&MyToken=e070cfd9-a69e-4087-a2a1-0422e49a6e68
[/b][/i]

the image down a little so its not being covered by the ad.

Alrighty, this was a really good DIV tutorial and I thought I understood it all, but my thoughts are always tested when I hit "view my profile."

I have my content showing up, but it isn't in the box where I want it to be. How do I move my content into the boxes and put headings on them?

www.myspace.com/fortiesglamour

PiratePunk- Uhm what exactly are you trying to do? You just have a normal profile, if you want to make a div you need to atleast hide your profile first and then upload the main image for your div and position it still.

Posted by: toyo loco Sep 30 2006, 05:17 PM

HELP what is a friend id? and how do i find mine?
I am SO lost. [b]

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

uh, I used the code to be able to have the comments shown on my page, but my background is black and I can't see the text on the comments, is there a way to change the text-color on my comments?

Pm me your code or make a topic

hi i have a question. you know on some div layouts, they have a base? like um ... a picture that is the layout and everything else is added on.

the one i`m trying to use never shows up.

i`m able to hide my profile, but for some reason it won`t show what i want to put on it
i`ve tried all sorts of codes, but it still won`t show

^ You have to put it in a div and position it somewhere.

Okay, well I did read the html and I did choose to show it. I don't think you understood my question?..Can I get it into a seperate scrollbox and position it? Or do I need the 'expertise'..to be able to.

Make a topic and explain it a little more and post your entire code and we'll help you there. K?

[i]Oh, I figured out how to upload my background. I saved it as a png. file. It didn't seem to take away any of the quality at all and it made the file size much smaller. Umm...is there a reason why I shouldn't save it as a png. though?
[/i]
Actually pngs are really good. The only problem I can think of is that sometimes the file size is huge but pngs are just as good as jpg and gif. mmhm.

no matter how many times i reread the tutorial, i come out being even more confused than i already was...

i get past the first step, no problems. The second as well.

I can write stuff on my page, but how do I put them in a table, not just randomly positioned on my page. I'd show an example but after so much frustration, I just deleted my backgrounds.
It'd probably help if I were doing this when I'm not hopped up on pain killers is my guess, but that will take a few days and I want to do this while I actually have time!

Make a topic. And explain a little bit better. (Only because this may take a lot of posts to understand) Thankyou . Or you can pm me and I can explain.

Putting Comments and Friends in your div.
http://forum.myspace.com/index.cfm?fuseact...oupID=100636674

Also, if your using the myspace player. Then you may want to hide it so it isn't peeking through any of your divs and covering some important stuff.
http://www.createblog.com/forums/index.php?showtopic=122380
Both link doesn't work.

^
http://www.createblog.com/scripts/download.php?id=74
http://www.createblog.com/scripts/download.php?id=409

I'm having a problem viewing the link on how to add both your friends and your comments to your div layout.

Everything else I've needed I've been able to see and get to work, but I just can't get the friends/comments set up.

can anyone possibly give me the info that was in the original posted link on how to do this? (http://forum.myspace.com/index.cfm?fuseaction=messageboard.viewThread&entryID=14323012&groupID=100636674)

Any help is greatly appreciated. I'm going nuts over here. *lol*

Just use this to hide your profile and it will allow the comments/friends to show up:
http://www.createblog.com/scripts/download.php?id=347

so i just made a template in photoshop

http://i13.photobucket.com/albums/a289/Fletchinator/photoshoptemplate1final.jpg
I just dont know where to even begin with my div code to make this work.

Start with the begining of the tutorial and you will get it.

>< i dont get it what are you supossed to do?? im reading all this stuff and im getting confused can someone help mee?? im stupid with all this ode and postinging and stuff...what does overflow and content mean??why do you need paint??? >< help me???

Make a topic because if theres a lot we need to explain to you then I suggest making one. Overflow:auto; adds a scrollbar to your div. Content as in <div class="content" is the name of the div. Content as PUT YOUR CONTENT HERE means put your text/information here. You need paint/photoshop/psp/gimp/gimpshop if you want to make a design. You can get examples of designs in your layout section. You can see some of the div layouts with designs there. If you just want plain tables basically just a whole plain thing then you don't need paint or any of the other programs listed.

THANK YOU SO MUCH! YOUR SUCH A BIG HELP!!!! i can make regular layouts but i just started making DIV lays ! <333 buuuuut the hiding the music player link isnt working... could u please update/fix it ? thanks much!

Updated.

Posted by: toyo loco Dec 31 2006, 12:30 AM

QUOTE(xBABYx @ Dec 30 2006, 8:35 PM)

ok i did all the steps including the slice thingy for the links...but my question is were do i put the code for the layout with the working links?

Read the frst part of the tutorial. Take that code you would use for the image. Instead of <img src="urltoimage"> you put the slice code.

QUOTE(xBABYx @ Dec 30 2006, 9:57 PM)

alright i did that and it still didnt work. do i have to do something to the slice code to fix the problem first

I was assuming you edited it already. Take all the images they give you and upload them. Then place them in the code where it says.

QUOTE(KrazyK76 @ Dec 31 2006, 12:48 PM)

i STiLL DON'T GET THiS.iTS STiLL CONFUSiNG TO ME

Post a topic and be a lot more specific of what you don't get. Also if you never made a regular default layout. I suggest you learn that first.

QUOTE(Joeyy @ Jan 1 2007, 8:53 PM)

I am so sorry, but i am still extremely confused.

I have read and re-read over the tutorial and I don't understand how things work. Ive been told to give up on trying but I want to learn how to do it right.

http://img403.imageshack.us/img403/3868/untitledoz7.jpg
they are the links to the layout that i would like to use. If someone could please, please h elp me make it that would be greatly appreciated.

Make a topic. To do that, the links, you have to go through image mapping/image slicing. If you search this forum maybe some of those will help you better. Programs you can use are imageready and cutemap. Their are others though.

QUOTE(Msz_Pebblesz @ Jan 17 2007, 3:33 PM)

The tutorial is great! I was able to follow step by step, although i have a minor problem =] my image seems to be small for an image size of 1000 pixels by 2000 pixels[im planning on changing the size anyway]. someone told me it might be my resolution, but i dunno what resolution i have to have so my image comes out the size i want it to be.

What do you mean smaller? Thats a huge size sorta. If it doesn't fit full screen it means you have a bigger resolution than that. So you need to figure out your res. There are tutorials all over google depending on what type of computer you have (windows or mac). But remember if you make it bigger people w/ smaller resolutions can possibly get a scrollbar.

QUOTE(RoCk_FaRiE @ Jan 20 2007, 1:30 PM)

i dont know what a DIV is! or FRIENDID! i dont know any of this stuff! i need help!

^ Then don't read the tutorial.

Read the one that is for a default layout.

QUOTE(TAMB0URiNE x L0VE @ Jan 27 2007, 2:43 PM)

I feel so stupid. lol. Idk why it's not working for me...

http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=151876021&MyToken=cd3cb1dd-8412-4030-999a-4327864e4270
it worked when I used it in the bbzspace div generator, but i wanna submit it on here

I suggest you post a topic , because there are many possible reasons why it may not work. Or you can pm me and I can probably help you out. :] It almost works looks like you just need to get text in the boxes and I can help you with that through pm or you can make the topic.

QUOTE(Saun @ Feb 23 2007, 3:28 PM)

This has helped me soo much!!
Thank you!!
Thank you!!
Thank you!!

I have one question though... How can I change the bold so when something is bolded it isn't yellow?
:/

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

Posted by: ewwitsdivine Apr 1 2007, 08:49 PM

when i put one part of div content it goes fine and its no problem at all. then when i try to put another part of some content it goes weird and it disappears. i don`t know if it s in back of the BG. sometimes, it even tries to combine with the other content. how do i fix this?

Posted by: toyo loco Apr 1 2007, 09:03 PM

QUOTE(ewwitsdivine @ Apr 1 2007, 6:49 PM)

Post a topic , and then post your code in there please.

Posted by: bcangelgurl09 Apr 2 2007, 10:29 PM

hi im so sorry to bother you cause i know that you prolly get this a lot but uhmz i ran across this layout and im not sure if it's a div or not but can u please tell me how this person created this layout??? i would really appreciate it o her profile is www.myspace.com/creole_chick thanku so much

Posted by: toyo loco Apr 3 2007, 04:16 AM

QUOTE(bcangelgurl09 @ Apr 2 2007, 8:29 PM)

No that is not a div. Take the last code here:
http://www.createblog.com/forums/index.php?showtopic=84325

Posted by: The Markster Apr 10 2007, 01:15 PM

This is pretty helpful.
I've also found, though, that adding a <noembed> tag at the bottommost part of the "I'd Like to Meet" section clears everything from friends to the credits.

Posted by: papa steve Apr 21 2007, 08:32 PM

I am using a template and I don't know how to make it show my friends and comments in the spot it is supposed to on the profile. Can I get some advising since I am so inept?

Posted by: toyo loco Apr 21 2007, 08:56 PM

QUOTE(This Confession @ Jul 15 2006, 3:28 PM)

First:
Hiding your profile.
If you would like to have comments in your div. Please use this code.
http://www.createblog.com/forums/index.php?showtopic=148089

Posted by: carnelliz2sexy Apr 24 2007, 03:58 PM

this code no longer works on myspace. this is how my code keeps coming up

<div class="bg" style="..; left:845px; top:598px; width:1024px; height:768px; overflow: hidden;">
<img src="">
</div>

do u c the ..; dats supposed to say position: absolute; but it keeps disapearing after i save my changes. i dont kno y that keeps happening. thats happening to every code dat has postition:

also no matter wut number i put in the left: top: it stays the same

Posted by: toyo loco Apr 24 2007, 09:03 PM

^ Read this thread , last few posts:
http://www.createblog.com/forums/index.php?showtopic=167283

Posted by: kwynn Apr 30 2007, 06:03 PM

okay.
i totally suck at this.
i have gotten as far as loading what i want as my background, and i am sure i did something wrong before this, but my image is up.
now how do i get the links (to home, my pics, my blog, etc.) on my page?
i understand how to rearrange them with the left:top, i just don't know what to do first to get them on the page.
thanks!

my myspace:

www.myspace.com/katherine_wheel

Posted by: a beautiful nothing Apr 30 2007, 06:25 PM

Did you make a specific area for them on the image?

Posted by: toyo loco Apr 30 2007, 09:18 PM

QUOTE(kwynn @ Apr 30 2007, 4:03 PM)

To put them up there, if you didn't link them in an image you need to do it manually.

CODE

Posted by: dreo Jul 15 2007, 10:58 PM

Yah I Guess! How u Do It?

Posted by: Alvin Jul 15 2007, 10:59 PM

You just design the image in a photo editing program, and you use divs to place the content in each spot where ever it needs to be.

Posted by: dreo Jul 15 2007, 11:01 PM

Yah thats hard Caz im not Even Good Yet With The Place Ment Of It!

Posted by: Alvin Jul 15 2007, 11:01 PM

Oh, so you DO know how to design a layout? Or do you need help with that also?

Posted by: dreo Jul 15 2007, 11:02 PM

Ummmm....... i Think i Kno! Idk

Posted by: Alvin Jul 15 2007, 11:06 PM

You use a design related program like Adobe Photoshop, Gimp or Corel Paint Shop Pro, or even Microsoft Paint to design the layout. Then you save it and you upload the file to an image hosting site like http://imageshack.us, and you place the image url in this code:

CODE

Then you get your divs and you use as many divs as you want for however many places for content you have. Check the first page of this topic for more information. http://www.createblog.com/forums/index.php?showtopic=142922

Posted by: Insurmountable Sep 16 2007, 10:45 AM

^Yea I've been meaning to really update this tutorial maybe i'll get to it in the future.

How To Image Map with Divs

Ah heres the full version, you need to go to the link below and read that as well:
*Most of this is for if you have photoshop, if you don't have photoshop tell me and i'll re-write a bit of this to help you
Ello again

Alright these are called Image maps.
Need an Example? Look at this layout as an example

http://www.createblog.com/layouts/preview.php?id=20372
*they do look like normal links, although their part of the image

When I first started using image maps I used this tutorial:
http://www.myspaceprodesigns.com/tutorial/map/

Make sure to use server side for myspace.

If you don't understand it then I'll be more than happy to explain how to use image maps throughly.
If you do have any questions read over this: I wrote this for another person with the same question as you

Ello, since i'm currently talking to you on aim about this and i can't send coding through aim I'll post it here for you

This is your actual image maps, remember those coords you needed to get that I said was going to be wayyy easier using photoshop for? Well here is where you'll put them in.

As you can see for a rectangle the points are like this when image mapping:

Now pretend like there is an imaginary rectangle around each link on your image: http://i7.tinypic.com/6aitczq.gif
Now take the little point and go over the top left corner, you'll get two coords that look like this in photoshop:

The x is your x1
and the y is your y1.
Now go to the bottom right corner of your imaginary rectangle that these two points will be your x2 and y2.
Now do this step over and over for each link

In the code below it should be pretty easy to figure out that you now know which coord is which. Just go in the code below and fill out each one of these:

Each is going to be different for each link.
LOCATION- You can keep track of which link is which by writing "Home" or "Message" or any of your other link names.
x1,y1,x2,y2 - Well I hope you know what to write in the place of those

LINK- This is where you place the actual link for each one of these.

CODE

Your almost done:
All of this is in a div, which I'm sure you know what that is. All you need to do is position this div right where your existing links are. So pretty much your overlaying a image over your existing image but this div has all your links in it

CODE

.navigation {
    width:450px;
    height:470px;
    overflow-x:hidden;
    position:absolute; z-index:2;
    background-color:transparent;
    border:0px solid;
    border-color:white;
    margin-left:255px;
    margin-top:458px;
    text-align:justify;
    visibility:visible;
}

Just fill this out like you would any other div and put it with your other divs

Any other questions or concerns feel free to post them in here

Posted by: Insurmountable Oct 20 2007, 09:27 PM

^Did you look at the first post on this page?

Just use those codes and when your done writing it just add it in to your coding.

Posted by: Fantaspic Oct 28 2007, 09:08 PM

Oh, is it? I'll take it off private then. And I just need help making the nav bars/basics/credit.

Posted by: TamaCalix Feb 28 2008, 10:59 PM

Hey, I cant seem to get my bands music player to work with my DIV LAYOUT... Is there a way to fix this?

HERES WHATS IN THE BAND BIO:

CODE

<style type="text/css">
body {background-color:000000; background-image:url(http://img214.imageshack.us/img214/9874/bk6ni3.gif); background-repeat:repeat-y; background-position:center center; background-attachment:scroll; scrollbar-arrow-color: 6C6028; scrollbar-track-color: 0e0e0e; scrollbar-shadow-color: 0F0400; scrollbar-face-color:1E0B04; scrollbar-highlight-color:3C210C; scrollbar-darkshadow-color:000000; scrollbar-3dlight-color:000000;}
img {border:0px;}
table, tr, td {background:transparent; border:0px;}
img, .contactTable, .jazz, .text, td.text td.text table, .contactTable, .lightbluetext8 { display:none; }
.jazzy img, .comt img { display:inline; }
table div, td td td, table div div { visibility:hidden; }
font, a, .jazz a { visibility:hidden; }
marquee { visibility:visible !important; }
.text, table table table table a,
table table table table div,table table table table div a {visibility:visible;}
table table, table table td {padding:0px; height:0px;}
table.navigationbar {display:none!important;}
b {color:3F230D; font-weight:bold; font: 13px arial;} i, s {color:6C6028;} u {color:becccc;font-weight:bold;}
.main a:link, .main a:visited,
.main a:active {color:DFC08B!important; font-family:arial 9px;}
.main a:hover {color:FFC45F!important; text-decoration:none!important;}

table table div embed, table table div object{display: block; position:relative; left:50%; top:0%; top:680px; _top:670px; left:291px; _left:306px; width:210px; height:37px; visibility:visible!important; z-index:9;}

select {position:relative !important; top:-1000px;}
td td td select {position:static !important;}
div table div form {display:none !important}
.bodyContent table table div form {display:inline !important;}

.lounge{height: 25px; width: 210px; overflow: hidden; background: url(http://img526.imageshack.us/img526/3696/loungeuq1.png) bottom left no-repeat; display: block;}
.lounge:hover{background-position: top left;}
.note{height: 25px; width: 210px; overflow: hidden; background: url(http://img521.imageshack.us/img521/6562/notezu5.png) bottom left no-repeat; display: block;}
.note:hover{background-position: top left;}
.add{height: 25px; width: 210px; overflow: hidden; background: url(http://img520.imageshack.us/img520/8337/addtq4.png) bottom left no-repeat; display: block;}
.add:hover{background-position: top left;}
.forward{height: 25px; width: 210px; overflow: hidden; background: url(http://img526.imageshack.us/img526/336/forwardna8.png) bottom left no-repeat; display: block;}
.forward:hover{background-position: top left;}
.photos{height: 25px; width: 210px; overflow: hidden; background: url(http://img520.imageshack.us/img520/4458/photosgh9.png) bottom left no-repeat; display: block;}
.photos:hover{background-position: top left;}
.fav{height: 25px; width: 210px; overflow: hidden; background: url(http://i125.photobucket.com/albums/p46/TamaCalixte/favit8copy.png) bottom left no-repeat; display: block;}
.fav:hover{background-position: top left;}
.kats{height: 25px; width: 210px; overflow: hidden; background: url(http://img211.imageshack.us/img211/4691/katssj9.png) bottom left no-repeat; display: block;}
.kats:hover{background-position: top left;}
.shouts{height: 25px; width: 210px; overflow: hidden; background: url(http://img403.imageshack.us/img403/2179/shoutsdr0.png) bottom left no-repeat; display: block;}
.shouts:hover{background-position: top left;}
.block{height: 25px; width: 210px; overflow: hidden; background: url(http://img263.imageshack.us/img263/6634/blockxo7.png) bottom left no-repeat; display: block;}
.block:hover{background-position: top left;}
.crash{height: 25px; width: 210px; overflow: hidden; background: url(http://img140.imageshack.us/img140/2245/crashqb7.png) bottom left no-repeat; display: block;}
.crash:hover{background-position: top left;}

.links {position:absolute; left:50%; top:0%; top:555px; margin-left:200px; z-index:7; visibility:visible!important; overflow:auto; overflow-x:hidden; width:auto; height:200px;}
.links a:link, .links a:visited,
.links a:active {
display: block;
width: 197px; _width: 198px; padding-left: 3px;
font-weight: normal; font: 13px arial;
color: 6C6028;
text-decoration: none;
border: 1px solid;
border-color: 5F3B1D;
border-width: 0 0 1px 0;}
.links a:hover {
text-decoration: none; font: 13px arial; color: 5F3B1D;
display: block; width: 197px; _width: 198px;
background-color: 0E0E0E; border-color: 0E0E0E;}

.myCommentFormD {position:absolute; left:50%; top:0%; top:799px; margin-left:-280px; z-index:8; visibility:visible!important; text-align:left!important;}
textarea.myFormBox {width:350px; height:80px; font:10px arial; font-weight: bold; color:6C6028; letter-spacing:3px;
background-color:0E0E0E;
border:1px solid; border-color:3C210C;!important}
input.submit {height: 32px; width: 87px; overflow: hidden; background: url(http://img263.imageshack.us/img263/1563/postqd0.png) bottom left no-repeat; border:0px!important;}
input.submit:hover{background-position: top left; cursor: pointer!important; border:0px!important;}

.title {
color: 6C6028;
font: 18px arial;
font-weight: normal;
letter-spacing: 6px;
padding: 0px;
background-color: transparent;
background-image: url('http://img211.imageshack.us/img211/7654/titlebg3beq3.png'); background-position: bottom left; background-repeat:no-repeat;
text-align:left;
display: block;}
.main, .main p {color:666666!important;
font: 10px arial;
letter-spacing:2px;
text-align:justify;}
.main {width:400px; height:230px;
position:absolute; z-index:3; left:50%; top:0%;
margin-left:-280px; margin-top:540px; visibility:visible; overflow:auto;}
.side1 {
background-image:url(http://img522.imageshack.us/img522/9483/side1dlj0.png); background-repeat:repeat; background-color:121212;
width:45px; height:90px;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-402px; margin-top:0px;
visibility:visible; border: 2px solid;
border-color: 0e0e0e;
border-width: 0 0 0 2px;}
.side2 {
background-image:url(http://img523.imageshack.us/img523/6889/side2dls8.png); background-repeat:repeat; background-color:121212;
width:45px; height:90px;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:355px; margin-top:0px;
visibility:visible; border: 2px solid;
border-color: 0e0e0e;
border-width: 0 2px 0 0;}
.layout {
background-image:url(http://i125.photobucket.com/albums/p46/TamaCalixte/minjazyu2334copy.png); background-repeat: no-repeat; background-color:121212;
width:800px; _width:802px; height:860px;
position:absolute; z-index:2; left:50%; top:0%;
margin-left:-402px; margin-top:90px; text-align:justify;
visibility:visible; border: 2px solid;
border-color: 0e0e0e;
border-width: 0 2px 0 2px;}

marquee { z-index:8; }
table div, span, td td td, table div div { visibility:hidden !important; }
.jazzy div, .jazzy div font, .jazzy div a, .jazzy div div, .jazzy font a, .jazzy span, .jazzy div table a, .jazzy div table img, .jazzy div table font, .jazzy div table, .jazzy div table td, .comt, .comt td, .comt span, .comt a, .comt div {visibility:visible !important;}
</style>
<div style="display:none;"><table><tr><td><table><tr><td><table><tr><td>


HERE'S WHATS IN THE MEMBERS:

</td></tr></table></td></tr></table></td></tr></table></div> <div class="jazzy"> <div class="main"> <span class="title">Welcome</span> <br> Thank you for visiting Michael Turner<br> Lewis's music page. If you would like to leave<br> a comment, simply type it in the space<br> provided below. Please don't forget to take a look<br> at our bottom navigation system. <br> <br> <span class="title">About Me</span> <br> Born to inspire and maintain upward movement in <br> myself, family, community and Nation. I am not my <br> age, nor my stats, these can be fictitious appearances <br> of truth. Some of us prefer that kind of reality and I <br> understand and respect that because I too sometimes <br> prefer the illusion. For now, I ask that you find out <br> "About me" through my message of music.<br> <br> </div> <div class="links"> <a href="http://www.myspace.com/x_clusivedesigns">Layout by X-Clusive Designs</a> </div> <div class="myCommentFormD"> <form method="post" action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment"> <input name="friendID" value="318261166" type="hidden"/> <textarea name="f_comments" class="myFormBox"></textarea> <p align="center"> <input type="submit" value="" class="submit"></p> </form> </div> <div class="side1"></div><div class="side2"></div> <div class="layout"> <a href="http://collect.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=318261166" class="add" border=0 style="position:absolute; top:215px; margin-left:580px;"></a> <a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewPicture&friendID=318261166" class="photos" border=0 style="position:absolute; top:245px; margin-left:580px;"></a> <a href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=318261166" class="note" border=0 style="position:absolute; top:275px; margin-left:580px;"></a> <a href="http://collect.myspace.com/index.cfm?fuseaction=user.addToFavorite&friendID=318261166" class="fav" border=0 style="position:absolute; top:305px; margin-left:580px;"></a> <a href="http://messaging.myspace.com/index.cfm?fuseaction=mail.forward&friendID=318261166&f=forwardprofile" class="forward" border=0 style="position:absolute; top:335px; margin-left:580px;"></a> <a href="http://collect.myspace.com/index.cfm?fuseaction=block.blockUser&userID=318261166" class="block" border=0 style="position:absolute; top:365px; margin-left:580px;"></a> <a href="http://home.myspace.com/index.cfm?fuseaction=user" class="lounge" border=0 style="position:absolute; top:679px; margin-left:590px;"></a> <a href="http://friends.myspace.com/index.cfm?fuseaction=user.viewfriends&friendID=318261166" class="kats" border=0 style="position:absolute; top:707px; margin-left:590px;"></a> <a href="http://comment.myspace.com/index.cfm?fuseaction=user.viewComments&friendID=318261166" class="shouts" border=0 style="position:absolute; top:735px; margin-left:590px;"></a> </div> </div> <div class="jazz"><table><tr><td><table><tr><td><table><tr><td>

Posted by: Insurmountable Feb 28 2008, 11:36 PM

Major clean out

If your posting your layout code, please make sure to post in within a codebox so it doesn't stretch out the page. If fail to do so, we will delete your posts.

Posted by: casaundradonald Mar 2 2008, 06:16 PM

Hello!

I have a question!
I have been making divs for a longggg time, but today was the first time I used a background behind the div, and now when I put the sections into the div, it takes out the div pic and goes to the background....

the link is: http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=346999615

Thank you sooo much!

Posted by: Insurmountable Mar 3 2008, 08:15 AM

QUOTE(casaundradonald @ Mar 2 2008, 06:16 PM)

I'm not seeing the problem, there aren't any divs. It looks like all you've done so far with your layout is just throw the background for the whole div layout up there is all.

EDIT: Nevermind, your layout looks completely different in Internet Explorer, could you please post your codes within code boxes and I'll look over your coding.

Posted by: casaundradonald Mar 4 2008, 04:27 PM

I hope I am doing this right....

CODE

<style type="text/css">
.contacttable,.whitetext12,.nametext,.lightbluetext8,.orangetext15,.blacktext12,
btext,.redtext,.redbtext{display:none;height:0px;!important;visibility:hidden}
td td td td{border:0px;width:0px;text-align:left;}
table,td,tr{padding:0px;width:;background-color:transparent}
table table table{padding:1px;height:.01%;width:100%;}
table table,table table table table,table,tr,td{height:0px;!important;border:0px;!important}
a.text,table div font a,table div div,.navbar font,tr td font{visibility:hidden;display:none;height:0px;!important;}
table table table table,table table table table td.text, td.text td.text table{display:none;}
td.text table table{display:inline;visibility:visible;}
table td table tr td.text table{visibility:hidden;}
table td table tr td.text table table,table td table tr td.text table table td.text{visibility:visible;}
</style>



<style>
{sets the default style for the body, table data, list data, divisions and text areas}
{ body, well you know what that is}
{ div, p, and xmp are classes}
{ table, tr, td, and th are table properties}
body,div,p,xmp,table,tr,td,th{

body {background-color:1f5079;background-image: url("http://i26.tinypic.com/3354bnr.jpg");background-position: top left;background-repeat: repeat;background-attachment: fixed;}

background-color:transparent;
scrollbar-arrow-color:fb4c6b;
scrollbar-track-color:fb4c6b;
scrollbar-shadow-color:fb4c6b;
scrollbar-face-color:fb4c6b;
scrollbar-highlight-color:fb4c6b;
scrollbar-darkshadow-color:fb4c6b;
scrollbar-3dlight-color:fb4c6b;
font-family:tahoma;
font-size:8pt;
color:white;
border:white;}

input, select, textarea, .textfield, .button {
font-family:tahoma;
font-size:8pt;
color:FFFFFF;
border: 1px dashed FFFFFF;
background-color:transparent;
text-align:center;}

{ TEXT DEFAULTS }
{class for the basic font for the page}
.text {
font-family:tahoma; font-size:8pt; line-height:10pt; color:CCFFFF;text-align:justify;}

b,i,strong,em,u,s {
font-family:tahoma; font-size:8pt;color:FFFF00;font-weight:normal;cursor:help;}

{style for the number of friends you have.}
.redbtext{font-family:tahoma; font-size:8pt; line-height:10pt; color:FFFFFF;border:0px solid FFFFFF; }

{repeat of the style for how many comments you have}
.redbtext{font-family:tahoma; font-size:8pt; line-height:10pt; color:FFFFFF; border:0px solid FFFFFF;}

{"Blurbs", "About Me", "Who I’d like to Meet", "Friend Space", and "Friend’s Comments" style}
.orangetext15{font-family:courier new; text-transform:uppercase; font-size:11px; color:FFFF00; font-weight:bold;background:000000; border:0px solid FFFFFF;text-decoration:underline;}

{"General", "Music", "Movies", "Television", "Books", "Heros", "Status", "Here for", "Hometown", "Body Type", "Ethnicity", "Religion", "Sign", "Smoke/Drink", "Children", "Education", "Occupation", and "Income" title style}
.lightbluetext8{font-family:courier new; text-transform:uppercase; font-size:11px; color:FFFF00; font-weight:bold;background:000000;border:0px solid FFFFFF;text-align:right;}

{"In your extended network" style}
.blacktext12{font-family:courier new; font-size:16px; color:FFFF00; font-weight:bold;text-decoration: underline; text-transform:uppercase;}

{"Contacting", "Interests", "Details", and "Schools" title styling}
.whitetext12{font-family:courier new; font-size:16px; color:CCFFFF; font-weight:bold;text-decoration: underline; border:0px solid CCFFFF; text-transform:uppercase;}

{Stylizing of your name above your picture; appears you can’t change the color of your name from here. Suggestions?}
.nametext{font-family:courier new; font-size:16px; color:CCFFFF; font-weight:bold;text-decoration:underline;border:none;text-transform:uppercase;}

{date stamp on comments}
.blacktext10{font-family:tahoma; font-size:8pt; line-height:10pt; color:CCFFFF;border:0px solid FFFFFF;}

{This is how all anchor points will be displayed; anchor points appear before all links.}
a, a:link,a:active,a:visited{font-family:tahoma; font-size:8pt; line-height:10pt; color:CCFFFF;text-decoration:none}
a:hover{border-bottom:1px dashed FFFFFF; font-family:tahoma; font-size:8pt; line-height:10pt; color:FFFFFF;} 

{not used on profile}
a.readmail,a.readmail:link,a.readmail:active,a.readmail:visited{font-family:tahoma; font-size:8pt; line-height:10pt; text-decoration:none;color: CCFFFF;}
a.readmail:hover{font-family:tahoma; font-size:8pt; line-height:10pt; color:FFFF00;border-bottom:1px dashed FFFFFF; }

{ "View all friends" and "invite more" link style}
a.redlink,a.redlink:link,a.redlink:active,a.redlink:visited{font-family:tahoma; font-size:8pt;font-weight:bold;color:FFFFFF;text-decoration:none}
a.redlink:hover{font-family:tahoma; font-size:8pt; line-height:10pt; color:FFFF00;border-bottom:1px dashed FFFFFF;} 

{2 links in very top on the left, and the 13 links above your picture with make the navigation bar}
a.navbar,a.navbar:link,a.navbar:active,a.navbar:visited{font-family:tahoma; font-size:8pt;color:FFFFFF;text-decoration:none}
a.navbar:hover{font-family:tahoma; font-size:8pt; line-height:10pt; color:FFFF00; border-bottom:1px dashed FFFFFF;}

{ TEXT FORMATTING 
 DEFAULT FONT, SIZE 8, BLACK }
{ btext used for "latest blog entry" and "USERNAME has * friends"}
.btext, .itext{font-family:tahoma;  font-size:8pt; line-height:10pt; color:FFFF00;border:0px solid FFFFFF;}

{ DEFAULT FONT, SIZE 8, COLORS }
{unused on profile}
.bwtext, .rtext, .rbtext, .subhead{font-family:tahoma; color:FFFF00;font-size:8pt;font-weight:bold;}

{ DEFAULT FONT, SIZE 8 }
{unused on profile}
.stext, .sbtext, .swtext{font-family:tahoma; color:FFFF00;font-size:8pt;}

{ DEFAULT FONT, SIZE 11 }
{unused on profile}
.head11, .text11{font-family:tahoma; color:FFFF00;font-size:8pt;}

{ TABLE COLORS }
{apparently unused?}
table.grey, tr.grey, td.grey{font-family:tahoma; 
font-size:8pt;background:transparent;border:0px solid FFFFFF;}
table.white, tr.white, td.white{font-family:tahoma; 
font-size:8pt;background:transparent;border:0px solid FFFFFF;}
table.accent_light, tr.accent_light, 
td.accent_light{font-family:tahoma; 
font-size:8pt;background:transparent;border:0px solid FFFFFF;} 
table.accent_dark, tr.accent_dark, 
td.accent_dark{font-family:tahoma; 
font-size:8pt;background:transparent;border:0px solid FFFFFF;}
table.action, tr.action, td.action{font-family:tahoma; 
font-size:8pt;background:transparent;border:0px solid FFFFFF; }
table.blue_light, tr.blue_light, 
td.blue_light{font-family:tahoma; 
font-size:8pt;background:transparent;border:0px solid FFFFFF;}
table.blue_dark, tr.blue_dark, td.blue_dark{font-family:tahoma; 
font-size:8pt;background:transparent;border:0px solid FFFFFF;}


{"Help" and "Signout" in very top in right corner}
a.man,a:link,a:active,a:visited{font-family:tahoma; font-size:8pt;color:FFFFFF; text-decoration:none;}
a:hover{font-family:tahoma; 
font-size:8pt;color:FFFF00; text-decoration:none;border-bottom:1px dashed FFFFFF;}
</style>


<style type="text/css">
 b, strong {background-color: dda387;
     color: white;
     font-family:Georgia;
     font-size:8pt;
     letter-spacing:1pt;
     font-weight:bold; }
 i,em{
    background-color:transparent;
     color:7e6657;
     font-family:Georgia;
     font-size:8pt;
     letter-spacing:0pt;
     font-weight:normal;  }
 u{
     background-color: transparent;
     color:7e6657;
     font-family:Georgia;
     font-size:8pt;
     letter-spacing:1pt;
     font-weight:normal; }

</style>

<style>
body table td div form {display:none !important;}
</style>

<style>div table div div select {position:absolute !important;  top:-200px !important; left:0px !important; }</style>


<div class="bg" style="position: absolute; left:180px; top:150px; width:800px; height:600px; overflow: hidden;">
<img src="http://i32.tinypic.com/15z59o7.jpg">
</div>




<div class="content" style="position: absolute;   background-color:transparent; left:180px; top:150px; width:800px; height:600px; overflow: auto;"><center>
<html>
<html>
<head>
<title>numbaaatwo</title>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<img src="http://i32.tinypic.com/15z59o7.jpg" width="800" height="600" border="0" alt="" usemap="#numbaaatwo_Map">
<map name="numbaaatwo_Map">
<area shape="rect" alt="Click for Everything!!" coords="459,417,788,582" href="http://www.msplinks.com/MDFodHRwOi8vYmxvZy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9nLnZpZXcmZnJpZW5kSUQ9MjExMTg3NjM5JmJsb2dJRD0zNTQzOTAwNTgmTXl0
2tlbj0yQ0I0RTM4OS0wNDRDLTQ4RTItOTRGQzI1OUU5OTNBMzE1MDE4NDAwNzA=" target="_self">
<area shape="rect" alt="My site Pets!" coords="42,535,150,565" href="http://www.msplinks.com/MDFodHRwOi8vYmxvZy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9nLnZpZXcmZnJpZW5kSUQ9MjExMTg3NjM5JmJsb2dJRD0zMzQzODQ1ODUmTXl0
2tlbj00RTFEMUVFNi1BNzkyLTRFOUEtOTFCOEM4Q0YwNUQ2RjFDNTQ3NTA4NjIy" target="_self">
<area shape="rect" alt="Popular's Signs!" coords="32,494,119,527" href="http://www.msplinks.com/MDFodHRwOi8vdmlld21vcmVwaWNzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPXVzZXIu
mlld0FsYnVtcyZmcmllbmRJRD0yMTExODc2Mzk=" target="_self">
<area shape="rect" alt="Must Read!!" coords="32,439,118,479" href="http://www.msplinks.com/MDFodHRwOi8vYmxvZy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9nLnZpZXcmZnJpZW5kSUQ9MjExMTg3NjM5JmJsb2dJRD0zMTIwNzkzNDAmTXl0
2tlbj0wNDI0MDY2OS02MTZFLTQ4OTktODc4NEZGN0E1RjNEODJFQzI1ODE2NDgz" target="_self">
<area shape="rect" alt="SFS?" coords="42,403,108,431" href="http://www.msplinks.com/MDFodHRwOi8vYmxvZy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9nLnZpZXcmZnJpZW5kSUQ9MjExMTg3NjM5JmJsb2dJRD0zMzQzODUzMjQmTXl0
2tlbj1COENFRjU3My04Njc2LTQxOUUtOEQ1REFGMTY5ODA5REYyQzY0MTY3MDU=" target="_self">
<area shape="rect" alt="Delete :(" coords="42,354,119,390" href="http://www.msplinks.com/MDFodHRwOi8vY29sbGVjdC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLmNvbmZpcm1kZWxldGVmcmllbmQmZnJpZW5kSUQ9MjExMTg3NjM5" target="_self">
<area shape="rect" alt="Comment Popular!" coords="23,304,141,328" href="http://www.msplinks.com/MDFodHRwOi8vY29tbWVudC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdwcm9maWxlX2NvbW1lbnRGb3JtJmZyaWVuZElEPTIxMTE4NzYzOSZN
VRva2VuPTdhOTJjOGJiLWUyNjQtNGJlOC1hZjlmLWU4OTMyYTEwMTI5" target="_self">
<area shape="rect" alt="Message Popular!" coords="42,265,120,294" href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVz
2FnZSZmcmllbmRJRD0yMTExODc2Mzk=" target="_self">
<area shape="rect" alt="Add Popular!" coords="42,216,109,253" href="http://www.msplinks.com/MDFodHRwOi8vY29sbGVjdC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1pbnZpdGUuYWRkZnJpZW5kX3ZlcmlmeSZmcmllbmRpZD0yMTExODc2Mzk=" target="_self">
<area shape="rect" alt="Home" coords="23,167,142,208" href="http://www.msplinks.com/MDFodHRwOi8vaG9tZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2Vy" target="_self">
</map>

</body>
</html>
</div>



<div class="content" style="position: absolute;   left:260px; top:260px; width:150px; height:150px; overflow: auto;"><center>

grr
</div>

Posted by: Bit me Mar 5 2008, 09:38 PM

hi! can u guys post tutorial on how to make div like this..? u know when u hover over the links like add or comment..etc it change to different style, that's really cool, if u dont understand u can check it out..please help me.. http://www.createblog.com/layouts/code.php?id=22344

Posted by: hezmilullaby Mar 6 2008, 09:30 PM

i got 1 question
where do u post all the links like in ur acctual myspace profile or wat??

Posted by: whoahitznikki Mar 6 2008, 10:29 PM

is there an easy and accurate way to estimate the amount of pixels you need to insert in the margins? or is it guess and check?

Posted by: casaundradonald Mar 11 2008, 07:24 PM

QUOTE(casaundradonald @ Mar 2 2008, 07:16 PM)

Can someone please help me figure this out, my coding is below this post!
I have tired making a different div, but the same thing happened!
:[[[

Please helppppp!

Posted by: queenietran194 Mar 12 2008, 08:40 PM

How would you add a comment box?
I know how I could add the comment link, but adding a comment box feels like a completely different thing.

Posted by: Insurmountable Mar 12 2008, 08:56 PM

^well you can get codes for comment boxes here:
http://www.createblog.com/scripts/index.php?tag=comment%20box

Posted by: xPeace Mar 14 2008, 10:23 PM

I'm trying to get the code down for this layout I'm doing but when i put a certain code, in the other part doesn't show.
For example for the baout me part i would put:

.layout{
postition: absolute;
top:165px:
ect.

Then at the I'd like to meet part, i would put <div class="layout">

I have two different section things, one for my content, and one for my layout but for the i'd like to meet part, when i put, for example the layout code first, the contents dont show unless i put that before the layout code and if i do that the layout doesn't show.

X____X this is really frusturating...T_T please help

here's the code of you need it

ABout Me part:

~~CODE~~

<style type="text/css">
.contacttable,.whitetext12,.nametext,
.lightbluetext8,.orangetext15,.blacktext12,
btext,.redtext,.redbtext
{display:none;height:0px;!important;visibility:hidden}
td td td td{border:0px;width:0px;text-align:left;}
table,td,tr{padding:0px;width:1000px;height:800px;
background-color:transparent;
position:absolut;
top:160px;





table table table{padding:1px;height:.01%;width:100%;}
table table,table table table table,table,tr,
td
{height:0px;!important;
border:0px;!important}
a.text,table div font a,table div div,.navbar 
font,tr td font{visibility:hidden;
display:none;
height:0px;!important;}
table table table table,table table 
table table td.text, td.text td.text table
{display:none;}
td.text table table
{display:inline;
visibility:visible;}
table td table tr td.text table
{visibility:hidden;}
table td table tr td.text table table,table 
td table tr td.text table table td.text
{visibility:visible;}
</style>





<style type="text/css"> 
.contactTable {display: none;}


.layout{
position: absolute;
top:165px;
left:45%; 
margin-left:-400px;
width:900px;
height:700px;
z-index:0;
padding:0px;
border:0px solid black;
background-color:FE0000;
background-image:url("http://i168.photobucket.com/albums/
u194/Rosiegrlx/Untitled-1copy.jpg")
}










body {
background-color: FE0000;
background-image: url("");
background-position: bottom right;
background-repeat: no-repeat;
background-attachment: fixed;
scrollbar-arrow-color:FE0000;
scrollbar-track-color: FE0000;
scrollbar-shadow-color: FE0000;
scrollbar-face-color:FE0000;
scrollbar-highlight-color:FE0000;
scrollbar-darkshadow-color:FE0000;
scrollbar-3dlight-color:FE0000;}






</style>





<style type="text/css">
.div1{
position: absolute;
top: 165px;
left:45%;
width:900px;
height:700px;
z-index:3;
padding:0;
border: 1px solid black;
background-color: transparent;
}

</style>

I'd Like to meet

CODE
<div class="layout">
<div class="div1">

Nevermind I figured it out

Posted by: cristinadoc84 Mar 18 2008, 01:12 AM

guyz, please help me with my div layout

mspace.com/ilovetibo

it doesn't work at all..

Posted by: SelahStar Mar 22 2008, 03:59 PM

Thank You for this it helped me alot!!!

Posted by: MiseryChild Apr 21 2008, 04:52 PM

I'M SO FRUSTRATED!:XD:
I have my navi and my bg and main image up where I want it but the different sections in my div aren't working [lyk where you put your about me and stuuf] its just and box with an outlined color and i cant get it to work.

CAN SOMEONE PLEASE TELL ME WHAT I'M DOING WRONG BECAUSE ITS SO FRUSTRATING!?????!! [font="Arial"][/font]

Posted by: MoonlightOriginals Apr 21 2008, 10:27 PM

How do u start to make it like post a thing to make a new layout?

Posted by: MiseryChild Apr 22 2008, 05:44 PM

the link for my testing site is "www.myspace.com/blaq_silver_vampire"
its kind of my back up account for testing stuff out.

Posted by: xXDarkTemariXx Apr 24 2008, 03:20 PM

OMG! I GOT THE LAYOUT ON THE PAGE.

I'm sooooooooooooooooooo new to this.

But do i make a Div for the Navigation because i tried

<div class="navigation">

and it didn't work.

Posted by: divinebovine Apr 25 2008, 01:43 PM

you can call me a complete noob if you want but i dont understand :P
Ive copied the code from step 1 and pasted it into my about me, ive copied the stuff from step 2 into my about me and all i can see are a couple of boxes, ive uploaded my image and pasted it where is says paste url and nothings happened, someone care to give me a dummies guide to wtf im ment to do(complete dummy edition)?????

Posted by: MissHollywood22 Apr 26 2008, 06:57 PM

Can someone help me? I made myself a div layout. I made the background and all and followed all these steps!! (I still have to do the colors and all, but that isn't that hard) The problem is. I uploaded my Main Div Image, and since I want to move to step 4 of this turtiol and make the other div, it won't show up at all. I think it is hidden under the main div image. What can I do to fix this? Thanks

by the way, my URL is: http://www.myspace.com/insane_design22

Posted by: foxdanger Apr 27 2008, 11:51 PM

Can anyone help with one question:

In my Band Profile, how can i put the Player on a div?

Posted by: nessag0titall May 20 2008, 01:10 PM

hi... im lost, where in the code do i add the div codes???

im using this one to make a div overlay. is it the right one????

CODE

<style type=text/css>

body {
background-color: ######;
background-image: url("");
background-position: bottom right;
background-repeat: no-repeat;
background-attachment: fixed;
scrollbar-arrow-color:######;
scrollbar-track-color: ######;
scrollbar-shadow-color: ######;
scrollbar-face-color:######;
scrollbar-highlight-color:######;
scrollbar-darkshadow-color:######;
scrollbar-3dlight-color:######;}

table, tr, td {background-color: transparent; border: 0px; padding:2;}
table table {border: 0px;}
table table table table{border: 0px;}

{The actual modules}
table table table {border: 1px solid; border-color: ######; background-color: ######; }

{sets the default style for the body, table data, list data, divisions and text areas}
body,table, td, li, p, div, textarea  
{font:normal 9px arial; color:######; font-weight:none; border:0px; text-transform: none; line-height:12px;}

{class for the basic font for the page}
.text {font:normal 9px arial; color:######; font-weight:none; border:0px; text-transform: none; line-height:12px;}  

{style for the number of comments you have. The actual ..}
.redtext{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase; }

{style for the number of friends you have.}  
.redbtext{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase; }

{”Blurbs”, “About Me”, “Who I’d like to Meet”, “Friend Space”, and “Friend’s Comments” style}
.orangetext15{font-family: arial; color: ######; font-weight: bold; font-size: 20px; letter-spacing: -2px;}  

{”General”, “Music”, “Movies”, “Television”, “Books”, “Heros”, “Status”, “Here for”, “Hometown”, “Body Type”, “Ethnicity”, “Religion”, “Sign”, “Smoke/Drink”, “Children”, “Education”, “Occupation”, and “Income” title style}
.lightbluetext8{font-family:arial; font-size:9px;  color:######; font-weight:none;border:0px; text-transform: uppercase; }

{”Contacting”, “Interests”, “Details”, and “Schools” title styling}  
.whitetext12{font-family:arial; font-size:9px;  color:######; font-weight:none;border:0px; text-transform: uppercase;}  

{”In your extended network” style}
.blacktext12{font-family: arial; color: ######; font-weight: bold; font-size: 20px; letter-spacing: -2px; }

{Stylizing of your name above your picture }  
.nametext{font-family: arial; color: ######; font-weight: bold; font-size: 30px; letter-spacing: -3px; line-height: 35px;}  

{date stamp on comments}  
.blacktext10{font-family:arial; font-size:9px;  color:######; font-weight:none;border:0px; text-transform: uppercase;}  

{This is how all anchor points will be displayed; anchor points appear before all links.}  
a{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase; }  
a:link{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a:active{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a:visited{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a:hover{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}

{”View all friends” and “invite more” link style}  
a.redlink{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}  
a.redlink:link{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a.redlink:active{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a.redlink:visited{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase; }
a.redlink:hover{font-family:arial; font-size:9px;  color:######; font-weight:none;border:0px; text-transform: uppercase;}

{2 links in very top on the left, and the 13 links above your picture with make the navigation bar}
a.navbar{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}  
a.navbar:link{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}  
a.navbar:active{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}  
a.navbar:visited{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}  
a.navbar:hover{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}  

{Default Links}
a:link, a.man{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase; letter-spacing: 0px;}  
a:active{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}  
a:visited{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a:hover{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}

{bolded words}
.standard b, p b, B, strong {
font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase; }

</style>

Posted by: CHIINASTEE May 25 2008, 04:31 PM

how do i get the bottom links on

Posted by: BrandonJohn May 26 2008, 03:58 AM

How do i put scrolly boxes ontop of my div image?
I have the div image (image map) in my 'I'd like to meet' section and i have the scrolly code in my about me

CODE

<div class="content" style="position: absolute; left:000px;  top:000px; width:384px; height:265px; overflow: auto;"><center>
<style type="text/css">
div.myspace-scroll-box {
height:265px;
width:384px;
font:12pt Arial;
overflow:scroll;
}
</style>
<div class="myspace-scroll-box"><center>Then i have the text here</div>

And its not showing up over the div, but sometimes it shows up underneath the div image.
If anyone can help send a message to my myspace the friend id is
272109343

Posted by: jasonblue Jun 5 2008, 09:28 AM

Please no advertising - Thomas

Posted by: CastleBlackFire Jun 5 2008, 09:12 PM

Is there a way to have your music player thingy show in a DIV layout?

Posted by: CastleBlackFire Jun 6 2008, 09:50 PM

i most definately do not know how to do that...

Posted by: Jayneshia Jun 7 2008, 07:55 PM

Well okii i folled ALLLL steps including skippin # 2 lol
okii well how do you write in these boxes heres my profile
http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=262805702&MyToken=b7f0e5ba-af8f-4d4f-82e4-b4e63fae8c03
how do you add stuff in those boxes??
HELPPPPP

Posted by: EmoSakura90 Jun 11 2008, 12:59 PM

kay, i go the image map where i want it and it looks awesome, but whenever i try to code my it, the text won't show up.

did i skip something?

help please

Posted by: nadi95 Jun 12 2008, 06:03 PM

ok i basically got most of the things down the problem is that i can't get the content into the right place like i have a section like for about me but i cna't get w.e. i want into that section and like the clickable link lights up and i dn't want that to hppen heres my myspace link : http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=381944410
if theres anyway u can help me and make it better plzz do

Posted by: keishagirl14 Jun 16 2008, 08:51 PM

dats it im not eva tryin ta make a div layout again dis sucks man

Posted by: flowsosikk Jul 9 2008, 08:20 PM

what about for bands? =[

Posted by: Emoyoface Jul 10 2008, 06:24 PM

Okay this is sorta like a myspace/website problem. Like for some myspace layouts,there boring. I see sites that have website layouts and there AMAZING. I try to put it into myspace but it turned up all screwy. If someone could re-do the codes that would be great.

CODE

<style text="text/css">
body,tr,td {font-size: 7pt; font-family:century gothic; color:#000000;
background:none; transparent; 
scrollbar-base-color: #ffffff;
scrollbar-track-color: #ffffff;
scrollbar-face-color: #ffffff;
scrollbar-highlight-color: #c00000;
scrollbar-3dlight-color: #c00000;
scrollbar-darkshadow-color: #c00000;
scrollbar-shadow-color: #c00000;
scrollbar-arrow-color: #c00000;}
B {font-size: 7pt; font-weight: bold; COLOR: #ff4040; font-family: 
century gothic}
I {font-size: 7pt; font-weight: italic; COLOR: #ff4040; font-family: 
century gothic}
U {FONT-WEIGHT: bold; font-family: century gothic; COLOR: #ff4040; 
TEXT-DECORATION: underline; font-size: 7pt; BORDER-BOTTOM: #ff4040
double 1px;}
HR {COLOR: #ffffff; height: 3px; width: 150px;
}


}
a:{color: #fb3337; text-decoration: none; font-family: century gothic; 
font-size: 7pt}
a:link{color: #fb3337; text-decoration: none; font-family: century gothic; 
font-size: 7pt}
a:visited{color: #fb3337; text-decoration: none; font-family: 
century gothic; font-size: 7pt}
a:active{color: #fb3337; text-decoration: none; font-family: century gothic; font-size: 7pt}
a:hover{color: #000000; font-family: century gothic; font-size: 7pt; background color: #fb3337;}




BODY { background: #ffffff url() repeat-y}

.head {font-family: courier new; font-size: 11pt; color: #c00000; background-color:transparent; text-align: left; font-weight: normal; border-bottom: 3px double #c00000; }



</STYLE>



<body rightmargin="0" rightmargin="0" leftmargin="0">
<table cellpadding="0" cellspacing="0" border="0" background="http://img213.imageshack.us/img213/9700/geefrank2dk3.jpg" height="2000" width="581" align=left style="position:absolute; left:0; top:0;">
<tr>
<TD valign="top" height="394" width=581><IMG SRC="http://img222.imageshack.us/img222/9393/geefranker9.jpg"></TD>
</tr>
</table>


<table cellpadding="0" cellspacing="0" border="0" height="1000" width="465" style="position:absolute; left:50; top:570;" align=left>
<tr>
<TD valign=top align=left>


<div class="head">The News I Heard.</div>

<b>Bold</b><br>
<i>Italic</i><br>
<u>Underline</u><br>
<a href="http://www.quizilla.com/users/crueldade" target="_blank">Linkage</a><br><br>
<p>
Updates go here. =]

<BR><BR>

<div class="head">The Last Line.</div>

<u>Title:</u> <a href="LINK TO FIRST PART" target="_blank">Title</a><br>
<u>Featuring:</u> A boy<br>
<u>Status:</u> Active? Hiatus? Complete?<br>
<u>Title Credit:</u> I'd say this is pretty obvious as to what you put here.<br>

<BR><BR>

</TD>

</tr>
</table>


<table cellpadding="0" cellspacing="0" border="0" height="250" width="220" style="position:absolute; left:585; top:460;" align=left>
<tr>
<TD valign=top align=left>

<div class="head">Just a Ghost.</div>

Put some random stuff about you.
<br>
Or, if you want, you can change the heading and make it something else, OR you can get rid of this section completely. Just make sure you know what you're doing.
<BR><BR><BR><BR>

<div class="head">You'll Kill My Enemies.</div>
List your friends here. If you have any, that is.
<br>
I'm kidding. But seriously.
<br>
Or, if you want, you can change the heading and make it something else, OR you can get rid of this section completely. Just make sure you know what you're doing.
<BR><BR><BR><BR>

<div class="head">Here Comes the Sound.</div>

Music time! Upload your favorite song and go grab a music player from <a href="http://www.createblog.com">CreateBlog.com</a> and play some tunagggge.
<br>
Just make sure the music player is no wider than 215px or it will mess this up.
<br>
Or, if you want, you can change the heading and make it something else, OR you can get rid of this section completely. Just make sure you know what you're doing.
<BR><BR><BR><BR>

<div class="head">Something to Say.</div>

Go snag a <a href="http://www.cbox.ws" target="_blank">cBox</a> and put it here. Just make sure the cBox is no wider than 215px, or it will mess this up.<BR>
Or, if you want, you can change the heading and make it something else, OR you can get rid of this section completely. Just make sure you know what you're doing.
<BR><BR><BR><BR>

<div class="head">A Coffin Your Size.</div>
<center>
Layout by <a href="http://www.quizilla.com/users/crueldade" target="_blank">Alli</a><br>
at<br>
<a href="http://www.freewebs.com/beautifulchaoslayouts" target="_blank">Beautiful Chaos Layouts</a>.
<br>
</center>
</TD>

</tr>
</table>

Posted by: ANAMONEY Jul 14 2008, 03:03 PM

I HAVE THE LAYOUT I WANT BUT IT SAYS REPLACE XXXXXX WITH UR ID CODE BUT I CANT FIND WHERE XXX IS

Posted by: karmakiller Jul 14 2008, 03:12 PM

To find your friendID, use this:
http://www.createblog.com/layouts/friendid.php

Or click view your profile and look in the toolbar.The X's will be numbers. That's your Friend ID.

CODE

http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=xxxxx

Posted by: naruto123 Jul 14 2008, 09:23 PM

i don't get it what i suppose to put for i'd like to meet

Posted by: karmakiller Jul 16 2008, 08:00 PM

If you're using a DIV, you don't need to put anything in the I'd Like to Meet. It's just fine going into the About Me.

If you're using a layout from here, and it has codes for you to put in the I'd like to Meet, then do so and follow the designers' instructions.

Posted by: nikx618 Jul 18 2008, 10:33 PM

whenever i
"top: 50% = moves to middle of page"
it moves the left side of the image
to the center, and i keep trying to
position it to make it centered, but
its not "perfectly" in the center.
&if its not perfectly in the center.
my layout get rejected.
is there an easier way to center.
correctly, and exactly?

Posted by: YukinoIsuzuX Jul 21 2008, 04:28 PM

I'm having issues with image mapping.
I've been using the same code to make layouts,
but now the image maps don't work.
Could someone please tell me what I'm doing wrong?

CODE

<div style="position : absolute; left: 0%; margin-left: 100px; top:100px; width:800px; overflow: hidden; z-index:1"><img src="http://i33.tinypic.com/2mwhvdu.jpg" usemap="#NotNamed" border="0" />
<map name="NotNamed">

  <div class="navigation">

<img src="http://i33.tinypic.com/2mwhvdu.jpg" width="445" height="452" border="0" alt="" usemap="#navibar_Map" />
<map name="navibar_Map">


<area shape="rect" alt="HOME" coords="483,428 522,443" href="http://www.msplinks.com/MDFodHRwOi8vaG9tZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2Vy" />

<area shape="rect" alt="LOCATION" coords="x1,y1,x2,y2" href="LINK" />

<area shape="rect" alt="LOCATION" coords="x1,y1,x2,y2" href="LINK" />

<area shape="rect" alt="LOCATION" coords="x1,y1,x2,y2" href="LINK" />

<area shape="rect" alt="LOCATION" coords="x1,y1,x2,y2" href="LINK" />

<area shape="rect" alt="LOCATION" coords="x1,y1,x2,y2" href="LINK" />
</map>
</div>
<style>
.content {font:normal 11px times Georgia;line-height: 12px;color: white;padding-top:10px;padding-bottom:5px;padding-right:0px;padding-left:7px;background-color:000000;text-align:center;width:360px; height:100px;overflow:auto;position : absolute; z-index:2; left: 0%; top: 0%;margin-left: 110px;margin-top: 430px;}
body,table, td, li, p, div, textarea , .text
{font:normal 11px Georgia; color:000000; font-weight:none; border:0px; text-transform: none; line-height:12px; letter-spacing:0px;}
a:link, a.man:link, a.text:link, a:visited, a.man:visited, a.text:visited, a:active, a.redlink:active, a.redlink:visited, a.redlink:link, a.navbar:link, a.navbar:visited, a.navbar:active {font-family:Georgia; font-size: 11px; color:484848; border:white;font-weight: normal; text-decoration: underline; border-bottom:1px dotted; letter-spacing: 0px; text-transform: lowercase; line-height: 10px; background-color: transparent;}

a:hover, a.man:hover, a.text:hover, a.redlink:hover, a.navbar:hover {cursor:default!important;font-size:11px; color:white; text-decoration: none;  border-bottom: 1px dashed ; font-family:Georgia;}
b, strong, bold{font-weight:bold; letter-spacing:2px;}i, italic{font-style:italic; letter-spacing:0;}u, underline{font-decoration:underline; letter-spacing:0;}big{font-size:15px;line-height:16px;letter-spacing:1px;}s, strikethrough{text-decoration:line-through;letter-spacing:2px;}
body{scrollbar-track-color:rgb(0,0,0);scrollbar-face-color:rgb(0,0,0);scrollbar-3dlight-color:rgb(0,0,0);scrollbar-highlight-color:rgb(0,0,0);scrollbar-darkshadow-color:rgb(0,0,0);scrollbar-shadow-color:rgb(0,0,0);scrollbar-arrow-color:rgb(72,72,72);}</style>

<style>
.mslogo, .clearfix form, .clearfix a, .clearfix select, .profileinfo, .contacttable, .userprofileurl, .interestsanddetails, .userprofiledetail, .userprofilenetworking, .userprofileschool, .userprofilecompany, .extendednetwork, .latestblogentry, .blurbs td.text, .orangetext15, .friendspace, .friendscomments, table div {display:none!important;}
table table div, .clearfix, .clearfix div {display:block!important;}
table, tr, td, .clearfix {background:none!important;}
.clearfix tr td div {filter:alpha(opacity:0)!important;} 
.bodycontent div {_filter:alpha(opacity:100)!important;}
div[id="topnav"], div[id="shortcuts"] {opacity:0!important;}
</style>







<div class="content">
weoooooooooweooooooooooweoooooooooooooooooooo
weoooooooooweooooooooooweoooooooooooooooooooo
weoooooooooweooooooooooweoooooooooooooooooooo
weoooooooooweooooooooooweoooooooooooooooooooo
weoooooooooweooooooooooweoooooooooooooooooooo

<style>
body{background-color:white;cursor:default!important;}
.contacttable,.whitetext12,.nametext,.lightbluetext8,.orangetext15,.blacktext12,
btext,.redtext,.redbtext{display:none;height:0px;!important;visibility:hidden}
td td td td{border:0px;width:0px;text-align:left;}
table,td,tr{padding:0px;width:;background-color:transparent}
table table table{padding:1px;height:.01%;width:100%;}
table table,table table table table,table,tr,td{height:0px;!important;border:0px;!important}
a.text,table div font a,table div div,.navbar font,tr td font{visibility:hidden;display:none;height:0px;!important;}
table table table table,table table table table td.text, td.text td.text table{display:none;}
td.text table table{display:inline;visibility:visible;}
table td table tr td.text table{visibility:hidden;}
table td table tr td.text table table,table td table tr td.text table table td.text{visibility:visible;}
table.footer {display: none;}

body table td div form {display:none !important;}

div table a.navbar img {display:none;}
div table {visibility:hidden;}
div table div, div table table, div table.navigationBar, table div table, div table form {visibility:invisible}
div table {border-bottom:0px !important;  }
div table.navigationBar {margin-bottom:-30px;}


div table div div select {position:absolute !important;  top:-200px !important; left:0px !important; }
</style>
<p><br /><br /><br /><br /><br /><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lm15c3BhY2UuY29tL2Nvb2tpZV9jdXR0ZXJ4cGVyZmVjdA==" title="madeline">
design:x;</a>

Posted by: nany218 Jul 21 2008, 05:47 PM

CODE

jordan div layout

Posted by: nany218 Jul 21 2008, 06:00 PM

CODE

<style>body {background-color:fff94f;} ul li a.open:hover, ul li a.open small, ul li a:hover {background-color:fff94f!important;}div td {background-color:d54fff;}.extendedNetwork td, .extendedNetwork {border:0px;} 
td.text table, td.text td.text {background-color:transparent;} 
td.text td.text td td a, .redlink, td.text td.text td b a {visibility:visible!important;}
td.text td.text td a {visibility:hidden;} 
table, tr, td{border:0px!important;} 
table table table table td{width:0px;padding:0px;}
table table table table td{width:0px!important; padding:0px!important;}span.lightbluetext8{display:none;}
table,tr,td{height:1px;}
a.text, table div font a, table div div {visibility:hidden;}
td{text-align:center} 
a.text, table div font a, table div div {visibility:hidden;}
div td font {visibility:hidden;}
br{line-height:0.5px;}.blacktext10{font-family: tahoma; font-size: 9px; font-weight: bold; text-decoration: none; line-height:9px; color:D5ED58}

.interestsAndDetails td {background-color:ffffff;}
.interestsAndDetails, .interestsAndDetails td {border:0px;}
.interestsAndDetails td {border:0px;}
.friendsComments td.text td a {display:none;}
.friendsComments td.text td b {display:none;}
.redtext, .friendscomments, .orangetext15 {display:none;}
.userprofileurl, .userprofiledetail {display:none;}
.extendedNetwork, .latestBlogEntry, .friendSpace {display:none;}
.imgonlinenow{display:none;}
.contacttable, .nametext, .lightbluetext8 {display:none;}
a.text, table div font a, table div div {visibility:hidden;}td{text-align:center} a.text, table div font a, table div div {visibility:hidden;}div td font {visibility:hidden;}.navbar {visibility:visible;}table div font a, table div div {visibility:hidden; display:none;border:0px!important;background-color:transparent;}
textarea{font-family:small fonts; font-size:7px; color: 000000; font-weight: normal; text-decoration: none; letter-spacing: text-align: center; 0px; text-transform: uppercase; line-height: 7px; border: 1px black solid; height: 40px; width: 300px; background -color: FFFFFF;}
</style>
big{font: 28pt normal georgia; letter-spacing: -3px!important;line-height:20pt; color: 66FFFF}
table table table table td{width: 0px!important;
padding: 0px!important;}

Posted by: nany218 Jul 21 2008, 06:04 PM

CODE

<style>body {background-color:fff94f;} ul li a.open:hover, ul li a.open small, ul li a:hover {background-color:fff94f!important;}div td {background-color:d54fff;}.extendedNetwork td, .extendedNetwork {border:0px;} 
td.text table, td.text td.text {background-color:transparent;} 
td.text td.text td td a, .redlink, td.text td.text td b a {visibility:visible!important;}
td.text td.text td a {visibility:hidden;} 
table, tr, td{border:0px!important;} 
table table table table td{width:0px;padding:0px;}
table table table table td{width:0px!important; padding:0px!important;}span.lightbluetext8{display:none;}
table,tr,td{height:1px;}
a.text, table div font a, table div div {visibility:hidden;}
td{text-align:center} 
a.text, table div font a, table div div {visibility:hidden;}
div td font {visibility:hidden;}
br{line-height:0.5px;}.blacktext10{font-family: tahoma; font-size: 9px; font-weight: bold; text-decoration: none; line-height:9px; color:D5ED58}

.interestsAndDetails td {background-color:ffffff;}
.interestsAndDetails, .interestsAndDetails td {border:0px;}
.interestsAndDetails td {border:0px;}
.friendsComments td.text td a {display:none;}
.friendsComments td.text td b {display:none;}
.redtext, .friendscomments, .orangetext15 {display:none;}
.userprofileurl, .userprofiledetail {display:none;}
.extendedNetwork, .latestBlogEntry, .friendSpace {display:none;}
.imgonlinenow{display:none;}
.contacttable, .nametext, .lightbluetext8 {display:none;}
a.text, table div font a, table div div {visibility:hidden;}td{text-align:center} a.text, table div font a, table div div {visibility:hidden;}div td font {visibility:hidden;}.navbar {visibility:visible;}table div font a, table div div {visibility:hidden; display:none;border:0px!important;background-color:transparent;}
textarea{font-family:small fonts; font-size:7px; color: 000000; font-weight: normal; text-decoration: none; letter-spacing: text-align: center; 0px; text-transform: uppercase; line-height: 7px; border: 1px black solid; height: 40px; width: 300px; background -color: FFFFFF;}
</style>
big{font: 28pt normal georgia; letter-spacing: -3px!important;line-height:20pt; color: 66FFFF}
table table table table td{width: 0px!important;
padding: 0px!important;}

Posted by: manny-the-dino Jul 21 2008, 06:11 PM

nany218, if you'd like to request layouts to be made for you, please post http://www.createblog.com/forums/index.php?showtopic=192328 once you have 50+ posts.
thanks.

Posted by: silent-rebirth Jul 31 2008, 03:25 AM

I can't get past step 2 with out messing up bad. I don't get it.
when you take the first code and put it on.

CODE

<style type="text/css">
table table,table table table table,table table{background-color:transparent;width:;border:0px;} 
div,table,tr,td,th{background-color:transparent;text-align:left;border:0px;}
a.navbar,font,.whitetext12,.btext,.orangetext15,
.redbtext,.redtext,.blacktext12,.blacktext10,
.lightbluetext8,strong,.nametext,div b font font, 
div font font u,table table table table, table.contacttable{display:none;}
div table form tr td,td.text table,a.text, table div font a,table div div,{visibility:hidden;di-splay:none}
table td table tr td.text table {visibility:hidden;}
table td table tr td.text table table, table td table tr td.text table table td.text {visibility:visible;}
td.text table table {display:inline; visibility:visible;}
embed{position:absolute;top:0px;left:0px;display:block;width:0px; height:0;}
.comments{visibility:visible;width:397px; height:180px;position:absolute;
top:680px;left:415px; 
overflow:auto;background-color:transparent;
border:black 0px solid;z-index:2px;}
</style>

then the next one.

CODE

<style type=text/css>

body {
background-color: ######;
background-image: url("");
background-position: bottom right;
background-repeat: no-repeat;
background-attachment: fixed;
scrollbar-arrow-color:######;
scrollbar-track-color: ######;
scrollbar-shadow-color: ######;
scrollbar-face-color:######;
scrollbar-highlight-color:######;
scrollbar-darkshadow-color:######;
scrollbar-3dlight-color:######;}

table, tr, td {background-color: transparent; border: 0px; padding:2;}
table table {border: 0px;}
table table table table{border: 0px;}

{The actual modules}
table table table {border: 1px solid; border-color: ######; background-color: ######; }

{sets the default style for the body, table data, list data, divisions and text areas}
body,table, td, li, p, div, textarea  
{font:normal 9px arial; color:######; font-weight:none; border:0px; text-transform: none; line-height:12px;}

{class for the basic font for the page}
.text {font:normal 9px arial; color:######; font-weight:none; border:0px; text-transform: none; line-height:12px;}  

{style for the number of comments you have. The actual ..}
.redtext{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase; }

{style for the number of friends you have.}  
.redbtext{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase; }

{”Blurbs”, “About Me”, “Who I’d like to Meet”, “Friend Space”, and “Friend’s Comments” style}
.orangetext15{font-family: arial; color: ######; font-weight: bold; font-size: 20px; letter-spacing: -2px;}  

{”General”, “Music”, “Movies”, “Television”, “Books”, “Heros”, “Status”, “Here for”, “Hometown”, “Body Type”, “Ethnicity”, “Religion”, “Sign”, “Smoke/Drink”, “Children”, “Education”, “Occupation”, and “Income” title style}
.lightbluetext8{font-family:arial; font-size:9px;  color:######; font-weight:none;border:0px; text-transform: uppercase; }

{”Contacting”, “Interests”, “Details”, and “Schools” title styling}  
.whitetext12{font-family:arial; font-size:9px;  color:######; font-weight:none;border:0px; text-transform: uppercase;}  

{”In your extended network” style}
.blacktext12{font-family: arial; color: ######; font-weight: bold; font-size: 20px; letter-spacing: -2px; }

{Stylizing of your name above your picture }  
.nametext{font-family: arial; color: ######; font-weight: bold; font-size: 30px; letter-spacing: -3px; line-height: 35px;}  

{date stamp on comments}  
.blacktext10{font-family:arial; font-size:9px;  color:######; font-weight:none;border:0px; text-transform: uppercase;}  

{This is how all anchor points will be displayed; anchor points appear before all links.}  
a{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase; }  
a:link{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a:active{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a:visited{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a:hover{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}

{”View all friends” and “invite more” link style}  
a.redlink{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}  
a.redlink:link{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a.redlink:active{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a.redlink:visited{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase; }
a.redlink:hover{font-family:arial; font-size:9px;  color:######; font-weight:none;border:0px; text-transform: uppercase;}

{2 links in very top on the left, and the 13 links above your picture with make the navigation bar}
a.navbar{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}  
a.navbar:link{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}  
a.navbar:active{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}  
a.navbar:visited{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}  
a.navbar:hover{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}  

{Default Links}
a:link, a.man{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase; letter-spacing: 0px;}  
a:active{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}  
a:visited{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a:hover{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}

{bolded words}
.standard b, p b, B, strong {
font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase; }

</style>

would you put the codes together like this

CODE

<style type="text/css">
table table,table table table table,table table{background-color:transparent;width:;border:0px;} 
div,table,tr,td,th{background-color:transparent;text-align:left;border:0px;}
a.navbar,font,.whitetext12,.btext,.orangetext15,
.redbtext,.redtext,.blacktext12,.blacktext10,
.lightbluetext8,strong,.nametext,div b font font, 
div font font u,table table table table, table.contacttable{display:none;}
div table form tr td,td.text table,a.text, table div font a,table div div,{visibility:hidden;di-splay:none}
table td table tr td.text table {visibility:hidden;}
table td table tr td.text table table, table td table tr td.text table table td.text {visibility:visible;}
td.text table table {display:inline; visibility:visible;}
embed{position:absolute;top:0px;left:0px;display:block;width:0px; height:0;}
.comments{visibility:visible;width:397px; height:180px;position:absolute;
top:680px;left:415px; 
overflow:auto;background-color:transparent;
border:black 0px solid;z-index:2px;}
(the next code)

body {
background-color: ######;
background-image: url("");
background-position: bottom right;
background-repeat: no-repeat;
background-attachment: fixed;
scrollbar-arrow-color:######;
scrollbar-track-color: ######;
scrollbar-shadow-color: ######;
scrollbar-face-color:######;
scrollbar-highlight-color:######;
scrollbar-darkshadow-color:######;
scrollbar-3dlight-color:######;}

table, tr, td {background-color: transparent; border: 0px; padding:2;}
table table {border: 0px;}
table table table table{border: 0px;}

{The actual modules}
table table table {border: 1px solid; border-color: ######; background-color: ######; }

{sets the default style for the body, table data, list data, divisions and text areas}
body,table, td, li, p, div, textarea  
{font:normal 9px arial; color:######; font-weight:none; border:0px; text-transform: none; line-height:12px;}

{class for the basic font for the page}
.text {font:normal 9px arial; color:######; font-weight:none; border:0px; text-transform: none; line-height:12px;}  

{style for the number of comments you have. The actual ..}
.redtext{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase; }

{style for the number of friends you have.}  
.redbtext{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase; }

{”Blurbs”, “About Me”, “Who I’d like to Meet”, “Friend Space”, and “Friend’s Comments” style}
.orangetext15{font-family: arial; color: ######; font-weight: bold; font-size: 20px; letter-spacing: -2px;}  

{”General”, “Music”, “Movies”, “Television”, “Books”, “Heros”, “Status”, “Here for”, “Hometown”, “Body Type”, “Ethnicity”, “Religion”, “Sign”, “Smoke/Drink”, “Children”, “Education”, “Occupation”, and “Income” title style}
.lightbluetext8{font-family:arial; font-size:9px;  color:######; font-weight:none;border:0px; text-transform: uppercase; }

{”Contacting”, “Interests”, “Details”, and “Schools” title styling}  
.whitetext12{font-family:arial; font-size:9px;  color:######; font-weight:none;border:0px; text-transform: uppercase;}  

{”In your extended network” style}
.blacktext12{font-family: arial; color: ######; font-weight: bold; font-size: 20px; letter-spacing: -2px; }

{Stylizing of your name above your picture }  
.nametext{font-family: arial; color: ######; font-weight: bold; font-size: 30px; letter-spacing: -3px; line-height: 35px;}  

{date stamp on comments}  
.blacktext10{font-family:arial; font-size:9px;  color:######; font-weight:none;border:0px; text-transform: uppercase;}  

{This is how all anchor points will be displayed; anchor points appear before all links.}  
a{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase; }  
a:link{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a:active{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a:visited{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a:hover{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}

{”View all friends” and “invite more” link style}  
a.redlink{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}  
a.redlink:link{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a.redlink:active{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a.redlink:visited{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase; }
a.redlink:hover{font-family:arial; font-size:9px;  color:######; font-weight:none;border:0px; text-transform: uppercase;}

{2 links in very top on the left, and the 13 links above your picture with make the navigation bar}
a.navbar{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}  
a.navbar:link{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}  
a.navbar:active{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}  
a.navbar:visited{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}  
a.navbar:hover{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}  

{Default Links}
a:link, a.man{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase; letter-spacing: 0px;}  
a:active{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}  
a:visited{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}
a:hover{font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase;}

{bolded words}
.standard b, p b, B, strong {
font-family:arial; font-size:9px; color:######; font-weight:none;border:0px; text-transform: uppercase; }


</style>

Posted by: Anarchy Jul 31 2008, 03:30 AM

^Yes, that would be correct.

Posted by: silent-rebirth Aug 1 2008, 10:20 PM

QUOTE(Anarchy @ Jul 31 2008, 12:30 AM)

^Yes, that would be correct.

thank you. I'm new to this so its confusing.

Posted by: ollielv90 Aug 4 2008, 06:47 AM

Hey this was an amazing tutorial! However, I am trying to figure out how to get my photoshopped content on there. I've sliced my images up and everything! HELP?!

Posted by: leib92 Aug 7 2008, 10:21 PM

i need help putting pictures on a div layout can neone help??

Posted by: MzYennie Aug 8 2008, 04:54 PM

Ok so I made the layout and code and everything.
but when i put it in to my myspace none of words show or anything!
besides my navigation and picture.
What did i Do wrong?
and how do i hide the bottom links? there in the way >.<

heres my profile
http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=69733435

Posted by: schizo Aug 8 2008, 05:00 PM

~~Are you sure there aren't any typos and that you put ending div tags at the end of everything? If you can't find anything, please post your code so we can look at it and spot the error.~~

You didn't put ending div tags at the end of your sections. Make sure you put </div> before starting a new one.

http://www.createblog.com/scripts/script.php?id=1700 hides the bottom links. Hiding the Contact Myspace and Report Abuse links are against the Terms of service, so make sure you put them somewhere else if you use that.

Posted by: dsinc Aug 9 2008, 05:09 PM

This tutorial is really great.
Im trying to learn divs, but ive hit a wall.
when adding my div the image doesn't show, though the content does.
Ive played around with it using all forms of the image code from both imageshack and photobucket and nothing works.
everytime I go back to my code it has usurped the <Img src and replaced it with dots.

the problem is here:
<a href="http://img388.imageshack.us/my.php?image=fordivforumrl0.png" target="_blank"><img src="http://img388.imageshack.us/img388/448/fordivforumrl0.th.png" border="0" alt="Free Image Hosting at www.ImageShack.us" /></a>

my extra page that play around with is here:
http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=390345245

If you could help me, Id be really grateful, thanks.

Posted by: DespisedandBeloved Aug 10 2008, 11:09 AM

Really great tutorial...it help me out alot! If you can plz help me..I just made a div layout on photoshop and I just follow your instruction and everything work out how I want it but now I don't know what 2 do...I need help with my msg, add comment, add friend, ect buttons..and how to put stuff on my custom div...please check out my myspace page to understand what I mean http://www.myspace.com/despised_and_beloved

Posted by: schizo Aug 10 2008, 11:20 AM

dsinc: Could you please take your test profile off of private or give us your entire code? Thanks.

DespisedandBeloved: The tutorial explains exactly how to make more sections for content. What part of it do you not understand? Please be more specific.

Posted by: DespisedandBeloved Aug 10 2008, 11:30 AM

I know this sounds stupid but is there anyway I could ruler it to the location i want so it can be perfect..but my other problem is how to get the button to work too....I know you use this

CODE

<div class="content" style="position: absolute; left:000px;  top:000px; width:000px; height:000px; overflow: auto;"><center>
CONTENT FOR DIV.
</div>

But how do I get exactly to those button and get them to work? sorry I don't know how to explain it better

Posted by: schizo Aug 10 2008, 11:48 AM

For me, it's easiest to just play with the numbers until it's lined up perfectly. Once you get close, just adjust the numbers with smaller increments to get it right.

You should probably use an image map for those links. I have a tutorial http://www.atomicaffliction.com/coding8.php that will explain.

Posted by: DespisedandBeloved Aug 10 2008, 12:24 PM

thank you!!! I got the first part done and I'm starting to understand how to do it...thanks you that all I needed

Posted by: JazzyCullenzWTF Aug 14 2008, 04:23 AM

OK! SO im trying to submit a layout to createblog but like idk if there is a specific way/code where you can center a pic in all screen resolutions..
or am i supposed to like..
idk
help? ):

Posted by: xstartemple Aug 17 2008, 05:10 AM

Thank you guys sooo much for putting this up! Your the best, I understood everything, but one thing, I just need to code to hide the bottom where it says about,faq and all that to hide it? Like I just get the hide bottom links and it hides?
o.O

Posted by: LoveLikeRain Aug 18 2008, 12:21 PM

hey...umm....you can make the entire layout in photoshop, then put it up, and just position where the text and links go, right?

Posted by: schizo Aug 19 2008, 04:49 PM

QUOTE

OK! SO im trying to submit a layout to createblog but like idk if there is a specific way/code where you can center a pic in all screen resolutions..
or am i supposed to like..
idk
help? ):

Add left:50% to the section for the div positioning and use margin-left:#px; to actually position it. If you get it centered in your resolution that way, it will be centered for everyone else as well.

QUOTE

There's a code for hiding the bottom links in the scripts section. Just type "bottom links" in the search bar and something should come up. It's against Myspace TOS to hide certain links like Contact Myspace and Report abuse, so make sure you add them somewhere.

QUOTE

hey...umm....you can make the entire layout in photoshop, then put it up, and just position where the text and links go, right?

Yep.

Posted by: taz20 Aug 30 2008, 10:01 AM

I understand everything, but how to I link my pic words that I already made on my overlay?

Posted by: schizo Aug 30 2008, 10:11 AM

^ You need to use an image map. I have a tutorial on how to do that http://www.atomicaffliction.com/coding8.php.

Posted by: taz20 Aug 31 2008, 10:36 PM

Thank You!!!

Posted by: XXXnunu Sep 3 2008, 01:22 PM

this seems like big help because everyone keeps saying 'thanks' and stuff, but im a beginner.i was wondering if you can show it like..
more detailed, because im very confused and im trying to learn how to code

i know how to html/css.
but i dont know how to code the div image's.

i just really want to learn. :(

this helped a bit though, thanks.
i hope you make more.

&where do i put code at? which codes should go in About me & which should go in Who Id like to meet.

should i do

CODE

<style> 
body {
background: url('.IMAGEURL'); 
background-position:repeat;
background-color:000000;
line-height:; 
cursor:;}

</style>

(i put this code in about me, of course i do <nav. div. )

but i just wanted to know where to put things, its all confusing x-x

Posted by: schizo Sep 3 2008, 06:38 PM

You could put it in your About Me or Who I'd Like to Meet. It doesn't really make a difference.

As for a more detailed tutorial, I don't really know how much more detailed it can be. I've written one http://atomicaffliction.com/coding3.php that's slightly different. I don't know if it will help, but you could try.

Posted by: dokidoki Sep 30 2008, 08:04 PM

I can create a layout just fine. What I'm having trouble with is centering it. I want it to be centered relative to the browser window, so that no matter if you have a widescreen or 15" monitor,m it will always be centered.

Posted by: Anarchy Oct 1 2008, 01:22 AM

When you position a DIV, have this for the left margin attributes:

CODE

left:50% margin-left:-400px;

The 50% will put the left edge of your DIV in the center, and the -400 will pull it in to the left so the center of that DIV is in the middle. Of course, the margin-left pixels varies according to the width of whatever you're trying to position. Usually, the width divided by two is what it should be.

Posted by: Fitznblend Oct 23 2008, 05:29 PM

QUOTE(schizo @ Aug 30 2008, 04:11 PM)

^ You need to use an image map. I have a tutorial on how to do that http://www.atomicaffliction.com/coding8.php.

Hi,

I have attempted this but the links aren't clickable? (The hand icon doesn't show when rolled over the area.)

I have noticed that myspace completely takes out the # in the usemap="#map" when this is previewed/submitted.

Should this affect anything at all?

I'm currently trying to make a band profile using the article from http://views-under-construction.blogspot.com.

Where it asks to start custom content... I've just inserted an image with the image map details.

Posted by: Anarchy Oct 24 2008, 08:26 AM

Yeah, that might be it. Try this instead:

CODE

<img name="NAME" src="IMAGE" border="0" usemap="#NAME" alt="" />

<map name="NAME">
<area shape="rect" coords="COORDINATIONS" href="LINK" alt="DESCRIPTION" />
<area shape="rect" coords="COORDINATIONS" href="LINK" alt="DESCRIPTION" />
<area shape="rect" coords="COORDINATIONS" href="LINK" alt="DESCRIPTION" />
<area shape="rect" coords="COORDINATIONS" href="LINK" alt="DESCRIPTION" />
<area shape="rect" coords="COORDINATIONS" href="LINK" alt="DESCRIPTION" />
<area shape="rect" coords="COORDINATIONS" href="LINK" alt="DESCRIPTION" />
<area shape="rect" coords="COORDINATIONS" href="LINK" alt="DESCRIPTION" />
<area shape="rect" coords="COORDINATIONS" href="LINK" alt="DESCRIPTION" />
</map>

That still has a pound symbol but it works on someone else's layout, for some reason.

Posted by: Fitznblend Nov 1 2008, 08:26 PM

Weird. This didn't work so I just resorted to slicing them.

Thanks

Posted by: GabyArtz Nov 15 2008, 07:35 AM

kool

Posted by: bhulan Nov 21 2008, 11:41 AM

hye im new here.and i want to ask something.

urmm can any body help.

my div scroll box is going wild.
okay,when i edit or change the margin-left,width using IE(window vista),
and i view my profile using mozilla firefox.its come out like this.
how should i do with it so the srollboxs thing will keep constant in position.

PLEASE HELP ME!

Posted by: Anarchy Nov 21 2008, 11:45 AM

^Try using different positioning codes. For Firefox, use margin codes regularly. Then for Internet Explorer, add an underscore before another margin-left attribute. It should look like this:

CODE

margin-left:#px; _margin-left:#px;

Then you would replace the pound symbols with the appropriate number.

Posted by: bhulan Nov 21 2008, 11:52 AM

^^THANKS,i'll try!
:DD

Posted by: Anarchy Nov 21 2008, 11:53 AM

Sure, no problem.

Posted by: shanahk Nov 22 2008, 02:54 AM

PLEASE HELP ME

Something is wrong with my div but i dont kno what? *I'm new to this*

here is the link to the profile!
http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=431695039&MyToken=6da2f11f-9635-4901-8501-22c71509a9b0

and here are the codes in my 'about me' section:

CODE

<style>table table table {padding:1px; background-color:000000; background-image: url("");border-top:1px;border-bottom:1px;border-top-color:333333;border-bottom-color:333333;border-left:1px;border-right:1px;}body{background-image:url("http://i246.photobucket.com/albums/gg92/itsirrational/famous1.png"); background-repeat:repeat; background-attachment:fixed; background-color:fff;}table table table {border: 0px solid; border-color:000000; padding:0; background-color:fff;}{border:1px;}table td td {width: 0px;}TD TD {text-align: center;}TD TD TD {text-align: center;}TD TD TD TD {border-top: 0px solid; width: 1%; text-align:center;}TD TD TD TD TD {border-top: 0px solid black; text-align:center;}TD TD TD TD TD TD {border: 0px solid;}TABLE, TD {padding: 0px; text-transform: lowercase; width:350px;}TABLE TABLE {padding: 0px; text-transform: lowercase;}TABLE TABLE TABLE {padding: 0px; text-transform: uppercase;height: .01%; width: 100%;}TABLE TABLE TABLE TABLE {padding: 0px; text-transform: lowercase;}TABLE TABLE TABLE TABLE TABLE {padding: 0px; text-transform: lowercase;}TABLE TABLE TABLE TABLE TABLE TABLE {padding: 0px; text-transform: lowercase;}table td div div font {visibili-ty:hidden;di-splay:none;}table table table table {border: 0px; text-align: justify; padding: 0px;} table table table table table {border: 0px; text-align: justify; padding: 0px;} table table table table table table {border: 0px; text-align: justify; padding: 0px;}body{margin-top:10px;margin-right:0px;}td.text td.text table table table td a img {width:50px;}td.text td.text table table table td div img {width:50px;}td.text td.text table table td img {width:50px; max-width:50px; width:auto;}td.text td.text table table td div img {width:50px;}* html td.text td.text table table td img {width:50px;}* html td.text td.text table table td a img {width:50px;}* html td.text td.text table table td div img {width:50px;}... {display:none; visibility:hidden;}body div table table{width:450px !important;}body div table table br{display:none !important}img, a:link img, a:active img, a:visited img{filter: !important}strong table table table{padding:0px; height:auto}body div table table br{display:none !important}td.text td.text table table td {padding:0;}td.text td.text table table br {display:inline;}div td font {visibility:hidden;}.navbar {visibility:hidden;} .navigationlinks{position:absolute; top:120px; left:50%; margin-left:-400px; width:800px; height:40px; color:000000 !important}a.navigationlinks, a.navigationlink:link, a.navigationlinks:visited{color:000000 !important;}body table table div font a, body table table div div {visibility:visible;}tr{background-color:transparent}table, td {background-color:transparent; border:1px; border-width:0px;}.navigationbar{display:none;}div table tr td form{display:none;}div td img{display:none; visibility:hidden !important; width:0px !important}</style><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lml0c2lycmF0aW9uYWwuY29tL2NyZWRpdC5waHA=" style="position:absolute; top:9px; left:7px; height:98px; width:230px;background-image:url(); background-repeat:no-repeat; z-index:9;" class="navb"><center><img src="http://itsirrational.com/images/layouts/credit-1.gif" border="0" /></a></center></style><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lml0c2lycmF0aW9uYWwuY29tL2NyZWRpdC5waHA=" style="position:absolute; top:0px; right:6px; height:300px; width:200px;background-image:url(); background-repeat:no-repeat; z-index:9;" class="navb"><center><img src="http://itsirrational.com/images/layouts/irl.gif" border="0" /></a></center><style>td.text td.text table table table td a img {width:100px;}td.text td.text table table table td div img {width:80px;}td.text td.text table table td img {width:260px; max-width:260px; width:auto;}td.text td.text table table td div img {width:80px;}* html td.text td.text table table td img {width:260px;}* html td.text td.text table table td a img {width:90px;}* html td.text td.text table table td div img {width:80px;}a:link, a.man:link, a.text:link, a:visited, a.man:visited, a.text:visited, a:active, a.redlink:active, a.redlink:visited, a.redlink:link {text-decoration:none; font-size:9px; color:000000; font-weight:normal; font-family:century gothic; cursor:url("http://www.freewebs.com//tiny.cur");}a.navbar:link, a.navbar:visited, a.navbar:active{font-size:9px;color:000000;text-decoration:none;font-family:century gothic;line-height:19px;cursor:url("http://www.freewebs.com//tiny.cur");}a.navbar:hover{font-size:9px;color:ffffff;text-decoration:none;font-family:century gothic;line-height:19px;cursor:url("http://www.freewebs.com//tiny.cur");}a:hover, a.man:hover, a.text:hover, a.redlink:hover {color:f8549e; font-size:9px; text-decoration:none; font-family:century gothic; line-height:9px; letter-spacing:1px; cursor:url("http://www.freewebs.com//tiny.cur");}td, .whitetext12, a, body, table, body, td, li, p, div, li, h1, h2, lol, p, br, .text, .blacktext12, .blacktext10, .btext, .lightbluetext8, .orangetext15, legend, b, strong, .redtext, textarea {font-size:9px; font-family:century gothic; font-weight:normal; text-transform:lowercase; line-height:9px; color:000000; letter-spacing:1px;}.blacktext10{width:150px; text-align:right; border-style:solid; border-width:1px; border-color:000000; color:000000; background-color:f8549e; line-height:12px;}.redbtext{font-size:9px; line-height:9px; color:000000; font-family:century gothic;letter-spacing:1px;}.lightbluetext8 {font-size:9px; background-color:4a4949; border: 1px solid black; letter-spacing:1px; line-height:12px; display:block;}.blacktext12 {background-color:ededed; display:block; font-size:9px; font-family:century gothic; font-weight:normal; border:1px solid black; line-height:13px; letter-spacing:1px; border-right:0px;}.orangetext15 {background-color:4a4949; font-size:9px; color:000000; font-weight:normal; border: 1px solid black; display:block; line-height:12px; border-right:0px;}.whitetext12 {background-color:ededed; font-size:9px; color:000000; border: 1px solid black; line-height:12px; font-weight:normal; display:block; border-left:0px;}.nametext {text-align:left; display:block; font-family:century gothic; font-size:25pt; color:000; font-weight:normal; text-decoration:lowercase; letter-spacing:-3px; margin-top:16px;margin-bottom:6px; border-bottom:5px; solid black; background-color:f8549e; border:1px solid; border-color:000000; padding-left:4px; border-left:0px;}u {color:000000; border-bottom-style:dashed; border-bottom-width: 1px; border-bottom-color:4a4949; line-height:12px; text-decoration: none; font-size:9px; letter-spacing:1px;}big {color:f8549e; line-height:30pt; font-size:25pt; font-weight:normal; font-family:century gothic; letter-spacing:-2px;} i {font-weight:italics;font-family:century gothic; font-size:9px; }img {border-width:0px;}</style><style>td.text td.text table table table td a img {width:50px;}td.text td.text table table table td div img {width:50px;}td.text td.text table table td img {width:50px; max-width:50px; width:auto;}td.text td.text table table td div img {width:50px;}* html td.text td.text table table td img {width:50px;}* html td.text td.text table table td a img {width:50px;}* html td.text td.text table table td div img {width:50px;}</style><style>div table td font {display: none;}</style>

</div>
<style>
.contacttable,.whitetext12,.nametext,.lightbluetext8,.orangetext15,.blacktext12,
btext,.yellowtext,.redbtext{display:none;height:0px;!important;visibility:hidden}
td td td td{border:0px;width:0px;text-align:left;}
table,td,tr{padding:0px;width:;background-color:transparent}
table table table{padding:1px;height:.01%;width:100%;}
table table,table table table table,table,tr,td{height:0px;!important;border:0px;!important}
table table table table,table table table table td.text, td.text td.text table{display:none;}
td.text table table{display:inline;visibility:visible;}
table td table tr td.text table{visibility:hidden;}
table td table tr td.text table table,table td table tr td.text table table td.text{visibility:visible;}
</style>

</div>
<style>
.comments {position:absolute; left:50%; top:960px; _top:363px; margin-left:-430px; _margin-left:-430px; width:415px; _width:70px;}
.friendspace {display:none;}
.friendscomments {margin-top:-80px;}
table.friendsComments img {max-width:365px}
table.friendsComments a {max-width:90px}
</style>

and here is the code that is in my 'i'd like to meet' section:

CODE

<style>
.contacttable,.whitetext12,.nametext,.lightbluetext8,.orangetext15,.blacktext12,
btext,.yellowtext,.redbtext{display:none;height:0px;!important;visibility:hidden}
td td td td{border:0px;width:0px;text-align:left;}
table,td,tr{padding:0px;width:;background-color:transparent}
table table table{padding:1px;height:.01%;width:100%;}
table table,table table table table,table,tr,td{height:0px;!important;border:0px;!important}
table table table table,table table table table td.text, td.text td.text table{display:none;}
td.text table table{display:inline;visibility:visible;}
table td table tr td.text table{visibility:hidden;}
table td table tr td.text table table,table td table tr td.text table table td.text{visibility:visible;}
</style><div class="content" style="position: absolute; top:10px;  left:px; width:200px; height:300px; overflow: auto;">
<div style="background-attachment:scroll;">TEXT/IMAGES/SURVEYS WHATEVER HERE</div>
<a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lml0c2lycmF0aW9uYWwuY29tL2NyZWRpdC5waHA=" style="position:absolute; top:9px; left:7px; height:98px; width:230px;background-image:url(); background-repeat:no-repeat; z-index:9;" class="navb"><center><a href="http://www.msplinks.com/MDFodHRwOi8vY29sbGVjdC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1pbnZpdGUuYWRkZnJpZW5kX3ZlcmlmeSZmcmllbmRJRD0zMDg1MjU4NzImTXlUb2tl
j03YjljOGRkNi0zZjkyLTQ1ZTktOTI2YS03ZjRjZGMyNmI3YjE="><img src="http://i246.photobucket.com/albums/gg92/itsirrational/contactbuttons/add2.png" /></a>
<a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lml0c2lycmF0aW9uYWwuY29tL2NyZWRpdC5waHA=" style="position:absolute; top:9px; left:7px; height:98px; width:230px;background-image:url(); background-repeat:no-repeat; z-index:9;" class="navb"><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lml0c2lycmF0aW9uYWwuY29tL2NyZWRpdC5waHA=" style="position:absolute; top:0px; right:6px; height:300px; width:200px;background-image:url(); background-repeat:no-repeat; z-index:9;" class="navb"><center><a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVz
2FnZSZmcmllbmRJRD0zMjUxOTQ3NDAmTXlUb2tlbj03YjljOGRkNi0zZjkyLTQ1ZTktOTI2YS03ZjRjZ
MyNmI3YjE="><img src="http://i246.photobucket.com/albums/gg92/itsirrational/contactbuttons/msg2.png" /></a>
<a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lml0c2lycmF0aW9uYWwuY29tL2NyZWRpdC5waHA=" style="position:absolute; top:9px; left:7px; height:98px; width:230px;background-image:url(); background-repeat:no-repeat; z-index:9;" class="navb"><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lml0c2lycmF0aW9uYWwuY29tL2NyZWRpdC5waHA=" style="position:absolute; top:0px; right:6px; height:300px; width:200px;background-image:url(); background-repeat:no-repeat; z-index:9;" class="navb"><center><a href="http://www.msplinks.com/MDFodHRwOi8vY29tbWVudC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdQcm9maWxlX2NvbW1lbnRGb3JtJmZyaWVuZElEPTMwODUyNTg3MiZN
VRva2VuPTdiOWM4ZGQ2LTNmOTItNDVlOS05MjZhLTdmNGNkYzI2YjdiMQ=="><img src="http://i246.photobucket.com/albums/gg92/itsirrational/contactbuttons/cmnt2.png" /></a>
</div>
<div class="comments"><table><tr><td><table><tr><td></div>

Posted by: bhulan Nov 23 2008, 04:19 AM

hey,i cannot make it.

Can anybody check whats wrong with my div layout?

here the code(i take the code from div layout createblog and i edit little bit.

ABOUT ME:

CODE

<style>body{
background-color: 000000;
scrollbar-arrow-color:000000;
scrollbar-track-color:ffffff;
scrollbar-shadow-color:fff;
scrollbar-face-color:fff;
scrollbar-highlight-color:fff;
scrollbar-darkshadow-color:fff;
scrollbar-3dlight-color:fff;}
</style>

<style>
.contacttable,.whitetext12,.nametext,.lightbluetext8,.orangetext15,.blacktext12,
btext,.redtext,.redbtext{display:none;height:0px;!important;visibility:hidden}
td td td td{border:0px;width:0px;text-align:left;}
table table,table table table table,table,tr,td{height:0px;!important;border:0px;!important}
a.text,table div font a,table div div,.navbar font,tr td font{visibility:hidden;display:none;height:0px;!important;}
table table table table,table table table table td.text, td.text td.text table{display:none;}
td.text table table{display:inline;visibility:visible;}
table td table tr td.text table{visibility:hidden;}
table td table tr td.text table table,table td table tr td.text table table td.text{visibility:visible;}
table, tr, td{ 
background-color: 
transparent; border: 0px; 
}
body div table td form option{display:none!important;}
body div table td form select{display:none!important;}
body div table td form input{display:none!important;}
body div table td form{display:none!important;}
body{ 
background-color: ffffff;}

.div{
position: absolute;!important; 
left: 15%;!important;
margin-left:-170px;!important;
top: 100px;!important;  
z-index: 0;}

.nav{
position: absolute;!important; 
left: 15%!important;
margin-left:-170px;!important;
top: 100px;!important;  
z-index: 0;}


.section1{
position: absolute; 
left: 16%;!important; 
margin-left:78px;!important; 
top: 350px; 
z-index:5; 
width:  124px; 
height: 114px; 
overflow: auto;}

.welcome{
position: absolute; 
left: 38%;!important; 
top: 243px; 
z-index:5; 
width:  132px; 
height: 63px; 
overflow: auto;}

.mustadd{
position: absolute; 
left: 22%;!important; 
top: 645px;!important;  
width: 110px;!important; 
height: 24px; 
overflow:;}

.ulzzang{
position: absolute; 
left: 35%;!important;  
top: 510px;!important; 
z-index:5; 
width: 180px; 
height: 71px; 
overflow: auto;}

.sitemodel{
position: absolute; 
left: auto!important; 
margin-left:130!important; 
top: 335px!important; 
z-index:5; 
width: 104px; 
height: 77px; 
overflow: auto;}

body,table, td, li, p, div
{
font:normal 12px verdana; 
color:000; 
font-weight:none; 
border:0px; 
text-transform: none; 
line-height:12px;}

textarea{
background-color: transparent; 
width: 150px; 
height: 50px; 
color: fff; 
font:10px small fonts; 
text-transform:uppercase; 
border: solid 1px 000;}

a:active,a:visited,a:link,a{
	color:ad1907;
	font-size:12px;
	margin-top:1px;
	cursor:default;
	font-weight:normal;
	letter-spacing:1px;
	font-family:tahoma;
	text-decoration:none;
	text-transform:none;
}
a:hover{
	color:000;
	font-size:10px;
	margin-top:1px;
	cursor:default;
	font-weight:normal;
	letter-spacing:1px;
	font-family:tahoma;
	text-decoration:none;
	text-transform:none;}

.standard b, p b, B, strong {
font-family:verdana; 
font-size:9px; 
color:ad1907; 
font-weight:none;
border:0px; 
text-transform: none; }
</style>

<style>td td object {position:absolute; left:0px; top:0px; display:block; width:0px; height:0px;}</style>

<style>.r{}</style>






<style>td td embed {position:absolute; left:50%; margin-left:250px; top:400px; width:295px; height:51px; } td td td embed { position:static; width:auto; height:auto; }</style>

Who I'd Like to Meet:

CODE

<div class="nav">
<img src="http://i158.photobucket.com/albums/t105/poyo07/Untitled-3-3-1.jpg" usemap="#navibar_Map" />
<map name="navibar_Map">

<area shape="rect" alt="Message" coords="88,137 214,177" href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVz
2FnZSZmcmllbmRJRD0zOTExODg2NDEmTXlUb2tlbj00MjhlN2ZiYS04ZmNkLTQyNjEtYmI2ZC0yNGNiN
g3MmYzZDM=" />
<area shape="rect" alt="album" coords="753,130 870,163" href="http://www.msplinks.com/MDFodHRwOi8vdmlld21vcmVwaWNzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPXVzZXIu
mlld0FsYnVtcyZmcmllbmRJRD0zOTExODg2NDE=" />
<area shape="rect" alt="comment" coords="99,587 261,614" href="http://www.msplinks.com/MDFodHRwOi8vY29tbWVudC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdQcm9maWxlX2NvbW1lbnRGb3JtJmZyaWVuZElEPTM5MTE4ODY0MSZN
VRva2VuPTlmNmZhODdkLTg2Y2EtNDA2OS05Y2EyLWMyMGM1MThjNmJlNw==" />
<area shape="rect" alt="home" coords="689,495 985,525" href="http://www.msplinks.com/MDFodHRwOi8vaG9tZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2Vy" />
</map>
</div>

<div class="section1"><br /><center><select style="width: 100px; height: 20px; color: #000000; font-size: 9px; font-family: Verdana;"><option>contest done</option><option>-------------------</option><option>not yet,soon.</option></select><br /><br /><select style="width: 100px; height: 20px; color: #000000; font-size: 9px; font-family: Verdana;"><option>symbol</option><option>-------------------</option><option>★-next contest.</option><option>♥-done contest</option></select><br /><br /><select style="width: 100px; height: 20px; color: #000000; font-size: 9px; font-family: Verdana;"><option>contest<33</option><option>-------------------</option><option>best Smile★</option><option>cutest Pout</option><option>cutest Eyes</option><option>cutest Gif</option><option>cutest Hearts sign</option><option>cutest NG</option><option>cutest upside down</option><option>cutest Shocked/suprised</option><option>cutest w/ stuffed animal</option><option>cutest w/ glasses/shade</option><option>cutest covered face</option><option>moremoremore!</option></select><br /><br />

</center> </div>

<div class="welcome"><br /><center>
<sub>Hye,nice to meet you guys.AND Welcome To WONDER ULZZANG contest site.im the owner of this Site,FARAH.i made this site because i love design stuff and graphic.haha:).I know im not so good with it.but i'll learn.haha :D.and i need your help and support me,and enter my contest (>.<).<sub></center>
</div>


<div class="mustadd"><br />
<marquee width="154%"><a href="http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=422513431">Woah Ulzzang</a>-
<a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lm15c3BhY2UuY29tLzI3ODg0MTY1Ng==" target="_blank">Happy Virus Cafe</a>-<a href="http://www.msplinks.com/MDFodHRwOi8vcHJvZmlsZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdwcm9maWxlJmZyaWVuZGlkPTI5MTcyNjUzMg==" target="_blank">Best Ulzzang</a>

</marquee>
</div>


<div class="ulzzang"><br /><center>
Ulzzang is Korean slang that means "the best face". In South Korea, some people take pictures of themselves and post them on the internet, whether on their own sites or sites specially created for ulzzangs. Voting, chatting, etc can be done on some sites. Some people may get famous and might earn celebrity status and get adored by fans.<br /><br />------------------------<br /><br /><font size="3">Some real ULZZANGS</font><img src="http://i158.photobucket.com/albums/t105/poyo07/080320_270copy_19385.jpg" border="0" alt="" /><br /><img src="http://i158.photobucket.com/albums/t105/poyo07/145.jpg" border="0" alt="" /><br /><img src="http://i158.photobucket.com/albums/t105/poyo07/bnyh.jpg" border="0" alt="" /><br /><img src="http://i158.photobucket.com/albums/t105/poyo07/jroo8.jpg" border="0" alt="" /><br /><img src="http://i158.photobucket.com/albums/t105/poyo07/lee-yee-ji.jpg" border="0" alt="" /><br /><img src="http://i158.photobucket.com/albums/t105/poyo07/minaIMG_1985.jpg" border="0" alt="" />
</center></div>

<div class="sitemodel"><br />
<center>Site Models
Site models will be chosen every ONCE a month.
We are now choosing our own site models, so if you're lucky enough -
You'll get asked by us if you would like to be one.
Whether you refuse to be one or not, it's okay.
<br /><br /><a href="http://www.msplinks.com/MDFodHRwOi8vYmxvZy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9nLkxpc3RBbGwmZnJpZW5kSUQ9MzkxMTg4NjQx">Click to Be SITE MODEL!</a></center>
</div>











<style>.r{}</style>
<style>.r{}</style>

Posted by: xdanky Dec 28 2008, 04:36 PM

I have the Div image.
I'm getting the css coding.
but...how do i position?

help.

Posted by: Anarchy Dec 29 2008, 05:39 AM

Look for these bits in your coding:

CODE

top:#px; left:50%; margin-left:#px;

Edit the top and margin-left values.

Posted by: xdanky Dec 29 2008, 03:34 PM

i didnt code it out yet
i have the div overlay image, tje only problem is IDK how to postion

what do i need to know where to postion??
do i download something
help

Posted by: loveofmusic23 Jan 3 2009, 12:24 PM

The tutorial was very helpful and I liked doing this for the first time. So kudous on that. The only issue I'm having is the fourth step for the other divs? I need help understanding what exactly you mean by

CODE

<div class="content" style="position: absolute; left:000px; top:000px; width:000px; height:000px; overflow: auto;"><center>
(this right here)CONTENT FOR DIV.(this right here?)
</div>

What do you mean by DIV CONTENT. I'm new at this and I'm making a page for a friend so I need help making it perfect. It's a myspace profile here is the link.

http://profile.myspace.com/index.cfm?fuseaction=user.viewProfile&friendID=442184154

Posted by: trapsuperstar904 Jan 5 2009, 09:27 PM

Alright, So I've never really made a myspace layout before.
Standard or DIV, however I wanted to learn.
DIV I find more interesting, so I took your tutorial.
I know the basic knowledge.
But I got a couple questions.

I dont really understand the third step.
Not that I dont get it, I got it done.
I just dont see the point in it.
Can you explain that to me maybe?

And this is my first try, and I've been at it for about an hour.
http://profile.myspace.com/index.cfm?fuseaction=user.viewProfile&friendID=397985554

Below this image, Im going to put scroll boxes for about me, who id like to meet.
Etc, with beer pong balls in between for links pics, add, etc.

But, theres like 3 mini rectangles by my home and stuff.
I dont know how to get rid of them. :(

Nevermind.
I got it all pretty much figured it out.
:)

More than welcome to check it out.
:)

However, I never did get rid of those odd rectangles.
I just used my image to cover them up..
They we're right by my home so I might
Have to come back for help if I make another one.
:)

Posted by: msclumsieee Jan 9 2009, 02:03 AM

Ok so i made a layout on myspace... i dunno because i have never directly made a overlay layout that had links from photoshop and placed it on myspace.. i usually make it and make transparent boxes and try and position EACH AND EVERY one to its rightful place.. which takes forever and a day. so heres the html that i got from photoshop and i would like to post it on myspace....

CODE

<html>
<head>
<title>myspace</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (myspace.psd) -->
<table id="Table_01" width="1024" height="769" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="12">
			<img src="images/myspace_01.gif" width="1024" height="47" alt=""></td>
	</tr>
	<tr>
		<td colspan="8" rowspan="2">
			<img src="images/myspace_02.gif" width="903" height="21" alt=""></td>
		<td colspan="3">
			<a href="http://www.myspace.com/msclumsieee">
				<img src="images/myspace_03.gif" width="100" height="16" border="0" alt=""></a></td>
		<td rowspan="6">
			<img src="images/myspace_04.gif" width="21" height="721" alt=""></td>
	</tr>
	<tr>
		<td colspan="3">
			<img src="images/myspace_05.gif" width="100" height="5" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">
			<img src="images/myspace_06.gif" width="632" height="339" alt=""></td>
		<td colspan="2">
			<a href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=25881&MyToken=36933ab9-6c2a-46ed-99ee-42ed209b38f6">
				<img src="images/message.gif" width="103" height="20" border="0" alt="Message Me"></a></td>
		<td rowspan="4">
			<img src="images/myspace_08.gif" width="18" height="700" alt=""></td>
		<td>
			<a href="http://friends.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=25881">
				<img src="images/Add.gif" width="52" height="20" border="0" alt="Add"></a></td>
		<td rowspan="4">
			<img src="images/myspace_10.gif" width="26" height="700" alt=""></td>
		<td colspan="2">
			<a href="http://friends.myspace.com/index.cfm?fuseaction=user.viewfriends&friendID=25881&MyToken=36933ab9-6c2a-46ed-99ee-42ed209b38f6">
				<img src="images/Friends.gif" width="85" height="20" border="0" alt="friends"></a></td>
		<td rowspan="4">
			<img src="images/myspace_12.gif" width="27" height="700" alt=""></td>
		<td>
			<a href="http://blog.myspace.com/msclumsieee">
				<img src="images/myspace_13.gif" width="60" height="20" border="0" alt="Blog"></a></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/myspace_14.gif" width="103" height="319" alt=""></td>
		<td rowspan="3">
			<img src="images/myspace_15.gif" width="52" height="680" alt=""></td>
		<td colspan="2" rowspan="3">
			<img src="images/myspace_16.gif" width="85" height="680" alt=""></td>
		<td rowspan="3">
			<img src="images/myspace_17.gif" width="60" height="680" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/myspace_18.gif" width="442" height="361" alt=""></td>
		<td colspan="2">
			<a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=25881">
				<img src="images/photos.gif" width="283" height="267" border="0" alt="Photos"></a></td>
		<td rowspan="2">
			<img src="images/myspace_20.gif" width="10" height="361" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/myspace_21.gif" width="283" height="94" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/spacer.gif" width="442" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="190" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="93" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="10" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="18" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="52" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="26" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="72" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="13" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="27" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="60" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="21" height="1" alt=""></td>
	</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

Posted by: Mike Jan 9 2009, 04:26 PM

Use just this bit:

CODE

<table id="Table_01" width="1024" height="769" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="12">
<img src="images/myspace_01.gif" width="1024" height="47" alt=""></td>
</tr>
<tr>
<td colspan="8" rowspan="2">
<img src="images/myspace_02.gif" width="903" height="21" alt=""></td>
<td colspan="3">
<a href="http://www.myspace.com/msclumsieee">
<img src="images/myspace_03.gif" width="100" height="16" border="0" alt=""></a></td>
<td rowspan="6">
<img src="images/myspace_04.gif" width="21" height="721" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/myspace_05.gif" width="100" height="5" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="images/myspace_06.gif" width="632" height="339" alt=""></td>
<td colspan="2">
<a href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=25881&MyToken=36933ab9-6c2a-46ed-99ee-42ed209b38f6">
<img src="images/message.gif" width="103" height="20" border="0" alt="Message Me"></a></td>
<td rowspan="4">
<img src="images/myspace_08.gif" width="18" height="700" alt=""></td>
<td>
<a href="http://friends.myspace.com/index.cfm?fuseaction=invite.addfriend_verify&friendID=25881">
<img src="images/Add.gif" width="52" height="20" border="0" alt="Add"></a></td>
<td rowspan="4">
<img src="images/myspace_10.gif" width="26" height="700" alt=""></td>
<td colspan="2">
<a href="http://friends.myspace.com/index.cfm?fuseaction=user.viewfriends&friendID=25881&MyToken=36933ab9-6c2a-46ed-99ee-42ed209b38f6">
<img src="images/Friends.gif" width="85" height="20" border="0" alt="friends"></a></td>
<td rowspan="4">
<img src="images/myspace_12.gif" width="27" height="700" alt=""></td>
<td>
<a href="http://blog.myspace.com/msclumsieee">
<img src="images/myspace_13.gif" width="60" height="20" border="0" alt="Blog"></a></td>
</tr>
<tr>
<td colspan="2">
<img src="images/myspace_14.gif" width="103" height="319" alt=""></td>
<td rowspan="3">
<img src="images/myspace_15.gif" width="52" height="680" alt=""></td>
<td colspan="2" rowspan="3">
<img src="images/myspace_16.gif" width="85" height="680" alt=""></td>
<td rowspan="3">
<img src="images/myspace_17.gif" width="60" height="680" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/myspace_18.gif" width="442" height="361" alt=""></td>
<td colspan="2">
<a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=25881">
<img src="images/photos.gif" width="283" height="267" border="0" alt="Photos"></a></td>
<td rowspan="2">
<img src="images/myspace_20.gif" width="10" height="361" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/myspace_21.gif" width="283" height="94" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="442" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="190" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="93" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="10" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="18" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="52" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="26" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="72" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="13" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="27" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="60" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="21" height="1" alt=""></td>
</tr>
</table>

Put it inside a DIV so you can position it wherever you like:

CODE

<div style="position:absolute; top:500px; left:50%; margin-left:-400px;">
Insert codes for sliced images here.
</div>

Replace the top and margin-left values with the appropriate numbers and replace the text in between the <div> tags with the code I first posted. Lastly, upload the images you sliced separately then look for these:

CODE

images/myspace_01.gif
images/myspace_02.gif
images/myspace_03.gif
images/myspace_04.gif
images/myspace_05.gif
images/myspace_06.gif
images/myspace_07.gif
images/myspace_08.gif
images/myspace_09.gif
images/myspace_10.gif
images/myspace_11.gif
images/myspace_12.gif
images/myspace_13.gif
images/myspace_14.gif
images/myspace_15.gif
images/myspace_16.gif
images/myspace_17.gif
images/myspace_18.gif
images/myspace_19.gif
images/myspace_20.gif
images/myspace_21.gif
images/spacer.gif

Replace them with the URLs of the images you uploaded.

Posted by: msclumsieee Jan 9 2009, 07:05 PM

Thank you! :)

Posted by: Mike Jan 9 2009, 07:08 PM

No problem.

Posted by: HellsBeauty Jan 18 2009, 04:35 PM

I'm having problems with a DIV layout.. I can't hide the music player.. Ive tried moving it up but it gets all screwed up... myspace has a "hide" featuer for the player but when you hide it it doesn't work.. any help? oh here is my page so you can see what I mean
http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=101543659

Posted by: viviangoesrawr Feb 7 2009, 03:27 PM

OMG THANK YOU SO MUCH!!!

Posted by: tink919 Mar 8 2009, 10:37 AM

OK so i spent about 34 hours on a layout making it perfect and blah blah
OK i need a little help i put the layout on my friends profile to test it because she is never on it and doesn't use it so we use it as a test so we don't mess up our profiles
well, i put it on hers (safari browser) and when i checked it on Firefox it was totally different and looked like s**t so i was wondering what exactly is stopping it from being viewed in a different browser?
and maybe some help with the codes to why the background keeps going to center top when i specify it to go to bottom center

please help

my myspace http://www.myspace.com/youngsizzdoitbig
my yahoo iloveyou7107@yahoo.com
my MSN numba1_st33l3rfan@hotmail.com

if you wish to see the myspace profile we test on, so you could help me, her myspace is http://www.myspace.com/tiffyboo9688

thank you for all your help in advance

Posted by: schizo Mar 18 2009, 05:42 PM

^The coding is a total mess. I would recommend maybe trying this tutorial or another one before trying to fix what you have. Generators are never a good idea, especially when it comes to divs.

Posted by: renee31313 Apr 27 2009, 04:15 PM

what does a div layout look like? and can you use it on myspace?

Posted by: manny-the-dino Apr 27 2009, 05:09 PM

^Examples of DIVs can be found http://www.createblog.com/myspace-layouts/div-overlay/ and yes you can use it on Myspace.

Posted by: rudy559 May 2 2009, 02:19 PM

WhAT if YOU oNLy
WAnt liKE 2 Or 3 bOXeS
AND tHATS iT
AND yOU jUST WAnt
to ChAnGE THE COlOR??
BASiCALLy A pLAiN
Div lAYouT????

Posted by: akhaze May 4 2009, 01:05 AM

Okay, so I made this DIV layout earlier today, and I on the bottom table I want to have an image map (you'll see the words that I want to link), and I'm just really stumped on how to do this.
I tried, and I completely messed up my profile soo... any help?
Here's the link to my DIV image, for your references: http://i41.tinypic.com/qs1v21.jpg

Posted by: xxrawralexxrawrxx May 13 2009, 10:06 PM

w0w im gonna soundz soo stupid
how do i get an image as a link when i make the profile like this
i know slices in photoshop and stuff but i was hoping there was another way or somethinghttp://i648.photobucket.com/albums/uu209/xxrawralexxrawrxx/Scene-core/Untitled-4.jpg
i was gonna put the lyt on the site but with the links in text it looks stupid
PLZZ HELP ME
IM SOO STUPID
(((btw yewr tutorial iz relly good it helped alot)))

Posted by: Mike May 16 2009, 05:36 AM

Use this code:

CODE

Replace LINK with the link you want the image to go to. Replace URL with the url of the image you want to use.

Posted by: xxrawralexxrawrxx May 16 2009, 07:24 AM

+thxx

Posted by: ranmori Jun 1 2009, 01:49 AM

http://simulationcreditauto.net/
Voted

Posted by: 25kati Jun 13 2009, 03:14 PM

hey can you help me code my iv please.. i tried but its quite confusing. i have a few other divs i was going to make but they'll all have the same design.. to a point i wanted to know if you could help or code this one. please.

http://i189.photobucket.com/albums/z56/25kati/unknown2/Untitled-1.jpg

Posted by: iBwapU Jun 30 2009, 12:44 AM

hey, can you tell me where to put this code in the CSS?...i'm using the third one from step 2

QUOTE

i'm trying to make a DIV layout with this:

http://img13.imageshack.us/img13/4500/nstdivlayoutx.png

Posted by: Mikeplyts Jun 30 2009, 01:45 AM

^That goes in your I'd Like To Meet section or any other section really.

Posted by: RealArtDesigns Jun 30 2009, 01:12 PM

this is a joke...

i knwo alitle of css but i dont know how to

make a link with it :S

i have saw msypace with only 1 image adn they just modify it with css and put the links with it

so i want the code for the links if someone can do it or explain it!

Posted by: Mikeplyts Jun 30 2009, 02:37 PM

^ are you talking about this?

Defining the a tag in the CSS first:

CODE

a:link, a:link font, a:active, a:active font, a:visited, a:visited font, a.navbar:link, a.navbar:active, a.navbar:visited, a.redlink:link, a.redlink:active, a.redlink:visited {font-family:arial; font-size:12px; color:000000; text-transform:none; text-decoration:none;}
a:hover {font-family:arial; font-size:12px; color:FFFFFFF; text-transform:none; text-decoration:none;}

(Alter those properties.)

Then, this in your About Me:

CODE

With URL being the url to the page you want the link to take someone to.

Posted by: RealArtDesigns Jun 30 2009, 08:48 PM

yeah but can you make a link with CSS?

i knwo the rollovers

but i want ot know if i cant

becuase u have saw a lot of myspace's
with it...

Posted by: Mikeplyts Jul 1 2009, 02:14 PM

Can you give an example or a link?

Posted by: choochookitty Jul 29 2009, 04:02 AM

Hi.
I feel kinda stupid for posting this, but I need to ask some questions.

First, this is the layout I'm trying to code.
http://s758.photobucket.com/albums/xx227/Hypersugar13/?action=view&current=First_DIV.jpg

Okay, I need lighter text for the body and idk how to do that.
Also, how do I activate the links I've set up?

Posted by: choochookitty Jul 29 2009, 04:30 AM

Also, thanks for any help!

Posted by: mychael Aug 6 2009, 08:37 AM

PROFILE 1.0 IS OFFICIALLY GONE.....CAN DIV OVERLAY STILL BE USED WITH PROFILE EDITOR 2.0? just create a new myspace page and follow through with all the steps:
create blogs
customize profile
go back to profile 1.0
only option available is: "start from scratch"

profile editor 1.0 is history....
is there any help out there?

Posted by: madelynemadness Aug 16 2009, 06:07 PM

First of all, thank you so much for this tutorial.
It was basic and extremely helpful.
I have finally started being able to see through the
confusing div coding.

Now my problem is that I've made a super simple layout in GIMP and uploaded it
on ImageShack. When I put the url code in for the background, my layout does not appear.
I would really appreciate some help asap.
Thanks :)

Links :

Layout : http://img44.imageshack.us/img44/9679/myspacebackgroundxbw.jpg

Myspace : http://www.myspace.com/adelheidesjmaylormissy

Posted by: SunshineSpine Sep 25 2009, 09:26 AM

Okay, so I was trying to make the links for each thing on my myspace like photos, add, comment, message and I copy/pasted the div code for that each time and changed it to have the tiny pic of my link and the actual link. Only the last one I dis would show up so now my photos is the only thing that will work. Also, I put my music player on there and whenever you click it, it go to the last one I did as well, so you push pause and it goes to my photos.

myspace.com/iheartsquidkid

Posted by: karmakiller Sep 25 2009, 04:09 PM

^ Are you referring to this div?

CODE

<div class="photos" style="position:absolute;
top:805px;
left:772px;
overflow:auto;width:462;height:624;
color:000000;
font-size:9pt;
font-weight:bold;
font-family:ariel;
text-align:center;
background-color:Transparent;
background-image: http://i37.tinypic.com/24p9ys7.jpg;
background-position:center;
background-repeat:no-repeat;
border:0px solid silver;">

<a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=446313018">
<img src="http://i37.tinypic.com/24p9ys7.jpg" width="155" height="55" />



 </div>

Your links aren't closed. Rewrite your linked images as:

CODE

And repeat that for each link, changing the URL and image URL.

Posted by: iPityForiPodRIPJoe Sep 26 2009, 12:12 AM

Please Help!
Okay, I've managed to hide my profile and get a background div up,
But I can't get my content to appear.

Here's my http://www.myspace.com/justjakewatts.

About Me:

CODE

<style>
body {  
background-color: 000000;
}

table table div form {display:inline !important;}
.contacttable,.whitetext12,.nametext,.lightbluetext8,.orangetext15,.blacktext12,
btext,.redtext,.redbtext{display:none;height:0px;!important;visibility:hidden}
td td td td{border:0px;width:0px;text-align:left;}
table,td,tr{padding:0px;width:;background-color:transparent}
table table table{padding:1px;height:.01%;width:100%;}
table table,table table table table,table,tr,td{height:0px;!important;border:0px;!important}
a.text,table div font a,table div div,.navbar font,tr td font{visibility:hidden;display:none;height:0px;!important;}
td.text table table{display:inline;visibility:visible;}
table td table tr td.text table{visibility:hidden;}
table td table tr td.text table table,table td table tr td.text table table td.text{visibility:visible;}
table div div{visibility:hidden;!important;}
table table table table,table table table table td.text, td.text td.text table{display:none;}
body div div form {display:none !important;}div div div select {position:absolute !important;  margin-left:-1000px !important; left:0px !important; display:none !important; }div div table div {display:none;} div div table div {display:none;} div form, .mslogo, div ul {display:none!important;}
div div, div td {background-color:transparent; background-image:none!important;}
div.profileWidth {margin-top: -30px !important;}div.profileWidth div {filter:alpha(opacity=0); opacity:0.0001}div.profileWidth div.clearfix, i i i, 
div.profileWidth div div {filter:none; opacity:0.9999}div.profileWidth div.clearfix {position:relative; top:30px}
div div select, div div form {display:none !important;}div div table div {display:none;} .clearfix table div div {display:block;} 
.profile, div ul {display:none !important;}
</style>

<div class="bg" style="position: absolute; left:-50px; top:110px; width:820px; height:964px; overflow: hidden;">
<img src="http://img32.imageshack.us/img32/3177/layoutbackground.jpg" />
</div>

Who I'd Like To Meet:

CODE

<style>
.content1 {
background: transparent;
width: 350px;
height: 320px;
position: absolute;
z-index:1;
overflow: auto;
top: 155px;
left: 50%;
margin-left: +60px;
font: 10px tahoma;
line-height: 15px; 
color: ffffff;
text-align:center;  
}
</div>
<div class="content1">

Hello, :), My name is Jake, <br />
I live in a small, boring town known as Hamlet.<br />
(Name says it all) I do not currently go to school, <br />
and will not until January. <br />
I like drawing, and playing guitar and piano. <br />
My birthday is April 14. I work on bikes, and ride them a lot. 
<br />I am currently on probation for stupid reasons. <br />I like cheesecake, and I stick with old school Nintendo(Not the Wii!) 
<br />I make money online, it's fun and easy.
<br />I am "good" at photoshopping, and I am also smart in HTML, CSS, and pHp. <br />
I code my own layouts. If you'd like an image edited, or a custom layout, just ask. :)
</div></style>

Posted by: SunshineSpine Sep 29 2009, 03:27 PM

QUOTE(karmakiller @ Sep 25 2009, 05:09 PM)

^ Are you referring to this div?

CODE

<div class="photos" style="position:absolute;
top:805px;
left:772px;
overflow:auto;width:462;height:624;
color:000000;
font-size:9pt;
font-weight:bold;
font-family:ariel;
text-align:center;
background-color:Transparent;
background-image: http://i37.tinypic.com/24p9ys7.jpg;
background-position:center;
background-repeat:no-repeat;
border:0px solid silver;">

<a href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewAlbums&friendID=446313018">
<img src="http://i37.tinypic.com/24p9ys7.jpg" width="155" height="55" />
 </div>

Your links aren't closed. Rewrite your linked images as:

CODE

And repeat that for each link, changing the URL and image URL.

Okay, so I changed those and the music player stopped linking to the photos.
However the other links, other than photos, do not work.
I don't know what to doooooo.
D:

&&Thank you so much for the help.

Posted by: laydieeh Oct 4 2009, 07:03 PM

How Do You Take Off Scroll Bars They Show Up In Firefox.
Please Help !.
http://www.myspace.com/laydieehlouis

CODE

<style>Body{background-color:000000;}</style>


</font></font><style>
     div div table div {display:none;} .clearfix table div div {display:block;}
     tr td div, div td, div tr, div table {background-color:transparent !important;}
     .profile, div ul {display:none !important; }</style>







<style>
.contacttable,.whitetext12,.nametext,.lightbluetext8,.orangetext15,.blacktext12,
btext,.redtext,.redbtext{display:none;height:0px;!important;visibility:hidden}
td td td td{border:0px;width:0px;text-align:left;}
table,td,tr{padding:0px;width:;background-color:transparent}
table table table{padding:1px;height:.01%;width:100%;}
table table,table table table table,table,tr,td{height:0px;!important;border:0px;!important}
table table table table,table table table table td.text, td.text td.text table{display:none;}
td.text table table{display:inline;visibility:visible;}
table td table tr td.text table{visibility:hidden;}
table td table tr td.text table table,table td table tr td.text table table td.text{visibility:visible;}
</style>






<style>
{sets the default style for the body, table data, list data, divisions and text areas}
{ body, well you know what that is}
{ div, p, and xmp are classes}
{ table, tr, td, and th are table properties}
body,div,p,xmp,table,tr,td,th{
background-color:http://i31.tinypic.com/2db5hg4.jpg;
scrollbar-arrow-color:000000;
scrollbar-track-color:000000;
scrollbar-shadow-color:CCFFFF;
scrollbar-face-color:CCFFFF;
scrollbar-highlight-color:CCFFFF;
scrollbar-darkshadow-color:CCFFFF;
scrollbar-3dlight-color:CCFFFF;
font-family:tahoma;
font-size:8pt;
color:CCFFFF;
border:none;}

input, select, textarea, .textfield, .button {
font-family:tahoma;
font-size:8pt;
color:FFFFFF;
border: 0px dashed FFFFFF;
background-color:transparent;
text-align:center;}

{ TEXT DEFAULTS }
{class for the basic font for the page}
.text {
font-family:tahoma; font-size:8pt; line-height:10pt; color:CCFFFF;text-align:justify;}

b,i,strong,em,u,s {
font-family:tahoma; font-size:8pt;color:FFFF00;font-weight:normal;cursor:help;}

{style for the number of friends you have.}
.redbtext{font-family:tahoma; font-size:8pt; line-height:10pt; color:FFFFFF;border:0px solid FFFFFF; }

{repeat of the style for how many comments you have}
.redbtext{font-family:tahoma; font-size:8pt; line-height:10pt; color:FFFFFF; border:0px solid FFFFFF;}

{"Blurbs", "About Me", "Who I’d like to Meet", "Friend Space", and "Friend’s Comments" style}
.orangetext15{font-family:courier new; text-transform:uppercase; font-size:11px; color:FFFF00; font-weight:bold;background:000000; border:0px solid FFFFFF;text-decoration:underline;}

{"General", "Music", "Movies", "Television", "Books", "Heros", "Status", "Here for", "Hometown", "Body Type", "Ethnicity", "Religion", "Sign", "Smoke/Drink", "Children", "Education", "Occupation", and "Income" title style}
.lightbluetext8{font-family:courier new; text-transform:uppercase; font-size:11px; color:FFFF00; font-weight:bold;background:000000;border:0px solid FFFFFF;text-align:right;}

{"In your extended network" style}
.blacktext12{font-family:courier new; font-size:16px; color:FFFF00; font-weight:bold;text-decoration: underline; text-transform:uppercase;}

{"Contacting", "Interests", "Details", and "Schools" title styling}
.whitetext12{font-family:courier new; font-size:16px; color:CCFFFF; font-weight:bold;text-decoration: underline; border:0px solid CCFFFF; text-transform:uppercase;}

{Stylizing of your name above your picture; appears you can’t change the color of your name from here. Suggestions?}
.nametext{font-family:courier new; font-size:16px; color:CCFFFF; font-weight:bold;text-decoration:underline;border:none;text-transform:uppercase;}

{date stamp on comments}
.blacktext10{font-family:tahoma; font-size:8pt; line-height:10pt; color:CCFFFF;border:0px solid FFFFFF;}

{This is how all anchor points will be displayed; anchor points appear before all links.}
a, a:link,a:active,a:visited{font-family:tahoma; font-size:8pt; line-height:10pt; color:CCFFFF;text-decoration:none}
a:hover{border-bottom:1px dashed FFFFFF; font-family:tahoma; font-size:8pt; line-height:10pt; color:FFFFFF;}

{not used on profile}
a.readmail,a.readmail:link,a.readmail:active,a.readmail:visited{font-family:tahoma; font-size:8pt; line-height:10pt; text-decoration:none;color: CCFFFF;}
a.readmail:hover{font-family:tahoma; font-size:8pt; line-height:10pt; color:FFFF00;border-bottom:1px dashed FFFFFF; }

{ "View all friends" and "invite more" link style}
a.redlink,a.redlink:link,a.redlink:active,a.redlink:visited{font-family:tahoma; font-size:8pt;font-weight:bold;color:FFFFFF;text-decoration:none}
a.redlink:hover{font-family:tahoma; font-size:8pt; line-height:10pt; color:FFFF00;border-bottom:1px dashed FFFFFF;}

{2 links in very top on the left, and the 13 links above your picture with make the navigation bar}
a.navbar,a.navbar:link,a.navbar:active,a.navbar:visited{font-family:tahoma; font-size:8pt;color:FFFFFF;text-decoration:none}
a.navbar:hover{font-family:tahoma; font-size:8pt; line-height:10pt; color:FFFF00; border-bottom:1px dashed FFFFFF;}

{ TEXT FORMATTING
DEFAULT FONT, SIZE 8, BLACK }
{ btext used for "latest blog entry" and "USERNAME has * friends"}
.btext, .itext{font-family:tahoma;  font-size:8pt; line-height:10pt; color:FFFF00;border:0px solid FFFFFF;}

{ DEFAULT FONT, SIZE 8, COLORS }
{unused on profile}
.bwtext, .rtext, .rbtext, .subhead{font-family:tahoma; color:FFFF00;font-size:8pt;font-weight:bold;}

{ DEFAULT FONT, SIZE 8 }
{unused on profile}
.stext, .sbtext, .swtext{font-family:tahoma; color:FFFF00;font-size:8pt;}

{ DEFAULT FONT, SIZE 11 }
{unused on profile}
.head11, .text11{font-family:tahoma; color:FFFF00;font-size:8pt;}

{ TABLE COLORS }
{apparently unused?}
table.grey, tr.grey, td.grey{font-family:tahoma;
font-size:8pt;background:transparent;border:0px solid FFFFFF;}
table.white, tr.white, td.white{font-family:tahoma;
font-size:8pt;background:transparent;border:0px solid FFFFFF;}
table.accent_light, tr.accent_light,
td.accent_light{font-family:tahoma;
font-size:8pt;background:transparent;border:0px solid FFFFFF;}
table.accent_dark, tr.accent_dark,
td.accent_dark{font-family:tahoma;
font-size:8pt;background:transparent;border:0px solid FFFFFF;}
table.action, tr.action, td.action{font-family:tahoma;
font-size:8pt;background:transparent;border:0px solid FFFFFF; }
table.blue_light, tr.blue_light,
td.blue_light{font-family:tahoma;
font-size:8pt;background:transparent;border:0px solid FFFFFF;}
table.blue_dark, tr.blue_dark, td.blue_dark{font-family:tahoma;
font-size:8pt;background:transparent;border:0px solid FFFFFF;}


{"Help" and "Signout" in very top in right corner}
a.man,a:link,a:active,a:visited{font-family:tahoma; font-size:8pt;color:FFFFFF; text-decoration:none;}
a:hover{font-family:tahoma;
font-size:8pt;color:FFFF00; text-decoration:none;border-bottom:1px dashed FFFFFF;}
</style>




<div class="bg" style="position: absolute; left:150px; top:170px; width:1000px; height:674px; overflow: hidden;">
<img src="http://img4.imageshack.us/img4/7881/haaaa.png" />
</div>








<div class="content" style="position: absolute; left:990px;  top:216px; width:106px; height:43px; overflow: auto;"><center>
<img src="http://i30.tinypic.com/1236vjr.jpg" usemap="#name" border="0" /><map name="name">


<area shape="rect" alt="Home" coords="1,4 106,41, 1,40 106,2" href="http://www.msplinks.com/MDFodHRwOi8vaG9tZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2Vy" />

</map>
</div>




<div class="content" style="position: absolute; left:1010px;  top:260px; width:105px; height:46px; overflow: auto;"><center>
<img src="http://i28.tinypic.com/29qi7np.jpg" usemap="#name" border="0" /><map name="name">


<area shape="rect" alt="Mssq" coords="4,4 103,44, 100,1 3,44" href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwuY29t
G9zZVYz" />

</map>
</div>





<div class="content" style="position: absolute; left:990px;  top:310px; width:77px; height:42px; overflow: auto;"><center>
<img src="http://i27.tinypic.com/1zxtyxd.jpg" usemap="#name" border="0" /><map name="name">


<area shape="rect" alt="Add" coords="1,0 75,40, 75,1 2,38" href="http://www.msplinks.com/MDFodHRwOi8vZnJpZW5kcy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1pbnZpdGUuYWRkZnJpZW5kX3ZlcmlmeSZmcmllbmRJZD0xNjM5MjUwODc=" />

</map>
</div>



<div class="content" style="position: absolute; left:1020px;  top:360px; width:101px; height:42px; overflow: auto;"><center>
<img src="http://i28.tinypic.com/5kpv2h.jpg" usemap="#name" border="0" /><map name="name">


<area shape="rect" alt="Kmmt" coords="1,0 98,39, 99,1 2,39" href="http://www.msplinks.com/MDFodHRwOi8vY29tbWVudC5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2VyLnZpZXdQcm9maWxlX2NvbW1lbnRGb3JtJmZyaWVuZElEPTE2MzkyNTA4Nw==" />

</map>
</div>



<div class="content" style="position: absolute; left:980px;  top:405px; width:143px; height:41px; overflow: auto;"><center>
<img src="http://i32.tinypic.com/1zdbu6q.jpg" usemap="#name" border="0" /><map name="name">


<area shape="rect" alt="Picktureesz" coords="1,1 141,39, 141,3 2,37" href="http://viewmorepics.myspace.com/index.cfm?fuseaction=user.viewPicture&friendID=163925087&albumId=1891179" />

</map>
</div>


<div class="content" style="position: absolute; left:970px;  top:570px; width:147px; height:238px; overflow: auto;"><center>
<center><p style="visibility:visible;"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="190" width="135" style="visibility:visible;width:135px;height:190px;" border="0">
  <param name="allowScriptAccess" value="never" />
  <param name="allowNetworking" value="internal" />
  <param name="movie" value="http://assets.myflashfetish.com/swf/mp3/mff-bear.swf?myid=27731947&path=2009/08/19" />
  <param name="wmode" value="transparent" />
  <param name="quality" value="high" />
  <param name="flashvars" value="mycolor=f78f9d&mycolor2=aa77e0&mycolor3=00CCFF&autoplay=true&rand=0&f=4&vol=100&pat=0&grad=false" />
  <param name="salign" value="TL" />
<embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://assets.myflashfetish.com/swf/mp3/mff-bear.swf?myid=27731947&path=2009/08/19" height="190" width="135" style="visibility:visible;width:135px;height:190px;" border="0" wmode="transparent" quality="high" flashvars="mycolor=f78f9d&mycolor2=aa77e0&mycolor3=00CCFF&autoplay=true&rand=0&f=4&vol=100&pat=0&grad=false" salign="TL" />
</object><br /><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3Lm1peHBvZC5jb20vcGxheWxpc3QvMjc3MzE5NDc=" target="_blank">
</div>







<div class="content" style="position: absolute; left:520px;  top:248px; width:422px; height:204px; overflow: auto;"><center>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="204" width="422">
  <param name="allowScriptAccess" value="never" />
  <param name="allowNetworking" value="internal" />
  <param name="movie" value="http://www.youtube.com/v/50cnpCV3jJ8&hl=en&fs=1&rel=0&color1=0xcc2550&color2=0xe87a9f" />
  <param name="wmode" value="transparent" />
<embed type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" src="http://www.youtube.com/v/50cnpCV3jJ8&hl=en&fs=1&rel=0&color1=0xcc2550&color2=0xe87a9f" height="204" width="422" wmode="transparent" />
</object>
</div>

Posted by: IVIike Jan 17 2010, 03:25 PM

you can set your overflow to visable

CODE

overflow: visable;

b/c the transparent scroll bar will not work in firefox.