Log In · Register

 
Rollover Help, two .gif images , multiple buttons
KillingHours
post Aug 22 2008, 09:45 AM
Post #1


Newbie
*

Group: Member
Posts: 2
Joined: Aug 2008
Member No: 679,334



Hello everyone.

I'm new to creating a div layout but like most of y'all... i'm tired of having the "original" look of myspace and want something totally different than anyone else. But i've run into a snag. I'm trying to make a rollover nav for my page and can't seem to get past this one point. I'm sure it's something small that i'm missing but I need a fresh pair of peepers to gander at it for me. Here's what I'm trying to do ... and what i've got.


I'm trying to put buttons underneath my top banner in line from left to right. These buttons I want to also be rollovers as to give some perspective with the user hovers over them. So I've got my home button up and running perfect using this code:


Myspace Page:
http://www.myspace.com/killinghours




CODE
.home{position: absolute; left: 50%;
top: 190px;
margin-left: -400px;
width:150;
height:39;
background-color:transparent;
background-image:url("http://www.sclindow.net/s-mysp/button-home.gif");
background-repeat:no-repeat;
z-index: 2;
}

.home:hover{position: absolute; left: 50%;
top: 190px;
margin-left: -400px;
width:150;
height:39;
background-color:transparent;
background-image:url("http://www.sclindow.net/s-mysp/button-home-hover.gif");
background-repeat:no-repeat;
z-index: 2;
}



And this for the html.

CODE
<div style="position:abosolute;">
<a class="home" href="http://www.msplinks.com/MDFodHRwOi8vaG9tZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2Vy">
</div>



Now that it's up and running I want to add onto that and put a new button to the right of the home button and lets say it's "comment". So I add this code just below the ".home".

CODE
.commnet{position: absolute; left: 50%;
top: 190px;
margin-left: -250px;
width:150;
height:39;
background-color:transparent;
background-image:url("http://www.sclindow.net/s-mysp/button-home.gif");
background-repeat:no-repeat;
z-index: 3;
}

.comment:hover{position: absolute; left: 50%;
top: 190px;
margin-left: -250px;
width:150;
height:39;
background-color:transparent;
background-image:url("http://www.sclindow.net/s-mysp/button-home-hover.gif");
background-repeat:no-repeat;
z-index: 3;
}


(Yes I know the images are the same... i'm using it for placement.)

and obviously the corresponding html

ABOUT ME:
CODE
<div style="position:abosolute;">
<a class="comment" href="http://www.msplinks.com/MDFodHRwOi8vaG9tZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2Vy">
</div>


So here's the final product:

CODE
.home{position: absolute; left: 50%;
top: 190px;
margin-left: -400px;
width:150;
height:39;
background-color:transparent;
background-image:url("http://www.sclindow.net/s-mysp/button-home.gif");
background-repeat:no-repeat;
z-index: 2;
}

.home:hover{position: absolute; left: 50%;
top: 190px;
margin-left: -400px;
width:150;
height:39;
background-color:transparent;
background-image:url("http://www.sclindow.net/s-mysp/button-home-hover.gif");
background-repeat:no-repeat;
z-index: 2;
}



.commnet{position: absolute; left: 50%;
top: 190px;
margin-left: -250px;
width:150;
height:39;
background-color:transparent;
background-image:url("http://www.sclindow.net/s-mysp/button-home.gif");
background-repeat:no-repeat;
z-index: 3;
}

.comment:hover{position: absolute; left: 50%;
top: 190px;
margin-left: -250px;
width:150;
height:39;
background-color:transparent;
background-image:url("http://www.sclindow.net/s-mysp/button-home-hover.gif");
background-repeat:no-repeat;
z-index: 3;
}



I'D LIKE TO MEET:
CODE
<div style="position:abosolute;">
<a class="home" href="http://www.msplinks.com/MDFodHRwOi8vaG9tZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2Vy">
</div>

<div style="position:abosolute;">
<a class="comment" href="http://www.msplinks.com/MDFodHRwOi8vaG9tZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2Vy">
</div>



The problem is that the first button shows up just fine... however the second does not. I'm not sure why the second button does not show up. If anyone could give me a little nudge in the right direction I would surely appreciate it. Thanks.
 
 
Start new topic
Replies
KillingHours
post Aug 22 2008, 01:02 PM
Post #2


Newbie
*

Group: Member
Posts: 2
Joined: Aug 2008
Member No: 679,334



Wow... don't I feel like a retard... thanks for the fresh eyes. :P
 

Posts in this topic


Closed TopicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members: