Making a DIV Overlay Layout, Step by step Options

[*This Confession*]

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

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

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

This post has been edited by micron: May 2 2008, 04:13 AM

[*Intercourse.*]

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?fusea...cc-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

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

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

myspace


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?fusea...a1-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.