#1

Andreas_B

Forum-Sponsor  (162 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://undefined.bplaced.net

bezieht sich auf den Tipp von harlekin8 im [Tipps und Tricks] Forum

Hallo ihr lieben,

meine Fragen bezieht sich auf den Tipp von harlekin8
(Ich war mir nicht sicher, ob ich ein neues Thema erstellen oder unter dem Beitrag von harlekin8 eine Antwort schreiben soll, hoffe ich habe mich richtig entschieden)

Ich habe versucht, das script in mein bestehendes Projekt einzubinden und habe dabei die Anleitung (weitestgehend) berücksichtigt:

  • Siquando geschlossen
  • die .js Datei von der Seite geladen und im Designordner (Riga) gespeichert

Anstelle von eigenen, neuen Grafiken hatte ich versucht die Akkordeon Elemente genauso aussehen zulassen, wie die, die ich direkt über Web9 erzeugt hatte. Also habe ich versucht, die CSS Klassen in das script einzubinden.

Hier nun mein weiteres vorgehen:

  • 1.) in der config.ccml:

Diesen Teil habe ich eins zu eins übernommen. Die erweiterten Eigenschaften kann ich in Web9 auch sehen.

  •  2.) in der global.ccml:

hier habe ich lediglich folgende Zeilen übernommen

Javascript und Balkengrafiken anmelden
<cc:*> DD Akkordeon </cc:*> 
<cc:asset src="ddaccor.js" dst="ddac.js" obj="ddac" common="0" noparse="1">

 Die anderen, in der Anleitung vorhandenen Zeilen beziehen sich, soweit ich das verstanden habe, auf das Einbinden von eigenen, neuen Grafiken.
(was mir nur aufgefallen ist, dass die Datei, die man sich von der Seite runterladen kann einen leich anderen Dateinamen hat aber das habe ich angepasst)

 

  •  3.) in der navigation.ccml vor dem schliessenden </head>-Tag:

in diesem Abschnitt habe ich ein paar Änderungen vorgenommen:

headerclass: "balken", //Shared CSS class name of headers group
 
habe ich folgendermaßen geändert:
 
headerclass: "sqracc .sqracchead", //Shared CSS class name of headers group

Hier habe ich versucht die bestehenden CSS Klassen der Akkordeons zu benutzen, verwirrt/verwundert hat mich dabei allerding das Leerzeichen im class name. Aber ich habe den Namen so übernommen, wie er in der style_content.css steht. Ich hoffe, dass ich da die richtige Klasse ausgewählt habe, bin mir da leider nicht so sicher.

folgende Klasse habe ich gewählt:

style_content.css
.sqracc .sqracchead div {
  padding: 10px 20px 10px 32px;
  border-top: 1px solid <cc:print value="&site.properties.design.boxborder">;
  border-left: 1px solid <cc:print value="&site.properties.design.boxborder">;
  border-right: 1px solid <cc:print value="&site.properties.design.boxborder">;
  cursor: inherit;
  float: left;
  background: #ffffff url(<cc:print value="&accclosed.svg.filename">) 10px 50% no-repeat;
  min-width: 30%;
  -webkit-user-select: none;
  user-select: none;
}

ist das überhaupt die richtige Klasse? Also die, die das "Aussehen" der Akkordeons macht?
Oder hätte ich einfach die "Hauptklasse" .sqracc nehmen sollen?

  •  4.) in der page.ccml -

Hier habe ich folgendes geändert:

<h2 class="balken"
 
geändert zu:
 
<h2 class="sqracc .sqracchead" 

 und den Rest so übernommen.

 

  • 5.) in der style_design.css:

hier habe ich lediglich dies übernommen:

.inhalt {
    padding: 10px;
}

 Beim schreiben frage ich mich grade, ob ich die .balkenopen auch mich hätte übernehmen sollen aber ich konnte diese Klasse nirgends innerhalb des scriptes finden oder habe ich sie einfach nur übersehen?

 

 

Des Weiteren habe ich nicht ganz verstanden, wie ich das in Web 9 dann verwenden kann.

