Mehrere CSS_Klassen utnerscheiden

[Axel Hoogestraat]

Hallo,

ich habe eine Frage zu CSS - Klassen. Ich bastel gerade einen JS-Kalender. Dabei unterscheide ich die Tage einer Woche anhand der Farbe in Wochentage und Wochenende. Der heutige Tag bekommt noch einen Rahmen.
Bis hier sieht das so aus.
.wochenende { background-color:red; }
.wochentag { background-color:blue; }
.heute {border:1px solid green;}

Die TD's bekommen nun die KLassen class='wochenende' oder class='wochentag' oder class='wochentag heute' usw.

Nun kommt mein Problem. Ich möchte auch Feiertage in einer anderen Farbe darstellen. Aber Feiertage in der Woche anders als Feiertage am Wochenende.
Mein Versuch :
class='wochenende feiertag' oder class='wochentag feiertag'

Die Unterscheidung in der CSS:
.wochenende.feiertag { ... }
.wochentag.feiertag { ... }

funktioniert natürlich nicht. Das würde ja nur bei <td class='wochenende'><div class='feiertag'> funktionieren.

Kennt jemand / Gibt es eine Möglichkeit die beschriebene Unterscheidung in der CSS-Datei zu machen ?

Vielen, vielen Dank im Voraus
Schöne Grüße
Axel

[MudGuard]

Hi,

Die Unterscheidung in der CSS:
.wochenende.feiertag { ... }
.wochentag.feiertag { ... }
funktioniert natürlich nicht.

Wie kommst Du darauf, daß das nicht funktionieren würde?

Das würde ja nur bei <td class='wochenende'><div class='feiertag'> funktionieren.

Nein, natürlich würde das damit nicht funktionieren.

cu,
Andreas

[Cheatah]

Hi,

class='wochenende feiertag' oder class='wochentag feiertag'
.wochenende.feiertag { ... }
.wochentag.feiertag { ... }
funktioniert natürlich nicht.

wieso "natürlich"? Dein Code ist vollkommen richtig.

Das würde ja nur bei <td class='wochenende'><div class='feiertag'> funktionieren.

Nein. Der Nachfahrenselektor ist das Leerzeichen.

Cheatah

[Axel Hoogestraat]

Hi,

class='wochenende feiertag' oder class='wochentag feiertag'
.wochenende.feiertag { ... }
.wochentag.feiertag { ... }
funktioniert natürlich nicht.

wieso "natürlich"? Dein Code ist vollkommen richtig.

Vielen Dank Euch beiden für die Antworten.
Aber es funktioniert irgendwie nicht. Die EInträge scheinen sich zu überschrieben. Sowohl Feiertag in Wochentag und Wochenende erhalten dir Formatierung aus .wochentag.feiertag, da diese in der CSS Datei unten steht.

!?! Merkwürdig, merkwürdig

Schöne Grüße
Axel

[Cheatah]

Hi,

Aber es funktioniert irgendwie nicht. Die EInträge scheinen sich zu überschrieben. Sowohl Feiertag in Wochentag und Wochenende erhalten dir Formatierung aus .wochentag.feiertag, da diese in der CSS Datei unten steht.

URL? Browser?

Cheatah

[Axel Hoogestraat]

Hallo,

URL? Browser?

Browser ist IE 6.0. URL hab ich keine. Läuft lokal auf meinem Apache.

Schöne Grüße
Axel

[Cheatah]

Hi,

Browser ist IE 6.0.

wie verhält sich ein richtiger Browser?

URL hab ich keine.

Es wäre hilfrrich, wenn Du eine erzeugen könntest.

Cheatah

[Axel Hoogestraat]

Hallo,

wie verhält sich ein richtiger Browser?

AHA !!! Guter Tip :) Hab Netscape 7.1 getestet. Der verhält sich wie gewünscht.
Das Problem ist aber nun, dass der Kalender für eine Intranetanwendung in einer Firma ist, in der ausschliesslich IE eingesetzt wird.
Jetzt kann ich also nur hoffen, das jemand von Euch einen Workaround oder so kennt.

Es wäre hilfrrich, wenn Du eine erzeugen könntest.

