Stephan Laemmer: Linkfarben in einer Tabelle

Moin Moin !

So, jetzt probiere ich schon seit Tagen herum, die Farben eines Links in einer Tabelle per CSS zu verändern.

Eigentlich habe ich alle Kombinationen schon durch, momentan habe ich ein Pseudo-Format a.weiss erstellt und will es mit <a class="weiss"... aufrufen, klappt aber nicht, solange ich mich in einer Tabelle befinde.

Wie geht sowas ?

Hier der Auszug aus meiner css-Datei:

a:link { font-weight:bold; color:#508DE8; text-decoration:none }
a:visited { font-weight:bold; color:#508DE8; text-decoration:none }
a:hover { font-weight:bold; color:#508DE8; text-decoration:none }
a:active { font-weight:bold; color:#508DE8; text-decoration:none }
a:focus { font-weight:bold; color:#508DE8; text-decoration:none }

a.weiss:link { color:#000000; }
a.weiss:visited { color:#000000; }
a.weiss:active  { color:#000000; }

Oben sind normal die Links verknüpft, die im normalen Text stehen, die Links a.weiss sollen aber eine andere Farbe bekommen.

CU und vielen Dank schon mal im voraus

Stephan

  1. Moin Moin !

    Tach,

    So, jetzt probiere ich schon seit Tagen herum, die Farben eines Links in einer Tabelle per CSS zu verändern.

    Eigentlich habe ich alle Kombinationen schon durch, momentan habe ich ein Pseudo-Format a.weiss erstellt und will es mit <a class="weiss"... aufrufen, klappt aber nicht, solange ich mich in einer Tabelle befinde.

    Das ist kein Pseudo-Format, sondern eine Klasse. Daher auch der Attribut-Name class!

    Wie geht sowas ?
    Hier der Auszug aus meiner css-Datei:

    a:link { font-weight:bold; color:#508DE8; text-decoration:none }
    a:visited { font-weight:bold; color:#508DE8; text-decoration:none }
    a:hover { font-weight:bold; color:#508DE8; text-decoration:none }
    a:active { font-weight:bold; color:#508DE8; text-decoration:none }
    a:focus { font-weight:bold; color:#508DE8; text-decoration:none }

    Die Reihenfolge ist falsch.
    Korrekt ist :link :visited :focus :hover :active

    a.weiss:link { color:#000000; }
    a.weiss:visited { color:#000000; }
    a.weiss:active  { color:#000000; }

    Oben sind normal die Links verknüpft, die im normalen Text stehen, die Links a.weiss sollen aber eine andere Farbe bekommen.

    Wo ist das Problem? Bis auf :focus an der falschen Stelle paßt doch alles.

    CU und vielen Dank schon mal im voraus

    Stephan

    Andreas

    1. Wo ist das Problem? Bis auf :focus an der falschen Stelle paßt doch alles.

      Andreas

      Moin Moin !

      Das Problem liegt einfach darin, daß ich trotz Verwendung des Befehls
      <a class="weiss" href="... eben nicht diese css-Formatierung bekomme (nämlich gar keine).

      Vielleicht spielt es eine Rolle, daß die CSS-Formatierungen in einer extra Datei stehen ? Die anderen Formatierungen aus dieser Datei funktionieren jedenfalls...

      CU

      Stephan

  2. Hallo Stephan,

    der Klassename "weiss" soll wohl heißen, daß der Link weiß werden soll. Dann solltest Du aber auch in der Farbdefinition den Code für weiß verwenden (und nicht für schwarz ;-)

    a.weiss:link { color:#000000; }

    ^^^^^^ dat is' schwarz! ;-)

    War zwar nicht Deine Frage aber vielleicht noch folgendes:
    Wenn die besonders formatierten Links immer in einer Tabelle stehen, dann sollte auch folgendes reichen:

    td a:link {...}
    u.s.w.

    Das erspart Dir, jedesmal den Klassennamen angeben zu müssen.

    Und noch etwas: in SelfHTML ist zwar die von Dir niedergeschriebene Reihenfolge der Pseudoklassen angegeben, aber ich würde :focus an die dritte Position setzen (sonst greifen bei einem fokusierten Link :hover bzw. :active nicht)

    Viele Grüße
    Carsten

    1. Moin Moin !

      a.weiss:link { color:#000000; }
                                 ^^^^^^ dat is' schwarz! ;-)

      Wußte ich auch schon ;-) Hätte vielleicht dann doch nicht einfach Copy and paste machen sollen...

      War zwar nicht Deine Frage aber vielleicht noch folgendes:
      Wenn die besonders formatierten Links immer in einer Tabelle stehen, dann sollte auch folgendes reichen:

      td a:link {...}
      u.s.w.

      Hm, funktioniert aber nicht, wenn ich die CSS-Formatierungen in einer externen css-Datei definiere

      CU

      Stephan

  3. » Hier der Auszug aus meiner css-Datei:

    a:link { font-weight:bold; color:#508DE8; text-decoration:none }
    a:visited { font-weight:bold; color:#508DE8; text-decoration:none }
    a:hover { font-weight:bold; color:#508DE8; text-decoration:none }
    a:active { font-weight:bold; color:#508DE8; text-decoration:none }
    a:focus { font-weight:bold; color:#508DE8; text-decoration:none }

    a.weiss:link { color:#000000; }
    a.weiss:visited { color:#000000; }
    a.weiss:active  { color:#000000; }

    moin,
    mein tipp ist, das leerzeichen am anfang der definition wegzulassen. (statt { color... } lieber {color... }
    ausserdem gehören die farbangaben inanführungszeichen:
    {color:'#000000'; } (Das ist die RICHTIGE syntax!!!)

    Fabian

    PS:Warum heißen die SCHWARZEN links a.weiss ??? ;-)

    1. ausserdem gehören die farbangaben inanführungszeichen:
      {color:'#000000'; } (Das ist die RICHTIGE syntax!!!)

      http://www.w3.org/TR/REC-CSS2/syndata.html#color-units

    2. Hallo,

      moin,
      mein tipp ist, das leerzeichen am anfang der definition wegzulassen. (statt { color... } lieber {color... }

      Warum? Abgesehen daß Leerzeichen (bzw. Whitespace) an dieser Stelle erlaubt sind, hat Netscape damit Probleme, wenn vor oder nach den geschweiften Klammern _kein_ whitespace ist.

      ausserdem gehören die farbangaben inanführungszeichen:
      {color:'#000000'; } (Das ist die RICHTIGE syntax!!!)

      An dieser Stelle liegst Du definitiv falsch. Da dürfen keine Anführungszeichen stehen. Wie kommt man nur auf solchen Quatsch?

      siehe:
      http://www.w3.org/TR/REC-CSS2/syndata.html#value-def-color

      Fabian

      PS:Warum heißen die SCHWARZEN links a.weiss ??? ;-)

      Vielleicht, damit man sie von den WEISSEN links, die über die Klasse a.schwarz erzeugt werden, unterscheiden kann ;-)

      Andreas

  4. Moin Moin ebenfalls!

    Wie bindest du die CSS denn ein?
    Muss das nicht heißen
    a:link.weiss
    statt
    a.weiss:link
    oder versuch mal
    .weiss a:link

    gehts jetzt?

    MFG
    Yogi

    1. Moin Moin ebenfalls!

      Tach

      Wie bindest du die CSS denn ein?
      Muss das nicht heißen
      a:link.weiss

      in CSS2 ist das theoretisch auch zulässig.

      statt
      a.weiss:link

      dies ist sowohl in CSS1 als auch CSS2 zulässig.
      Da ältere Browser nur die CSS1-Variante verkraften (Pseudoklassen am Ende), sollte man diese vorziehen.

      oder versuch mal
      .weiss a:link

      Das ist etwas ganz anderes. Das formatiert Links, die innerhalb eines beliebigen Elements der Klasse weiss liegen.

      gehts jetzt?

      MFG
      Yogi

      cu
      Andreas

    2. Moin Moin !

      Vielleicht sollte ich noch dazu sagen, daß es ich den Link nicht mit einem Text versehe, sondern der Link durch ein Bild (JPEG) geöffnet werden soll...

      Es geht immer noch nicht... :-(

      Ich poste hier mal meine css-datei hinein:

      body { background-color:#FFFFFF; color:000000; font-family:Verdana; font-size:10pt }

      td { color:000000; font-family:Verdana; font-size:10pt }
      .weiss a:link   { color:#FFFFFF; text-decoration:none}
      .weiss a:visited { color:#FFFFFF; text-decoration:none}
      .weiss a:active  { color:#FFFFFF; text-decoration:none}

      a:link { font-weight:bold; color:#508DE8; text-decoration:none }
      a:visited { font-weight:bold; color:#508DE8; text-decoration:none }
      a:focus { font-weight:bold; color:#508DE8; text-decoration:none }
      a:hover { font-weight:bold; color:#508DE8; text-decoration:none }
      a:active { font-weight:bold; color:#508DE8; text-decoration:none }

      form {font-family:Verdana; font-size:10pt }

      Und hier die html-Datei

      <HTML>
      <HEAD>
      <link rel="stylesheet" type="text/css" href="css/allgemein.css">
      </HEAD>

      <BODY>

      <table width=350 border="1" cellspacing="0" cellpadding="0" frame="vsides" bordercolor="#508DE8" bgcolor="FFFFFF">
       <tr>
        <td colspan='2'><a class='weiss' href='links/aendern.asp?id=1' target='frame_main'><img src='../images/edit.jpg' alt='&Auml;ndern/L&oum;schen'></a></td>
      </table>

      </BODY>

      </HTML>

      CU

      Stephan

      1. Moin Moin !

        Tach

        Vielleicht sollte ich noch dazu sagen, daß es ich den Link nicht mit einem Text versehe, sondern der Link durch ein Bild (JPEG) geöffnet werden soll...
        Es geht immer noch nicht... :-(
        Ich poste hier mal meine css-datei hinein:
        body { background-color:#FFFFFF; color:000000; font-family:Verdana; font-size:10pt }
        td { color:000000; font-family:Verdana; font-size:10pt }
        .weiss a:link   { color:#FFFFFF; text-decoration:none}
        .weiss a:visited { color:#FFFFFF; text-decoration:none}
        .weiss a:active  { color:#FFFFFF; text-decoration:none}

        Siehe mein vorheriges Posting, das formatiert nicht einen Link der Klasse weiss, sondern einen, der in einem Element der Klasse weiss enthalten ist. So wie es unten im HTML steht, müßte es
        a.weiss:link usw heissen.

        a:link { font-weight:bold; color:#508DE8; text-decoration:none }
        a:visited { font-weight:bold; color:#508DE8; text-decoration:none }
        a:focus { font-weight:bold; color:#508DE8; text-decoration:none }
        a:hover { font-weight:bold; color:#508DE8; text-decoration:none }
        a:active { font-weight:bold; color:#508DE8; text-decoration:none }

        form {font-family:Verdana; font-size:10pt }
        Und hier die html-Datei
        <HTML>
        <HEAD>
        <link rel="stylesheet" type="text/css" href="css/allgemein.css">
        </HEAD>
        <BODY>
        <table width=350 border="1" cellspacing="0" cellpadding="0" frame="vsides" bordercolor="#508DE8" bgcolor="FFFFFF">
        <tr>
          <td colspan='2'><a class='weiss' href='links/aendern.asp?id=1' target='frame_main'><img src='../images/edit.jpg' alt='&Auml;ndern/L&oum;schen'></a></td>

        In diesem Link ist überhaupt kein Text vorhanden. Wie soll denn die Formatierung auf Text wirken, wenn keiner da ist? Da ist ja nur ein Bild, und auf ein Bild wirkt weder text-decoration noch color

        </table>
        </BODY>
        </HTML>
        CU
        Stephan

        cu
        Andreas

        1. Tach

          In diesem Link ist überhaupt kein Text vorhanden. Wie soll denn die Formatierung auf Text wirken, wenn keiner da ist? Da ist ja nur ein Bild, und auf ein Bild wirkt weder text-decoration noch color

          cu
          Andreas

          Moin Moin !

          Aber gibt es keinen Befehl, mit dem ich diesen Rahmen um das Link-Bild wegbekomme (sprich es der Hintergrundfarbe anpassen kann) ?
          Bis jetzt hat die color-Eigenschaft von dem a-Tag immer die Farbe des Rahmens mitverändert. Nur nicht, wenn ich per css die Eigenschaft in einer Tabelle verändern wollte...

          CU

          Stephan

          1. Moin Moin !

            Aber gibt es keinen Befehl, mit dem ich diesen Rahmen um das Link-Bild wegbekomme (sprich es der Hintergrundfarbe anpassen kann) ?
            Bis jetzt hat die color-Eigenschaft von dem a-Tag immer die Farbe des Rahmens mitverändert. Nur nicht, wenn ich per css die Eigenschaft in einer Tabelle verändern wollte...

            CU

            Stephan

            Hallo,

            Den Rahmen wegzubekommen geht doch viel einfacher.
            Da braucht man nicht solche von-hinten-durch-die-Brust-unter-den-Knien-durch-ins-Auge-Lösungen.

            Entweder per HTML: <img border="0" ...>
            oder per css:

            a img { border:none; } /* hier nur für BIlder, die als Link dienen */

            img { border:none; } /* hier die Variante für _alle_ BIlder */

            1. Hallo ihrs,

              a img { border:none; } /* hier nur für BIlder, die als Link dienen */

              img { border:none; } /* hier die Variante für _alle_ BIlder */

              Hier besteht nun allerdings wieder das "Problem", daß es Netscape4 nicht versteht. Ein Work-around sowie einen weiterführenden Link zu weiteren "Problemen" findet man hier: </archiv/2002/3/7480/>
              Meine miserablen Englisch-Kenntnisse in diesem Posting dürfen ignoriert werden ;-)

              Viele Grüße
              Carsten

              1. Moin Moin !

                Wunderbar, das war es !!! :-)
                Ich danke allen, die mir hier tatkräftig geholfen haben, warum ich dadrauf nicht selber gekommen bin, weiß ich aber auch nicht (man sieht manchmal den Wald vor lauter Bäumen nicht)...

                CU

                Stephan