Ich habe ein Menü bestehend aus 3 Registerkarten und einen "Registerbereich beenden". Also Tab1, Tab2 und Tab3
Ich möchte gerne innerhalb von Tab2 Akkordeons einfügen mittels dieses scripts. Bisher habe ich aber nicht rausfinden können, wie ich das machen kann. Ich habe verschiedene Möglichkeiten versucht:
- einen neuen Absatz Registerkarte, als "neue Registerkarte beginnen" und auch als "Akkordeonbereich beginnen" dazu mit verschiedenen Kombinationen aus den erweiterten Eigenschafen.

Wenn ich den neuen Absatz als "neue Registerkarte" eingefügt habe, hat Web9 halt auch einfach nur eine neue Registerkarte erstellt.
Wenn ich den neuen Absatz als "Akkordeonbereich beginnen" eingefügt habe, kam beim erzeugen, die Fehlermeldung, dass ich die beiden Bereiche nicht mischen darf.

Ein einfacher Text Absatz mit den erweiterten Eigenschafen hat auch nicht funktioniert.


Hier wäre ich für eine kurze Hilfe dankbar, weil ich es mir einfach nicht herleiten kann, wie das funktionieren kann.

Wenn ich einen neuen Absatz als "Akkordeonbereich beginnen" nach dem Absatz "Registerbereich beenden" eingefüge und diesen dann in den erweiterten Eigenschafen "Akkordeon vor diesem Absatz starten" auf "Ja" setze und einen zweiten neuen Absatz ebenfalls als "Akkordeonbereich beginnen" aber mit der erweiterten Eigenschaft "Akkordeon nach diesem Absatz schließen" = "Ja" einfüge  und dannn die Webseite erstelle bekomme ich folgendes Ergebnis:

 

result_1.jpg

 

 

Die Akkordeons sind unterhalb des Tab Bereiches, die Überschrift ist verschoben und wenn ich das obere Akkordeon (den, der grade geöffnet ist) schließe, dann verschwinden beide. Der untere lässt sich hingegen problemlos öffnen und schließen.

 

Also, ich hoffe, dass dieser lange Beitrag nicht zu verwirrend ist und ich meine Schwierigkeiten halbwegs verständlich machen konnte.
Vielen Dank an alle, die sich die Mühe machten, bis hier her zu lesen

Liebe Grüße
Andreas
(Ps.: Ich werde dem Forum heute abend eine kleine Spende zukommen lassen, als stellvertretendes Danke an alle die mir hier so geduldig geholfen habe bzw. noch helfen)

#2

webchaot

Ehrenmitglied  (1295 Punkte)  ·   männlich  ·   Schweiz  ·   Nachricht senden
 http://www.webchaot.ch

Zuerst mal zur Bedienung:

Du hast ja Ingos Einträge in der config.ccml kopiert, somit hast Du ja für Start und Ende des Akkordeonbereichs dafür erweiterte Eigenschaften zur Verfügung!

Wenn Du jetzt also z.B. in einer Registerkarte bist und bereits einen Textabsatz hast und z.B. eine Tabelle in einem darin befindlichen Akkordeonbereich darstellen willst, dann erstelle den Absatz Tabelle und setze bei diesem Absatz in den erweiterten Eigenschaften "Akkordeon vor diesem Absatz starten" auf an und nach Deinem letzten Akkordeonabsatz "Akkordeon nach diesem Absatz schliessen" auf an und das sollte es schon gewesen sein...

 

Zu Deiner "Aussehensklasse":

Die von Dir hier eingestelltes "Klassenbeispiel" ist für den Akkordeon-Titelbalken in geschlossenem Zustand verantwortlich...

 

Zur Klassenschreibweise:

in der CSS, hier stellt ja der "Punkt" eine Klasse dar und mehrere Klassen werden dann tatsächlich mit Abstand geschrieben, sofern die durch die zweite Klasse selektierten Elemente innerhalb der ersten Klasse angehören. Also wie z.B. eben Dein Akkordeonheader, der ja der Klasse Akkordeon angehört: .sqracc .sqracchead div {.......} Mehr zu diesem Thema findest Du HIER (unter "Beachten Sie")...

in HTML, wonach die CCML ja "übersetzt" wird, wird eine Klasse ja mittels class="...." geschrieben und wenn mehrere Klassen angesprochen werden sollen, dann werden sie ganz einfach dort nacheinander eingefügt, also z.B. so: class="sqracc sqracchead"


