CSS text link hover - setting multiple link colour options

  • cerio
  • Proficient
  • Proficient
  • User avatar
  • Posts: 263
  • Loc: UK

Post 3+ Months Ago

Hi,
I'm new to web development. I've created a site in Dreamweaver XP, in which I used a CSS to make the text links underline only on hover (mouseover) and display and underline in a specified colour.

There are 5 sections in this site, each with their own colour scheme affecting the head graphic, menu table and text. I want the text and underline of linked text in the menu to match each scheme. Is there a way I can set more than one option for links within one CSS? Presently I have created a CSS for each colour scheme to ensure links show and undeline in my chosen colours but having 5 different CSS seems cumbersome and I'm sure I should be able to set more than one link appearance in one CSS. I can't find anything that tells me how, though it may be staring me in the face, as all this is new to me.

Thanks.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

short of using a scripting language to achieve what you want programatically, you can write unique selectors in one style sheet, instead of a whole new style sheet.
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

Another approach would be to have your one primary style sheet, but leave out the link elements. Then create a separate "small" style sheet for each link style you want and use the @import url option to call the link styles into the parent style sheet. I think I'd try that, vs having to identify all my anchor links by a specific class. Check style sheet one in this thread to see an example of how @import can be used to include a second style sheet inside a primary one:
http://www.ozzu.com/sutra37155.html#37155

Although digitalMedia's solution works just as well, I would find it easier to do it like above.
  • cerio
  • Proficient
  • Proficient
  • User avatar
  • Posts: 263
  • Loc: UK

Post 3+ Months Ago

Hi.

thanks for your replies.

Ok, I created a little CSS with just links on it and made the section at the top of the template, where it listed the CSS, editable. I then created new pages from the template and changed the CSS name in the code in the individual pages and, voila, the link colour of just that page changes but updating the menu on the template still updates the menu on that page, while allowing the pages to have the different colours.

Of course, I've just realised I still have a problem, the cells the menu text links are in, are, of course, locked by the template, allowing it to update all pages. This means the background colour of those cells is locked too, so can't be changed to match the graphic across the top and bottom, the thing that has a variation of colour for each section. The background colour of the cells making the menu section on the left side of the site has to match the top and bottom, so has to change with each section, as well as the link colour, so I'm kinda back at square one.

I tried making just the colour of the cell editable while not making the content of it editable but it wasn't having that. Rats!

Oh well, at least I can change link colours on pages made from templates with locked menus if I don't need to change the cell colour too, just doesn't apply to this particular site.
  • fional24
  • Graduate
  • Graduate
  • fional24
  • Posts: 125
  • Loc: Scotland

Post 3+ Months Ago

You could use the <div> tag for your sections on the page and assign each one its own ID and set of CSS rules. This would let you have totally different formatting for each section if you want.You can set these rules in your css file, which cuts out the need to embed your styles.
  • gilray4
  • Novice
  • Novice
  • gilray4
  • Posts: 17
  • Loc: Hawai'i

Post 3+ Months Ago

I think that "fional24's" suggestion is the best. Short hand all the commen attributes of the links in the general stylesheet, and get specific with each different link config' by putting your link attributes in the divisions style. I just grossly reduced code bulk on a site by doing this along with what atno/tw suggested - I made a second style sheet aI called "presentation.css" this sheet has all my links for the whole site, all shorthanded and grouped accordingly>>>
All hail css>> I managed to get 26 pages albeit mostly text with few images, down to .6 megs, thats right 6ookb, woot
  • cerio
  • Proficient
  • Proficient
  • User avatar
  • Posts: 263
  • Loc: UK

Post 3+ Months Ago

Hi,
that sounds very promising but I'm rather lost. Too much of a novice to fully grasp it. Is it possible to paste a bit of code here that I can see that done in, then I can follow by example?

Thank you.
  • allgoodpeople
  • Proficient
  • Proficient
  • User avatar
  • Posts: 379
  • Loc: here

Post 3+ Months Ago

cerio wrote:
Hi,
that sounds very promising but I'm rather lost. Too much of a novice to fully grasp it. Is it possible to paste a bit of code here that I can see that done in, then I can follow by example?

Thank you.


I would think the easiest way to do it would be as follows (using an example from my own style sheet)

