✔ 2 Links in unterschiedlichen Farben

Status
Nicht offen für weitere Antworten.
K

Krieter2

Mitglied
Hi,

ich habe einen relativ dunklen Hintergrund und möchte gerne zwei unterschiedlich farbige Links setzen.

Der eine Link soll im Ursprungszustand eine schwarze Schrift haben u. weiß umrandet bzw. eingebettet sein (Schriftfarbe1) und der andere Link soll einfach nur eine weiße Schrift haben, weil diese nicht auf einer weißen Fläche liegt, sondern auf den besagten dunklen Hintergrund.

Bisher sieht mein Skript so aus:

PHP: 
<head>
<title>bla bla ...</title>
<meta ....
<meta ....
<meta name="robots" content="index,follow" />
<link rel="stylesheet" type="text/css" href="#" />
<style type="text/css">

body {
  font-family: arial, tahoma, helvetica, sans-serif;
  background: url(background.gif);
  margin: 0;
  padding: 0;
}
#img {
  text-align: center;
  position: absolute;
  bottom: 34px;
  left: 10px;
}
#img img {
  display: block;
}

body {
  font-family: arial, tahoma, helvetica, sans-serif;
  background: url(background.gif);
  margin: 0;
  padding: 0;
}
#img {
  text-align: center;
  position: absolute;
  bottom: 34px;
  left: 10px;
}
#img img {
  display: block;
}

#schriftfarbe1 {
  font-size: 18px;
  font-weight: normal;
  background: white;
  color: #333;
  padding: 5px;
  position: absolute;
  bottom: 0px;
  width: 99.2%;
}

#schriftfarbe2 {
  font-size: 18px;
  color: #000;
}

A:link    {COLOR: #000000; TEXT-DECORATION: none} //schwarz
A:visited {COLOR: #000000; TEXT-DECORATION: none}
A:active  {COLOR: #000000; TEXT-DECORATION: none}
A:hover   {COLOR: #707070; TEXT-DECORATION: none} //grau

A.link2:link    {COLOR: #FFFFFF; TEXT-DECORATION: none} //weiß
A.link2:visited {COLOR: #000000; TEXT-DECORATION: none}
A.link2:active  {COLOR: #000000; TEXT-DECORATION: none}
A.link2:hover   {COLOR: #33FF66; TEXT-DECORATION: none} //grün


Die Links dazu sehen wie folgt aus:

PHP: 
<div id="schriftfarbe1">
  <a href="http://www.homepage.de">Hallo ich bin eine schwarze 
                              Schrift und werde bei Berührung grau</a>
</div>

<div id="schriftfarbe2">
  <a href=#" class="link2">ich bin eine weiße Schrift und 
                                     werde bei Berührung grün</a>
</div

Leider werden beide Links dunkelbraun (#333) dargestellt - die Rollover Funktionen funktionieren jedoch bei beiden Links einwandfrei. Weiß jemand, wie es funktioniert?

Danke im voraus.
 
Probier mal folgendes:

Code: 
body { 
  font-family: arial, tahoma, helvetica, sans-serif; 
  background: url(background.gif); 
  margin: 0; 
  padding: 0; 
} 

#img { 
  text-align: center; 
  position: absolute; 
  bottom: 34px; 
  left: 10px; 
} 

#img img { 
  display: block; 
} 

#schriftfarbe1 { 
  font-size: 18px; 
  font-weight: normal; 
  background: white; 
  color: #333; 
  padding: 5px; 
  position: absolute; 
  bottom: 0px; 
  width: 99.2%; 
} 

#schriftfarbe1 a:link, #schriftfarbe1 a:visited {
  color: #000000;
}

#schriftfarbe1 a:hover {
  color: #707070;
}

#schriftfarbe1 a:active {
  color: #000000;
}

#schriftfarbe2 { 
  font-size: 18px; 
  color: #000; 
} 

#schriftfarbe2 a:link, #schriftfarbe2 a:visited {
  color: #ffffff;
}

#schriftfarbe2 a:hover {
  color: #33ff66;
}

#schriftfarbe2 a:active {
  color: #000000;
}

a:link, a:visited, a:hover, a:active { text-decoration: none; }
(!) Die Pseudoklassen werden in dieser Reihenfolge notiert:
Code: 
a:link { }
a:visited { }
a:hover { }
a:active { }
 
Hi,

cool, es klappt...damit bin ich auf jeden Fall einen Schritt weiter. :)

Ich habe nur noch ein Problem: Ich möchte den Mouseover-Bereich nur im Bereich der Schrift haben, momentan ist der Mouseover-Bereich über die Positionierung (padding) definiert:

PHP: 
<div id="schriftfarbe2">
<a href="/Home1.html"style="padding-left:150px; padding-top:500px">Hier gehts zu den Bildern</a>
</div>

Der Mouseover-Bereich fängt also von links oben an und geht bis mitte rechts unten, also im Grunde genommen ein Rechteck oben links angelegt (150x500px). Ich will aber, wie bereits angedeutet nur den Link als solches definiert haben.

Wie geht das?
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück