✔ Extra Stylesheet fuer ein einzelnes Objekt.

[Roflmao]

Ich wuerde gerne den Datepicker von der JQuery Seite bei mir einbauen und habe alle erforderlichen Dateien heruntergeladen.

http://jqueryui.com/demos/datepicker/

Auf meiner Seite wird das Layout des Datepickers aber nicht korrekt dargestellt, da ich in meinen eigenen Stylesheets schon andere Werte fuer Tabellen angegeben habe.
Ich besitze ein extra Stylesheet fuer den Datepicker, moechte aber das dieses nur auf das eine Inputfeld angwendet wird.

Frage wie kann ich einen einzelenen Element ein eigenes Stylesheet zuweisen?

<input type="text" id="datepicker" style="src:url(...);">

Dieser Loesungsansatz funktioniert leider nicht

Die einzige Idee die ich habe ist eine andere Seite mittels Iframe einzubinden, aber das ist eine sehr unsaubere und sicher nicht optimale Loesung

 

[fpvz]

Was soll denn innerhalb von style bitte "src:url()" darstellen?
Das ist falsche Syntax, soetwas gibt es in Css nicht.

Du musst doch keinem Element ein Stylesheet geben, sondern kannst innerhalb der CSS bequem über die Id selektieren.

#datepicker{
..
}

Dein Problem mit der anderen Css-Datei ist mir bewusst, da kann ich aber nicht mehr zu sagen, weil sonst nichts von deinem Code kenne.

Grundsätzlich kannst du aber Werte fixieren, sodass sie von nachfolgenden Veränderungen verschont bleiben. Dazu musst du hinter jedem Css-Wert einfach ein "!important" schreiben, so werden sie nicht überschrieben.

Ein Weiterer Tipp:
Du kannst Elemente auch verschachtelt ansprechen, indem du die DOM-Reihenfolge abläufst und so nur das jeweilige Element selektierst, welches in der Verschachtelten Reihenfolge liegt:

#Elternelement table{
// Nur die Tabellen innerhalb von #Elternelement werden berücksichtigt.
}

 

[Roflmao]

Ueber diesen Weg habe ich es auch schon versucht, aber ich bekomme es einfach nicht hin, da die style css zu unubersichtlich ist und die Werte trotzdem ueberschrieben werden :/. Ich habe einmal eine Datei mit einem funktionierenden Beispiel des Datepickers angehaengt und eine Datei mit dem Layout der Seite. Koennte bitte jemand einmal darueber schauen wie man diese beiden kombinieren kann.
(Damit alles funktioniert muessen die Ordner aus dem Zip Archiv extrahiert werden).

Danke

 

[fpvz]

Nochmals der Verweis auf das !important:
Verlinke eine weitere Css-Datei in den head ein, in der du über die Verschachtelung nur die datepicker-Elemente ansprichst. Diesen gibst du für jede wichtige Eigenschaft ein !important hinten mit.

Einen Tip. besorg dir Firebug (gibts für FF, für Safari und Chrome gibts Firebug Lite) und untersuch die Elemente, welche Css-Eigenschaften auf sie wirken und Welche Css-Datei gerade greift

 

[ComFreek]

Hallo Roflmao,

ich habe bei folgenden Zeilen...

table{margin:.5em 0 1em;}
table td,table th{text-align:left;border-right:1px solid #414246;padding:.4em .8em;}
table th{background-color:#1f2225;color:#fff;text-transform:none;font-weight:bold;border-bottom:1px solid #35383d;}
table td{background-color:#3f4248;}
table th a{color:#FFF;}
table th a:hover{color:#CCC;}
table tr.even td{background-color:#2f3136;}
table tr:hover td{background-color:#25272b;}
table.nostyle td,table.nostyle th,table.nostyle tr.even td,table.nostyle tr:hover td{border:0;background:none;background-color:transparent;}

...noch jeweils den :NOT-Selektor hinzugefügt:

table:not(.ui-datepicker-calendar){margin:.5em 0 1em;}
/* ... */

Sprich: Weise allen Tabellen, außer Tabellen mit der Klasse .ui-datepicker-calendar, folgende Eigenschaften zu...

Jetzt werden deine eigenen Tabelle so angezeigt, wie du es haben möchtest, und die Tabelle beim jQuery UI Datepicker wie im Theme beschrieben.

Siehe auch Anhang:
Anhang anzeigen For-Roflmao.zip

 

[Roflmao]

ihr seid echt super . Ich werde morgen eure Tipps sofort ausprobieren. An important hatte ich so meine Zweifel, da ich das Stylesheet des Datepickers als letzes in die Datei eingebunden habe und soviel wie ich weiss wird der letzte deklarierte Style benutzt, was aber eben nicht passiert ist.

 

[fpvz]

Hallo Roflmao,
das der zuletzt deklarierte Style zieht, ist natürlich das Standardverhalten von CSS. Und um genau dieses in bestimmten Fällen zu umgehen, kann man auf !important zurückgreifen.

Gruß