So auf die schnelle krieg ich das nicht hin. Müsste ich dann evtl. morgen mal machen. Allerdings ist der Fehler jetzt ja eh eingegrenzt.
-> Fehlende Unterstützung seitens MS

Noch eine Idee ? Sonst muss ich es umgehen, in dem ich den Feiertag irgendwie als Attribut in die TD schreibe und dann Attributabhängige CSS nehme.

Vielen dank bis hier

Schöne Grüße
Axel

[Cheatah]

Hi,

AHA !!! Guter Tip :) Hab Netscape 7.1 getestet. Der verhält sich wie gewünscht.

ah. Dreh mal die Reihenfolge der beiden Klassen um.

Das Problem ist aber nun, dass der Kalender für eine Intranetanwendung in einer Firma ist, in der ausschliesslich IE eingesetzt wird.

Ich würde sagen, ein Problem liegt tatsächlich vor, aber in dieser Firma :-)

Sonst muss ich es umgehen, in dem ich den Feiertag irgendwie als Attribut in die TD schreibe und dann Attributabhängige CSS nehme.

Oder einfach neue Klassennamen erfinden. Theoretisch sollte es aber durch Spielereien mit der Reihenfolge gehen.

Cheatah

[Axel Hoogestraat]

Hi,

Ich würde sagen, ein Problem liegt tatsächlich vor, aber in dieser Firma :-)

:-) Ich muss mich aber ebenfalls als Hauptsächlich-Internet-Explorer-Nutzer outen. *duck*

Oder einfach neue Klassennamen erfinden. Theoretisch sollte es aber durch Spielereien mit der Reihenfolge gehen.

Leider nicht. Hab alle möglichen Kombinationen schon durch. Da werde ich wohl auf die Attribute-Methode zurückgreifen.
Neue Klassen finde ch auch nicht so gut, da noch mehr Kombinationen hinzukommen werden:
Wochentag oder Wochenende beliebig kombiniert mit heute, feiertag und selektiert. (Man soll die Tage noch auswählen können) Bei zusätlichen Klassen müsste ich ja alle Angaben dann überall wiederholen.
Dann lieber Attribute, auch auf die Gefahr hin, dass mein COde dann nicht mehr valid ist :) (Ist er bestimmt sowieso nicht) ;-)

Vielen Dank für die Hilfe
Schöne Grüße
Axel

[Cheatah]

Hi,

Ich würde sagen, ein Problem liegt tatsächlich vor, aber in dieser Firma :-)
:-) Ich muss mich aber ebenfalls als Hauptsächlich-Internet-Explorer-Nutzer outen. *duck*

armes Schwein ;-)

Da werde ich wohl auf die Attribute-Methode zurückgreifen.

Wie Orlando schon sagte: Nicht im IE, nur in richtigen Browsern.

Neue Klassen finde ch auch nicht so gut, da noch mehr Kombinationen hinzukommen werden:

Tja. Dann wird's wohl auf zusätzliche Struktur hinauslaufen: Für jede Klasse ein neues Element. Komisch, ich habe mehrere Klassen im IE erfolgreich anwenden können; allerdings hat er dabei .active wie :active gewertet.

Dann lieber Attribute, auch auf die Gefahr hin, dass mein COde dann nicht mehr valid ist :) (Ist er bestimmt sowieso nicht) ;-)

Im Intranet kann man's ja machen ... auch wenn man's sich damit für die Zukunft schwer macht. Der Firma sollte lieber eine günstigere Software-Wahl empfohlen werden ...

Cheatah

[Axel Hoogestraat]

Hi,

Im Intranet kann man's ja machen ... auch wenn man's sich damit für die Zukunft schwer macht. Der Firma sollte lieber eine günstigere Software-Wahl empfohlen werden ...

Tja, ist halt irgendwie ein Partner von Microsoft. Ich weiß nicht genau, in wie weit die mit MS Zusammenarbeiten. Aber die benutzen einfach alles von denen. CRM, Exchange, MS Server evtl. mal Sharepoint usw.

Tja, und ich muss es ausbaden ;-)

Schöne Grüße
Axel

[Cheatah]

Hi,

Tja, ist halt irgendwie ein Partner von Microsoft.

das ist doch kein Grund :-)

