How to make equal-width links?

I've been trying to create a simple vertical navigation bar, using (as
recommended) an unordered list (UL) of hyperlinks. I'd like to have a hover
effect, so I have to style the links themselves.

ul.links a:link, ul.links a:visited {
color: #FFFFFF;
background-color: #000000;
}
ul.links a:hover, ul.links a:active {
color: #FF0000;
background-color: #FFFFFF;

My problem is that because the link text length varies, the width of the
background also varies, giving an awful ragged effect on the
right-hand-side. I've seen this done beautifully (but can't now find an
example). Any suggestions?

--
####################
## PH, London
####################

On Mon, 22 Nov 2004 10:29:02 +0000 (UTC), Philip Herlihy
<foof8501 (AT) herlihy (DOT) eu.veil.com> wrote:

I've been trying to create a simple vertical navigation bar, using (as
recommended) an unordered list (UL) of hyperlinks. I'd like to have a
hover
effect, so I have to style the links themselves.

ul.links a:link, ul.links a:visited {
color: #FFFFFF;
background-color: #000000;
}
ul.links a:hover, ul.links a:active {
color: #FF0000;
background-color: #FFFFFF;

My problem is that because the link text length varies, the width of the
background also varies, giving an awful ragged effect on the
right-hand-side. I've seen this done beautifully (but can't now find an
example). Any suggestions?

How about setting a width on <li> and setting the width for <a> and all
the pseudoclasses as necessary on 100%?


--
Weblog | <http://home.wanadoo.nl/b.de.zoete/_private/weblog.html>
Webontwerp | <http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html>
Zweefvliegen | <http://home.wanadoo.nl/b.de.zoete/html/vliegen.html>

Philip Herlihy wrote:

<snip>

ul.links a:link, ul.links a:visited {
color: #FFFFFF;
background-color: #000000;
}

<snip>

My problem is that because the link text length varies, the width of the
background also varies, giving an awful ragged effect on the
right-hand-side. I've seen this done beautifully (but can't now find an
example). Any suggestions?

ul.links {
width: 10em;
}

--
Philip Ronan
phil.ronanzzz (AT) virgin (DOT) net
(Please remove the "z"s if replying by email)

Philip Herlihy wrote:

I've been trying to create a simple vertical navigation
bar, using (as recommended) an unordered list (UL) of
hyperlinks. I'd like to have a hover effect, so I have to
style the links themselves.

ul.links a:link, ul.links a:visited {
color: #FFFFFF;
background-color: #000000;
}
ul.links a:hover, ul.links a:active {
color: #FF0000;
background-color: #FFFFFF;

My problem is that because the link text length varies, the
width of the background also varies, giving an awful ragged
effect on the right-hand-side. I've seen this done
beautifully (but can't now find an example).

See link in sig ;-)

Any suggestions?

Set a width (in ems) to the <li> element, and set the <a>
element to display:block; width:100%.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Deep Purple - Burn

"Philip Ronan" <phil.ronanzzz (AT) virgin (DOT) net> wrote

Philip Herlihy wrote:

snip
ul.links a:link, ul.links a:visited {
color: #FFFFFF;
background-color: #000000;
}

snip

My problem is that because the link text length varies, the width of the
background also varies, giving an awful ragged effect on the
right-hand-side. I've seen this done beautifully (but can't now find an
example). Any suggestions?

ul.links {
width: 10em;
}

Thanks for the reply, Philip, but that doesn't seem to do the trick...

--
####################
## PH, London
####################

"Barbara de Zoete" <b_de_zoete (AT) hotmail (DOT) com> wrote

On Mon, 22 Nov 2004 10:29:02 +0000 (UTC), Philip Herlihy
foof8501 (AT) herlihy (DOT) eu.veil.com> wrote:

I've been trying to create a simple vertical navigation bar, using (as
recommended) an unordered list (UL) of hyperlinks. I'd like to have a
hover
effect, so I have to style the links themselves.

ul.links a:link, ul.links a:visited {
color: #FFFFFF;
background-color: #000000;
}
ul.links a:hover, ul.links a:active {
color: #FF0000;
background-color: #FFFFFF;

My problem is that because the link text length varies, the width of the
background also varies, giving an awful ragged effect on the
right-hand-side. I've seen this done beautifully (but can't now find an
example). Any suggestions?


How about setting a width on <li> and setting the width for <a> and all
the pseudoclasses as necessary on 100%?

Almost! Need to set display: block; on the <a> (as suggested by Els)

Thanks!

--
####################
## PH, London
####################

"Els" <els.aNOSPAM (AT) tiscali (DOT) nl> wrote

Philip Herlihy wrote:

I've been trying to create a simple vertical navigation
bar, using (as recommended) an unordered list (UL) of
hyperlinks. I'd like to have a hover effect, so I have to
style the links themselves.

