[GastForen Web allgemein HTML und CSS / Stylesheets Link - Mehrere Klassen und Pseudoklassen?

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Themen
Beiträge
Moderatoren
Letzter Beitrag

Link - Mehrere Klassen und Pseudoklassen?

Megabyte
Beiträge gesamt: 134

2. Mär 2007, 18:23
Beitrag # 1 von 9
Bewertung:
(4893 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)
X

Link - Mehrere Klassen und Pseudoklassen?

SabineP
Beiträge gesamt: 7586

2. Mär 2007, 19:35
Beitrag # 2 von 9
Beitrag ID: #279582
Bewertung:
(4879 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:
(4873 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:
(4865 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:
(4844 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:
(4841 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:
(4833 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:
(4828 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:
(4822 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]
X

Aktuell

PDF / Print
Wolken_300

Veranstaltungskalender

Hier können Sie Ihre Anlässe eintragen, welche einen Zusammenhang mit den Angeboten von HilfDirSelbst.ch wie z.B. Adobe InDesign, Photoshop, Illustrator, PDF, Pitstop, Affinity, Marketing, SEO, Büro- und Rechtsthemen etc. haben. Die Einträge werden moderiert freigeschaltet. Dies wird werktags üblicherweise innert 24 Stunden erfolgen.

pdf-icon Hier eine kleine Anleitung hinsichtlich Bedeutung der auszufüllenden Formularfelder.

Veranstaltungen
02.02.2023

Prozesse optimieren und effizient gestalten

Zürich
Donnerstag, 02. Feb. 2023, 08.00 - 10.00 Uhr

Digitalisierung, Webauftritt

Digitalisierung mitgestalten - Worauf kommt es an? Wie wichtig ist die Webseite? Webseite mit Word Press? Interne Prozesse optimieren

Ja

Organisator: B. Isik - SNF Academy

Kontaktinformation: Birol Isik, E-Mailinfo AT bkcc DOT ch

https://digitalisierung-heute.ch/digitalisierung-informationstag-schweiz/

Veranstaltungen
01.03.2023 - 09.03.2023

Online
Mittwoch, 01. März 2023, 00.00 Uhr - Donnerstag, 09. März 2023, 00.00 Uhr

Online Webinar

Wie gehen wir mit diesen Veränderungen um? Was ist notwendig, damit wir die Digitalisierung im Unternehmen klappt? Veränderungsprozesse verstehen und entsprechend handeln Mitarbeiter als Botschafter Webseite mit WordPress erstellen SEA /SEO (Ads aufschalten)

Ja

Organisator: B. Isik - SNF Academy

Kontaktinformation: B. Isik, E-Mailinfo AT snfa DOT ch

https://www.fernstudiumfitness.ch/digitalisierung-schweiz/