[HolyMan28]

I've been playing with a myspace layout.

Here's my page: http://www.myspace.com/holyman13

Problem: The "add", "home" etc links don't work. Div alignment messed up possibly?

My code:

<style>body{
background-color:000000;
background-image:url();
background-position:top left;
background-repeat:repeat;
background-attachment:scroll; }

.background1{
position: absolute;
left: 50%;
margin-left:-400px;
padding-bottom:0px;
top: 100px;}

.background2{
position: absolute;
left: 50%;
margin-left:-400px;
padding-bottom:0px;
top: 442px;}

.section1{
position: absolute;
left: 50%;
margin-left:70px;
top: 340px;
width: 210px;
height: 250px;
overflow: auto;
text-align:center;}

.section2{
position: absolute;
left: 50%;
margin-left:0px;
top: 500px;
width: 100px;
height: 100px;
overflow: hidden;
text-align:left;}

.section3{
position: absolute;
left: 50%;
margin-left:0px;
top: 600px;
width: 250px;
height: 50px;
overflow: hidden;
text-align:center;}

.section4{
position: absolute;
left: 0%;
margin-left:304px;
top: 280px;
width: 150px;
height: 100px;
overflow: hidden;
text-align:center;}


.section5{
position: absolute;
left: 0%;
margin-left:280px;
top: 230px;
width: 200px;
height: 100px;
overflow: hidden;
text-align:center;}

.nav1{
background-color:transparent;
position:absolute;
left: 50%;
margin-left:-260px;
top:420px;}

