Trifecta CSS rollover question

Question

Hi Guys
I am currently using Flash buttons and would like to replace
them using trifecta CSS rollover effects. I have the buttons and
the over buttons in my images folder but the code I have only seems
to require the over button URL, how can i adapt this code to use
two images?
Code entered into CSS:
.cssnav
position: relative;
font-family: arial, helvetica, sans-serif;
background: url(overbtn.jpg) no-repeat;
white-space: nowrap;
display: block;
width: 211px;
height: 44px;
margin: 0;
padding: 0;
.cssnav a
display: block;
color: #000000;
font-size: 11px;
width: 211px;
height: 44px;
display: block;
float: left;
color: black;
text-decoration: none;
.cssnav img
width: 211px;
height: 44px;
border: 0
* html a:hover
visibility:visible
.cssnav a:hover img
visibility:hidden
.cssnav span
position: absolute;
left: 35px;
top: 15px;
margin: 0px;
padding: 0px;
cursor: pointer;
Text
Code entered into html:
<div class="cssnav">
<a href="
http://www.URL.com"><img
src="downbtn.jpg" alt="Alternative text" /><span>your
keyword</span></a>
</div>
downbtn.jpg

Answer 1

Your code is a bit strange/voluminous. Consider my comments
shown below.
.cssnav /* why a class and not an ID? */
position: relative;
font-family: arial, helvetica, sans-serif;
background: url(overbtn.jpg) no-repeat;
white-space: nowrap;
display: block;
/* why display:block on an element that is already a block
tag? */
width: 211px;
height: 44px;
margin: 0;
padding: 0;
.cssnav a
display: block;
color: #000000;
font-size: 11px;
width: 211px;
height: 44px;
display: block;
/* why redundant styles? */
float: left;
color: black;
/* why redundant styles? */
text-decoration: none;
.cssnav img
width: 211px;
height: 44px;
border: 0
* html a:hover
visibility:visible
/* why this rule at all? */
.cssnav a:hover img
visibility:hidden
.cssnav span
position: absolute;
left: 35px;
top: 15px;
margin: 0px;
padding: 0px;
cursor: pointer;
/* why this style when it will be the default? */
/* try adding this rule */
.cssnav a:hover
background-image:url(overbtn.jpg);
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Mikes1471" <[email protected]> wrote in
message
news:[email protected]...
> Hi Guys
>
> I am currently using Flash buttons and would like to
replace them using
> trifecta CSS rollover effects. I have the buttons and
the over buttons in
> my
> images folder but the code I have only seems to require
the over button
> URL,
> how can i adapt this code to use two images?
>
> Code entered into CSS:
>
> .cssnav
> {
> position: relative;
> font-family: arial, helvetica, sans-serif;
> background: url(overbtn.jpg) no-repeat;
> white-space: nowrap;
> display: block;
> width: 211px;
> height: 44px;
> margin: 0;
> padding: 0;
> }
>
> .cssnav a
> {
> display: block;
> color: #000000;
> font-size: 11px;
> width: 211px;
> height: 44px;
> display: block;
> float: left;
> color: black;
> text-decoration: none;
> }
>
> .cssnav img
> {
> width: 211px;
> height: 44px;
> border: 0
> }
>
> * html a:hover
> {
> visibility:visible
> }
>
> .cssnav a:hover img
> {
> visibility:hidden
> }
>
> .cssnav span
> {
> position: absolute;
> left: 35px;
> top: 15px;
> margin: 0px;
> padding: 0px;
> cursor: pointer;
> }
>
>
Text
>
> Code entered into html:
>
> <div class="cssnav">
> <a href="
http://www.URL.com"><img
src="downbtn.jpg" alt="Alternative text"
> /><span>your keyword</span></a>
> </div>
>
>
>
downbtn.jpg
>