[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:
(4006 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:
(3992 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:
(3986 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:
(3978 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Entferne alle Leerzeichen vor dem Doppelpunkt.
So ist es richtig.
.menulink:link
Gruß Sabine


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:
(3957 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:
(3954 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:
(3946 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:
(3941 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:
(3935 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

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
29.10.2020

Ortsunabhängig
Donnerstag, 29. Okt. 2020, 10.00 - 10.30 Uhr

Webinar

Wir stellen Ihnen in diesem kostenlosen ca. 30-minütigen Webinar das neueste Produkt aus dem Hause Enfocus vor. Enfocus bringt mit BoardingPass eine pfiffige Lösung auf den Markt, welche eingehende Daten auf die wichtigsten druckrelevanten Kriterien hin gleich im Mail-Browser prüfen lässt. Mit BoardingPass sind auch Kundenberater und Avor-/Vertriebs-Mitarbeiter in der Lage, eingegangene Druckdaten innerhalb ihres Mail-Programmes sofort zu prüfen und dem Auftraggeber eine leicht verständliche Rückmeldung über diese zu geben. Die Druckdaten müssen also gar nicht erst über den internen Workflow des Druckdienstleisters laufen, sondern können direkt auf druckrelevante Kriterien geprüft und auch begutachtet werden.

Ja

Organisator: Impressed GmbH

Kontaktinformation: E-Mailschulungen AT impressed DOT de

https://www.impressed.de/schulung.php?c=sDetail&sid=292

Enfocus BoardingPass
Veranstaltungen
02.11.2020 - 03.11.2020

Digicomp Academy AG, Limmatstrasse 50, 8005 Zürich
Montag, 02. Nov. 2020, 08.30 Uhr - Dienstag, 03. Nov. 2020, 17.00 Uhr

Kurs

Dieser Basic-Kurs ist der perfekte Einstieg in die Welt von InDesign, dem vielseitigen Layout-Programm. Sie lernen, wie InDesign aufgebaut ist, wie saubere Dokumente erstellt werden und wie man korrekt mit gelieferten InDesign-Projekten umgeht.

Preis: CHF 1'400.-
Dauer: 2 Tage

Nein

Organisator: Digicomp Academy AG

Kontaktinformation: Isil Günalp, E-Mailisil.guenalp AT digicomp DOT ch

https://www.digicomp.ch/weiterbildung/software-anwendungs-trainings/adobe-trainings/desktop-publishing/adobe-indesign-cc/kurs-indesign-cc-basic

Neuste Foreneinträge


Wie importiere ich eine Word Datei mit Fussnoten in Indesign?

Indesign CC2021 verliert Speicherpfad von Dateien

bearbeitete jpg´s nicht mehr markiert

Pantone - reiner Buntaufbau

Suitcase von 3 Benutzern an 7 Rechnern?

Probleme mit dem Strukturbaum Acrobat Pro DC (barrierefrei)

PDF_RGB-AUSGABE

Suchescript um auf meinem webserver nach Namen oder nummern zu suchen

InDesign CC 2021: Neuerungen / New Features

Flächendeckung einer Datei
medienjobs