How to make equal-width links?

**Barbara de Zoete** · Jul 21 '05, 12:28 AM

Re: How to make equal-width links?

On Mon, 22 Nov 2004 10:29:02 +0000 (UTC), Philip Herlihy
<foof8501@herli hy.eu.veil.com> wrote:
[color=blue]
> 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?
>[/color]

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 Ronan** · Jul 21 '05, 12:28 AM

Re: How to make equal-width links?

Philip Herlihy wrote:

<snip>[color=blue]
> ul.links a:link, ul.links a:visited {
> color: #FFFFFF;
> background-color: #000000;
> }[/color]

<snip>
[color=blue]
> 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?[/color]

ul.links {
width: 10em;
}

--
Philip Ronan
phil.ronanzzz@v irgin.net
(Please remove the "z"s if replying by email)

**Els** · Jul 21 '05, 12:28 AM

Re: How to make equal-width links?

Philip Herlihy wrote:
[color=blue]
> 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).[/color]

See link in sig ;-)
[color=blue]
> Any suggestions?[/color]

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

**Brian** · Jul 21 '05, 12:28 AM

Re: How to make equal-width links?

Els wrote:[color=blue]
> Philip Herlihy wrote:
>[color=green]
>> 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.[/color]
>
> Set a width (in ems) to the <li> element, and set the <a> element to
> display:block; width:100%.[/color]

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

--
Brian (remove "invalid" to email me)

**Philip Herlihy** · Jul 21 '05, 12:28 AM

Re: How to make equal-width links?

"Philip Ronan" <phil.ronanzzz@ virgin.net> wrote in message
news:BDC77380.2 5DF0%phil.ronan zzz@virgin.net. ..[color=blue]
> Philip Herlihy wrote:
>
> <snip>[color=green]
>> ul.links a:link, ul.links a:visited {
>> color: #FFFFFF;
>> background-color: #000000;
>> }[/color]
>
> <snip>
>[color=green]
>> 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?[/color]
>
> ul.links {
> width: 10em;
> }
>[/color]
Thanks for the reply, Philip, but that doesn't seem to do the trick...

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

**Philip Herlihy** · Jul 21 '05, 12:28 AM

Re: How to make equal-width links?

"Barbara de Zoete" <b_de_zoete@hot mail.com> wrote in message
news:opshu30yhv x5vgts@zoete_b. ..[color=blue]
> On Mon, 22 Nov 2004 10:29:02 +0000 (UTC), Philip Herlihy
> <foof8501@herli hy.eu.veil.com> wrote:
>[color=green]
>> 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?
>>[/color]
>
> How about setting a width on <li> and setting the width for <a> and all
> the pseudoclasses as necessary on 100%?
>[/color]

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

Thanks!

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

**Philip Herlihy** · Jul 21 '05, 12:28 AM

Re: How to make equal-width links?

"Els" <els.aNOSPAM@ti scali.nl> wrote in message
news:Xns95A978A 501A28Els@130.1 33.1.4...[color=blue]
> Philip Herlihy wrote:
>[color=green]
>> 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).[/color]
>
> See link in sig ;-)
>[color=green]
>> Any suggestions?[/color]
>
> Set a width (in ems) to the <li> element, and set the <a>
> element to display:block; width:100%.
>
> --
> Els http://locusmeus.com/[/color]
....

Bang on! Thanks!

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

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

**Barbara de Zoete** · Jul 21 '05, 12:28 AM

Re: How to make equal-width links?

On Mon, 22 Nov 2004 20:54:49 +0000 (UTC), Philip Herlihy
<foof8501@herli hy.eu.veil.com> wrote:
[color=blue]
> "Barbara de Zoete" <b_de_zoete@hot mail.com> wrote in message
> news:opshu30yhv x5vgts@zoete_b. ..[color=green]
>> On Mon, 22 Nov 2004 10:29:02 +0000 (UTC), Philip Herlihy
>> <foof8501@herli hy.eu.veil.com> wrote:
>>[color=darkred]
>>> 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?
>>>[/color]
>>
>> How about setting a width on <li> and setting the width for <a> and all
>> the pseudoclasses as necessary on 100%?
>>[/color]
>
> Almost! Need to set display: block; on the <a> (as suggested by Els)
>[/color]

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.
[color=blue]
> Thanks!
>[/color]
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>

**Philip Herlihy** · Jul 21 '05, 12:28 AM