Gruss

Walti


Dieser Beitrag wurde bereits 2 mal bearbeitet, zuletzt von »webchaot« (25.04.2017, 17:42)
#3

Andreas_B

Forum-Sponsor  (162 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://undefined.bplaced.net

Hallo Walti,

vielen Dank für deine Antwort.


Die Klassenschreibweise mit Leerzeichen war mir bisher nicht sonderlich geläufig, danke für die Erklärung.

Und auch danke für die Hinweise zur Bedienung.

 

Ich vermute, mein Hauptproblem, warum es nicht funktioniert ist, dass ich nicht weiß, wie ich die vorhandenen css Klassen in das script einbinden kann smile_confused_16.png


Hättest du da vielleicht noch einen Tipp für mich?

 

Danke und liebe Grüße
Andreas

#4

Thomas

Moderator  (2298 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://siquando-designs.de

Wenn ich die Anleitung überfliege, scheint es mir, also ob die vorhandenen css-Klassen in keiner Beziehung zu dem einzubindendem Script stehen. Deshalb verstehe ich nicht, weshalb du „balken“ ersetzen möchtest.



Viele Grüße
Thomas

siquando-designs.de (NEU: KARO Flex Layout, Santa Cruz Pro für Pro Shop und Apollon 11 für Siquando Shop, Templateübersicht & Support für Shop 11 + Pro Web 8)

#5

Andreas_B

Forum-Sponsor  (162 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://undefined.bplaced.net

Ich bin bin davon ausgegangen, dass die Akkordeons dann ein anderes design haben, wenn ich denen nicht die entsprechenden css Klassen zuweise.

Aber vielleicht habe ich auch nur einfach wieder viel zu umständlich gedacht, ich werde das nochmal versuchen.

 

Was mir jedoch nicht ganz klar ist:

harlekin8 schrieb:
Vorbereitung:
...    
Grafiken für den Akkordeon
ddaccor.js und die beiden Balkengrafiken im entsprechenden Designordner kopieren
 
Statt Grafiken könnt Ihr natürlich auch CSS Hintergrundfarben od. z.B. eine Sprite-Grafik einsetzen.

 
Was meint er mit Balkengrafiken? Welche, die ich selbst erstellt habe?

 

Ich danke dir wirklich sehr für deine Hilfe

#6

W2D Fan

Co-Administratorin  (4549 Punkte)  ·   weiblich  ·   Niederlande  ·   Nachricht senden

Nein, die die du runtergeladen hast. Denn du solltest außer das Javascript auch Grafiken runterladen ;-)


Gruß,
Marjorie

Hilfe ist nicht selbstverständlich. Deshalb halte ich ein "Dankeschön", nachdem jemandem geholfen wurde, für überaus angebracht und höflich.

#7

Andreas_B

Forum-Sponsor  (162 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://undefined.bplaced.net

Hallo Marjorie,

oh man, manchmal fühle ich mich echt doof smile_confused_16.png
Ich kann auf der scriptseite lediglich die Javascript Datei und ein gif mit dem Namen "loading2.gif" finden

#8

W2D Fan

Co-Administratorin  (4549 Punkte)  ·   weiblich  ·   Niederlande  ·   Nachricht senden

Na ja Andreas, den Tipp von harlekin8 stammt auch aus 2014!! Es kann schon so sein daß sich in der Zwischenzeit etwas geändert hat ;-) Versuche es einfach mal.


Gruß,
Marjorie

Hilfe ist nicht selbstverständlich. Deshalb halte ich ein "Dankeschön", nachdem jemandem geholfen wurde, für überaus angebracht und höflich.

#9

webchaot

Ehrenmitglied  (1295 Punkte)  ·   männlich  ·   Schweiz  ·   Nachricht senden
 http://www.webchaot.ch

Ich hab' mich zwar noch nie mit dem Script beschäftigt, wenn ich es aber überfliege, dann muss ich Thomas Recht geben.

So wie's aussieht arbeitet dieses Script mit 2 Zuständen, offen oder geschlossen (collapse oder expand) und dazu kannst Du je eine Klasse definieren und angeben. Dies ist im Beispiel von Ingo mit balken und balkenopen gelöst und Ingo schreibt ja dazu auch, dass man dies auch per CSS selbst nach eigenem Gutdünken stylen kann.

Wenn Du dies jetzt mit der vorhandenen Siquando-Akkordeongestaltung verwenden willst, dann werden sich daraus Schwierigkeiten ergeben, da diese Gestaltung nicht mit einer Klasse gemacht ist, sondern zusätzlich mit Klassen von Klassen etc.

Ohne mich tiefer dazu einzuarbeiten würde ich Dir aber auch empfehlen die Klassen balken und balkenopen beizubehalten und sie einfach in der CSS nach Deinem Geschmack zu stylen...


Gruss

Walti

#10

Andreas_B

Forum-Sponsor  (162 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://undefined.bplaced.net

@Marjorie:

ja das stimmt schon, ist wirklich schon ein paar Jahre alt. Aber ich gebe mir Mühe, das zum laufen zu kriegen 🙂

 

@Walti:

danke für deine Antwort 🙂

Ich habe dort drei Klassen gefunden:

balken (Balken geschlossen)
balkenopen (Balken offen)
inhalt (Text sichtbar bei geöffnetem Balken)

 Ich werde noch weiter versuchen.

Allerdings bin ich noch auf eine weitere Problematik gestoßen.
Auf der Seite von dem script steht, dass das script ein bestimmtes DOCTYPE benötigt. Wenn ich nun aber die page.ccml um folgendes doctype ergänze zerschießt es mir das komplette design

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

 Ich frage mich, ob es überhaupt noch möglich ist, das script in aktuelle designs einzubinden.

Vielleicht überlege ich mir einfach eine andere Möglichkeit, wie man das realisieren kann.

Wäre es theoretisch möglich innerhalb eines Tabreiters einen Absatz "HTML Dokument" zu erstellen und innerhalb dieses dann mittels entsprechendem code eine ähnliche Funktion zu erzielen?
Vielleicht wäre das noch einfacher?

Vielen lieben Dank euch allen 🙂

#11

webchaot

Ehrenmitglied  (1295 Punkte)  ·   männlich  ·   Schweiz  ·   Nachricht senden
 http://www.webchaot.ch

Das was Du gepostet hast ist eine zusätzliche jquery und hat nix mit DOCTYPE zu tun...

Wie ich Ingo kenne hätte er es geschrieben, falls noch mehr zu tun wäre. Da ich gerade unterewegs bin kann ich das Beispiel gerade nicht nachstellen und muss Dir die Antwort zur Funktionstüchtigkeit schuldig bleiben...

 


Gruss

Walti

#12

Andreas_B

Forum-Sponsor  (162 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://undefined.bplaced.net

es bezug sich auf folgenden Hinweis auf der ursprungsseite des scriptes:

zitat
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 
<script type="text/javascript" src="ddaccordion.js">
 
__________________________________________
 
Note the "doctype" code at the very top- this script requires a valid doctype in order
to work correctly. You can remove it if your page already has one declared.

 

bin mir aber nicht sicher, ob man die beiden <script> wirklich braucht.

Ich werde es aber noch weiter versuchen, das hin zu bekommen, danke dir, Walti 🙂

#13

webchaot

Ehrenmitglied  (1295 Punkte)  ·   männlich  ·   Schweiz  ·   Nachricht senden
 http://www.webchaot.ch

Die DOCTYPE hast Du ja schon in Deiner navigation. ccml, eine jquery auch, die sollte genügen. Und dieddaccordeon hast Du ja auch schon in der navigation.ccml vor dem schliessenden </heah> falls Du Ingos Anleitung umgesetzt hast...;-)


Gruss

Walti

#14

Andreas_B

Forum-Sponsor  (162 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://undefined.bplaced.net

Ja, die Anleitung habe ich soweit umgesetzt und es funktioniert tatsächlich auch soweit.

Nur ich bekomme das mit dem css nicht richtig hin und dementsprechend wir es nicht richtig angezeigt.

Mein Ziel ist es zu erreichen, dass die Akkordeons von dem script denen, die durch die Siquando-Akkordeongestaltung erstellt wurden, möglichst ähnlich sehen.

 

hier ist der cc code von den Siquando Akkordeon:
 
<cc :*> Accordeon </cc :*>
 
.sqracc {
  box-sizing: border-box;
  margin: 0 auto 30px auto;
  max-width: 1400px;
}
.sqracc .sqracchead {
  box-sizing: border-box;
  margin: 0 30px;
  padding: 0;
  border-bottom: 1px solid <cc :print value="&site.properties.design.boxborder">;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.sqracc .sqracchead:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.sqracc .sqracchead div {
  padding: 10px 20px 10px 32px;
  border-top: 1px solid <cc :print value="&site.properties.design.boxborder">;
  border-left: 1px solid <cc :print value="&site.properties.design.boxborder">;
  border-right: 1px solid <cc :print value="&site.properties.design.boxborder">;
  cursor: inherit;
  float: left;
  background: #ffffff url(<cc :print value="&accclosed.svg.filename">) 10px 50% no-repeat;
  min-width: 30%;
  -webkit-user-select: none;
  user-select: none;
}
.sqracc .sqracccontainer {
  display: none;
}
.sqracc.sqraccopen .sqracccontainer {
  display: block;
}
.sqracc.sqraccopen .sqracchead div {
  background-image: url(<cc :print value="&accopen.svg.filename">);
}
@media screen and (max-width: 767px) {
  .sqracc .sqracchead {
    margin: 0;
    padding: 0 30px;
  }
}

 

und ich habe die drei Klassen:

.balken {
}
 
.balkenopen {
}
 
.inhalt {
}

 

Ich gestehe, dass ich mit css nicht so gut umgehen kann. Ich habe versucht Zeilen aus dem Siquando design zu kopieren aber das brachte nur eingeschränkten Erfolg.

Hat vielleicht nochmal jemand einen Tipp, ob und wie man das hin kriegen kann?

 

vielen lieben Dank für eure Hilfe und Unterstützung smile_16.png

(ps. bin ja schon ein bisschen stolz, dass ich mit eurer Hilfe herausgefunden habe, wie ich die erweiten Eigenschaften hierfür richtig benutzen kann und das sogar funktioniert smile_16.png )


Dieser Beitrag wurde bereits 1 mal bearbeitet, zuletzt von »Andreas_B« (26.04.2017, 15:58)
#15

Andreas_B

Forum-Sponsor  (162 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://undefined.bplaced.net

Leider bin ich bisher noch nicht weiter gekommen.

Ich schaffe es nicht, dass die drei Klassen, die das script braucht, einen ähnlichen style wie die Klassen des editor css erzeugen.

Hat vielleicht jemand einen Tipp, wie ich die Klassen des editors auf die drei Klassen für das script "runterbrechen kann"?
So dass die Akkordeons, welche das script erzeugt, ähnlich ausschauen, wie die, die der editor erzeugt?

Vielen Dank und liebe Grüße
Andreas


Dieser Beitrag wurde bereits 1 mal bearbeitet, zuletzt von »Andreas_B« (27.04.2017, 16:42)
#16

Thomas

Moderator  (2298 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 https://siquando-designs.de

Du musst lediglich die Klassen ergänzen, vermutlich wie folgt:

1
2
 .sqracc .sqracchead div, .balken { ...
 .sqracc.sqraccopen .sqracchead div, .balkenopen {

 


Viele Grüße
Thomas

siquando-designs.de (NEU: KARO Flex Layout, Santa Cruz Pro für Pro Shop und Apollon 11 für Siquando Shop, Templateübersicht & Support für Shop 11 + Pro Web 8)

#17

W2D Fan

Co-Administratorin  (4549 Punkte)  ·   weiblich  ·   Niederlande  ·   Nachricht senden

@ Andreas_B

Bitte nicht deine Beiträge pushen. Wir helfen hier alle ehrenamtlich, unendgeltlich und in unsere Freizeit.  Wir müßen auch mal unsere Brötchen verdienen oder haben etwas anderes zu tun. Außerdem ist keiner dazu verpllichtet eine Antwort zu geben. Danke für dein Verständnis.


Gruß,
Marjorie

Hilfe ist nicht selbstverständlich. Deshalb halte ich ein "Dankeschön", nachdem jemandem geholfen wurde, für überaus angebracht und höflich.

#18

Andreas_B

Forum-Sponsor  (162 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://undefined.bplaced.net

@Thomas: vielen Dank für deine Antwort, das werde ich gleich mal testen 🙂

@Marjorie: Entschuldige bitte, wenn Du das als pushen aufgefasst hast, so war es nicht gemeint. Selbstverständlich weiß ich, dass hier alle in ihrer Freizeit antworten. Und darum bin ich auch für jede Antwort dankbar

#19

webchaot

Ehrenmitglied  (1295 Punkte)  ·   männlich  ·   Schweiz  ·   Nachricht senden
 http://www.webchaot.ch

Na, das kann ja nicht so schwer sein...

...hier wie immer ein unausgearbeitetes "quick- & dirty- Beispiel": http://akkordeonundregistermix.webchaot.ch

Ich wollte dies eigentlich bei einem Feierabendbier machen, aber das ging so schnell, dass ich noch nicht mal das Bier offen habe...  ;-)


Gruss

Walti

#20

Andreas_B

Forum-Sponsor  (162 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://undefined.bplaced.net

Guten Morgen,

vielen Dank für deine Antwort, Walti 🙂
Und vielen lieben Dank auch dafür, dass du dir die Zeit für mich genommen hast, das Beispiel zu erstellen.

 

Ich habe mir den Quellcode von deinem Beispiel angeschaut:

Walti's code
<div class="sqrpara" id="046504a764104491f">
<h2 id="046504a764104491f">Register mit untergeordnetem Akkordeon</h2>
<p></p>
</div>
<div class="sqrpara" id="046504a7641051b24">
<a name="046504a7641051b24"></a>
<p>Und hier nun also das gegenteilige Beispiel, ein Akkordeon als Register-Abschnitt...</p>
</div>
						<div class="sqrtabs">
			<div class="sqrtabshead">
			<ul>
							<li class="sqrtabactive">Register 1</li>
							<li>Register 2</li>
							<li>Register 3</li>
						</ul>
			</div>
			<div class="sqrtabscontainer sqrfwalt">
        	<div class="sqrtabactive">
			<!-- Akkordeon Element -->
<div class="balken"><div class="balkenclosed">Akkordeon Thema 1</div></div>
<div class="inhalt">
<div class="clearer"></div>
<div class="rowsmall">
<div class="sqrparatwo" id="046504a7641056425">
<a name="046504a7641056425"></a>
<p>Ich bin Blindtext. Von Geburt an ...</p>
</div>
<div class="sqrparatwo" id="046504a7641056926">
<a name="046504a7641056926"></a>
<div class="sqrlbgroup
sqrtable sqrtablescroll">

 und hier im Vergleich dazu der code, den die Software für mich erstellt hat:

mein code
<!-- Akkordeon Element -->
<h2 class="balken" style="padding: 9px 0 0 55px; color: #222; font-size: 14px; text-transform: none; margin: 1px 0; height: 26px;">test_überschrift_2</h2>
<div class="inhalt">
<div class="sqrpara">
<p style="">test2</p>
</div>
<div class="sqrpara">
<p style=""></p>
</div>
<!-- Ende Accordeon -->
</div>

Der Hauptunterschied ist, dein code funktioniert, meiner nicht...
(Jetzt bin ich wieder an dem Punkt, warum diese Software so schwierig für mich ist. In 'reinem' HTML wüsste ich jetzt einigermaßen was zu tun ist.)
Aber ich habe bisher noch nicht rausgefunden, wie ich der Software sagen kann, dass sie die div Klassen richtig benutzt usw.
Und wie hast du es geschafft, die id zu bekommen?

Welche Absätze/Elemente hast du in web9 benutzt um den Akkordion zu erstellen?
Ich habe einen Text Absatz eingefügt, dann einen weiteren Textabsatz (mit Überschrift und Text), bei dem in den erweiterten Eigenschaften 'Akkordeon vor diesem Absatz starten = Ja', dann einen dritten leeren Textabsatz und bei dem in den eE 'Akkordeon nach diesem Absatz schließen = Ja'

Mit scheint, ich mache noch etwas grundlegendes Falsch, bisher konnte ich aber nicht rausfinden was oder wie smile_confused_16.png

 

Vielen Dank und schöne Grüße an alle 🙂
Andreas


Dieser Beitrag wurde bereits 1 mal bearbeitet, zuletzt von »Andreas_B« (28.04.2017, 10:28)
#21

Andreas_B

Forum-Sponsor  (162 Punkte)  ·   männlich  ·   Deutschland  ·   Nachricht senden
 http://undefined.bplaced.net

(@Marjorie: Achtung dies ist kein pushen smile_winking_16.png)


Denn ich möchte kurz bescheid sagen, dass ich es scheinbar hinbekommen habe. Die, über das script erstellte Akkordeons, werden mir tatsächlich im richtigen design angezeigt 🙂

Falls es jemanden interessiert, das Problem lag in der page.ccml. Den Eintrag dort hatte ich aus dem Howto übernommen.
Ich ersetzte diese Einträge durch:

<cc:if cond="&para.properties.design.ddaccor.start">
<!-- Akkordeon Element -->
<div class="balken"><div class="balkenclosed"><cc:print value="&para.properties.design.ddaccor.ueberschrift"></div></div>
<div class="inhalt">
<div class="clearer"></div>
</cc:if>

 und seitdem funktioniert es 🙂
(bin mir nicht sicher, ob ich an dieser Stelle auch das 'clearer div' benötige?)

jetzt nur noch ein bisschen die Positionierung anpassen und verstehen, wie ich das auch umgekehrt machen kann (also tabreiter innerhalb eines Akkordeon) und dann wird das ja langsam mit der Webseite (auch dank eurer Hilfe und Unterstützung smile_16.png)

Vielen Dank euch alles erstmal

#22

webchaot

Ehrenmitglied  (1295 Punkte)  ·   männlich  ·   Schweiz  ·   Nachricht senden
 http://www.webchaot.ch

Sorry, war heute morgen abwesend...

 

Zitat von: Andreas_B

Jetzt bin ich wieder an dem Punkt, warum diese Software so schwierig für mich ist. In 'reinem' HTML wüsste ich jetzt einigermaßen was zu tun ist.

Andreas, Du kannst nicht immer alles auf die Software schieben und wenn Du Dich auf HTML berufst, dann kann ich Dir sagen, dass ich nix anderes gemacht habe... 

Es ist natürlich toll, wenn Ingo eine Anleitung einstellt, die auch perfekt funktioniert und jeder einfach einbauen kann! Wenn man dann allerdings gewisse eigene Wünsche hat, spätestens dann muss man aber auch das Hirn einschalten und ein bisschen mitdenken...

In Ingo's Code wird der Titel des Akkordeonabschnitts als h2 ausgegeben, der dann in der CSS ein Hintergrundbild für den on/off-Zustand zugeordnet wird. Du wolltest es aber so haben, wie es in Siquando original aussieht.

Und jetzt kommt eben Dein HTML-Wissen...   ;-)  Dies geht aber nicht mit h2, da ja nach dem End-Tag des header-Elements automatisch ein Umbruch erfolgt...!

(In Beitrag #9 hatte ich übrigens ja schon darauf hingewiesen, dass dies nicht mit einer einzigen Klasse machbar ist)

Das war dann auch meine einzige Änderung: mit der Klasse "balken" quasi einen Strich gezogen und mit der Klasse "balkenclosed" als inline-block quasi eine "Lasche" mit dem Titel des Akkordeonabschnitts aufgesetzt und in der CSS ruckzuck einen Rahmen links-oben-rechts gemacht, die Hintergrundfarbe gegeben und die SVG, die ja schon im Design vorhanden ist. Und der Klasse "balkenopen" für den geöffneten Zustand natürlich die andere SVG...   fertig...  :-)

P.S. zum Thema HTML: 

Was solltest Du denn hier clearen wollen...?  ;-) 


Gruss

Walti


Dieser Beitrag wurde bereits 1 mal bearbeitet, zuletzt von »webchaot« (28.04.2017, 13:47)
1131 Aufrufe | 22 Beiträge