Click here to get back home

DIV element buttons - how do you set rollover effects correctly?

 HomeNewsGroups | Search | About
 comp.infosystems.www.authoring.html    Post an article   get this group's latest topics as an RSS feed add this group's latest topics to your My MSN content add this group's latest topics to your My Yahoo content
Subject Author Date
DIV element buttons - how do you set rollover effects correctly? Number 11950 - GPEMC! Replace 08-02-2006
Get Chitika Premium
Posted by Number 11950 - GPEMC! Replace on August 2, 2006, 9:56 am
Please log in for more thread options


The applicable CSS is as follows:
______________________________________
div.BUD
{
background-color: maroon;
color: beige;
border: 3px outset;
text-align: center;
margin: 9px;
width: 138px;
font-style:normal; font-variant:normal; font-weight:bold; font-size:12pt;
font-family:trebuchet, sans-serif
}
div.BUD a
{
TEXT-DECORATION: none;
background-color: maroon;
color: beige;
}
div.BUD a:hover
{
width: 138px;
color: lavender;
background-color: darkorchid;
border-style:inset;
}
______________________________________
Applicable HTML:

<DIV class="BUD">
<a href="publishing-tools">Publisher Tools</a>
</DIV>
<DIV class="BUD">
<a href="software">Software Index</a>
</DIV>
______________________________________
The inset & colour change does not apply to the entire DIV instead of just
to the hyperlink itself. See www.geoceanis.com for this little catastrophe!
:^)

So, I'm a little baffled as to how I managed to stuff this up. What is the
difference between code that highlights only the link within the DIV
element, and code that highlights the entire DIV element...?

Thanks in advance...

--
Timothy Casey GPEMC! >> 11950 is the number@fieldcraft.biz 2email
Terms & conditions apply. See www.fieldcraft.biz/GPEMC
Discover valid interoperable web menus, IE security, TSR Control,
& the most advanced speed reading application @ www.fieldcraft.biz



Posted by Andy Dingley on August 2, 2006, 10:32 am
Please log in for more thread options



Number 11950 - GPEMC! Replace number with 11950 wrote:
> The inset & colour change does not apply to the entire DIV instead of just
> to the hyperlink itself. See www.geoceanis.com for this little catastrophe!

Haven't hacked on your example myself, but the usual fix is to set
a { width: 100% }


Couple of other comments:

- Don't mess with anything with a:hover except for colours. Anything
involving fonts, sizes, positions etc. can cause an annoying jump when
you move over the link.

- I'd use <li> rather than <div>. You've got a related set of them,
it's a list.


Posted by Number 11950 - GPEMC! Replace on August 2, 2006, 8:11 pm
Please log in for more thread options


>
> Number 11950 - GPEMC! Replace number with 11950 wrote:
> > The inset & colour change does not apply to the entire DIV instead of
just
> > to the hyperlink itself. See www.geoceanis.com for this little
catastrophe!
>
> Haven't hacked on your example myself, but the usual fix is to set
> a { width: 100% }

The user agent just won't listen. For some reason, this line is being
ignored. Also tried:

a, a:hover { width: 100% } [no effect]
a:hover { width: 100% } [no effect]

I've also tried placing these lines before then after the "div.BUD" +
"div.BUD a" + "div.BUD a:hover" specifications, and I have tried placing the
"width: 100%;" line within the "div.BUD a" + "div.BUD a:hover"
specifications - all without effect.

It stands to reason that the width should not be ignored especially when it
is not flagged for non-conformance - am I misunderstanding the CSS
specification? I'm combining this with the HTML 4.0 Strict DTD to ensure
that the fixed branding & web menus when they go in, will function
correctly - could this be complicating matters?

> Couple of other comments:
>
> - Don't mess with anything with a:hover except for colours. Anything
> involving fonts, sizes, positions etc. can cause an annoying jump when
> you move over the link.

Ya don't say! :^) - a tiny little jump I've seen used to make the button
appear to pop out as the mouse hovers over it, but some of the web menus
I've messed with in the past have been very jumpy...

>
> - I'd use <li> rather than <div>. You've got a related set of them,
> it's a list.

Using <DIV>s for vertical sidebar & <SPAN>s for horizontal toolbar - I've
seen the use of list elements for this before - can list elements be set to
equidistant spacing on the same line like a <SPAN> element?

Thanks in advance...

--
Timothy Casey GPEMC! >> 11950 is the number@fieldcraft.biz 2email
Terms & conditions apply. See www.fieldcraft.biz/GPEMC
Discover valid interoperable web menus, IE security, TSR Control,
& the most advanced speed reading application @ www.fieldcraft.biz



Posted by Number 11950 - GPEMC! Replace on August 2, 2006, 11:15 pm
Please log in for more thread options



>
> Number 11950 - GPEMC! Replace number with 11950 wrote:
> > The inset & colour change does not apply to the entire DIV instead of
just
> > to the hyperlink itself. See www.geoceanis.com for this little
catastrophe!
>
> Haven't hacked on your example myself, but the usual fix is to set
> a { width: 100% }
[SNIP]

Tried setting
a { display: block; }

this seems to do the trick...

What is the significance of setting

-a { display: block; }
OR
a { display: block; }
OR
+a { display: block; }

???

I've seen this use of "+" & "-" in certain stylesheets but haven't a clue as
to intended function...

Thanks in advance...

--
Timothy Casey GPEMC! >> 11950 is the number@fieldcraft.biz 2email
Terms & conditions apply. See www.fieldcraft.biz/GPEMC
Discover valid interoperable web menus, IE security, TSR Control,
& the most advanced speed reading application @ www.fieldcraft.biz




Posted by darwinist on August 3, 2006, 2:38 am
Please log in for more thread options


Number 11950 - GPEMC! Replace number with 11950 wrote:

> >
> > Number 11950 - GPEMC! Replace number with 11950 wrote:
> > > The inset & colour change does not apply to the entire DIV instead of
> just
> > > to the hyperlink itself. See www.geoceanis.com for this little
> catastrophe!
> >
> > Haven't hacked on your example myself, but the usual fix is to set
> > a { width: 100% }
> [SNIP]
>
> Tried setting
> a { display: block; }
>
> this seems to do the trick...
>
> What is the significance of setting
>
> -a { display: block; }
> OR
> a { display: block; }
> OR
> +a { display: block; }

I've had the same problem, it took me a while to discover how useful
"display" can be:
block: separate entity, line break before and after
inline: part of a paragraph or whatever, no auto-line breaks
none: hide the element entirely, great if you like rich-clients (pop-up
menus, etc).

display:none has important differences from visibility:hidden. Found a
good, brief, working explanation here:
http://www.devx.com/tips/Tip/13638

hth

> ???
>
> I've seen this use of "+" & "-" in certain stylesheets but haven't a clue as
> to intended function...
>
> Thanks in advance...
>
> --
> Timothy Casey GPEMC! >> 11950 is the number@fieldcraft.biz 2email
> Terms & conditions apply. See www.fieldcraft.biz/GPEMC
> Discover valid interoperable web menus, IE security, TSR Control,
> & the most advanced speed reading application @ www.fieldcraft.biz


Similar ThreadsPosted
recomendations for fade effects... (currently using fadomatic) March 30, 2006, 10:38 am
canceling out effects of cellpadding for one row in a table? November 18, 2006, 10:33 pm
CSS link rollover bug in IE 5 Mac October 15, 2004, 5:58 pm
submit button image -- can u do rollover?? September 15, 2004, 12:53 pm
Image rollover not working in a table March 8, 2005, 5:26 pm
Displaying Text As Rollover with Tables March 20, 2005, 3:46 am
Can TR element be direct child node of TABLE element? February 13, 2005, 12:17 pm
HTML Display Correctly, But Not Right August 2, 2004, 4:24 pm
Parsing linefeeds correctly December 1, 2004, 7:53 pm
Table TD width not rendering correctly March 1, 2005, 1:50 am

Our other projects:

Art Dolls, Fairies and Mermaids - Sunnyfaces.net

Roy's Linux, Programming and Search Engines messages

1-Script XML SitemapXML Sitemap