DTP


 
Lively discussions on the graphic arts and publishing — in print or on the web


Go Back   Desktop Publishing Forum > General Discussions > Web Site Building & Maintenance

Reply
 
Thread Tools Display Modes
Old 02-13-2006, 06:46 AM   #1
dthomsen8
Member
 
dthomsen8's Avatar
 
Join Date: Aug 2005
Location: Philadelphia, PA 19130
Posts: 2,158
Default Link colors with CSS

Suppose I have the following two links:

<a href="mailto:act@fairmountcivicassociation.org">Ac tivities Committee</a>
<a href="http://www.easternstate.org">Eastern State Penitentiary</a>

and I want the first one to appear in maroon color, and I want the second one to appear in blue color. How do I set the colors?

(Yes, I know this something strange to do, but the client insists.)
dthomsen8 is offline   Reply With Quote
Old 02-13-2006, 06:54 AM   #2
ktinkel
Founding Sysop
 
ktinkel's Avatar
 
Join Date: Oct 2004
Location: In Connecticut, on the Housatonic River near its mouth at Long Island Sound.
Posts: 11,189
Default

Quote:
Originally Posted by dthomsen8
Suppose I have the following two links:

<a href="mailto:act@fairmountcivicassociation.org">Ac tivities Committee</a>
<a href="http://www.easternstate.org">Eastern State Penitentiary</a>

and I want the first one to appear in maroon color, and I want the second one to appear in blue color. How do I set the colors?

(Yes, I know this something strange to do, but the client insists.)
You could use SPAN.

Or if these are in different DIVs (or could be), then you could define #EMAIL A with color:maroon and #URL A with color:blue. That should work.

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 02-13-2006, 07:08 AM   #3
jrabold
Member
 
jrabold's Avatar
 
Join Date: Aug 2005
Location: Oakland California USA
Posts: 63
Default

First, give each of those links a distinct class, as in
<a class="name1" href="etc...."

In the style sheet, the selector for the appearance of the unvisited unhovered link would be
a.name1:link
so you would have
a.name1:link {color: whatever; background-color: whatever;}

Then you'd also specify the other selectors for links (visited, hover, and active) and do the same all over again for the other class. E.g.,
a.name2:hover {color: whatever; etc .... }

Another syntax is also valid, I think: a:link.name1 rather than a.name1:link

   
__________________
John Rabold
jrabold is offline   Reply With Quote
Old 02-13-2006, 07:09 AM   #4
Kelvyn
Staff
 
Kelvyn's Avatar
 
Join Date: Feb 2005
Location: In the Heart of the English Lake District
Posts: 1,381
Default

In addition to Kathleen's suggestion you could just define different classes for a:link (or ids if the style appears just once on a page) in your css.

   
__________________
Kelvyn

Web site design, hosting and marketing, Keswick in the UK Lake District

If you are planning a visit to Keswick then try Keswick Tourist Information website

Kelvyn is offline   Reply With Quote
Old 02-13-2006, 07:44 AM   #5
dthomsen8
Member
 
dthomsen8's Avatar
 
Join Date: Aug 2005
Location: Philadelphia, PA 19130
Posts: 2,158
Default Classes are the ticket!

Quote:
Originally Posted by Kelvyn
In addition to Kathleen's suggestion you could just define different classes for a:link (or ids if the style appears just once on a page) in your css.
KT's suggestion and yours are rather close to what I actually have now:


.email {color: blue; background-color: transparent; text-decoration: underline }
.url {color: maroon; background-color: transparent; text-decoration: underline }


E-mail us at:&nbsp; <a href="mailtor@fairmountcivicassociation.org" class="email"> pr@fairmountcivicassociation.org</a>

There is one spot where I need the classes where there is no anchor. Do you think that having the email and the links in different colors is a bit unusual? I haven't addressed what happens with hover or use, either.
dthomsen8 is offline   Reply With Quote
Old 02-13-2006, 08:00 AM   #6
iamback
Member
 
iamback's Avatar
 
Join Date: Oct 2005
Location: Amsterdam, NL
Posts: 4,894
Default

Quote:
Originally Posted by dthomsen8
KT's suggestion and yours are rather close to what I actually have now:
Code:
.email {color: blue; background-color: transparent; text-decoration: underline }
.url {color: maroon; background-color: transparent; text-decoration: underline }

E-mail us at:&nbsp; <a href="mailto:pr@fairmountcivicassociation.org" class="email"> pr@fairmountcivicassociation.org</a>
This makes the most sense to me because what you're actually doing is using color to distinguish between types of links - which neatly maps to classes (you're classifying links).