Code: [ Select ]
a {color:#07a; text-decoration: none;     }
a:link {color:#07a;}
a:visited {color:#663399;}
a:hover { color:#80003D; }

a.invisible {color:#008080; text-decoration:none;}
a.invisible:link {color:#008080;}
a.invisible:visited {color:#008080;}
a.invisible:hover {color:#00808;}
  1. a {color:#07a; text-decoration: none;     }
  2. a:link {color:#07a;}
  3. a:visited {color:#663399;}
  4. a:hover { color:#80003D; }
  5. a.invisible {color:#008080; text-decoration:none;}
  6. a.invisible:link {color:#008080;}
  7. a.invisible:visited {color:#008080;}
  8. a.invisible:hover {color:#00808;}


In this example, i have two styles for links. The first one applies to all links unless otherwise specified. I also had links I wanted to appear teal with no underline, all the time. For those links, i created the second style for those links. I then applied the .invisible style in my HTML as follows:

Code: [ Select ]
<a href="http://www.mylink.htm" class="invisible">My text link</a>


Be sure you place the class within the <a> tag. It took me a few minutes at first to get it to work because i was putting it in the <p> tag surrounding the text link.

You can create as many link styles as you like, just type them up, put them in your style sheet, and apply then in your document as needed.

Mark
  • cerio
  • Proficient
  • Proficient
  • User avatar
  • Posts: 263
  • Loc: UK

Post 3+ Months Ago

Excellent, I'll give that a go.

Thank you.
  • gilray4
  • Novice
  • Novice
  • gilray4
  • Posts: 17
  • Loc: Hawai'i

Post 3+ Months Ago

I still can't figure out why people are so "class happY" when it comes to css? I would suggest this, code your links in the div they live in>
Now that is not say do it like this #div{blah:blah; a:link:blah
as this is both incorrect and bulky>
try this you have created your #div in a style sheet, either on the same stylesheet (I make one called presentation that I put all my link stuff on)

do this #di1, #div2, #div3, #div4, {alllgetthiesebasicattributes;}
#div1, #div2,{getthesemorespecificattributes;}
#div3, #div{cangetrealspecificattributes;}

remeber it's what stylesheets are all about you could have 5 sheets of styles and the browser does'nt care if it gets width from sheet "A" and color from sheet "B" and all link info from sheet "C"
  • cerio
  • Proficient
  • Proficient
  • User avatar
  • Posts: 263
  • Loc: UK

Post 3+ Months Ago

Hi,
ok, I tried...
"I would think the easiest way to do it would be as follows (using an example from my own style sheet)

Code:
a {color:#07a; text-decoration: none; }
a:link {color:#07a;}
a:visited {color:#663399;}
a:hover { color:#80003D; }

a.invisible {color:#008080; text-decoration:none;}
a.invisible:link {color:#008080;}
a.invisible:visited {color:#008080;}
a.invisible:hover {color:#00808;}


In this example, i have two styles for links. The first one applies to all links unless otherwise specified. I also had links I wanted to appear teal with no underline, all the time. For those links, i created the second style for those links. I then applied the .invisible style in my HTML as follows:

Code:
<a href="http://www.mylink.htm" class="invisible">My text link</a>


Be sure you place the class within the <a> tag. It took me a few minutes at first to get it to work because i was putting it in the <p> tag surrounding the text link.
"

It worked beautifully EXCEPT, I can't get the links to underline on hover (mouseover), despite adding underline

I tried adding it to ... a.invisible {color:#008080; text-decoration:none;}, in place of 'none', just to see what that did,
to... a.invisible {color:#008080; text-decoration:none;} with the none removed fromthe first line and then even with the none left in the first line.

No underline appeared at any time on the links

I tried every permutation I can think of and, although I can get them to be any clour, font or text size I like, I can't get underline at all. I only want it on hover.


Where am I going wrong? Something obvious, no doubt
  • allgoodpeople
  • Proficient
  • Proficient
  • User avatar
  • Posts: 379
  • Loc: here

Post 3+ Months Ago

If I understand your problem correctly, you want no underline on your links, except when the mouse is hovering over them, is that correct? To do that simply add text-decoration to the appropriate selectors, and leave it out of the others. It would look like this:

Code: [ Select ]
a {color:#07a; text-decoration: none;}
a:link {color:#07a;}
a:visited {color:#663399;}
a:hover {color:#80003D;text-decoration: underline;}
  1. a {color:#07a; text-decoration: none;}
  2. a:link {color:#07a;}
  3. a:visited {color:#663399;}
  4. a:hover {color:#80003D;text-decoration: underline;}


if you were doing a child class, simply add the class name in the appropriate section.

If this is giving you issues, I'm not sure why. It works for me.

Mark
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

Quote:
a.invisible:hover {color:#00808;}



ummm...look at your hex number for your teal hover color. Notice anything wrong?
  • Kraze
  • Newbie
  • Newbie
  • Kraze
  • Posts: 8
  • Loc: New Orleans, LA

Post 3+ Months Ago

To create an underline on hover you need to change the
Code: [ Select ]
text-decoration: none
to read
Code: [ Select ]
text-decoration: underline


Here is another example with a few more attributes that may help you:
Code: [ Select ]
A.MAINNAV:link
    {
  font-family: Verdana, Arial, Tahoma, sans-serif;
  font-size: 9pt;
  font-weight: bold;
  color: #000000;
  text-decoration: none
    }

A.MAINNAV:visited
    {
  font-family: Verdana, Arial, Tahoma, sans-serif;
  font-size: 9pt;
  font-weight: bold;
  color: #000000;
  text-decoration: none
    }

A.MAINNAV:hover
    {
  font-family: Verdana, Arial, Tahoma, sans-serif;
  font-size: 9pt;
  font-weight: bold;
  color: #FF0000;
  text-decoration: underline
    }
  1. A.MAINNAV:link
  2.     {
  3.   font-family: Verdana, Arial, Tahoma, sans-serif;
  4.   font-size: 9pt;
  5.   font-weight: bold;
  6.   color: #000000;
  7.   text-decoration: none
  8.     }
  9. A.MAINNAV:visited
  10.     {
  11.   font-family: Verdana, Arial, Tahoma, sans-serif;
  12.   font-size: 9pt;
  13.   font-weight: bold;
  14.   color: #000000;
  15.   text-decoration: none
  16.     }
  17. A.MAINNAV:hover
  18.     {
  19.   font-family: Verdana, Arial, Tahoma, sans-serif;
  20.   font-size: 9pt;
  21.   font-weight: bold;
  22.   color: #FF0000;
  23.   text-decoration: underline
  24.     }


A fast break down of this…

A.MAINNAV:link

Change MAINNAV to be the name of the class that you want to create. In your case you said you have 4 different themes, you may want to name them THEME1, THEME2, etc. (It doesn't have to be in all caps.)

This is the class that goes into your
Code: [ Select ]
<a href="http://www.someurl.com" class="THEME1">Click me</a>

link, visited, and hover are the states of your link.

font-family let's you pick the font that the link will use. I have 4 listed, if the user has Verdana it will use that, if not it will use Arial, and so on.
font-size is the size of the font, you can use either pt or px units
font-weight determines if it's bold or normal (or take this line out if you don't want it bold)
color is the color of the link, use a hexadecimal value with the # sign in front with 6 numbers always following.
text-decoration is what determines when your link is underlined or not.

Hope this helps.
  • cerio
  • Proficient
  • Proficient
  • User avatar
  • Posts: 263
  • Loc: UK

Post 3+ Months Ago

Hi, thanks, I'll try that latest example.

ATNO/TW... the hex error was just in the code I put in my post, I didn't notice that, as I carelessly typed it. I didn't actually use that in the test page I made, the hex in my link's code was ok, so that wasn't the problem with it. Sorry, misled you there.

I'm getting there, slowly. Learning such a lot with the help of this forum - thanks all.
  • allgoodpeople
  • Proficient
  • Proficient
  • User avatar
  • Posts: 379
  • Loc: here

Post 3+ Months Ago

ATNO/TW wrote:
Quote:
a.invisible:hover {color:#00808;}



ummm...look at your hex number for your teal hover color. Notice anything wrong?


Um, I meant to do it that way :lol: I always thought that sixth digit was useless anyway. Kind of like a sixth finger.

it works, but good looking out!

Mark
  • cerio
  • Proficient
  • Proficient
  • User avatar
  • Posts: 263
  • Loc: UK

Post 3+ Months Ago

ah, I see. I didn't know that. I'm curious now and will try that too.
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

*smiles
  • LazyJim
  • Student
  • Student
  • LazyJim
  • Posts: 92

Post 3+ Months Ago

fional24 and gilray4 are absolutely right, they are saying the same thing I keep saying in the other threads on this forum...

Use the cascade!
  • Umesh
  • Born
  • Born
  • Umesh
  • Posts: 1

Post 3+ Months Ago

Hi,
can any one help me out that if i want underline on a link when hove after visited once?
Regards
Umesh
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

Code: [ Select ]
a.visited {
text-decoration: underline
}
  1. a.visited {
  2. text-decoration: underline
  3. }
  • Mas Sehguh
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1853

Post 3+ Months Ago

You shouldn't remove underlines from links. Period. Even if they're a different color. Often, color-blind people cannot see the difference in color, so they cannot see the link. You don't want to discriminate against the disabled, do you?

Neksus, you probably mean a:visited, not a.visited.

Since he wants it on hover of a visited link, he would want a:visited:hover.
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

haha, ya bad mistake on my part, as for his question i misinterpreted it, didnt see the hover on visited. as for the underline, if you use enough contrast between your links and content text the colour blind *should* be able to differentiate, unless of course you're using complete opposites (red/gree, blue/yellow)
  • Mas Sehguh
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1853

Post 3+ Months Ago

What matters is contrast between their levels of brightness. There are color-blindness issues such as red-green, red-yellow, and blue-green, which are very common, and there are those which involve the lack of any color. The level of brightness is what primarily matters, and having contrast in level of brightness is risky when people are using monitors which behave differently -- on some monitors, #000000 and #555555 are barely discernable, while on others, #FFFFFF and #CCCCCC are barely discernable.

It is possible for there to be enough contrast for the completely color-blind, but that greatly limits the options for choice of color, and it does not make sense to have link colors so severely diminished in brightness relative to the rest of the text.
  • neksus
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2194
  • Loc: Canada

Post 3+ Months Ago

ya i hate how monitors display colour differently, and especially when displayed on lcd projectors as well! it makes some presentations hard to do!

Post Information

  • Total Posts in this topic: 25 posts
  • Users browsing this forum: No registered users and 64 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.