• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

a-tag mit css stylen

R

Ruccola1

Mitglied
Hallo an alle,

ich möchte dem a-tag ein unterschiedliches Aussehen verleihen.
Nur leider funktioniert es so nicht:

HTML
<li><a class="titel"href="referenzen.html">Referenzen</a></li>

CSS
.titel a {
color: #fff;
}

Kann mir bitte jemand weiter helfen?

Vielen Dank im Voraus
 
vielen Dank, aber das ändert leider auch nichts:-(
hab ich die a klasse im html richtig vergeben, oder liegt da vielleicht ein Fehler drin?
 
Code: 
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>Navigation</title>
 <style>  
* {
 margin:0;
 padding:0;
 text-decoration: none;
 list-style:none;
 border:none;
}

nav {
 background: #eee;
 text-align: center;
}

nav a {
 padding:10px 20px;
 display:block;
 text-align: center;
 color:#000;
}

nav ul li {
 display:inline-block;
 position: relative;
}

nav ul li a:hover  {
 background: #ddd;
}

a.titel {
 color:#f00;
}

/* Oder alternativ ohne Klasse das 4. Element
li:nth-child(4) a {
 color:#f00;
}
*/
</style>
</head>
<body>
  <nav>
  <ul>
  <li><a href="#">News</a></li>
  <li><a href="#">Team</a>
  <li><a href="#">Studio</a></li>
  <li><a class="titel" href="referenzen.html">Referenzen</a></li>
  </ul>
  </nav>
</body>
</html>
 
djheke schrieb:
Code: 
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>Navigation</title>
<style> 
* {
margin:0;
padding:0;
text-decoration: none;
list-style:none;
border:none;
}

nav {
background: #eee;
text-align: center;
}

nav a {
padding:10px 20px;
display:block;
text-align: center;
color:#000;
}

nav ul li {
display:inline-block;
position: relative;
}

nav ul li a:hover  {
background: #ddd;
}

a.titel {
color:#f00;
}

/* Oder alternativ ohne Klasse das 4. Element
li:nth-child(4) a {
color:#f00;
}
*/
</style>
</head>
<body>
  <nav>
  <ul>
  <li><a href="#">News</a></li>
  <li><a href="#">Team</a>
  <li><a href="#">Studio</a></li>
  <li><a class="titel" href="referenzen.html">Referenzen</a></li>
  </ul>
  </nav>
</body>
</html>
Zum Vergrößern anklicken....

Mann könnte ihm doch besser Tips geben und erklären was er falsch gemacht hat als ihm entfach die Lösung zu geben?
 
Stimmt, aber mit den wenigen Informationen kommen wir zu keinem Ergebnis. Außerdem kann er den Code ja vergleichen um festzustellen was er falsch gemacht hat.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben