Wie in der Steuerung Wörter in anderer Farbe eintragen?

  • Hallo.


    Ich hoffe, dass mir von Euch jemand weiterhelfen kann.


    Ich habe in meinem Nav / Steuerung Bereich auf der linken Seite folgende Kategorien:


    HTML
    <ul > 
    <li><strong>Startseite</strong></li>
    <li><a href="Übermich.htm">Über mich</a> </li> 
    <li><a href="meineHobbys">meine Hobbys</a> </li> 
    <li><a href="Freizeit.htm">Freizeit</a> </li> 
    </ul>


    Nun würde ich gerne, wenn ich einen neuen Eintrag mache z.B. bei "Freizeit" dies auch in dem Nav -Bereich in einer anderen Farbe eintragen, damit jeder gleich sehen kann, dass es etwas neues gibt.


    Ich meine damit, wie kann ich in der nav-Zeile "Freizeit" daneben in einer anderen Farbe eintragen "neuer Eintrag" .


    Die Wörter "neuer Eintrag" dort einzufügen ist kein Problem, aber wie ändere ich für diese Wörter die Farbe. Ich habe auch schon einiges versucht, aber nichts klappt. Das es geht dass weiß ich, denn ich habe auf anderen Seiten schon oft gesehen, dass bei der Steuerung in den Kategorien der Zusatz "Neu" in einer anderen Farbe eingetragen wurde. Aber wie mache ich das? ?(


    Es wäre schön wenn mir jemand weiterhelfen könnte.


    Ps. Ich kann bisher nur html und css.


    Gruß ren

  • Du kannst z.B. neuen Einträgen eine class zuweisen:

    HTML
    <ul> 
         <li><a href="#">alter Eintrag</a></li> 
         <li class="neuerEintag"><a href="#">neuer Eintrag</a></li> 
    </ul>


    und dann per CSS die Farbe ändern:

    CSS
    .neuerEintrag a:link {
         color: red;
    }
  • Vielen Dank für deine schnelle Antwort.


    Ich habe es eben ausprobiert und es so eingetragen:


    HTML
    < ul> 
      <li><strong>Startseite</strong></li>
      <li><a href="Übermich.htm">Über mich</a> </li> 
      <li><a href="meineHobbys">meine Hobbys</a> </li> 
      <li><a href="Freizeit.htm">Freizeit</a> </li> <li><a href="#">alter Eintrag</a></li> 
      <li class="neuerEintag"><a href="#">neuer Eintrag</a></li> 
    </ul>


    und in css wie du geschrieben hast:

    CSS
    .neuerEintrag a:link {
      color: red;
    


    aber es ändert sich nichts.
    Die Worte "Neuer Eintrag" ändern keine Farbe.

  • Sorry, ich habe vergessen zu erwähnen dass ich nav mit hover in css habe.


    Also in css:


    CSS
    Nav a:hover {
      border-color: black; 
      border-left-color: black;
      border-top-color: black;
      color: white;
      background-color: #FF2AFF ;
    }


    und


  • Bitte, setze deine Code snippets in den dafür vorgesehenen BB-Code oberhalb des Text Eingabe Formulars! :)
    [Blockierte Grafik: http://wolf.wolfgang-m.de/beispiele/bbcode.png]



    Und probier mal das:

    CSS
    nav li { /* versuch selfhtml für nav*/
        list-style: none;
        margin: 0.1em; /* Aussenabstand */
        padding: 0; /* Innenabstand */
        color: #555;
    }
    /* und um sicherzugehen: */
    nav li a{
        color: #333;
    }


    Achte außerhalb auf die Reihnfolge deiner Selektoren Pseudoklassen (:link, hover ...),
    ich weiß nicht in wie weit das angeblich wichtig ist, ich hatte allerdings schon Probleme wenn die Reihnfolge falsch war..
    (die letzte Definition überschreibt die vorher.)


    Wenn du zuerst


    Reihnfolge, wie sie funktioniert:

    CSS
    a{ background-color: black;}
        a:link { background: thistle; }
        a:visited { background: lavender; }
        a:hover { background: pink;  } 
        a:active { background: oldlace; }
  • Danke für den Hinweis mit dem BB Code, das wusste ich bisher noch nicht und auch vielen Dank für den Fehler bei nav.


    Ich habe deine Codes gerade ausprobiert, aber damit heben sich die ganzen verschiedenen Farben auf die ich im nav Bereich habe.


    Ich versuche noch einmal einfacher zu erklären was ich möchte:


    In nav habe ich jede Kategorie einzeln in einem Rahmen. Nun möchte ich in dem Rahmen der Kategorie "Freizeit" daneben oder darunter, das Wort "NEU" dazuschreiben, allerdings soll das Wort "Neu" in einer anderen Farbe sein (damit es gleich jedem auffällt) und auch in dem gleichen Rahmen sein wie "Freizeit".

  • Okay das problem ist:
    Das du mit einer genauen Angabe wie " ul li a{} " eine solche überschreibst: "li a{} "


    Hier mal Code zum spielen: JSFiddle


    HTML
    <ul>
        <li><a href="#eins">Punkt 1</a></li>
        <li><a href="#zwei">Punkt 2</a></li>
        <li><a href="#drei" class="neu">Punkt 3</a></li>
    </ul>



    EDIT(wegen basii's comment):
    Der a-Tag wurde noch zum Blockelement gemacht, und größer, damit man auf die ganze Fläche (nicht nur auf den Text), klicken kann, um ans Ziel zu kommen. :)

    4 Mal editiert, zuletzt von wolf () aus folgendem Grund: Falsches Beispiel.

  • Das ist aber ungut, mach einfach den Link zum Blockelement und setze es auf die gleiche Größe wie das Listen-Element, sonst war es das mit der Semantik :)


    Auch wenn es in diesem Fall um etwas anderes geht, wir wollen ja nichts verkehrtes lernen :)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!