Link - Mehrere Klassen und Pseudoklassen? - HTML und CSS / Stylesheets - HilfDirSelbst.ch

[Gast] Foren Web allgemein HTML und CSS / Stylesheets Link - Mehrere Klassen und Pseudoklassen?

Web allgemein

Themen

Beiträge

Moderatoren

Letzter Beitrag

HTML und CSS / Stylesheets

1193

6413

FSt

19. Dez 2022, 21:28

Vitus

Link - Mehrere Klassen und Pseudoklassen?

Megabyte

Beiträge gesamt: 134

2. Mär 2007, 18:23
Beitrag # 1 von 9
Bewertung:
(5339 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo, zusammen!
Seit Tagen ärgere ich mich über mein klassenproblem im CSS. Ich designe geradem eine Website neu und da gibt es folgendes Problem:

Ich habe drei Arten von links
1. Oberes Menü

Code

font-family: Verdana; 
font-size: 8.5pt; 
letter-spacing: 2px; 
text-decoration: none;

2. Linkes Menü

Code

font-family: Verdana; 
font-size: 8pt; 
text-decoration: none;

3. Sonstige Links

Code

font-family: Verdana; 
font-size: 8pt; 
text-decoration: none; 
color: #8C0035;

Links der Sorte 1 und 2 sollen
- :link, :active die Farbe #FFFFFF (weiß),
- :visited die Farbe #FFD7E9;
- :hover die Farbe #C8E7F8;
haben

Links der Sorte 3 sollen
- :link, :active die oben genannte Farbe (#8C0035);
- :visited die Farbe #761840 haben;
- :hover die Farbe #C80050 haben;
haben

Wie löse ich dieses Problem mit möglichst wenig Zeilen und so, dass ich jedem Link über class oder id oder was auch immer mitteilen kann, ob es ein oberer menülink ist, ein linker menulink oder ein Haupttext Link ist?

P.S. Alle Links sind td oder font tags untergeordnet und das mehr oder minder unsortiert... ~~ ich habe auch eben im Forum herumgewühlt aber sowiet ich richtig gelesen habe wurde nur der Fall betrachtet wenn eine Linkklasse mit ner Pseudoklasse geändert wird. ich habe versucht dies zu machen aber mein Browser hält sich nicht dran, sobald eine zweite Klasse auftaucht die die gleiche Pseudoklasse anspricht....

(Dieser Beitrag wurde von Megabyte am 2. Mär 2007, 18:27 geändert)

Link - Mehrere Klassen und Pseudoklassen?

SabineP

Beiträge gesamt: 7586

2. Mär 2007, 19:35
Beitrag # 2 von 9
Beitrag ID: #279582
Bewertung:
(5325 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo Megabyte,

>> Wie löse ich dieses Problem mit möglichst wenig Zeilen und so,
>> dass ich jedem Link über class oder id oder was auch immer
>> mitteilen kann, ob es ein oberer menülink ist, ein linker menulink oder ein Haupttext Link ist?

Gib jedem Link eine Klasse.

<a href="#" class="oberer-menuelink">Linktext</a>
<a href="#" class="linker-menuelink">Linktext</a>
<a href="#" class="haupttext-link">Linktext</a>

Gruß Sabine

als Antwort auf: [#279576]

Link - Mehrere Klassen und Pseudoklassen?

Megabyte

Beiträge gesamt: 134

2. Mär 2007, 21:44
Beitrag # 3 von 9
Beitrag ID: #279606
Bewertung:
(5319 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Also ich hab insgesamt drei Linkklassen, aber das Problem ist, dass die nicht mehr auf die Pseudoklassen reagieren o.O Das sieht bei mir etwa so aus und seltsamerweise funktioniert nur .uppermenu

Code

.menulink :link { 
font-family: Verdana; 
font-size: 8pt; 
letter-spacing: 2px; 
text-decoration: none; 
color: white; 
} 
 
.menulink :active { 
color: #C8E7F8; 
font-family: Verdana; 
font-size: 8pt; 
letter-spacing: 2px; 
text-decoration: none; 
} 
 
.menulink :visited { 
font-family: Verdana; 
font-size: 8pt; 
letter-spacing: 2px; 
text-decoration: none; 
color: #FFD7E9; 
} 
 
.menulink :hover { 
color: #C8E7F8; 
font-family: Verdana; 
font-size: 8pt; 
letter-spacing: 2px; 
text-decoration: none; 
} 
 
 
.uppermenu :link { 
font-family: Verdana; 
font-size: 8.5pt; 
letter-spacing: 2px; 
text-decoration: none; 
color: white; 
} 
 
.uppermenu :active { 
font-family: Verdana; 
font-size: 8.5pt; 
letter-spacing: 2px; 
text-decoration: none; 
color: white; 
} 
 
.uppermenu :visited { 
font-family: Verdana; 
font-size: 8.5pt; 
letter-spacing: 2px; 
text-decoration: none; 
color: #FFD7E9; 
} 
 
.uppermenu :hover { 
color: #C8E7F8; 
font-family: Verdana; 
font-size: 8.5pt; 
letter-spacing: 2px; 
text-decoration: none; 
}

als Antwort auf: [#279582]

Link - Mehrere Klassen und Pseudoklassen?

SabineP

Beiträge gesamt: 7586

2. Mär 2007, 22:28
Beitrag # 4 von 9
Beitrag ID: #279610
Bewertung:
(5311 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Entferne alle Leerzeichen vor dem Doppelpunkt.
So ist es richtig.
.menulink:link

als Antwort auf: [#279606]

Link - Mehrere Klassen und Pseudoklassen?

Megabyte

Beiträge gesamt: 134

3. Mär 2007, 11:05
Beitrag # 5 von 9
Beitrag ID: #279627
Bewertung:
(5290 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Oh danke XD Ich hab in den Listings das ganze immer mit Leerzeichen gefunden und es erschien mir unlogisch das direkt daran zu schreiben, weil ich ja auch a :link und nicht a:link schreibe o.O Aber vielen vielen dank!

Aber es gibt keine kürzere Methode um dies zu erreichen oder?
Ich hätte nämlich 3 Klassen mit 4 Zuständen und das ganze mal zwei da ich noch ne Druckversion hab....

als Antwort auf: [#279610]

Link - Mehrere Klassen und Pseudoklassen?

SabineP

Beiträge gesamt: 7586

3. Mär 2007, 11:40
Beitrag # 6 von 9
Beitrag ID: #279628
Bewertung:
(5287 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

>> weil ich ja auch a :link und nicht a:link schreibe

Das ist auch falsch.
Lies dazu einfach die CSS-Spezifikation:
http://edition-w3c.de/...html#heading-5.11%A0

>> Aber es gibt keine kürzere Methode um dies zu erreichen oder?

Was willst Du denn da abkürzen?

Gruß Sabine

als Antwort auf: [#279627]

Link - Mehrere Klassen und Pseudoklassen?

minou

Beiträge gesamt: 135

3. Mär 2007, 13:24
Beitrag # 7 von 9
Beitrag ID: #279638
Bewertung:
(5279 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo zusammen,

auch auf die Gefahr hin, dass ich jetzt was falsches sage:

Wenn du deine Links abgrenzen kannst, bzw. diese in verschiedenen Stellen stehen, so könntest du eine span Klasse machen. Anstatt immer wieder die Klassen überall an zu geben müsstest du um den gesamten Bereich der eine Linkkategorie umfasst ein span stellen.

Ich löse das so, wenn ich verschieden Seiten mit unterschiedlichen Links haben möchte:

Beispiel:

Code

 
.wichtig { 
  a:link {} 
  a:visited {} 
  a:focus {} 
  a:hover {} 
  a:active {} 
} 
 
.mittel { 
... 
... 
.... 
}

Im HTML sähe das dann etwa so aus:

Code

 
<span class="wichtig"> 
links  
noch ein link 
//Vielleicht auch Links mit Text gemischt, was auch  
//nichts machen sollte 
noch ein link  
und noch ein link 
</span> 
 
und so weiter: 
<span class="mittel"> 
... 
.... 
... 
... 
... 
</span>

Ich weiss nicht, ob das dein Problem vielleicht etwas erleichtern könnte. Gerne lasse ich mich auch eines Besseren belehren, wenn das aus irgendwelchen Gründen nicht angewandt werden sollte.

Jedenfalls geht das auch sehr gut in verschachtelten Listen, wo ja nur diese Schreibweise valide ist?:

Code

<ul> 
  <li>Titel 
    <li>.....</li> 
    <li>.....</li> 
  </li> 
</ul>

Jedenfalls validiert mir der w3 nur so dargestellte Listen (XHTML1.0 strict). Das Problem ist nun, dass Zuweisungen an den Titel auch für die anderen Elemente gelten, da das erste Listenelement erst zuletzt geschlossen wird. Da setze ich auch einfach eine span class vor den TITEL und beende diese danach auch gleich wieder also so:

Code

<li><span class="...">TITEL</span>

Ich wollte das auch einmal zu meiner eigenen "Wissenslücke" aufzeigen, da ich noch Anfänger bin und dies eventuell aus irgendwelchen mir nicht bekannten Gründen nicht angewendet werden sollte.
Jedenfalls funktionieren tut es so und sollte auch alles valide sein...

Schöne Grüsse

minou

als Antwort auf: [#279628]

Link - Mehrere Klassen und Pseudoklassen?

Megabyte

Beiträge gesamt: 134

3. Mär 2007, 13:43
Beitrag # 8 von 9
Beitrag ID: #279641
Bewertung:
(5274 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

text-decoration und schriftart sind ja in allen Fällen gleich ~~
Es geht mir mehr ums schema, irgendwie hab ich bisher kaum von der Kaskadierung profitiret sprich ich hab so um die 40 verschiedenen Klassen für allen möglichen Kram. font.hier, font.da dann noch diverse Klassen für Tabellenfelder....

Es wäre cool wennn es möglich wäre Klassen zusammenzufasen wie z.B. beim Druck alle a-klassen die zu einer a-druckklasse werden sollen. So etwa...

Code

@print 
.uppermenu, .leftmenu, .main { 
color: 0000FF; 
}

Und das gültig für JEDEN status der Links der jeweiligen Klassen....

Ich suche auch ne Vereinfachung für beispielsweise

Code

font.upper { 
font-family: verdana; 
font-size: 8pt;  
color: 808080; 
.... diverse Attribute 
} 
 
font.lower{ 
font-family: verdana; 
font-size: 8pt; 
color: FFFFFF; 
}

Ich würde auf die Idee kommen das so auszudrücken

Code

font { 
font-family: verdana; 
font-size: 8pt; 
} 
 
font.upper { 
color: 808080; 
} 
 
font.lower{ 
color: FFFFFF; 
}

Aber auch das haut nicht immer hin... Das wird bei mir sehr gerne dargestellt, als würd eman die Browserstandardschrift bei font.upper und font.lower nur einfärben und das übergeordnete font komplett vergessen...

Hilfreich wäre auch so etwas wie zwei Klassen anzugeben das würde dieses Problem auch geschickt umspielen sprich so was wie...

Code

.klasse1{ 
Attribute Klasse1 
} 
 
.klasse2{ 
Attribute Klasse2 (Ohne Informationen von Klasse 1) 
} 
 
.klasse3{ 
Attribute Klasse3 (Ohne Informationen von Klasse 1) 
} 
 
 
Und im Hypertext 
<font class="klasse1 & klasse2">Formatiert nach 1 und 2</font> 
<font class="klasse1 & klasse3">Formatiert nach 1 und 3</font>

Solche Sachen habe ich bisher in keinem Buch gefunden und frage mich daher ob diese existieren oder nicht.

==================================================

@minou: Danke, das könnte in Bereichen helfen. Das Problem ist nur, dass ich z.B. ne Linkreihe habe, deren links in einzelnen Tabellenzellen ist.. Kann ich den <span> Tag so einsetzen?!

<tr>
<span>
<td>...</td>
<td>...</td>
</span>
</tr>

Es sieht für mich nicht ganz sauber aus ~ ~

als Antwort auf: [#279628]
(Dieser Beitrag wurde von Megabyte am 3. Mär 2007, 13:49 geändert)

Link - Mehrere Klassen und Pseudoklassen?

SabineP

Beiträge gesamt: 7586

3. Mär 2007, 14:09
Beitrag # 9 von 9
Beitrag ID: #279643
Bewertung:
(5268 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

>> text-decoration und schriftart sind ja in allen Fällen gleich

Dann schreibe:
a{font-family:...;text-decoration:...;}
Das gilt dann für alle Links.

>> .uppermenu, .leftmenu, .main {
>> color: 0000FF;
>> }

So erhalten alle HTML-Elemente (nicht nur die Links) mit der Klasse .uppermenu oder .leftmenu oder .main die angegebene Farbe.

Es macht jedoch überhaupt keinen Sinn über die Klassen zu diskutieren,
wenn der HTML-Code der dazu gehört unbekannt ist.

Gruß Sabine

als Antwort auf: [#279641]

Aktuell

Diverses

Tipps zum Aufräumen und Ordnung schaffen

| 29.11.2023

Weitere Events

Neuste Foreneinträge

Mein Tagesausflug ins Land CorelDraw

App Store: zu viele Sprachen werden aufgelistet

Eizo Monitorkalibrierung auf Windows

Fußnoten zu Endnoten konvertieren

Mehrfach geschichtete und übereinander gelagerte PDFs bereinigen

Platzierte Vektorgrafiken skalieren

SMS ab Server senden? Wie geht das?

WebShare Verzeichnisse im SharePoint erstellen

Buchsrabensteuerung

Klickbare Links zu Seiten in einem Buch aus extern erzeugtem Index erstellen

Weitere Stellenangebote