Making a DIV Overlay Layout, Step by step Options

[leib92]

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

[MzYennie]

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?fusea...iendid=69733435

[schizo]

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.

This script 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.

[dsinc]

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?fusea...endid=390345245

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

[DespisedandBelov...]

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

[schizo]

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.

[DespisedandBelov...]

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

[schizo]

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 here that will explain.

[DespisedandBelov...]

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

[JazzyCullenzWTF]

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? ):

[xstartemple]

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

[LoveLikeRain]

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

[schizo]

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.

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

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.

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.

[taz20]

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

Attached File(s)

 OVERLAY.jpg ( 114.79K ) Number of downloads: 9

 

[schizo]

^ You need to use an image map. I have a tutorial on how to do that here.

[taz20]

Thank You!!!

[XXXnunu]

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

Reason for edit: don't forget to add codeboxes, dear :) -nat

[schizo]

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 here that's slightly different. I don't know if it will help, but you could try.

[dokidoki]

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.

[Mickey]

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.

[Fitznblend]

^ You need to use an image map. I have a tutorial on how to do that here.

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.

[Mickey]

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.

[Fitznblend]

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

Thanks

[GabyArtz]

kool

[bhulan]

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!