Links in Unterschiedlichen Farben


#1
Moin Leute,

bisher konnte ich viele meiner Fragen durch dieses Forum beantworten.

Nun stehe ich vor einem Problem und zwar habe ich verschiedene Link leisten die ich in Unterschidlichen Farben haben möchte. Wie ich einzelne links ändere ist mir bewusst, jedoch habe ich hier das Problem, das ich bereits die ID vergeben habe da ich sie mit JS abrufe. Die standart a befehle in css sind belegt.

Kurz mal die links und das css:

HTML:
Die ersten links:

            <a class="show_login" href="#top_nav_1" id="top_nav_1">Freizeit</a> |
            <a class="show_login" href="#top_nav_2" id="top_nav_2">Jobs</a> |
            <a class="show_login" href="#top_nav_3" id="top_nav_3">Unterstützung</a> |
            <a class="show_login" href="#top_nav_4" id="top_nav_4">Partner</a> |
            <a class="show_login" href="#top_nav_5" id="top_nav_5">Login</a>






Die zweiten links:

            <a href="?home=ueberuns" id="link1">&Uuml;ber Uns</a> |
            <a href="?home=kontakt" id="link2">Kontakt</a> |
            <a href="?home=impressum" id="link3">IMPRESSUM</a> |
            <a href="?home=datenschutz" id="link4">Datenschutz</a> |
            <a href="?home=agbs" id="link5">AGB's</a>

CSS:
/* unvisited link */
a:link {
  color:#c48D71;
  text-decoration: none;
}

/* visited link */
a:visited {
  color:#c48D71;
  text-decoration: none;
}

/* mouse over link */
a:hover {
  color:#c48D71;
  text-decoration:underline;
  font-size:16px;;
}

/* selected link */
a:active {
  color:#c48D71;
  text-decoration: underline;
  font-size:16px;
}
Die zweiten sollen in einem braun Ton angezeigt werden was auch klappt, jedoch betrifft es mit diesem Code auch die oberen.

Ich suche also etwas wie a2 oder so, vlt denke ich auch in eine völlig falsche richtung.

Vielen Dank für eure Aufmerksamkeit.
 
#3
Interessanter Ansatz. Habe es grade dann auf eine andereweise gelöst. indem ich a nicht mehr declariert habe sondern beide über class:

CSS:
.link_top_nav {
    color:#C2eb49;
      text-decoration: none;
}

.link_top_nav:visited {
    color:#C2eb49;
      text-decoration: none;
}

/* mouse over link */
.link_top_nav:hover {
  color:#C2eb49;
  text-decoration:underline;
  font-size:24px;;
}

/* selected link */
.link_top_nav:active {
  color:#C2eb49;
  text-decoration: underline;
  font-size:24px;
}




/* unvisited link */
.link_bot_nav {
  color:#c48D71;
  text-decoration: none;
}

/* visited link */
.link_bot_nav:visited {
  color:#c48D71;
  text-decoration: none;
}

/* mouse over link */
.link_bot_nav:hover {
  color:#c48D71;
  text-decoration:underline;
  font-size:16px;;
}

/* selected link */
.link_bot_nav:active {
  color:#c48D71;
  text-decoration: underline;
  font-size:16px;
}
So funktioniert es jetzt jedenfalls, denke das ich damit auch langfristig weiter komme. Denoch vielen Dank für deinen Ansatz.
 

Neue Beiträge