Re: How to make equal-width links?

"Brian" <usenet3@juliet remblay.com.inv alid> wrote in message
news:9srod.9554 08$Gx4.866126@b gtnsc04-news.ops.worldn et.att.net...[color=blue]
> Els wrote:[color=green]
>> Philip Herlihy wrote:
>>[color=darkred]
>>> 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.[/color]
>>
>> Set a width (in ems) to the <li> element, and set the <a> element to
>> display:block; width:100%.[/color]
>
> width: 100% only for broken MSIE/Win. Use width: auto for Firefox and
> Opera.
>[/color]
....

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

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

**Philip Herlihy** · Jul 21 '05, 12:29 AM

Re: How to make equal-width links? [## demo solution, and new problem ##]

"Philip Herlihy" <foof8501@herli hy.eu.veil.com> wrote in message
news:cnsf1e$c1g $1@sparta.btint ernet.com...[color=blue]
> 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.
>[/color]
....[color=blue]
> 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?
>[/color]

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.net/CSS_Links/vertical_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.net/CSS_Links/horizontal_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
############### #####

**Sally Thompson** · Jul 21 '05, 12:29 AM

Re: How to make equal-width links?

On 22 Nov 2004 10:51:31 GMT, Els <els.aNOSPAM@ti scali.nl> wrote:

<snip OP>[color=blue]
>
>See link in sig ;-)
>
>
>Els http://locusmeus.com/[/color]

Hey Els, I like your new autumn colour scheme! Also, I love your
photos. I see you have done your thumbnails now in a <ul> rather than
floating divs. Why ever didn't I think of that? It is such a simple
solution. Off to experiment.

--
Sally in Shropshire, UK
bed and breakfast near Ludlow: http://www.stonybrook-ludlow.co.uk
Reply To address is spam trap

**Els** · Jul 21 '05, 12:29 AM

Re: How to make equal-width links?

Sally Thompson wrote:
[color=blue]
> On 22 Nov 2004 10:51:31 GMT, Els <els.aNOSPAM@ti scali.nl>
> wrote:
>
> <snip OP>[color=green]
>>
>>See link in sig ;-)
>>
>>
>>Els http://locusmeus.com/[/color]
>
>
>
> Hey Els, I like your new autumn colour scheme! Also, I
> love your photos. I see you have done your thumbnails now
> in a <ul> rather than floating divs. Why ever didn't I
> think of that? It is such a simple solution. Off to
> experiment.[/color]

Thanks for the compliment :-)
But I haven't changed the thumbnail set up, I probably just
forgot about the div method (not floating btw) when I did the
newer gallery pics :-)

The smaller thumbnails are still single inline images in a div.

--
Els

Locus Meus

http://locusmeus.com/

Blog and other pages, mostly outdated.

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

**Stephen Poley** · Jul 21 '05, 12:29 AM

Re: How to make equal-width links?

On 23 Nov 2004 22:12:48 GMT, Els <els.aNOSPAM@ti scali.nl> wrote:
[color=blue]
>The smaller thumbnails are still single inline images in a div.[/color]

They're a good example of something I occasionally try to pursuade
people of - that thumbnails usually work much better when you crop a
squarish area out of the middle of the photograph, rather than shrink
the entire photo to thumbnail size.

I see we're near neighbours, incidentally.

--
Stephen Poley
Barendrecht

**Els** · Jul 21 '05, 12:29 AM

Re: How to make equal-width links?

Stephen Poley wrote:
[color=blue]
> On 23 Nov 2004 22:12:48 GMT, Els <els.aNOSPAM@ti scali.nl>
> wrote:
>[color=green]
>>The smaller thumbnails are still single inline images in a
>>div.[/color]
>
> They're a good example of something I occasionally try to
> pursuade people of - that thumbnails usually work much
> better when you crop a squarish area out of the middle of
> the photograph, rather than shrink the entire photo to
> thumbnail size.[/color]

I did both on my site, actually...
Most of the thumbnails pages that can be reached from
http://locusmeus.com/photography.html are indeed square crops,
but on http://locusmeus.com/dimage-gallery01.html I use entire
photos.
[color=blue]
> I see we're near neighbours, incidentally.[/color]

Yup, quite near indeed :-)

--
Els

Locus Meus

http://locusmeus.com/

Blog and other pages, mostly outdated.

Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

How to make equal-width links?

How to make equal-width links?

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment