By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,780 Members | 1,118 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,780 IT Pros & Developers. It's quick & easy.

Style sheets for hyperlinked text

P: n/a
I have a navigation bar that is included in a series of pages
throughout the site, using the <!-- #include file=""--> method.

The bar has a black background, and I'd like the hyperlinked text on
it to be white. I'd also the hyperlinked text to not have the
underlines underneath it. I'd also like the text to stay white no
matter if it has been clicked or not. I would also like it to not
affect any other files that are included. For example, I have a
categories column to the left of the page that I would like to be
black text against a light background, so I want to make sure that
text is not influenced by the incuded file for the navigation bar.

Thanks if you can help.

Frank
Jul 20 '05 #1
Share this Question
Share on Google+
7 Replies


P: n/a
wi************@yahoo.com (Frank) wrote:
The bar has a black background,
That means trouble. White on black is considerably less readable than
black on white, though the problem can mostly be managed if you work
carefully.
and I'd like the hyperlinked text on
it to be white. I'd also the hyperlinked text to not have the
underlines underneath it. I'd also like the text to stay white no
matter if it has been clicked or not.
That would make it even worse. The texts would not look like links at all.
And the distinction between unvisited and visited links is an essential
usability feature. Are you sure you want to sacrifice that much on the
altar of White on Black? If you are, I suggest reading "Links Want To Be
Links", http://www.cs.tut.fi/~jkorpela/www/links.html
and thinking again.

The technique would be fairly trivial. The real question is whether the
intended effect is desirable.
I would also like it to not
affect any other files that are included.


You can't do it that way. The inclusion you're using is a server-side
issue, and the browser does not even know that some content appears due to
such inclusion. The browser only gets what the server sends to it, i.e. a
document where the inclusion has already taken place.

But you can e.g. wrap <div class="nav">...</div> around the navigation
bar, in the included file, and use the selector div.nav in conjunction
with other selectors.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Jul 20 '05 #2

P: n/a
On Fri, 8 Aug 2003 19:19:20 +0000 (UTC), "Jukka K. Korpela"
<jk******@cs.tut.fi> wrote:
wi************@yahoo.com (Frank) wrote:
The bar has a black background,
That means trouble. White on black is considerably less readable than
black on white, though the problem can mostly be managed if you work
carefully.


A bit of an exaggeration. White-on-black is not a good idea for large
areas of text, but hardly a problem for a navigation bar.
and I'd like the hyperlinked text on
it to be white. I'd also the hyperlinked text to not have the
underlines underneath it. I'd also like the text to stay white no
matter if it has been clicked or not.


That would make it even worse. The texts would not look like links at all.


Suppressing the underlining is not really a problem on a navbar. I agree
it's a nuisance when people do it for links in general.
And the distinction between unvisited and visited links is an essential
usability feature.


Here I'm inclined to agree with you. Suppressing the difference is
perhaps OK if it is very obvious where the links go to and there is no
risk of the reader going round in circles.
I would also like it to not
affect any other files that are included.


You can't do it that way. The inclusion you're using is a server-side
issue, and the browser does not even know that some content appears due to
such inclusion. The browser only gets what the server sends to it, i.e. a
document where the inclusion has already taken place.

But you can e.g. wrap <div class="nav">...</div> around the navigation
bar, in the included file, and use the selector div.nav in conjunction
with other selectors.


Along the lines of:

..nav a { color: white; background-color: black; text-decoration: none; }

Add visited/hover/active as appropriate.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
Jul 20 '05 #3

P: n/a
Stephen Poley <sb*****@xs4all.nl> exclaimed in <qp********************************@4ax.com>:
That means trouble. White on black is considerably less readable than
black on white, though the problem can mostly be managed if you work
carefully.


A bit of an exaggeration. White-on-black is not a good idea for large
areas of text, but hardly a problem for a navigation bar.


As always, what is and isn't a good idea varies. Several people of my
aquaintance who are users of screen magnifying software reconfigure
their - often IE - browsers to show white on black.

For them, that is "considerably more readable" than the opposite. It
is worth remembering that life is grayscale.

--
- Tina Holmboe Greytower Technologies
ti**@greytower.net http://www.greytower.net/
[+46] 0708 557 905
Jul 20 '05 #4

