kann ich mehrere CSS-Style einbinden?

[micr0]

Hallo liebe psdler...

ich bin im netz nicht fündig geworden. Kann ich in einer html Seite nur bestimmte Objekte mit unterschiedliche Style-Sheets verknüpfen??

z.B.:
Objekt 1 = style 1
Objekt 2 =style 2...

Ich frage deshalb, weil ich eben ein Objekt in Jquery öfters in das html-Dokument einbinden möchte, und dieses dann durch unterschiedliche css defineiere!

vielen dank

 

[Horst-Karsten]

AW: kann ich mehrere CSS-Style einbinden?

Ein kleines Beispiel wär mal nicht schlecht.

 

[micr0]

AW: kann ich mehrere CSS-Style einbinden?

Ich möchte das Accordion von jquery einfügen... und das mehrmals... Desweiteren möchte ich das jedes eingefügte Accordion ein anderes Aussehen hat. Da hab ich gedacht, wenn ich für jedes accordion eine eigene CSS-Datei schreiben könnte, und dieses jeweils verknüpfen könnte, dann wäre es ein kinderspiel

 

[simonpicos]

AW: kann ich mehrere CSS-Style einbinden?

Ich möchte das Accordion von jquery einfügen... und das mehrmals... Desweiteren möchte ich das jedes eingefügte Accordion ein anderes Aussehen hat. Da hab ich gedacht, wenn ich für jedes accordion eine eigene CSS-Datei schreiben könnte, und dieses jeweils verknüpfen könnte, dann wäre es ein kinderspiel

um gottes Willen! Warum so ein Aufwand.. Ich weiß jetzt zwar nicht, wie jQuery-accordeons aufgebaut sind, aber am einafchsten ist es, wenn du jedem "Oberelement" des Akkordeons eine Klasse zuweist und das dann + alle Kindelemente in einer datei stylst:

.akkordeon1 ul li{
background-color: red;
}

.akkordeon2 ul li{
background-color: blue;
}

 

[terrenal]

AW: kann ich mehrere CSS-Style einbinden?

die brauchen nicht mal verschiedene Namen - dazu gibts doch die Kaskaden von denen CSS den Namen hat - vorausgesetzt die Einsatzorte haben verschiedene id oder class in der Umgebung

#id1 .akkordion li {
  background:#fff
}
#id2 .akkordion li {
  background:#000
}

steht dann in einer einzigen CSS Datei

 

[micr0]

AW: kann ich mehrere CSS-Style einbinden?

Ich hab mic hauch schon durch die kalssen versucht:

/* Interaction states
----------------------------------*/
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {/*background: url(../../Images/punkt1t.png) 50% 50% repeat-x;*/ font-weight: bold; color: #1c94c4; }/*$$$$$$$$$$*/
.ui-state-default1, .ui-widget-content .ui-state-default1, .ui-widget-header .ui-state-default1 {background: url(../../Images/punkt1t.png) no-repeat;}/*$$$$$$$$$$*/

.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #1c94c4; text-decoration: none; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {background:url(../../Images/punkt1.png)/*font-weight: bold; color: #c77405;*/ }/*$$$$$$$$$$*/
.ui-state-hover a, .ui-state-hover a:hover { color: #c77405; text-decoration: none; }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {font-weight: bold; color: #eb8f00;background:url(../../Images/punkt1.png) }/*$$$$$$$$$$*/
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { text-decoration: none;}
.ui-widget :active { outline: none; }

und hier nochmal:

.ui-accordion { width: 100%;}
.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; width:50px; height:50px}

.ui-accordion .ui-accordion-header2 { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; width:240px; margin-left:300px}


.ui-accordion .ui-accordion-li-fix { display: inline; }
.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; }
.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em;}

.ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; }
.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }
.ui-accordion .ui-accordion-content { padding: 1em 2.2em 1em 2.2em; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; width:200px; height:auto; background-image:url(../../Images/1.png); background-repeat:no-repeat; }
.ui-accordion .ui-accordion-content2 { padding: 1em 2.2em 1em 2.2em; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; width:200px; height:auto; background-image:url(../../Images/2.png); background-repeat:no-repeat; }
.ui-accordion .ui-accordion-content3 { padding: 1em 2.2em 1em 2.2em; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; width:200px; height:auto; background-image:url(../../Images/3.png); background-repeat:no-repeat; }

.ui-accordion .ui-accordion-content-active { display: block; }

Aber ich weiß nicht wie ich jetzt da ein 2 erchaffen kann!

 

[terrenal]

AW: kann ich mehrere CSS-Style einbinden?

hmmm
sollen die zwei auf eine Seite (weiß nicht ob dann das script Probleme macht und die beiden kollidieren) - oder auf verschiedene

im Prinzip gehen aber die zwei so:
um jedes kommt ein div container mit einem extra Namen

dann kopierst du den ganzen styleblock und setzt den noch mal drunter
und in dem kopierten setzt du vor jede Zeile den Namen des div containers

div#acc2 .ui-accordion { width: 100%;}
div#acc2 .ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; width:50px; height:50px}

div#acc2 .ui-accordion .ui-accordion-header2 { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; width:240px; margin-left:300px}

jedenfalls für alle Sachen die von dem abweichen was du im ersten Block stehen hast - maches wird ja für beide gleich sein

 

[Davi2000]

AW: kann ich mehrere CSS-Style einbinden?

Ich verstehe nicht wo das Problem ist, gerade deswegen gibt es im CSS Klassen und ID's

 

[KireSchattenhaar]

AW: kann ich mehrere CSS-Style einbinden?

Also, Du kansnt so viele Akkordien wie Du wilst auf eine Seite klatschen (obs sinnig ist, das erörtern wir mal nicht weiter XD), das geht ohne Probleme. Jedes Akkordeon - Div bekommt seine eigene ID.
Dann musst Du für jedes Akkordeon, das individuell aussehen soll, extra Sheets definieren. DAZU brauchst Du aber nur eine CSS - Datei.

Mein Tip: Arbeite Dich in CSS erstmal ein, mach ein paar Tutorials, dann erklärt sich vieles selbst. Check mal self-html.