.add{
width: 61px;
height:41px;
background-COLOR:transparent;
background: url(http://cbimg6.com/la.../02/33866ad.png) top left no-repeat;
display: block;}

.add:hover{
background-position: bottom left;}

.nav2{
background-color:transparent;
position:absolute;
left: 50%;
margin-left:-231px;
top:510px;}

.msg{
width: 70px;
height:48px;
background-COLOR:transparent;
background: url(http://cbimg6.com/la.../02/33866ae.png) top left no-repeat;
display: block;}

.msg:hover{
background-position: bottom left;}

.nav3{
background-color:transparent;
position:absolute;
left: 50%;
margin-left:23px;
top:435px;}

.nav4{
background-color:transparent;
position:absolute;
left: 50%;
margin-left:-323px;
top:463px;}

.home{
width: 75px;
height:39px;
background-COLOR:transparent;
background: url(http://cbimg6.com/la.../02/33866af.png) top left no-repeat;
display: block;}

.home:hover{
background-position: bottom left;}


.nav5{
background-color:transparent;
position:absolute;
left: 50%;
margin-left:-290px;
top:547px;}

.pics{
width: 69px;
height:47px;
background-COLOR:transparent;
background: url(http://cbimg6.com/la.../02/33866ag.png) top left no-repeat;
display: block;}

.pics:hover{
background-position: bottom left;}

.nav6{
background-color:transparent;
position:absolute;
left: 50%;
margin-left:-255px;
top:605px;}

.comment{
width: 84px;
height:38px;
background-COLOR:transparent;
background: url(http://cbimg6.com/la.../02/33866ah.png) top left no-repeat;
display: block;}

.comment:hover{
background-position: bottom left;}


.nav7{
background-color:transparent;
position:absolute;
left: 50%;
margin-left:-175px;
top:580px;}

.blog{
width: 68px;
height:48px;
background-COLOR:transparent;
background: url(http://cbimg6.com/la.../02/33866ai.png) top left no-repeat;
display: block;}

.blog:hover{
background-position: bottom left;}


div{
font:9px georgia;
color:969696;
font-weight:none;
border:0px;
text-transform: none;
line-height:20px;}


a:active,a:visited,a:link,a{
color:ffffff;
font-size:9px;
line-height:20px;
cursor:default;
font-weight:normal;
letter-spacing:0px;
font-family:arial;
text-decoration:none;
text-transform:none;}

a:hover{
color:969696;
font-size:9px;
line-height:20px;
cursor:default;
font-weight:normal;
letter-spacing:0px;
font-family:arial;
text-decoration:none;
text-transform:none;}

b{color:ffffff; text-transform:uppercase;}
i{color:ddddde; font-style:italic;}
u{text-decoration:none; border-bottom:1px dotted; border-color:ffffff;}


table table div form {display:inline !important;}
.contacttable,.whitetext12,.nametext,.lightbluetext8,.orangetext15,.blacktext12,.btext,.redtext,.red
btext{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;}td td embed, td td embed, td td object{position:absolute;top:0px;right:0px;width:45px;}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="background1">
<img src="http://cbimg6.com/la...02/33866aa.png" usemap="#poe" border="0" /><map name="poe">
<area shape="rect" coords="476,168 566,176" href="http://www.msplinks....ljdGlvbi5jb20=" /></div>

<div class="background2">
<img src="http://cbimg6.com/la...02/33866ab.png" /></div>

<div style="position:absolute;left:0px;top:0px;"><a href="http://www.msplinks....pb24uY29t"><img src="http://cbimg6.com/la...02/33866ac.gif" border="0" /></a></div>

<div class="section1">
I'm Jordan, and I don't belong here in a place where everyone tries so hard to fit in. I have an amazing life, because the love of my life is in it. My life is filled with [bleep] I probably won't tell you. I over analyze everything, and put myself into other people's shoes so well it scares me, <i>even if you don't think I do/can</i>. I hate when people care about things that don't matter. I hate when I get sad/worried/jealous when I analyze, because it's probably alright. I love change, and hate stability. I'm different than you, and I'm okay with that, because I'm <b>better</b>, and I know it.</div>

<div class="section2">
Name: Jordan<br />
Age: 16<br />
sn: slaveaids<br />
Status: Taken <br />by <b>devin</b></div>

<div class="section3">
Currently playing <i>Kids In Love</i></div>

<div class="section4">
<a href="http://viewmorepics....=51331045"><img src="http://c4.ac-images....953bea691b.jpg" style="opacity:0.4;filter:alpha(opacity=90)" />
</a></div>

<div class="section5">
<i>To the world you might be one person, <br />but to me you might be the world.</i>

<div class="nav1">
<a href="http://www.msplinks....mllbmRfdmVyaWZ5
JmZyaWVuZElEPTQyNzQ2ODQy" class="add" target="_self"></a>
</div>


<div class="nav2">
<a href="http://www.msplinks....SZmcmllbmRJRD00
Mjc0Njg0MiZNeVRva2VuPTYwMDczYWY1LWU5MjktNGM3YS1iMzU3LTNmMWI2ZGEwYmJmYg==" class="msg" target="_self"></a>
</div>

<div class="nav3">
<a href="http://www.msplinks....lEPTQyNzQ2ODQy" class="block" target="_self"></a>
</div>

<div class="nav4">
<a href="http://www.msplinks....FjdGlvbj11c2Vy" class="home" target="_self"></a>
</div>


<div class="nav5">
<a href="http://viewmorepics....endID=42746842" class="pics" target="_self"></a>
</div>


<div class="nav6">
<a href="http://www.msplinks....W49MjQ5YTQ2MjIt
YWQ0Yi00YjZiLWExMWUtZjI4N2YzYmUzZjIw" class="comment" target="_self"></a>
</div>


<div class="nav7">
<a href="http://www.msplinks....Q9NDI3NDY4NDI=" class="blog" target="_self"></a>
</div>




It seems like the divs should be set where they need to be... any help is fully appreciated.

Edited by HolyMan28, 16 March 2009 - 02:09 PM.

[Advertisements]

I think you'd be better off mapping the image.

Example where you can replace the link****.com with the URLs you want to link to:

<div class="background2">
<MAP NAME="links">
	<AREA SHAPE="RECT" COORDS="77,27,145,52" HREF="linkhome.com" TITLE="" />
	<AREA SHAPE="RECT" COORDS="172,68,236,107" HREF="linkmsg.com" TITLE="" />
	<AREA SHAPE="RECT" COORDS="115,110,170,147" HREF="linkpics.com" TITLE="" />
	<AREA SHAPE="RECT" COORDS="230,138,290,184" HREF="linkblog.com" TITLE="" />
	<AREA SHAPE="RECT" COORDS="149,175,224,200" HREF="linkcmnt.com" TITLE="" />
</MAP>
<IMG SRC="http://cbimg6.com/layouts/09/02/33866ab.png" USEMAP="#links" />
</div>

Hope that helps.

[Metallica]

I think you'd be better off mapping the image.

Example where you can replace the link****.com with the URLs you want to link to:

<div class="background2">
<MAP NAME="links">
	<AREA SHAPE="RECT" COORDS="77,27,145,52" HREF="linkhome.com" TITLE="" />
	<AREA SHAPE="RECT" COORDS="172,68,236,107" HREF="linkmsg.com" TITLE="" />
	<AREA SHAPE="RECT" COORDS="115,110,170,147" HREF="linkpics.com" TITLE="" />
	<AREA SHAPE="RECT" COORDS="230,138,290,184" HREF="linkblog.com" TITLE="" />
	<AREA SHAPE="RECT" COORDS="149,175,224,200" HREF="linkcmnt.com" TITLE="" />
</MAP>
<IMG SRC="http://cbimg6.com/layouts/09/02/33866ab.png" USEMAP="#links" />
</div>

Hope that helps.

[HolyMan28]

Thanks quite a bit. Worked perfectly.

[Metallica]

My pleasure.

[Major Payne]

Add link wasn't working for me in Firefox. All others OK it seems. Might have to re-map that one.

[HolyMan28]

Ah you're right... looking at the code there's no mapping for it. I'll add it in :]. Thanks for that.

[Metallica]

It's in the other picture. I missed that.

[HolyMan28]

It's fine. Do you mind writing it up real quickly though? I've been self-learning this stuff for the last half an hour [I only know Java .], but I'm not really getting anywhere.

[Metallica]

<div class="background1">
<map name="poe">
<area shape="rect" coords="476,168 566,176" href="http://www.msplinks.com/MDFodHRwOi8vYXRvbWljYWZmbGljdGlvbi5jb20=" />
<area shape="rect" coords="143,326,202,341" HREF="linkadd.com" />
</map>
<img src="http://cbimg6.com/layouts/09/02/33866aa.png" usemap="#poe" border="0" />
</div>

See how that works out. We may have to add a bit of code for the bottom of the "add" word, but maybe this is enough.