Antworten auf deine Fragen:
Neues Thema erstellen

Anfängerfrage - unterschiedliche Farben für links

Pez

Nicht mehr ganz neu hier

Hallo zusammen,

ich will für zwei verschiedene Arten von links auch zwei verschiedene Farben anzeigen.

In der CSS habe ich die eine Gruppe mit

a {
color: #3359b2;
outline: none;
text-decoration: underline;
font-weight: 400;
}

so wie ich es haben will.

Schlau wie ich bin habe ich nun das ganze kopiert und so eingefügt:

b {
color: #FFFFFF;
outline: none;
text-decoration: underline;
font-weight: 400;
}

Das mit der Farbe klappt auch prima, nur: Der link geht nicht mehr.

Liegt das daran, das "a" einen link repräsentiert und es "b" in CSS eigentlich gar nicht gibt?

Gibt es hier eine einfache Lösung?

Vielen Dank im Voraus,
Pez
 

wex_stallion

Motzerator

Teammitglied
PSD Beta Team
AW: Anfängerfrage - unterschiedliche Farben für links

Klassen.

.dings {…
.bums {…

a.dings:link {…
a.bums:link {…

usw. halt
 
E

emusch

Guest

AW: Anfängerfrage - unterschiedliche Farben für links

Das Problem ist, was soll "b" sein? Als "a" sind Links definiert, aber "b" sagt nichts aus. da könntest du genausogut "x" oder so hinschreiben können.

Irgendwie musst du die definition der Links voneinander Unterscheiden, sodass du konkret Eigenschaften zuordnen kannst.

Benutzt du zufällig Adobe Dreamweaver?

EDIT: da war jmd schneller.
 

wex_stallion

Motzerator

Teammitglied
PSD Beta Team
AW: Anfängerfrage - unterschiedliche Farben für links

Was hat das mit Dreamweaver oder nicht Dreamweaver zu tun?
 

Pez

Nicht mehr ganz neu hier

Das Problem ist, was soll "b" sein? Als "a" sind Links definiert, aber "b" sagt nichts aus. da könntest du genausogut "x" oder so hinschreiben können.

Irgendwie musst du die definition der Links voneinander Unterscheiden, sodass du konkret Eigenschaften zuordnen kannst.

Benutzt du zufällig Adobe Dreamweaver?

Aha! Jetzt komme ich der Sache näher. Danke!

Dachte mir schon, das "a" den link definiert. Damit habe ich den grundlegenden Fehler schon.

Jetzt muß ich nur noch das mit dem "dings" und dem "bums" kapieren.

Nein, Dreamweaver benutze ich nicht. Ich bin einer von "denen" die in Joomla rumpfuschen ;-))

Aber da lerne ich am Beispiel wie die Grundlagen funktionieren.

Klassen.

.dings {?
.bums {?

a.dings:link {?
a.bums:link {?

usw. halt

Etwa so?

.dings {
color: #3359b2;
outline: none;
text-decoration: underline;
font-weight: 400;
}
.bums{
color: #FFFFFF;
outline: none;
text-decoration: underline;
font-weight: 400;
}

Was kommt dann bei

a.dings:link {?
a.bums:link {?
 
Zuletzt bearbeitet von einem Moderator:

Tattoomaus78

nemesis-artgroup.de

AW: Anfängerfrage - unterschiedliche Farben für links

<a class="dings" href="#">Beispiellink</a>

a.dings:link {

}

a.dings:visited {

}

a.dings:hover {

}

a.dings:active {

}


oder:

<ul class="bums">
<li><a href="#">Beispiellink</a></li>
<li><a href="#">Beispiellink</a></li>
<li><a href="#">Beispiellink</a></li>
</ul>

.bums a:link {

}

.bums a:visited {

}

.bums a:hover {

}

.bums a:active {

}
 

wex_stallion

Motzerator

Teammitglied
PSD Beta Team
AW: Anfängerfrage - unterschiedliche Farben für links

Klassen definierst du im CSS mit dem Punkt, wie eben: ».dings« anstelle von z.B. »h1«

Nun kannst du für diese Klasse auch die Links nach Wunsch formatieren, eben mit a.dings:link, a.dings:hover usw.

Derlei sollte sich aber eigentlich auch im einen oder anderen Joomla-Template finden lassen.
 

Oyabun82

Oyabunstyle.de

AW: Anfängerfrage - unterschiedliche Farben für links

CSS
Code:
.link1:link, .link1:visited {[INDENT]color:#flecktarn
[/INDENT]}
.link1:hover {[INDENT]color:#schweinchenrosa
[/INDENT]}
.link2:link, .link2:visited {[INDENT]color:#kleinkariert
[/INDENT]}
.link2:hover {[INDENT]color:#grünhinterdenohren
[/INDENT]}
Html:

Code:
<a href="http://oyabunstyle.de" class="link1">Link Typ 1</a>
<a href="http://oyabunstyle.de" class="link2">Link Typ 2</a>
 

Pez

Nicht mehr ganz neu hier

Huaaaah, so schnell wie Ihr postet kann ich ja gar nicht tippen....

Bin glaub ich auf dem richtigen Weg, dank Eurer Hilfe.

Schau mer mal wie lange ich brauche ;-))

<a class="dings" href="#">Beispiellink</a>

a.dings:link {

}

a.dings:visited {

}

a.dings:hover {

}

a.dings:active {

}


oder:

<ul class="bums">
<li><a href="#">Beispiellink</a></li>
<li><a href="#">Beispiellink</a></li>
<li><a href="#">Beispiellink</a></li>
</ul>

.bums a:link {

}

.bums a:visited {

}

.bums a:hover {

}

.bums a:active {

}

Klasse! Hat geklappt.

Vielen Dank!

Klassen definierst du im CSS mit dem Punkt, wie eben: ».dings« anstelle von z.B. »h1«

Nun kannst du für diese Klasse auch die Links nach Wunsch formatieren, eben mit a.dings:link, a.dings:hover usw.

Derlei sollte sich aber eigentlich auch im einen oder anderen Joomla-Template finden lassen.

Ja, aber fertige Templates bringen mich ja nicht wirklich weiter. Ich will ja was lernen dabei.

Vielen Dank für die Hilfe


edit by Mod: Bitte keine Doppel- bzw. Dreifachposts. Benutze bitte die edit-Funktion unten rechts. Danke schön.

edit by Pez: Sorry, auch hier lerne ich noch dazu. Werde ich in Zukunft beachten!
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.635
Beiträge
1.538.449
Mitglieder
67.556
Neuestes Mitglied
Ggirl
Oben