Sent by Jeff Shepherd on 30 November 2004 00:12
I've got a navigation bar on the side of my web page. Each item in a
<P> with a <DIV> surrounding the list. The current page is listed,
but does not have a link. Here's the sample HTML:
<DIV class="sideLinks">
<P>About ></P>
<P><a href="rsvp.html">RSVP</a></P>
<P><a href="history.html">History</a></P>
</DIV>
I want to style this so the link background changes when the cursor hovers
So I start with the following styles:
.sideLinks p { margin: 0; padding: 0.5em 0em; }
.sideLinks a:hover { background: #DDD; }
which works fine except I want the entire <P> to fill with the
background change. If I do
.sideLinks a { display: block; }
This expands the background to fill the <P> from left to right, but
I'm not getting the it to fill top to bottom. If I do
.sideLinks a { margin: 0; padding: 0.5em 0em; }
(without the display:block;) I get it to fill top and bottom, but not
right to left (i.e. the background change ends when the word ends).
If I combine the two
.sideLinks a { display: block; margin: 0; padding: 0.5em 0em; }
the padding of the <A> and the <P> add to each other rather than
merging and I get extra spacing between.
All the navigational sidebars have every line active, rather than
including the page without a link. Can this be done using simple CSS?
- Jeff -
--
(Jeff Shepherd) Drink your coffee...
[EMAIL-REMOVED]> There are people asleep in India right now.
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/