Quote:
Originally Posted by dthomsen8
There is one spot where I need the classes where there is no anchor.
That's the one case where I'd use a span, to which you then can apply the corresponding class. In general, you only need a span, when
  • you don't have any tag at all to tie a style/class to (as in this case); or
  • you need to apply a style to a group of (inline) tags aren't naturally grouped together already in another tag

Quote:
Originally Posted by dthomsen8
Do you think that having the email and the links in different colors is a bit unusual?
A bit, but I don't see any logical or usability problem with it either.

Quote:
Originally Posted by dthomsen8
I haven't addressed what happens with hover or use, either.
What you really need to do is apply a style for all four cases specifically: link, hover, visited and active - in that order (and hence not to just 'a' since that would also include an anchor target created with that tag as opposed to a link); you could do that once for generic links, and once for a special 'email' class overriding the generic class style (so you'd need only a single class, not two).

   
__________________
Marjolein Katsma
Look through my eyes on Cultural Surfaces (soon!), My ArtFlakes shop and Flickr.
Occasionally I am also connecting online dots... and sometimes you can follow me on Marjolein's Travel Blog
iamback is offline   Reply With Quote
Old 02-13-2006, 08:42 AM   #7
dthomsen8
Member
 
dthomsen8's Avatar
 
Join Date: Aug 2005
Location: Philadelphia, PA 19130
Posts: 2,158
Default Email, not a web page

What I did not say was that this is actually an email, done in HTML format, exactly like the MS Word document that the client supplied. Using the "save as HTML" option in Word was not an option with me.

Yes, I know plenty of people don't like emails in HTML format, but the vast majority are done that way now.
dthomsen8 is offline   Reply With Quote
Old 02-13-2006, 09:56 AM   #8
iamback
Member
 
iamback's Avatar
 
Join Date: Oct 2005
Location: Amsterdam, NL
Posts: 4,894
Default

Quote:
Originally Posted by dthomsen8
Yes, I know plenty of people don't like emails in HTML format, but the vast majority are done that way now.
Really? The vast majority of emails in HTML format I get are spams - so much so that anything I can't pre-sort gets into the "probably spam" folder, with only a few false positives. The vast majority of professional emails I get are plain text or at least offer me a choice.

   
__________________
Marjolein Katsma
Look through my eyes on Cultural Surfaces (soon!), My ArtFlakes shop and Flickr.
Occasionally I am also connecting online dots... and sometimes you can follow me on Marjolein's Travel Blog
iamback is offline   Reply With Quote
Old 02-13-2006, 11:14 AM   #9
ElyseC
Sysop Emeritus
 
ElyseC's Avatar
 
Join Date: Oct 2004
Location: southeastern Iowa, in the technology corridor
Posts: 2,190
Default

The vast majority of email I get from Windows-using friends and family comes as HTML. Most of them are not all that computer savvy, so they've never changed the defaults in their email software. Heck, most don't have any idea the difference between plain text and HTML mail, much less that factory defaults can be changed.

Most of the Mac-using friends who aren't computer savvy seem to send text email, so I'm betting their software defaults to text instead of HTML.

I'm using only Macs, but have my email app set to create new messages in text, but reply in the format of the message I was sent. If my sis sends me HTML and I reply, it goes back to her in HTML unless there's something very annoying in the HTML that I want to turn off, then I force my reply to be text only.

   
__________________
Elyse
ElyseC is offline   Reply With Quote
Old 02-13-2006, 12:16 PM   #10
Kelvyn
Staff
 
Kelvyn's Avatar
 
Join Date: Feb 2005
Location: In the Heart of the English Lake District
Posts: 1,381
Default

HTML mails are filtered into my "probable spam" folder.

With the changes being introduced by Yahoo & AOL, it seems that it will be safe,r when sending to mail accounts on those systems, to use only text emails. By removing images and links from HTML emails (as they have started to do) they may well cripple the message!

   
__________________
Kelvyn

Web site design, hosting and marketing, Keswick in the UK Lake District

If you are planning a visit to Keswick then try Keswick Tourist Information website

Kelvyn is offline   Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
PHP, link, image -- help! ktinkel Web Site Building & Maintenance 2 07-29-2006 02:32 PM
Colors out of gamut? marlene Images 3 03-04-2006 03:34 PM
Imaginary colors, Painter update in July EP ktinkel Images 1 07-25-2005 03:05 PM


All times are GMT -8. The time now is 11:46 AM.


Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Contents copyright 2004–2014 Desktop Publishing Forum and its members.