Ich weiß nicht genau, in wie weit die mit MS Zusammenarbeiten. Aber die benutzen einfach alles von denen. CRM, Exchange, MS Server evtl. mal Sharepoint usw.

Auch wenn das gar schröcklich ist, denke ich, dass die Vorteile z.B. eines Firefox ziemlich deutlich sind. Es gibt zwar den Mehraufwand einer Installation pro Workstation sowie einer (kurzen) Einlernphase pro Mitarbeiter, aber dafür

• massenweise mehr Sicherheit,
• wesentlich höhere Usability bei den Mitarbeitern (damit auch - jaja - Zeitersparnis),
• die Möglichkeit eines spürbar effizienteren Intranets (Zeitersparnis für Dich und alle anderen, die an den Seiten arbeiten, weniger Arbeit für den Sysadmin wegen geringerer Last),
• und ich bin sicher, einigen Abteilungen der Firma kommt ein Firefox ebenfalls ganz individuell zugute.

Tja, und ich muss es ausbaden ;-)

Die Mitarbeiter der Firma leiden ebenfalls darunter, es ist ihnen nur nicht bewusst.

Cheatah

[wahsaga]

hi,

Komisch, ich habe mehrere Klassen im IE erfolgreich anwenden können; allerdings hat er dabei .active wie :active gewertet.

er hat also wieder mal einen tippfehler - punkt statt doppelpunkt - großzügig korrigiert :-)

gruß,
wahsaga

[Cheatah]

Hi,

Komisch, ich habe mehrere Klassen im IE erfolgreich anwenden können; allerdings hat er dabei .active wie :active gewertet.
er hat also wieder mal einen tippfehler - punkt statt doppelpunkt - großzügig korrigiert :-)

ja, so in etwa :-) War schon ein seltsames Ding. Ich hatte einige <li><a><span/></a></li>, mit Text darinnen, der ausgeblendet und (im <a/>) durch eine Grafik ersetzt werden sollte. Das ganze mit verschiedenen Zuständen bei :hover und :active (also eigentlich :focus, aber wegen IE ...), wobei letzterer mit einer class="active" identisch sein sollte. Tja, ich gab also den <li> 'ne Handvoll Klassen zur Unterscheidung (nebst "first" und "last", weil der IE zu doof für :first- und :last-child ist) und fügte dem aktiven Punkt "active" hinzu, wie es sich gehört.

Das Ergebnis war, dass der aktive Menüpunkt immer die Grafik des letzten Menüpunktes im aktiven Zustand hatte. Mein Workaround bestand darin, class="active" in den Link zu verlegen ...

Cheatah

[Orlando]

Hi Axel,

Sonst muss ich es umgehen, in dem ich den Feiertag irgendwie als Attribut in die TD schreibe und dann Attributabhängige CSS nehme.

Attribut-Selektoren kennt aber gerade euer Browser nicht. Hilft eventuell ein „!important” in der Deklaration der doppelten Klasse?

Grüße,
 Roland

[Axel Hoogestraat]

Hallo,

Attribut-Selektoren kennt aber gerade euer Browser nicht. Hilft eventuell ein „!important” in der Deklaration der doppelten Klasse?

Mist. Das hatte ich gar nicht gesehen, dass der IE das nicht kennt.
Mmh. Mit dem !important kann ich so nichts anfangen... Wi/Wo gebe ich das an ?
Wenn ich das direkt in die Klasse schreibe :
.wochenende.feiertag {
!important;
backround-color:red;
}

geht es auch nicht. War das richtig ?

Vielen Dank
Schöne Grüße
Axel

[Cheatah]

Hi,

Mmh. Mit dem !important kann ich so nichts anfangen...

so wie ich Deinen Fall verstehe, nützt das auch nichts; aber probier's trotzdem mal aus.

Wi/Wo gebe ich das an ?

In einer Deklaration:

selektor { eigenschaft: wert !important; }

Betroffen ist immer nur die jeweilige Eigenschaft.

Cheatah

[Axel Hoogestraat]

Hi,

selektor { eigenschaft: wert !important; }

Betroffen ist immer nur die jeweilige Eigenschaft.

