Webdesign-Hilfe: Link-Farben ändern

basti007 · Beitrag von **basti007** » 11.04.2005, 15:49

Kann mir da jemand beim Webdesign helfen?

Ich möchte in einem größeren Block INNERHALB einer Webseite alle Links speziell formatieren (ca. 50 Links). Die Links ausserhalb des Blocks sollen die Standardformatierung beibehalten. Konkret sollen die Farben der Links (besucht/unbesucht) geändert werden.

Das könnt ich nun für jeden Link per Hand machen indem ich die Attribute des jeweilgen A-Tags ändere, aber es muss doch auch einfacher gehen.

Die notwendigen Stylesheet Kommandos wie

a:link
a:visited
a:hover

etc...

Kann ich ja scheinbar nur in den Header schreiben, wo sie mir nichts bringen, weil damit alle anderen Links ja auch umgewandelt würden.

Wie kann ich also die eingestellt Farbe für Links innerhalb eines Blocks ändern?

john_doe · Beitrag von **john_doe** » 11.04.2005, 17:24

Ich bin nicht der CSS/HTML-Profi, aber kannst du nicht die Farben nur für eine Klasse einstellen und dann die Links z.B. mit einem "p" "/p" umschließen, das dann die entsprechende Klasse benutzt?

KhrisMUC · Beitrag von **KhrisMUC** » 11.04.2005, 17:37

so isses:

Du schreibst ins stylesheet z.b.:
a.anders:link
a.anders:hover
usw.

dann sollte es mit einem <span>-tag möglich sein, alle links auf einmal zu ändern.

<span class='anders'>
...
50 links
...
</span>

Wenn's nicht hinhaut, könntest Du auch ein frameset benutzen oder ein iframe, dann kannst du ja der 2. html-datei einfach ein anderes stylesheet zuweisen.

Ansonsten:
http://selfhtml.teamone.de

theDon · Beitrag von **theDon** » 11.04.2005, 17:48

Redundancy kicks ass.

Code: Alles auswählen

<p class="linkage"><a href="/">blah</a></p>

Code: Alles auswählen

p.linkage a:link { color: white; }
p.linkage a:hover { color: white; }

etc.

/Edit: Das von khrismuc wird nicht funktionieren, weil das span die class hat, nicht das a.

max_power · Beitrag von **max_power** » 11.04.2005, 20:25

theDon hat geschrieben:Redundancy kicks ass.
Code: Alles auswählen
<p class="linkage"><a href="/">blah</a></p>
Code: Alles auswählen
p.linkage a:link { color: white; }
p.linkage a:hover { color: white; }

Könnte man nicht auch dem Verweis direkt eine Klasse zuordnen?

Code: Alles auswählen

<a class="linkage" href="/">blah</a>

Code: Alles auswählen

a.linkage:link { color: #996699; } 
a.linkage:hover { color: #669966; }

DasJan · Beitrag von **DasJan** » 11.04.2005, 20:59

Ja, aber dann müsste man wieder jeden Link einzeln modifizieren.

Das Jan

max_power · Beitrag von **max_power** » 11.04.2005, 22:01

Stimmt, ich überlas: „in einem größeren Block“

basti007 · Beitrag von **basti007** » 12.04.2005, 13:45

Hm, bin scheinbar zu blöd... hab die p.linkage klassifizierungen in den header übernommen und den entsprechenden block mit <p> eingeschlossen... leider keine änderung.

Es handelt sich um einen Blogg-Post, den ich in HTML geschreiben habe. Ich möchte aber eben nicht die Linkformatierung des CSS im Blogg Template übernehmen, sondern meine eigene Formatierung einbauen. Wenn ich die Links einzeln formatiere geht's komischerweise.

<head>

<title>Basti's Blogg: Oktober 2004</title>

<style type="text/css">

p.linkage a:link { color: white; }
p.linkage a:hover { color: white; }

body {
background:#123;
margin:0;
padding:20px 10px;
text-align:center;
font:x-small/1.5em "Trebuchet MS",Verdana,Arial,Sans-serif;
color:#ccc;
font-size/* */:/**/small;
font-size: /**/small;
}

/*[...]

/* Links
----------------------------------------------- */
a:link {
color:#9db;
}
a:visited {
color:#798;
}
a:hover {
color:#fff;
}
a img {
border-width:0;
}
#main a:link {
color:#347;
}
#main a:visited {
color:#666;
}
#main a:hover {
color:#68a
}

</style>

/*[blabla mit normaler Template Formatierung...]

<p class="linkage"> <TABLE ID="Tabelle2" BORDER=0 CELLSPACING=1 CELLPADDING=1 WIDTH="100%">

/*[blabla in der Table mit erwähnten Links...]

</TABLE></P><br>

<p class="post-footer">

/*[...]

</body>

</html>

max_power · Beitrag von **max_power** » 12.04.2005, 21:02

Kann es sein, dass man CSS nicht irgendwo in den Header schreiben darf? Ich benutze immer externe CSS, da ist es eh anders, aber bei dir sieht es sehr durcheinander aus:
CSS
title-Tag
CSS

Ich würde den oberen Schnippsel nach unten verschieben.

edit:
Laut self-html sollte es so aussehen:

Code: Alles auswählen

<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!--
/*  ... Hier werden die Formate definiert ... */
-->
</style>
</head>
<body>
</body>
</html>

basti007 · Beitrag von **basti007** » 13.04.2005, 13:09

Äh, ja, sorry, hatte falsch copy&past gemacht... die CSS Sache steht jetzt innerhalb des Style Tags (siehe oben), aber an der Seite hat sich nichts geändert, weiterhin werden die Links nicht weiß angezeigt.

amey · Beitrag von **amey** » 13.04.2005, 14:14

Das <p> gehört innerhalb der Tabelle, nicht außerhalb.

basti007 · Beitrag von **basti007** » 13.04.2005, 16:34

Hm, okay...

aber keine Änderung... bei mir kommen aber auch innerhalb der Tabelle noch <P> Tags vor. Ein Problem?

amey · Beitrag von **amey** » 14.04.2005, 01:51

Mach es dir einfach:

Code: Alles auswählen

<style type="text/css">
a.linkage { color: white; }  // Vorausgesetzt, du machst keine Unterschiede zwischen Normalzustand, Hover etc.
</style>

// Blabla..

<a href="/link.html" class="linkage">Der Link</a>

max_power · Beitrag von **max_power** » 14.04.2005, 15:03

Das hatte ich ja auch vorgeschlagen, allerdings ging es darum, möglichst viele Verweise auf einmal anzupassen, weshalb das so nicht ganz sinnvoll ist.

theDon · Beitrag von **theDon** » 16.04.2005, 06:41

Wenn das nicht ein direktes Kindelement vom p ist, versuch mal das hier:

Code: Alles auswählen

p.linkage * a:hover {}