ul.links a:link, ul.links a:visited {
color: #FFFFFF;
background-color: #000000;
}
ul.links a:hover, ul.links a:active {
color: #FF0000;
background-color: #FFFFFF;

My problem is that because the link text length varies, the
width of the background also varies, giving an awful ragged
effect on the right-hand-side. I've seen this done
beautifully (but can't now find an example).

See link in sig ;-)

Any suggestions?

Set a width (in ems) to the <li> element, and set the <a
element to display:block; width:100%.

--
Els http://locusmeus.com/
....

Bang on! Thanks!

Love the site, by the way - the "frosted" look is great.

--
####################
## PH, London
####################

On Mon, 22 Nov 2004 20:54:49 +0000 (UTC), Philip Herlihy
<foof8501 (AT) herlihy (DOT) eu.veil.com> wrote:

"Barbara de Zoete" <b_de_zoete (AT) hotmail (DOT) com> wrote in message
newspshu30yhvx5vgts (AT) zoete_b (DOT) ..
On Mon, 22 Nov 2004 10:29:02 +0000 (UTC), Philip Herlihy
foof8501 (AT) herlihy (DOT) eu.veil.com> wrote:

I've been trying to create a simple vertical navigation bar, using (as
recommended) an unordered list (UL) of hyperlinks. I'd like to have a
hover
effect, so I have to style the links themselves.

ul.links a:link, ul.links a:visited {
color: #FFFFFF;
background-color: #000000;
}
ul.links a:hover, ul.links a:active {
color: #FF0000;
background-color: #FFFFFF;

My problem is that because the link text length varies, the width of
the background also varies, giving an awful ragged effect on the
right-hand-side. I've seen this done beautifully (but can't now find
an example). Any suggestions?


How about setting a width on <li> and setting the width for <a> and all
the pseudoclasses as necessary on 100%?


Almost! Need to set display: block; on the <a> (as suggested by Els)

Yeah, I spotted that ommission just after I posted this. But then saw that
Els had the correct solution posted already. So didn't bother to correct
mine.

Thanks!

Your welcome

--
Weblog | <http://home.wanadoo.nl/b.de.zoete/_private/weblog.html>
Webontwerp | <http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html>
Zweefvliegen | <http://home.wanadoo.nl/b.de.zoete/html/vliegen.html>

"Brian" <usenet3 (AT) julietremblay (DOT) com.invalid> wrote

Els wrote:
Philip Herlihy wrote:

I've been trying to create a simple vertical navigation bar, using
(as recommended) an unordered list (UL) of hyperlinks. I'd like to
have a hover effect, so I have to style the links themselves.

My problem is that because the link text length varies, the width
of the background also varies, giving an awful ragged effect on the
right-hand-side.

Set a width (in ems) to the <li> element, and set the <a> element to
display:block; width:100%.

width: 100% only for broken MSIE/Win. Use width: auto for Firefox and
Opera.

....

Thanks! Seems to work ok in Opera with 100%, but I'm still exploring.

--
####################
## PH, London
####################

"Philip Herlihy" <foof8501 (AT) herlihy (DOT) eu.veil.com> wrote

I've been trying to create a simple vertical navigation bar, using (as
recommended) an unordered list (UL) of hyperlinks. I'd like to have a
hover effect, so I have to style the links themselves.

....
My problem is that because the link text length varies, the width of the
background also varies, giving an awful ragged effect on the
right-hand-side. I've seen this done beautifully (but can't now find an
example). Any suggestions?

Thanks to everyone for their generous help, especially Els, who invited me
to study her beautiful site, and from which I learned a great deal. :-)

(1)
I've now studied carefully, and I have a "demo" version which I hope is both
correct and free of inessential detail. You can see this at:
http://philipherlihy.members.beeb.ne...ical_links.htm
I've used "named" colours to make it easier to spot the elements concerned
from the source. (This is not a statement of my personal aesthetic...)

I've tested it in the latest versions of IE, Opera and Firefox, and it
appears to be the same in each, and what I wanted (a personal first!). I
found Opera and Firefox displayed incorrectly with line 37 setting:
width: 100%
instead of:
width: 100%
IE renders both correctly, but I notice that the hover effect (which works
perfectly in Opera/Firefox) only triggers over the *text* of the link in IE.
Any solution? (My customer will be using only IE).


(2)
You may spot a link to the "Horizontal Links Version". I decided to see if
I could achieve the same result with links across the page instead.
http://philipherlihy.members.beeb.ne...ntal_links.htm

First, I changed line 34
display: block;
... to "inline", but I found I had to move that line from the <a> to the
parent <li> to get the effect I wanted. (Now line 31). However, as you'll
see, it looks pretty awful in all three browsers, and (once again) I'm out
of ideas.

In IE, you should see a hint of FUCHSIA colour to the right of the border of
each link. That doesn't appear in either Firefox or Opera, although I'm
using IE6 with a "standards compliant" doctype. Just a glitch or have I
done something wrong?

In Firefox/Opera the top and bottom borders (ORANGE) of the <li> tags are
absent, and there is a gap between the links which I'd like to remove
(without breaking the IE rendering).

Once again, I'd be grateful for any comments or advice. (Note: I'm using
the very latest versions of all three browsers - I found that Opera 7.23
didn't render correctly, which 7.54 does).
--
####################
## PH, London
####################