Nein, geht auch nicht. Ich kann damit lediglich beeinflussen, ob BEIDE (also Wochenende und -tag) die WE-Eigenschaften bekommen oder die des Wochentags :)

Und Attribute geht auch nicht. Jetzt bin ich aufgeschmissen :)

Schöne Grüße
Axel

[Orlando]

Hi Axel,

selektor { eigenschaft: wert !important; }

Betroffen ist immer nur die jeweilige Eigenschaft.

Nein, geht auch nicht. Ich kann damit lediglich beeinflussen, ob BEIDE (also Wochenende und -tag) die WE-Eigenschaften bekommen oder die des Wochentags :)

Und Attribute geht auch nicht. Jetzt bin ich aufgeschmissen :)

Wenn du ohnehin bereits Feiertage berechnest, was spricht denn dagegen, diesen nur die Klasse .feiertage zukommen zu lassen? Alle anderen Tage kannst du ja bequem per td { … } abdecken. Die Klasse .wochentage ist ja ohnehin überflüssig.

Grüße,
 Roland

[Axel Hoogestraat]

Hi,

Wenn du ohnehin bereits Feiertage berechnest, was spricht denn dagegen, diesen nur die Klasse .feiertage zukommen zu lassen? Alle anderen Tage kannst du ja bequem per td { … } abdecken. Die Klasse .wochentage ist ja ohnehin überflüssig.

Dagegen spricht eigentlich, dass ich gerne Feiertag die an einem Wochenende liegen anders darstellen möchte, als Feiertag in der Woche. Also zumindestens die Möglichkeit soll gegeben sein.
Als Beispiel könnten Wochentag ein leichtes Gelb und WE ein Blau bekommen und die Feiertag jeweils den gleichen Farbton nur etwas heller. Nur so als Bsp. dann sind die Farbunterschiede nicht so gravierend.

Schöne Grüße
Axel

[Axel Hoogestraat]

Hi,

tja. Ich denke, wenn niemand mehr einen bessern Vorschlag hat,
werde ich das wohl oder übel mit verschachtelten Spans machen !?!

<td class='wochenende'><span class='feiertag'><span class='heute'>datum <...

Wobei die Span's dann optional sind.

Was haltet Ihr davon. Gibt das vielleicht ... "physikalische" widersprüche ;-)

Schöne Grüße
Axel

[Cheatah]

Hi,

tja. Ich denke, wenn niemand mehr einen bessern Vorschlag hat,
werde ich das wohl oder übel mit verschachtelten Spans machen !?!

naja, das hatte ich ja schon angedeutet ... Alternativ kannst Du Dich natürlich auch mit der Formatierung einschränken: Feiertage betreffen nur die Schriftfarbe, Wochenende etc. den Hintergrund oder so ähnlich. Ist auch nicht gerade prickelnd, ich weiß.

Cheatah

[at]

Hallo.

Was haltet Ihr davon.

Gegenfrage: Was hältst du davon, den jeweiligen Zeilen (<tr>) oder Spalten (<col>/<colgroup>), in denen die Wochenenden ja durchgängig stehen sollten, mit einer Klasse ("tr.wochenende"/"colgroup.wochenende") auszustatten, so dass die Feiertage dann bequem nur über eine einzelne Klasse in der Zelle angesprochen werden können ("td.feiertag")? Das lässt sich dann wieder ganz einfach kaskadieren und Bedarf an <span> etc. sehe ich so zunächst nicht.
MfG, at

[Orlando]

Hi Axel,

Mist. Das hatte ich gar nicht gesehen, dass der IE das nicht kennt.

vielleicht redest du doch kurz mit dem Admin? ;-)

Mmh. Mit dem !important kann ich so nichts anfangen... Wi/Wo gebe ich das an ?
Wenn ich das direkt in die Klasse schreibe :
.wochenende.feiertag {
!important;
backround-color:red;
}

geht es auch nicht. War das richtig ?

nein, so geht's:

.wochenende.feiertag { backround-color:red !important; }

Das würde zwar nur helfen, wenn es sich um Problem bei der Berechnung der Spezifität des Selektors handelt, aber einen Versuch ist's wert.

Grüße,
 Roland

[Axel Hoogestraat]

Hi,

