CODEWITHSUNDEEP
csshyperlink
Chris
Chris

Reputation: 1929

Link css different color scheme problem

Why are the nav links taking the style of the normal links?

This is a basic navigation menu:

<!--      Begin menu -->
<div align="center"> <span class="nav">
  <a href="index.html" title="Graphic Boulevard - Home pagina">Home</a> | 
  <a href="autobelettering.html" title="Graphic Boulevard - Autobelettering">Autobelettering</a> | 
  <a href="reclame.html" title="Graphic Boulevard - Binnen reclame en Buiten reclame">Reclame</a> | 
  <a href="prints.html" title="Graphic Boulevard - Groot formaat printen">Prints</a> | 
  <a href="textiel.html" title="Graphic Boulevard - Textiel bedrukken">Textiel</a> | 
  <a href="ontwerpen.html" title="Graphic Boulevard - Ontwerpen">Ontwerpen</a> | 
  <a href="aanleveren.html" title="Graphic Boulevard - Digitale bestanden aanleveren">Aanleveren</a> | 
  <a href="contact.html" title="Graphic Boulevard - Neem contact met ons op.">Contact</a>
</span><br />
</div>
   <!--   Einde Menu -->

This is the CSS

/* Normal links */

a {
    font-size: 12px;
    color: #DC342F;
}

a:link {
    text-decoration: none;
    color: #DC342F;
}
a:visited {
    text-decoration: none;
    color: #DC342F;
}
a:hover {
    text-decoration: underline;
    color: #DC342F;
}

a:active {
    text-decoration: none;
    color: #DC342F;
}

/* navigation links */

a.nav {
    text-decoration: none;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 14px;
}
a.nav:visited {
    text-decoration: none;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 14px;
}
a.nav:hover {
    text-decoration: none;
    color: #DFFFFFF;
    font-weight: bold;
    font-size: 14px;
}
a.nav:active {
    text-decoration: none;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 14px;
}

Upvotes: 1

Views: 815

Answers (3)

Tomalak
Tomalak

Reputation: 338128

Your links don't have the class "nav" themselves. You want this:

span.nav a {
    text-decoration: none;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 14px;
}
span.nav a:visited {
    text-decoration: none;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 14px;
}
span.nav a:hover {
    text-decoration: none;
    color: #DFFFFFF;
    font-weight: bold;
    font-size: 14px;
}
span.nav a:active {
    text-decoration: none;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 14px;
}

Upvotes: 1

Rigobert Song
Rigobert Song

Reputation: 2784

Kev is correct

a.nav is a hyperlink element with class of nav

.nav a is hyperlinks in parent class nav

Upvotes: 2

Kev
Kev

Reputation: 16321

This probably belongs on doctype, but I think you want your selector to read ".nav a" rather than "a.nav".

Upvotes: 3

Related Questions