Custom CSS links

[grease]

Hi,
I have my basic SSL site link settings set up: a:link,a:visited,a:active:,and a:hover
They all seem to work fine.
The problem is, I want a unique look for a navigation area at the bottom of my page.
To create this area I made the following test style:


.navbar {
font-size: 24px;
text-align: center;
text-decoration: underline overline line-through;
color: #666600;
font-weight: bold;
}

It seems that all of the settings (overline,line-through,font size,etc) override the standard link settings....except for color and underline - the only two I really want to change. How can I fix this?
P.S. I am using an external CSS style sheet, if that makes any difference.

I am new to CSS and appreciate any help I can get!
Thanks,

Grease

[sijpie]

I think you should use an additional set of css stements here like this:

a.navbar:hover {....}
a.navbar:link {...}
etc.

This specifies the properties of the link behaviour in the navbar class.

(I'm not the guru you're taking me for, feeling my way around css land as much as the next guy!)

[matauri]

Grease, if you are going to use CSS & want to have different link formats, its a good idea to name each link class. Having a generic class like a:hover, etc, usually over rides any other formatting of links. If you use the same style sheet for the whole site, there is bound to be situations where you dont want the same link formatting.

[danfluidmind]

I think you should use an additional set of css stements here like this:
a.navbar:hover {....}
a.navbar:link {...}

Adding class="navbar" to every A tag would be superfluous since he's already identified those links as navbar links by placing them in the div (or td) with class="navbar". Your mark up should be something like:

<div class="navbar">
<ul>[*]Item 1[*]Item 2[*]Item 2[/list]
</div>

And then your style sheets would read something like this:

.navbar a { ... }
.navbar a:link { ... }
.navbar a:visited { ... }
.navbar a:hover { ... }
.navbar a:active { ... }

(If you don't want them to be underlined, you only need the text-decaration style in the first selector (.navbar a), it doesn't need to be in every one.)

If you 'd like to see how to style the nav bar with it being a UL instead of in a table, you can look at an example I set up for someone on the css-d mailing list at http://fluidmind.org/test/css/centeredlist.html

Cheers
--Dan

[netman4ttm]

Try this site:

www.w3.org/MARKUP/Guide/Style

[rawdist]

Here's a link to some css 'toys' that sre so interesting it makes learning easy.

http://theimposter.org/cascade/

[paulhiles]

The link behaviour that you're describing can be achieved by using pseudo-classes for your link selectors. The number of CSS statements depends on exactly how you want your 'navbar' links to appear and behave. See the following page from the Style Master site.

[grease]

Thank you all for your helpful advice!
I can finally make seperate links colors and styles.
I am still have a problem with the DIV command that you recommended danfluidmind.

When I use the following, it will format everything but the color:

<div class="top">
Item1
Item2
Item2
</div>

When I do this, I can get the proper look, but seems to be very redundent:

Item1
Item1
Item1

Why does the DIV only handle certain formatting?

Thanks again,

Grease

[danfluidmind]

When I do this, I can get the proper look, but seems to be very redundent:
Item1
Item1
Item1

Redundent indeed, especially if you have a lot of links. I'd have to see your style sheets to see why you're not getting the color, but try this:

<div class="top">
Item 1
Item 2
Item 3
</div>

Then your style sheets would be something like this (you replace with the correct colors for your design):

div.top {
    background: #000000;  /* bgcolor of whole area */
    text-align: center;
}
div.top a, div.top a:link {
    text-decoration: none;
    color: #111111;
    padding: 0.5em 1em;
}
div.top a:visited {
    color: #222222;
}
div.top a:active {
    color: #333333;
}
div.top a:hover {
    color: #444444;
}

So the A tags are selected in relation to the "top" DIV. Those selectors basically say: "apply these styles to A tags that appear anywhere within a DIV tag of class 'top'."

Again, if take a look at that example I gave you the link to in my previous post and look at the source code for it.

--Dan

[cooper]

depending on how you want your lower navigation to look, and how much CSS you want to write you might want to consider using ID's and classes to get the effect you are going for. This works especially well for location sensitive styling.

First, I think that Dan had the best HTML:

<ul>[*]Item 1 [*]Item 2 [*]Item 3 [/list]

and I would add to that a descriptive class or ID for the ul tag:

<ul id="bnav">[*]Item 1 [*]Item 2 [*]Item 3 [/list]

ID's are best for applying specific styles to only one element (and its child elements), where classes can be applied to multiple elements, in a document.

So the CSS can be applied as:

ul#bnav {list-style:none;}
#bnav li a {text-decoration:none;}
#bnav li a:link {color:#00F;}
#bnav li a:visited {color:#888;}
#bnav li a:hover {color:#F00;}
#bnav li a:active {color:#0F0;}

(Those three character hex colors are shorthand.)
Obviously you can adjust the styles as needed. One more thing, in order for links to function properly with all browsers, make sure to order your psuedo-classes in the above order (link, visited, hover, active). Someone more clever than I got me to remember it this way: LoVe, HA! (kind of a cynic, I know)

The redundancy you wrote about is covered by applying the style to one parent element to control those pesky children! That's the Cascading part of CSS.

BTW - Flame, assuming you are using the web site to post your replies, you can edit your posts and use the "Code" button to allow HTML tags to be shown.