.wochenende.feiertag { backround-color:red !important; }

Das würde zwar nur helfen, wenn es sich um Problem bei der Berechnung der Spezifität des Selektors handelt, aber einen Versuch ist's wert.

Oh Gott. Reden wir noch über Stylesheets ??? :-) Dass klingt ja wie ein Physik-Vortrag :-)

Hat aber leider nicht funktioniert .

Vielen Dank
Schöne Grüße
Axel

[Orlando]

Hi Axel,

.wochenende.feiertag { backround-color:red !important; }

Das würde zwar nur helfen, wenn es sich um Problem bei der Berechnung der Spezifität des Selektors handelt, aber einen Versuch ist's wert.

Oh Gott. Reden wir noch über Stylesheets ??? :-) Dass klingt ja wie ein Physik-Vortrag :-)

Dann wird's aber höchste Zeit, die Hausaufgaben zu machen. ;-)

http://www.w3.org/TR/REC-CSS2/cascade.html#at-import

Grüße,
 Roland

[Orlando]

Peinlich...

http://www.w3.org/TR/REC-CSS2/cascade.html#at-import

-> http://www.w3.org/TR/REC-CSS2/cascade.html#important-rules

...und hoffentlich bin ich der Erste. ;-)

Grüße,
 Roland

[Axel Hoogestraat]

Hi,

Dann wird's aber höchste Zeit, die Hausaufgaben zu machen. ;-)

http://www.w3.org/TR/REC-CSS2/cascade.html#at-import

Ok, OK. Ich gelobe Besserung :)

Schöne Grüße
Axel

[Cheatah]

Hi,

Das würde zwar nur helfen, wenn es sich um Problem bei der Berechnung der Spezifität des Selektors handelt, aber einen Versuch ist's wert.
Oh Gott. Reden wir noch über Stylesheets ??? :-)

wir reden über _Cascading_ Stylesheets. Die Regeln der Spezifität sind die Grundlage der Kaskade :-)

Dass klingt ja wie ein Physik-Vortrag :-)

Es gibt an sich nur zwei Fachausdrücke in obigem Satz: Spezifität und Selektor. Die Spezifität sagt, wie spezifisch (also "wichtig") ein Selektor ist; der Selektor sagt, welche Elemente selektiert werden sollen, um die CSS-Regel darauf anzuwenden. Eigentlich ganz einfach ;-)

Hat aber leider nicht funktioniert .

Schade, das hätte die Sache vereinfacht.

Cheatah

[Axel Hoogestraat]

Hi nochmal,

ich habe noch einen Nachtrag, das ich gerade nicht erwähnt hatte.
Kann das Problem evtl. daran liegen, dass ich in den "feiertag-klassen" Formatierungen aus den Originalen überschreibe ?
Also sowohl in .wochentag, .wochenende, .wochentag.feiertag also auch in .wochenende.feiertag setze ich die Hintergrundfarbe !?!!

Vielleicht hilft das ja noch *hoff*

Schöne Grüße
Axel

[Gernot Back]

Hallo Axel,

ich weiß ja nicht, ob das zum Stil deiner Seite passt: Du könntest doch auch zuätzlich zu deinen bestehenden Klassen

.wochenende { background-color:red; }
.wochentag { background-color:blue; }
.heute {border:1px solid green;}

eine Klasse für Feiertage mit einer "semi-transparenten" Hintergrundgrafik definieren, durch die die normale Hintergrundfarbe (für das Wochenende eine andere als für Werktage) nur halb durchscheint:

.feiertag { background-image:url(semitransparent.gif); }

Semitransparente Pixel wie in Photoshop wären darunter natürlich nicht zu verstehen, die Gif-Hintergrundgrafik würde aus insgesamt 2*2 Pixeln bestehen, diagonal abwechselnd aus je zwei transparenten und zwei Pixeln in einer anderen Farbe deiner Wahl.

Im Extremfall würdest du dann einer Tabelle drei Klassen gleichzeitig zuweisen.

<td class="heute wochentag feiertag">Allerheiligen</td>

Gruß Gernot

[Toni]

Hallo,

und wenn Du den Feiertagen eine andere SChriftfarbe gibst?

Gruß
Toni