Log In · Register

 
Rollovers wont roll
ZeT0
post Sep 6 2009, 04:05 PM
Post #1


Senior Member
****

Group: Member
Posts: 253
Joined: Jul 2009
Member No: 739,898



As far as I can see, everything is done correctly, they're EXACTLY on top of one another, the opacity thing just doesn't work.
It's stays the same. :\

CODE
<style>
.profileWidth table { margin-bottom:890px; width:800px; }
.rail { display:none; }
.gap {
background:url() top left no-repeat;
width:900px; height:1150px;
position:absolute; top:0; left:50%;
margin:0px 0 -400px -950px;
</style>

<div class="gap"></div>

<style type="text/css">

.orangetext15 {display: none;}
.whitetext12 {display: none;}

table table div embed, table table div object {position:relative; z-index:9;}

table, tr, td{
background-color:transparent;
border-style:none;
}

body {
background-color: 000000;
background-image:url(http://img35.imageshack.us/img35/1557/backgroundvs.jpg);
background-position: top center;
background-repeat: no-repeat;
background-attachment: scroll;
}

table table table table, table table table td{
background-image:none;
background-color:transparent;
}

body, div, p, strong, td, .text, .blacktext10, .blacktext12, a.searchlinkSmall, a.searchlinkSmall:link, a.searchlinkSmall:visited{
color:FFFFFF;
font-size:9pt;
line-height: 10pt;
font-weight:normal;
font-style:normal;
text-decoration:none;
text-transform:none;
font-family:Helvetica Narrow, sans-serif;
}

strong, .lightbluetext8, .btext, .redtext, .redbtext{
color:666666;
font-size:9pt;
font-weight:normal;
font-style:normal;
text-decoration:none;
text-transform:none;
font-family:Helvetica Narrow, sans-serif;
}

a font, a:link, a:visited, a.navbar, a.navbar:link, a.navbar:visited, a.man, a.man:link, a.man:visited, a.man font, a.redlink, a.redlink:visited{
color:FFFFFF;
font-size:9pt;
font-weight:normal;
font-style:normal;
text-decoration:none ;
text-transform:none;
font-family:Helvetica Narrow, sans-serif;
}

a {
color: FFFFFF !important;
font-family: Arial !important;
}

a:hover {
color: 666666 !important;
font-family: Arial !important;
}

a:hover, a:hover font, a:active, a.navbar:hover, a.navbar:active, a.man:hover, a.man:active, a.man:hover font, a.searchlinkSmall:hover, a.searchlinkSmall:active, a.redlink:hover, a.redlink:hover{
color:666666;
font-size:9pt;
font-weight:normal;
font-style:normal;
text-decoration:normal ;
text-transform:none;
font-family:Helvetica Narrow, sans-serif;
}

table table table table, div table table table{
border-style:none;
}

.topbanner {position:absolute; left:50%; top:0px; margin-left:-437px; _margin-left:###px; width:879; height:1069px; z-index:1;}

.topbannerhover {position:absolute; top:1031px; left:50%; margin-left:-437px; _margin-left:###px; width:879px; height:65px; z-index:1;}

div.topbanner a:hover{
border-top: none;
opacity: 0.0;
filter: alpha(opacity=0);
width: 0px;
height: 0px;
z-index:1;
}

</style>

<div class="topbanner">
<img src="http://i578.photobucket.com/albums/ss224/zet088/Header_01.png" /><br>
<img src="http://i578.photobucket.com/albums/ss224/zet088/Header_02.png" /><br>
</div>

<div class="topbannerhover">
<img src="http://i578.photobucket.com/albums/ss224/zet088/ROLLOVER_01.png" /><img src="http://i578.photobucket.com/albums/ss224/zet088/ROLLOVER_02.png" /<img src="http://i578.photobucket.com/albums/ss224/zet088/ROLLOVER_03.png" /<img src="http://i578.photobucket.com/albums/ss224/zet088/ROLLOVER_04.png" />
</div>


I hope someone can help! D:
 
 
Start new topic
Replies (1 - 8)
Mickey
post Sep 6 2009, 04:17 PM
Post #2


Treasure Pleasure
********

Group: Head Staff
Posts: 11,193
Joined: Oct 2005
Member No: 281,127



It works. There are just two problems: first, the z-indexs make it so that the rollover images go above the links; second, there are no links so the hover function doesn't end up working. Look for this set of codes:

CODE
.topbanner {position:absolute; left:50%; top:0px; margin-left:-437px; _margin-left:###px; width:879; height:1069px; z-index:1;}

.topbannerhover {position:absolute; top:1031px; left:50%; margin-left:-437px; _margin-left:###px; width:879px; height:65px; z-index:1;}

div.topbanner a:hover{
border-top: none;
opacity: 0.0;
filter: alpha(opacity=0);
width: 0px;
height: 0px;
z-index:1;
}

Replace it with this:

CODE
.topbanner {position:absolute; left:50%; top:0px; margin-left:-437px; _margin-left:###px; width:879; height:1069px; z-index:2;}

.topbannerhover {position:absolute; top:1031px; left:50%; margin-left:-437px; _margin-left:###px; width:879px; height:65px; z-index:1;}

div.topbanner a:hover{
border-top: none;
opacity: 0.0;
filter: alpha(opacity=0);
width: 0px;
height: 0px;
z-index:2;
}

Then you need to set up the links using <a> tags inside the "topbanner" DIV, like this:

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

This means you'll probably need to slice up the image into small links since you're using one whole image for the navigation.
 
ZeT0
post Sep 6 2009, 04:27 PM
Post #3


Senior Member
****

Group: Member
Posts: 253
Joined: Jul 2009
Member No: 739,898



I changed everything like you said to.

CODE
<style>
.profileWidth table { margin-bottom:890px; width:800px; }
.rail { display:none; }
.gap {
background:url() top left no-repeat;
width:900px; height:1150px;
position:absolute; top:0; left:50%;
margin:0px 0 -400px -950px;
</style>

<div class="gap"></div>

<style type="text/css">

.orangetext15 {display: none;}
.whitetext12 {display: none;}

table table div embed, table table div object {position:relative; z-index:9;}

table, tr, td{
background-color:transparent;
border-style:none;
}

body {
background-color: 000000;
background-image:url(http://img35.imageshack.us/img35/1557/backgroundvs.jpg);
background-position: top center;
background-repeat: no-repeat;
background-attachment: scroll;
}

table table table table, table table table td{
background-image:none;
background-color:transparent;
}

body, div, p, strong, td, .text, .blacktext10, .blacktext12, a.searchlinkSmall, a.searchlinkSmall:link, a.searchlinkSmall:visited{
color:FFFFFF;
font-size:9pt;
line-height: 10pt;
font-weight:normal;
font-style:normal;
text-decoration:none;
text-transform:none;
font-family:Helvetica Narrow, sans-serif;
}

strong, .lightbluetext8, .btext, .redtext, .redbtext{
color:666666;
font-size:9pt;
font-weight:normal;
font-style:normal;
text-decoration:none;
text-transform:none;
font-family:Helvetica Narrow, sans-serif;
}

a font, a:link, a:visited, a.navbar, a.navbar:link, a.navbar:visited, a.man, a.man:link, a.man:visited, a.man font, a.redlink, a.redlink:visited{
color:FFFFFF;
font-size:9pt;
font-weight:normal;
font-style:normal;
text-decoration:none ;
text-transform:none;
font-family:Helvetica Narrow, sans-serif;
}

a {
color: FFFFFF !important;
font-family: Arial !important;
}

a:hover {
color: 666666 !important;
font-family: Arial !important;
}

a:hover, a:hover font, a:active, a.navbar:hover, a.navbar:active, a.man:hover, a.man:active, a.man:hover font, a.searchlinkSmall:hover, a.searchlinkSmall:active, a.redlink:hover, a.redlink:hover{
color:666666;
font-size:9pt;
font-weight:normal;
font-style:normal;
text-decoration:normal ;
text-transform:none;
font-family:Helvetica Narrow, sans-serif;
}

table table table table, div table table table{
border-style:none;
}

.topbanner {position:absolute; left:50%; top:0px; margin-left:-437px; _margin-left:###px; width:879; height:1069px; z-index:1;}

.topbannerhover {position:absolute; top:1031px; left:50%; margin-left:-437px; _margin-left:###px; width:879px; height:65px; z-index:1;}

div.topbanner a:hover{
border-top: none;
opacity: 0.0;
filter: alpha(opacity=0);
width: 0px;
height: 0px;
z-index:2;
}

</style>

<div class="topbanner">
<img src="http://i578.photobucket.com/albums/ss224/zet088/Header_01.png" /><br>
<img src="http://i578.photobucket.com/albums/ss224/zet088/Header_02.png" /><br>
</div>

<div class="topbannerhover">
<a href="www.google.com"><img src="http://i578.photobucket.com/albums/ss224/zet088/ROLLOVER_01.png" alt="" /></a><a href=" www.google.com"><img src="http://i578.photobucket.com/albums/ss224/zet088/ROLLOVER_02.png" alt="" /></a><a href=" www.google.com"><img src="http://i578.photobucket.com/albums/ss224/zet088/ROLLOVER_03.png" alt="" /></a><a href=" www.google.com"><img src="http://i578.photobucket.com/albums/ss224/zet088/ROLLOVER_04.png" alt="" /></a>
</div>


But it still doesn't work.
When I took the links out of the :

CODE
<div class="topbannerhover">


And put them into :

CODE
<div class="topbanner">


When I hovered the links, they flashed away, but they were UNDER where they were supposed to be.
Thanks again.
 
ZeT0
post Sep 6 2009, 05:16 PM
Post #4


Senior Member
****

Group: Member
Posts: 253
Joined: Jul 2009
Member No: 739,898



Okay, so I've done that aswell, and it's still not working.

CODE
<style>
.profileWidth table { margin-bottom:890px; width:800px; }
.rail { display:none; }
.gap {
background:url() top left no-repeat;
width:900px; height:1150px;
position:absolute; top:0; left:50%;
margin:0px 0 -400px -950px;
</style>

<div class="gap"></div>

<style type="text/css">

.orangetext15 {display: none;}
.whitetext12 {display: none;}

table table div embed, table table div object {position:relative; z-index:9;}

table, tr, td{
background-color:transparent;
border-style:none;
}

body {
background-color: 000000;
background-image:url(http://img35.imageshack.us/img35/1557/backgroundvs.jpg);
background-position: top center;
background-repeat: no-repeat;
background-attachment: scroll;
}

table table table table, table table table td{
background-image:none;
background-color:transparent;
}

body, div, p, strong, td, .text, .blacktext10, .blacktext12, a.searchlinkSmall, a.searchlinkSmall:link, a.searchlinkSmall:visited{
color:FFFFFF;
font-size:9pt;
line-height: 10pt;
font-weight:normal;
font-style:normal;
text-decoration:none;
text-transform:none;
font-family:Helvetica Narrow, sans-serif;
}

strong, .lightbluetext8, .btext, .redtext, .redbtext{
color:666666;
font-size:9pt;
font-weight:normal;
font-style:normal;
text-decoration:none;
text-transform:none;
font-family:Helvetica Narrow, sans-serif;
}

a font, a:link, a:visited, a.navbar, a.navbar:link, a.navbar:visited, a.man, a.man:link, a.man:visited, a.man font, a.redlink, a.redlink:visited{
color:FFFFFF;
font-size:9pt;
font-weight:normal;
font-style:normal;
text-decoration:none ;
text-transform:none;
font-family:Helvetica Narrow, sans-serif;
}

a {
color: FFFFFF !important;
font-family: Arial !important;
}

a:hover {
color: 666666 !important;
font-family: Arial !important;
}

a:hover, a:hover font, a:active, a.navbar:hover, a.navbar:active, a.man:hover, a.man:active, a.man:hover font, a.searchlinkSmall:hover, a.searchlinkSmall:active, a.redlink:hover, a.redlink:hover{
color:666666;
font-size:9pt;
font-weight:normal;
font-style:normal;
text-decoration:normal ;
text-transform:none;
font-family:Helvetica Narrow, sans-serif;
}

table table table table, div table table table{
border-style:none;
}

.topbanner {position:absolute; left:50%; top:0px; margin-left:-437px; _margin-left:###px; width:879; height:1069px; z-index:1;}

.topbannerhover {position:absolute; top:1031px; left:50%; margin-left:-437px; _margin-left:###px; width:879px; height:65px; z-index:1;}

div.topbanner a:hover{
border-top: none;
opacity: 0.0;
filter: alpha(opacity=0);
width: 0px;
height: 0px;
z-index:2;
}

</style>

<div class="topbanner">
<img src="http://i578.photobucket.com/albums/ss224/zet088/Header_01.png" /><br><a href="www.google.com"><img src="http://i578.photobucket.com/albums/ss224/zet088/ROLLOVER_01.png" /></a><a href="www.google.com"><img src="http://i578.photobucket.com/albums/ss224/zet088/ROLLOVER_02.png" /></a><a href="www.google.com"><img src="http://i578.photobucket.com/albums/ss224/zet088/ROLLOVER_03.png" /></a><a href="www.google.com"><img src="http://i578.photobucket.com/albums/ss224/zet088/ROLLOVER_04.png" /></a>
</div>

<div class="topbannerhover">
<a href="www.google.com"><img src="http://i578.photobucket.com/albums/ss224/zet088/ROLLOVER2_01.png" alt="" /></a><a href="www.google.com"><img src="http://i578.photobucket.com/albums/ss224/zet088/ROLLOVER2_02.png" alt="" /></a><a href="www.google.com"><img src="http://i578.photobucket.com/albums/ss224/zet088/ROLLOVER2_03.png" alt="" /></a><a href="www.google.com"><img src="http://i578.photobucket.com/albums/ss224/zet088/ROLLOVER2_04.png" alt="" /></a>
</div>

 
Mickey
post Sep 6 2009, 05:24 PM
Post #5


Treasure Pleasure
********

Group: Head Staff
Posts: 11,193
Joined: Oct 2005
Member No: 281,127



You forgot to change the z-index of this section to 2:

CODE
.topbanner {position:absolute; left:50%; top:0px; margin-left:-437px; _margin-left:###px; width:879; height:1069px; z-index:1;}

Once you change it, you should see a difference.
 
ZeT0
post Sep 6 2009, 05:29 PM
Post #6


Senior Member
****

Group: Member
Posts: 253
Joined: Jul 2009
Member No: 739,898



Now they work 'backwards' so to speak, and the light one shows up all the time, then hovers to the dark one.
But I can live with that.
Although I can't live with the links going to :
http://www.myspace.com/www.google.com
Not just www.google.com
Do you know how to fix this too? :)
 
jiyong
post Sep 6 2009, 05:31 PM
Post #7


사랑해 ~ 我愛你 ♥
*****

Group: Design Staff
Posts: 825
Joined: Jan 2007
Member No: 492,587



You need to put "http://" in front of all the links you use. Otherwise it will default to "http://myspace.com/"
 
ZeT0
post Sep 6 2009, 05:37 PM
Post #8


Senior Member
****

Group: Member
Posts: 253
Joined: Jul 2009
Member No: 739,898



I've already swapped them, and thankyou both of you for helping.
I doubt this was worth me staying up 'till 8:36am for. Ahaha.
Also, could you please not delete this thread so I can come back to it for reference? :)
 
jiyong
post Sep 6 2009, 05:39 PM
Post #9


사랑해 ~ 我愛你 ♥
*****

Group: Design Staff
Posts: 825
Joined: Jan 2007
Member No: 492,587



Haha, we would just close and move it. Is this one good for closing? You can always PM a staff member to reopen it.
 

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