This is Interesting: Free Magazines for Graphics designers and webmasters
Home > Archive > Stylesheets > November 2004 > How to make equal-width links?
You are viewing an archived Text-only version of the thread.
To view this thread in it's original format and/or if you want to reply to
this thread please [click here]
| Author |
How to make equal-width links?
|
|
| Philip Herlihy 2004-11-22, 7:15 am |
| 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
####################
| |
| Barbara de Zoete 2004-11-22, 7:15 am |
| On Mon, 22 Nov 2004 10:29:02 +0000 (UTC), Philip Herlihy
<foof8501@herlihy.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 Ronan 2004-11-22, 7:15 am |
| 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@virgin.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
| |
|
| Els wrote:
> Philip Herlihy wrote:
>
>
> 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.
--
Brian (remove "invalid" to email me)
| |
| Philip Herlihy 2004-11-22, 11:22 pm |
| "Philip Ronan" <phil.ronanzzz@virgin.net> wrote in message
news:BDC77380.25DF0%phil.ronanzzz@virgin.net...
> Philip Herlihy wrote:
>
> <snip>
>
> <snip>
>
>
> ul.links {
> width: 10em;
> }
>
Thanks for the reply, Philip, but that doesn't seem to do the trick...
--
####################
## PH, London
####################
| |
| Philip Herlihy 2004-11-22, 11:22 pm |
| "Barbara de Zoete" <b_de_zoete@hotmail.com> wrote in message
news:opshu30yhvx5vgts@zoete_b...
> On Mon, 22 Nov 2004 10:29:02 +0000 (UTC), Philip Herlihy
> <foof8501@herlihy.eu.veil.com> wrote:
>
>
> 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
####################
| |
| Philip Herlihy 2004-11-22, 11:22 pm |
| "Els" <els.aNOSPAM@tiscali.nl> wrote in message
news:Xns95A978A501A28Els@130.133.1.4...
> Philip Herlihy wrote:
>
>
> See link in sig ;-)
>
>
> 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
####################
| |
|
|
| Philip Herlihy 2004-11-22, 11:22 pm |
| "Brian" <usenet3@julietremblay.com.invalid> wrote in message
news:9srod.955408$Gx4.866126@bgtnsc04-news.ops.worldnet.att.net...
> Els wrote:
>
> 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
####################
| |
| Sally Thompson 2004-11-23, 7:26 pm |
| On 22 Nov 2004 10:51:31 GMT, Els <els.aNOSPAM@tiscali.nl> wrote:
<snip OP>
>
>See link in sig ;-)
>
>
>Els http://locusmeus.com/
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
| |
|
| Sally Thompson wrote:
> On 22 Nov 2004 10:51:31 GMT, Els <els.aNOSPAM@tiscali.nl>
> wrote:
>
> <snip OP>
>
>
>
> 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.
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
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
| |
| Philip Herlihy 2004-11-24, 7:17 pm |
| "Barbara de Zoete" <b_de_zoete@hotmail.com> wrote in message
news:opshu30yhvx5vgts@zoete_b...
> On Mon, 22 Nov 2004 10:29:02 +0000 (UTC), Philip Herlihy
> <foof8501@herlihy.eu.veil.com> wrote:
>
>
> 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
####################
| |
| Philip Herlihy 2004-11-24, 7:17 pm |
| "Els" <els.aNOSPAM@tiscali.nl> wrote in message
news:Xns95A978A501A28Els@130.133.1.4...
> Philip Herlihy wrote:
>
>
> See link in sig ;-)
>
>
> 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
####################
| |
| Stephen Poley 2004-11-24, 7:18 pm |
| On 23 Nov 2004 22:12:48 GMT, Els <els.aNOSPAM@tiscali.nl> wrote:
>The smaller thumbnails are still single inline images in a div.
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
| |
|
| Stephen Poley wrote:
> On 23 Nov 2004 22:12:48 GMT, Els <els.aNOSPAM@tiscali.nl>
> wrote:
>
>
> 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 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.
> I see we're near neighbours, incidentally.
Yup, quite near indeed :-)
--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
|
|
|
| | Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |
|