Making a DIV Overlay Layout, Step by step Options

[xxrawralexxrawrx...]

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 somethinguggh click to see how it looks on muhh profile
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)))

[Mickey]

Use this code:

CODE

<a href="LINK"><img src="URL" alt="" /></a>

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

[xxrawralexxrawrx...]

+thxx

[Mickey]

No problem.

[ranmori]

simulation credit auto

Voted

[25kati]

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/25k.../Untitled-1.jpg

[iBwapU]

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

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

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

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

[Mikeplyts]

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

[Mickey]

That doesn't go in the CSS section because that's HTML. It can go in a section with the CSS, but it's not meant to go inside <style> tags.

[RealArtDesigns]

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!

[Mikeplyts]

^ 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

<a href="URL">Text</a>

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

[RealArtDesigns]

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

[Mikeplyts]

Can you give an example or a link?

[choochookitty]

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/H...t=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?

[choochookitty]

Also, thanks for any help!

[mychael]

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?

[Mickey]

Mate, stick to your topic. You're basically asking the same question.

[xxxx]

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/mysp...ckgroundxbw.jpg

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

[SunshineSpine]

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

[karmakiller]

^ 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

<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"></a>

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

[iPityForiPodRIPJ...]

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

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>

[SunshineSpine]

^ 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

<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"></a>

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.

[laydieeh]

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>

[IVIike]

you can set your overflow to visable

CODE

overflow: visable;

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

[Mickey]

One, visible is spelled with an i. Two, I'm pretty sure that makes it show. It should be set to hidden instead.