P: n/a
On Sat, 09 Aug 2003 15:00:58 GMT, ti**@greytower.net (Tina Holmboe)
wrote:
Stephen Poley <sb*****@xs4all.nl> exclaimed in <qp********************************@4ax.com>:
That means trouble. White on black is considerably less readable than
black on white, though the problem can mostly be managed if you work
carefully.
A bit of an exaggeration. White-on-black is not a good idea for large
areas of text, but hardly a problem for a navigation bar.

As always, what is and isn't a good idea varies. Several people of my
aquaintance who are users of screen magnifying software reconfigure
their - often IE - browsers to show white on black.

For them, that is "considerably more readable" than the opposite. It
is worth remembering that life is grayscale.


Fair comment. I was originally going to say "except for a small number
of people with specific sight defects, who will probably find it
necessary to apply user stylesheets or something anyway, given the
nature of the web." I then thought it made things a bit too long. But
I've said it now anyway.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
Jul 20 '05 #5

P: n/a
In article <qp********************************@4ax.com>, one of infinite monkeys
at the keyboard of Stephen Poley <sb*****@xs4all.nl> wrote:
A bit of an exaggeration. White-on-black is not a good idea for large
areas of text, but hardly a problem for a navigation bar.


Those of us above a certain age remember a time when display technology
wasn't all it is today, and flickered a whole lot more. In those days,
large areas of light colour (such as a white background) were seriously
painful. So some of us grew up[1] with white-on-black, and variants such
as green-on-black or amber-on-black.

[1] setting aside prehistoric devices with no VDU at all.

--
Nick Kew

In urgent need of paying work - see http://www.webthing.com/~nick/cv.html
Jul 20 '05 #6

P: n/a
Jukka K. Korpela / 2003-08-08 22:19:
wi************@yahoo.com (Frank) wrote:
The bar has a black background,


That means trouble. White on black is considerably less readable than
black on white, though the problem can mostly be managed if you work
carefully.


Actually, I remember seeing some studies (and lost URLs) that have
come up with the results that light grey on black should be most
readable. However, that isn't always true as the enviroment comes to
play. A good example <URL:http://www.colormatters.com/optics.html>
of this is a white sheet of paper with black text on a black surface
("executive office look"); the after image from the light rectangle
messes up your sight and the text is harder to read. So, if the
environment is dark, light text on black background is better, but
if you're in a generic office room with very high light levels, you
want black text on light (not white) background.

Also, while trying to google for studies about the issue, I come up
with this excellent writing about typefaces on different mediums
<URL:http://www.digital-web.com/features/feature_2001-7.shtml>. This
writing also mentions that the same typeface with black-on-white and
white-on-black has different visible thickness/boldness because of
the limitations of the medium and our eyesight. This is even more
enchanced by the fact that modern monitors have such a good contrast.

--
Mikko

Jul 20 '05 #7

P: n/a
On Mon, 11 Aug 2003 10:42:26 -0500, "Steven Dilley"
<steven.dilley.at.compuware.com> wrote:
"Nick Kew" <ni**@fenris.webthing.com> wrote in message
news:12***********@jarl.webthing.com...
In article <qp********************************@4ax.com>, one of infinite

monkeys
at the keyboard of Stephen Poley <sb*****@xs4all.nl> wrote:
> A bit of an exaggeration. White-on-black is not a good idea for large
> areas of text, but hardly a problem for a navigation bar.


Those of us above a certain age remember a time when display technology
wasn't all it is today, and flickered a whole lot more. In those days,
large areas of light colour (such as a white background) were seriously
painful. So some of us grew up with white-on-black, and variants such
as green-on-black or amber-on-black.


There were screens that had the option of w-on-b or b-on-w, and
everyone tried b-on-w exactly once. The white then was not like the
plain bg we have now: it was like looking into a light bulb. Black was
considered a more restful bg.


Ah yes, I remember those. Though I did encounter at least one where
b-on-w was fine if you also turned the brightness way down (or was it
the contrast?) - I wonder how many people thought to try that. But it's
a useful reminder that one has to review one's concept of what best
practice is every few years.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/
Jul 20 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.