Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

Can't figure this out..


  • Please log in to reply

#1
HolyMan28

HolyMan28

    New Member

  • Member
  • Pip
  • 4 posts
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.

  • 0

Advertisements


#2
Metallica

Metallica

    Spyware Veteran

  • GeekU Moderator
  • 31,671 posts
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. :)
  • 0

#3
HolyMan28

HolyMan28

    New Member

  • Topic Starter
  • Member
  • Pip
  • 4 posts
Thanks quite a bit. Worked perfectly.
  • 0

#4
Metallica

Metallica

    Spyware Veteran

  • GeekU Moderator
  • 31,671 posts
My pleasure. :)
  • 0

#5
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
Add link wasn't working for me in Firefox. All others OK it seems. Might have to re-map that one.
  • 0

#6
HolyMan28

HolyMan28

    New Member

  • Topic Starter
  • Member
  • Pip
  • 4 posts
Ah you're right... looking at the code there's no mapping for it. I'll add it in :]. Thanks for that.
  • 0

#7
Metallica

Metallica

    Spyware Veteran

  • GeekU Moderator
  • 31,671 posts
It's in the other picture. I missed that. :)
  • 0

#8
HolyMan28

HolyMan28

    New Member

  • Topic Starter
  • Member
  • Pip
  • 4 posts
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.
  • 0

#9
Metallica

Metallica

    Spyware Veteran

  • GeekU Moderator
  • 31,671 posts
<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. :)
  • 0






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP