CSS-Herausforderung bei Akkordeon

[Wolf Larsen]

Hallo Zusammen,

ich benutze das Rounded Boxes Theme von iNetRobots. Ich habe zunächst ein Akkordeon angelegt, mit dem einzelnen Beitrag. Etwas am CSS gebaut und es sah so aus.



Ich habe also eine gewisse Höhe eingestellt und das der Scrollbar automatisch kommt.

Dann habe ich geschnallt, dass ich eigentlich die Umschlag-Version brauche, weil ich Text, Galerien etc. mit einbinden muss.

Nachdem ich auf Umschlag umgestellt habe, kommt nun so ein Wirrwarr raus:



Der nimmt nun mehrmals meine Definition her und vergeigt damit das Layout.

Hier der CSS, der beim Einzel passt, beim Umschlag nicht:

.ce_accordion .accordion div
{
	height:350px;
	overflow:auto;
	margin-bottom:5px;
	padding:9px 9px 0;
	background-image:url("tl_files/accordion-hg.png");
}

Jetzt habe ich schon versucht, etwa einen Stil .inner zuzuweisen, der keine Scrollbars und kein Padding hat, aber das klappt nicht. Eine andere Hintergrundfarbe geht aber schon.

Gibt es eine simple Lösung, das Wirrwarr aufzulösen?

Danke,
Wolf

[schman]

du gibts jedem div im Accordion eine Höhe von 350px alles was darüber hinausgeht wird pre scroll balken dargestellt. Nimm die Höhe raus und verpasse sie nur dem .ce_accordion dort kannst du dann auch per scroll: auto Scrollblaken einbinden.

[Wolf Larsen]

Danke für die Unterstützung schman! Wenn ich .ce_accordion eine feste Größe gebe, zerlegt es das Accordion, weil ja dann jedes geschlossene Accordion mit 350 px dargestellt wird. Außerdem geht der Scrollbar in die Überschrift und die Abstände stimmen auch nicht. Hier ist die Seite.

Danke,
Wolf

[schman]

Was willst du denn eigentlich erreichen.
Ich bin davon ausgegangen das du willst das das Accordion eine fixe Höhe von 350px hat. Wenn du die Höhe komplett wegläst (oder auch auf height: auto; stellst) dann klappt das accordion ganz zu.

Das einzige was ich mir noch vostellen kann ist das du willst das das accordion nie größer als 350px werden soll, dann musst du mit max-height: 350px; arbeiten.

[Wolf Larsen]

Hallo schman!

Erreichen will ich eigentlich nur, dass die Formatierung für Dinge in einem Umschlag genauso ausschaut wie als Einzel. Ich habe die CSS eben mal wieder umgestellt. Als erstes kommt ein Einzel, schön richtig. Und dann schlagen die Stile zu. Hier ist die Seite.

Wolf

[soweit_ok]

Ich hab mir eben mal den Teil "Test Umschlag" mit Firebug angeschaut und hoffe, es hilft Dir, was ich dabei herausfand:

Es sind zwei Textelemente untereinander enthalten. Dafür gäbe es ja normalerweise keinen Grund und führt in dem Testcase auch zu Fehlern. Das Accordionelement hat Inlinestyles - würde ich schonmal generell alles im CSS-Selektor machen. Umgeben von einem klassen- u. stylelosen <div> enthält dieses Accordion zwei aufeinander folgende Inhaltselemente der Klasse ce_text, denen jeweils eine feste Höhe von 350px zugewiesen wird. Wo der Inhalt aber nicht reinpasst. Wegen overflow:auto werden dann natürlich auch in den beiden Textelementen Scollbalken angezeigt. Mit overflow:hidden wären die weg, aber dann würde der Inhalt abgeschnitten. Also entweder mit Scrollbalken oder keine fixe Höhe zuweisen.

Im Accordion-Element unter dem Toggler "Media" musst Du ganz einfach entweder die fixe Höhe rausnehmen, dann wird alles richtig angezeigt. Und falls Du das aus Gründen einer übereinstimmenden Optik nicht willst. Solltest Du für die Galerie am besten das Template für tabellenlose Ausgabe nehmen und die Vorschaubilder so formatieren, dass sie in die vorgegebene Höhe hineinpassen.

Hatte im Firebug zum Testen auch mal die CSS-Anweisungen entsprechend geändert und dann funktionierte alles einwandfrei. Ich kenn das natürlich auch - manchmal sieht man den Wald vor lauter Bäumen nicht.

Obgleich für Deine akt. Anzeigeprobleme nicht nötig, noch ein kleiner Tipp, für den Fall, dass man bei schwierigen Formatierungen mal einen zusätzlichen Container um Elemente braucht und dafür nicht extra ein importiertes Template erweitern will. Bspw. hat eine Accordiongruppe standardmäßig keinen Umgebungscontainer, wo man sowas wie width und float unterbringen könnte. Einfach vor und nach dem Element, dem man den Container verpassen will, je ein HTML-Element anlegen. In das erste <div id="meine_id" class="meine klasse"> reinschreiben und in das zweite dann </div>. Der TinyMCE erlaubt zum Glück solche Scherze. Hab ich mal bei einem solchen Problem probiert und funktioniert bestens.

[Wolf Larsen]

Danke für die Infos soweit_ok ! Eigentlich schade, dass ein Standard von Contao solche Mätzchen macht. Dieser Umschlag ist dafür da, dass man mehrere Inhaltselemente, auch Texte, Bilder und Videos untereinander bringen kann. Das Akkordeon soll auf alle Fälle so sein, wie im Einzel-Beispiel. Die gesamte Sache soll später die gleiche Höhe bekommen und gescrollt werden muss dadurch. Man kann doch den einzelnen Inhaltselementen Stile mitgeben. So bekomme ich ja z.B. einen roten Hintergrund, aber die Scrollbars nicht weg etc.

Vielleicht weiß noch einer was!

Wolf

[soweit_ok]

Eigentlich schade, dass ein Standard von Contao solche Mätzchen macht. Dieser Umschlag ist dafür da, dass man mehrere Inhaltselemente, auch Texte, Bilder und Videos untereinander bringen kann.

Ich kann in dem Fall keine von Contao verursachten Mätzchen entdecken. Wenn Du Dich bei der CSS-Formatierung an die Regeln des Zusammenspiels von HTML-Elementen hältst, funktioniert es auch. Wenn einem Container eine Größe < "Platzbedarf der Inhaltselemente" zugewiesen wird, ist es doch logisch, dass die Inhaltselemente je nach overflow:Wert entweder eigene Scollbalken anzeigen oder abgeschnitten werden.

Falls Du das nicht hast, solltest Du unbedingt die Firefox Erweiterung "Firebug" installieren und Dir Dein Machwerk damit anschauen. Und zwar wählst Du dann darin den Reiter "HTML". Wenn Du dann in der li. Box auf ein Element klickst, wird in der rechten die CSS-Formatierung dieses Elements angezeigt. Wenn Du dann dort draufklickst, kannst Du sie zur Laufzeit ändern und siehst sofort die Auswirkungen.

Also nochmal die Fakten am Beispiel des Accordions "Media": heigt:350px sind darin nicht dem umgebenden Accordion-Element zugewiesen, sondern jedem einzelnen Image. Mit der Folge, dass die Caption Deiner Image-Links einen Meter nach unten raushängt. So darf das aber nicht sein. Nur das Accordion darf/muss die Höhenzuweisung erhalten. Und overflow:auto, was aber überflüssig ist, da sowieso der Defaultwert. Wenn man das im Firebug ändert, wird sofort alles richtig so angezeigt, wie Du es haben willst und Du musst es dann nur noch in Deiner CSS-Datei nachziehen. Ein zweites Problem resultiert ansonsten noch daraus, dass im Image-Link "Modern Green Comments" der String nicht ins Caption passt und deshalb umbrochen wird. Das liegt daran, dass den Zellen der Tabelle width:33% zugwiesen wird. Das musst Du passend machen, wenn die Bildlinks eine identische Höhe haben sollen. Ich schrieb Dir auch schon im letzten Kommentar, wenn Du stattdessen das tabellenlose Gallery-Template verwendest, entfällt schonmal das blöde Gedöns mit der Tabellenformatierung.

Hier der grafische Beweis für den gewünschten Effekt der CSS-Änderungen ...
Accordion-Formatierung.jpg

[soweit_ok]

Kleine Korrektur: Dass der Caption-String in einem Fall nicht reinpasst, liegt natürlich nicht an den 33 % width der Tabellenzellen, sondern an der Breite der Images bzw. der Länge des Strings.

[Wolf Larsen]

Ich bin jetzt wieder bei der Idee den Inhalten des Akkordeon einen Stil .innen zu verpassen. .innen soll die Scrollbalken wieder aufheben. Meinen wir da das selbe? Weil ich meine schon, dass es nicht logisch ist, dass wenn ich einem Element aussen sage, es soll scrollen, dass es die inneren Elemente es auch tun. Auch wenn die CSS-Denke vielleicht so ist und ich eine Pfeife bin :-)

.innen
{
	overflow:visible;
	display:inline;
	margin:0;
	padding:0;
	background-color:#ffa8a8;
	background-image:url("tl_files/havener/accordion-hg.png");
}

Das klappt im Test Umschlag schon ganz gut, wenn auch zwischen und unten irgendwie Platz bleibt, und eine Hintergrundfarbe zur Markierung leuchtet. Woher kommt das wieder?

Ich bin nicht der CSS-Checker. Ich habe mal einfältigerweise aus .innen #innen gemacht und alles den Akkordeon-Inhalten zugewiesen (was man nicht soll, wegen der Eindeutigkeit der DIVs) - und der Abstand war weg. Ich lege doch nicht für jeden Furz ein # an, oder?

Ich habe von dieser Seite das neue Galerie-Template genommen und die Stile importiert, aber es schaut wild aus in "Media". Einen Scrollbalken bekomme ich wieder durch meinen .inner im Inhaltselement weg, der andere kommt wahrscheinlich durch den Stil im Template. Ich benutze Code 2. Was kann man da machen?

Eine spannende Sache! Schön wäre, wenn mal was auf Anhieb klappt :-) Die Tabellen-Galerie in Contao ist ja quasi zeitlos. Für Wordpress gibt es die Nextgen-Gallery, die hat das Gallery auch echt verdient.

Wolf

[soweit_ok]

Doch, natürlich ist das logisch. Ein Element scrollt nicht, weil Du dem Elternelement gesagt hast, es soll scrollen, sondern weil der Inhalt DIESES Elements nicht reinpasst und Du ihm das Scrollen auch nicht per overflow:hidden verboten hast.

Beispiel Fluid Gallery:
.accordion div{} darf keine Zuweisung von height:350px enthalten. Tut es aber! Und betrifft somit alle div-Elemente in Accordions. Ich könnte Dir jetzt wieder per Grafikanhang zeigen, dass die Fluid-Galerie korrekt angezeigt und ohne Scrollbalken angezeigt wird, sobald diese Zuweisung weggenommen wird. Jedoch nunmehr vier Images nebeneinander, weiß nicht, ob das gewollt war. Die Images und Image-Container musst Du natürlich mit den Abmessungen sowie Innen- und Außenabständen nochmal so formatieren, dass nichts verrutscht und sie so in die Zeilen passen, dass es gut aussieht und so viele horizontal angezeigt werden, wie Du haben willst. Deine grundlegenden CSS-Anweisungen für die Fluid-Gallery stimmen ansonsten auf den ersten Blick.

Soll nicht belehrend wirken ... CSS bedeutet "Cascading Style Sheet". Anders gesagt, die Möglichkeit der Verschachtelung und Vererbung. http://selfhtml.org ist ein sehr gutes Nachschlagewerk und Tutorial, anhand dessen Du eigentlich so ziemlich jedes CSS-Problem enträtseln kannst. Im Forum geht zwar mal Hilfe zu einem speziellen Problem, doch ein Grundlagen-Fernkurs geht natürlich nicht.

Nochmal: Nur dem äußeren Container darfst Du eine feste Höhe zuweisen. In den Kindelementen hat das bei dem, was Du willst, nichts verloren. Na ja, wenn es zum Scrollen führt, würde ich auf fixe Höhen in Accordions ohnehin soweit als möglich verzichten, denn schön finde ich was anderes.

Der Abstand in Test Umschlag kommt von padding:9px und margin-bottom:5px. Vielleicht sind diese Werte auch nicht direkt zugewiesen, sondern geerbt, da musst Du mal nachschauen. In dem Fall waren mit der Zuordnung der betroffenen Elemente unter Deine eigene Klasse #innen die Abstände weg, weil dadurch die Vererbung aufgehoben wurde. Eine eigene id brauchst Du für diese Formatierung nicht oder wäre dann sinnvoll, wenn die Anweisungen nur für DIESE Elementgruppe oder eine bestimmte Art von Elementgruppen gelten sollen.

[Wolf Larsen]

Servus soweit_ok,

wirkt überhaupt nicht belehrend. Ich checke es auch schon fast. Blende ich einfach mal den Stil

.ce_accordion .accordion div
{
	height:350px;
	overflow:auto;
	margin-bottom:5px;
	padding:9px 9px 0;
	background-image:url("tl_files/havener/accordion-hg.png");
}

aus, sieht es schon sehr ordentlich aus. Nun ist es doch so, dass durch das .div am Stilnamen der Stil auf alle Unter-DIVs angewendet wird. Kann man den Stil so anpassen, dass er nur auf das obere Objekt einwirkt? Die Lösung scheint irgendwie so simpel, aber ich kapiers dann trotzdem nicht.

Wolf

[soweit_ok]

Hi Wolf,

genau so ist es, konntest jetzt also die Fehlerquelle nachvollziehen. Hier mal ein Link zu einem gut strukturierten CSS-Workshop. Er führt Dich direkt zum Unterkapitel "Verschachtelte Selektoren" und ist für kniffelige Zuweisungen ganz lehrreich. http://www.css4you.de/wscss/css04.html

Das sieht doch jetzt schonmal sehr gut aus auf Deiner Seite, bin stolz auf Dich. Wenn ich Deine Frage, wie Du einen Stil "nur dem oberen" Element zuweisen kannst, richtig verstand, geht´s Dir wahrscheinlich primär wieder im die Höhe von 350px für jedes Accordion der Gruppe und es soll nur ein einziger Scrollbalken außen angezeigt werden, falls der Inhalt nicht reinpasst und eben kein Scrollbalken, wenn der Platz reicht. Okay, scroll:auto ist ohnehin Defaultwert, bräuchtest Du also hier nicht extra zuweisen. Kann aber auch nicht schaden. Innen hast Du es ja schon herausgenommen, jetzt musst Du die Höhe nur noch an .ce_accordion zuweisen. Aber bitte max-height:350px - dass es so funktioniert, siehst Du auch auf nachfolgendem Screenshot. Mit einer absoluten Zuweisung von height:350px wären alle Accordions permanent aufgeklappt und das soll ja nicht sein. Da Du wohl wahrscheinlich nicht allen Accordions auf Deiner Webseite diese Höhe verpassen und die Anweisung auch nicht dauernd explizit überschreiben willst, solltest Du für Accordions mit diesen Eigenschaften eine eigene Klasse definieren ... #acc_350x640.ce_accordion{max-height:350px;....;....} Ein div darfst Du hier aber nicht dranhängen, sonst würde es sich wie gehabt auch auf alle inneren divs der Accordions. Für kniffelige Aufgaben ähnlicher Art hättest Du auch noch den Verknüpfungs-Operator ">", aber den brauchst Du hier nicht. Teste auch mal in verschiedenen Browsern, auch IE. In manchen Browsern können Element-Scrollbalken zu nah am Inhalt erscheinen, dann empfiehlt sich die Zuweisung von ein paar Pixeln padding.
Acc_test.jpg

Zum dritten Mal der Tipp: Installier Dir endlich Firebug!!!!!! Dann ist nämlich bei Mausklick auf Elemente im HTML-Code oben die zugehörige Ausgabe farbig markiert und rechts siehst Du die zugehörigen CSS-Anweisungen - live mit sofort sichtbaren Auswirkungen temporär veränderbar. Auch siehst Du die ganze CSS-Hierarchie inkl. Angabe der von übergeordneten Elementen geerbten Zuweisungen, was Dir Hinweise gibt, wo Du ggf. überschreiben musst.

Auch wenn es nicht Deinem Anwendungsfall entspricht - wie ich verschiedene Accordion-Typen und deren Elemente in meiner layout.css anspreche, gibt Dir viell. darüberhinaus noch die eine oder andere Anregung:

/*////////////////////////////////////////////////////////////////////////*/
/* Accordion */

/* Inhalt */
.ce_accordion div.accordion > div {
    margin-top:-1px;margin-bottom:0px;margin-left:0px;margin-right:0px;
    padding-top:0px;padding-left:5px;padding-right:5px;
    border-right:solid 1px #B8B6B6;border-left:solid 1px #DBD1D1;
    border-bottom:solid 1px #B8B6B6;
    background:#F6F4F4;
}

/* geschlossen */
.ce_accordion div.toggler {
    margin-bottom:0px;
    padding:0 10px;
    background:#656565 url("../files/layout/accord_zugeklappt.gif") right center no-repeat;
    font-weight:normal;
    font-size:12px!important;
    color:#FFFFFF;
    border-bottom:solid 1px #ADADAD;
}

/* offen */
.ce_accordion div.active {
    padding:0 10px;
    background:#6268A2 url("../files/layout/accord_aufgeklappt.gif") right center no-repeat;
    font-weight:normal;
    color:#FFFFFF;
    border-bottom:solid 1px #4D4D4D;
}

/* Mouseover */
.ce_accordion div.hover {
    text-decoration:none;
    background:#6268A2 url("../files/layout/accord_hover.gif") right center no-repeat; /* CA2130 (rot) sieht auch sehr gut aus */
    cursor:pointer;
}

.accordion_450 {width:450px!important;}

/* Klasse des mittels TinyMCE eingefügten umschließenden div für Floating der .accordion_450  Gruppe */
.accordion_multiblock_left {
  float:left;clear:left;
  margin-top:5px;margin-right:12px;margin-bottom:3px;width:450px;
  visibility:visible;display:inline;
  box-shadow:3px 3px 3px #847C7C;-moz-box-shadow:3px 3px 3px #847C7C;webkit-box-shadow:3px 3px 3px #8C8B91;
}

.accordion_multiblock_right {margin-top:-45px;}

/* Inhalt - re. Spalte */
#right_acc.ce_accordion div.accordion {
    border-left:solid 1px #C5BBBB;
    border-right:solid 1px #847C7C;
    border-bottom:solid 1px #C5BBBB;
}

/* geschlossen - re. Spalte */
#right_acc.ce_accordion div.toggler {
    margin-bottom:0px;
    padding:0 8px;
    background:#656565 url("../files/layout/acc_right_close.png") right center no-repeat;
    font-weight:normal;font-size:12px!important;line-height:20px;
    color:#000;
    border-left:solid 1px #fff;border-top:solid 1px #fff;border-right:solid 1px #4D4D4D;border-bottom:solid 1px #4D4D4D;
    border-radius:1px;-moz-border-radius:1px;-webkit-border-radius:1px;
    height:20px;
}

/* offen - re. Spalte */
#right_acc.ce_accordion div.active {
    padding:0 8px;
    background:#6268A2 url("../files/layout/acc_right_open.png") right center no-repeat;
    font-weight:normal;
    color:#000;
}

/* Mouseover - re. Spalte */
#right_acc.ce_accordion div.hover {
    text-decoration:none;
    background:#6268A2 url("../files/layout/acc_right_hover.png") right center no-repeat; /* CA2130 (rot) sieht auch sehr gut aus */
    cursor:pointer;
    color:#fff;
}

/* Absätze, Listen u. Sonderstyles */
#right_acc.ce_accordion p {padding-left:10px;padding-right:10px;font-size:12px;line-height:14px;text-align:justify;}
#right_acc.ce_accordion li {padding-left:10px;padding-right:10px;font-size:12px;line-height:14px;}
#right_acc .daily_msg_black {margin-top:0px;border-right-color:#878787;padding-left:0px;padding-right:0px;}

Statt der id #right_acc ginge auch die generische #right, aber dann würde es sich auf alle Accordions der re. Spalte auswirken.

HG Andreas

[soweit_ok]

Sorry, ein Flüchtigkeitsfehler ... mit " solltest Du für Accordions mit diesen Eigenschaften eine eigene Klasse definieren" meinte ich natürlich eine id.

[Wolf Larsen]

Vielen Dank, soweit_ok! Du machts das sehr ausführlich und es ist lehrreich. Eigentlich ist der Schlüssel zum Glück dieses max-height. Die Designer haben sich tatsächlich die ganze Seite nur aus einem Akkordeon vorgestellt. Also nur ein Artikel mit Inhaltselementen und verschiedenen Umschlägen - und eine feste Höhe. Evtl. wird nachher noch alles auf dem Bildschirm zentriert.

Bei mir geht jetzt der Scrollbalken auch durch die Überschrift, also etwa in Media.

Bei Deinem Screenshot augenscheinlich nicht. Wo liegt da der Fehler?

Eine Sache fiel mir beim Laden der Seite auf: Das Akkordeon blitzt kurz in vollem Zustand auf. Kann man diesem Effekt beikommen?

Zur Website

Danke,
Wolf

[soweit_ok]

Nein, auf dem Screenshot war es auch nicht anders. Schau auf den Toggler, dann siehst Du es. Ich wusste nicht, dass der Toggler nicht in die Höhe von 350px und das Scrollen einbezogen werden soll.

Dafür musst Du es etwas anders machen ...

Bei .ce_accordion:

• Statt "overflow:auto" ein "overflow:hidden" zuweisen.
• "max-height:350px" hier löschen.

Bei .ce_accordion .accordion:

• "max-height:350px" stattdessen hier zuweisen
• Das in ".ce_accordion zugewiesene "overflow:hidden" hier mit "overflow:auto" überschreiben.

So funktioniert es, wie Du es haben willst, siehst Du auch in nachfolgendem Screenshot. Achte wieder auf den Toggler. In der Grafik sind auch nochmal die kompletten Anweisungsblöcke drin, mit Pfeilen an den Änderungen.
Acc_test.jpg

Was den Aufblitzeffekt angeht, wurde Dein Original-Template vielleicht modifiziert, evtl. die Anweisungen
alwaysHide: true,
display: -1,
in eine if-Abfrage verpackt? Es kursieren verschiedene Versionen dieses Templates, z. B. für den verzweifelten, aber bislang untauglichen Versuch, die Formularverarbeitung in Accordions in den Griff zu bekommen.

[soweit_ok]

max-height ist nicht unbedingt schon der alleinige Schlüssel zum Glück. Falls es nämlich vorkommen kann, dass der Inhalt eines Accordions kürzer als 350px ist, das Accordion aber in jedem Fall 350px haben soll, müsstest Du auch noch min-height:350px zuweisen. Aber wie gesagt kein "height", denn dann wären alle Accordions permanent geöffnet.

[Wolf Larsen]

Danke soweit_ok! Ich habe es jetzt so gemacht, und auch nochmal drübergeschaut aber er macht keine Scrollbars mehr hin.

Das Template ist modifiziert, weil alles beim Laden der Seite geschlossen sein soll.

Und das Formular-Problem kommt auch noch auf mich zu :-)

Zur Webseite

Wolf

[soweit_ok]

Hmm, irgendwie scheint es mir wieder wie vorher - die Scrollbar schließt den Toggler mit ein. Also wenn ich das CSS im Firebug so ändere, wie in der letzten Anleitung beschrieben, funktioniert es bei mir richtig.

Wenn es bei Dir live nicht funktioniert, versuch mal, das overflow:hidden bei .ce_accordion zu löschen. Das wird nämlich schon in der ebenfalls diesem div zugewiesenen klasse .block gesetzt. Und mach mal in ".ce_accordion .accordion" ein "overflow:auto!important". Kann sein, dass der Scrollbalken unten ein Stück abgeschnitten wird. Aber das macht ggf. eigentlich nichts, schränkt die Bedienung nicht ein.

Ja, das mit den Sch...Accordions kann manchmal echt widerspenstig sein, wenn man deren Default-Eigenschaften verbiegen will. Mit einem Formular im Accordion wirst Du Probleme bekommen. Es klappt nämlich nach dem Absenden des Formulars wieder zu und man sieht eventuelle Fehlermeldungen nicht. Außerdem hängt die Seite im Fehlerfall in diesem Zustand und verlangt bei einem Reload, die Daten nochmal zu senden. Das einzige Javascript-Template mit Änderungen, die dieses Problem beheben sollen, funktioniert entgegen der Behauptung des Autors leider nicht. Vielleicht kriege ich das noch irgendwie hin, hat bei mir aber keine hohe Priorität, muss Formulare nicht in Accordions packen.

Falls Du das mit den Scrollbalken überhaupt nicht hinbekommen solltest, kann ich Dir höchstens anbieten, mal selber auf der Seite zu schauen. Normalerweise funktioniert auch im CSS, was per Firebug funktioniert, aber vielleicht ist es in diesem Fall mal nicht so.

[Wolf Larsen]

Das ist so, weil ich an der Seite noch baue :-) Ich vollziehe Deine Dinge mit Firebug eben nach und baue dann nochmal um. 10 Minuten.

Wolf

[Wolf Larsen]

Ne, ich kriege es nicht hin. Es kann sein, dass mir schon langsam die Puste ausgeht, aber ich habe die Stile mit Firebug verändert und bekomme keine Scrollbars (Anhang). Ich vollziehe das jetzt eben in den Stilen im CMS nach.

Wolf

[soweit_ok]

Auf ein Neues:

.ce_accordion {
clear:both;
margin-bottom:8px;
margin-left:auto;
margin-right:auto;
overflow:auto !important;


}


.ce_accordion .accordion {
background-image:url("tl_files/havener/accordion-hg.png");
max-height:350px !important;
overflow:auto !important;
padding:9px 9px 0;


}

Ich hab nämlich bisweilen seltsame Seiteneffekte beobachtet. Wie, dass der Scrollbalken nur kurz aufblitzte und dann gleich wieder verschwand, als ob er überlagert würde. Da sind so viele Divs ineinander geschachtelt inkl. ein klassenloses eigentlich überflüssiges, dass man garnicht mehr sicher sagen kann, welche Zuweisungen wohin vererbt werden und wie die divs einander genau überlagern. Wenn ich mit sowas garnicht weiterkomme, gebe ich den Elementen gern temporär mal verschiedenfarbige Hintergründe. Wie auch immer, jedenfalls ist es nicht so günstig, dass auch die Klasse .block ein overflow:hidden enthält. Ich habe festgestellt, dass obige Zuweisungen, quasi redundant auch der Klasse ce_accordion ein overflow:auto!important zu geben, anscheinend am saubersten arbeitet. Das overflow:hidden in der Klasse .block bewirkt dann nur, dass die Inhalte nicht das nachfolgende Accordion überlagern, funkt aber nicht mehr in die Scrollbalken (wegen des !important bei denen nicht überschreibbar).

Probier es nochmal so, bei mir scheint es jetzt perfekt zu funktionieren, hab alle Accordions getestet.
Acc_test.jpgacc_test2.jpg

[Wolf Larsen]

Hossa - Dein overflow:auto!important war es :-)

Ich sage an dieser Stelle öffentlich herzlich danke!

Wolf

[soweit_ok]

Keine Ursache. Bei Media musst Du den seitlichen Abstand zwischen den Images noch ein bisschen verkleinern. Falls es nicht gewollt war, dass momentan nur zwei pro Reihe angezeigt werden (zumindest im Firefox).

[MiTsch]

Hallo Wolf Larsen,

ich habe diesen Thread teilweise mitverfolgt und ich finde es ist ein gelungenes Layout dabei heraus gekommen.

Eine Sache stört jedoch ein bischen:
Wenn man ein Akkordeon öffnet oder wieder schließt, so gibt es immer einen unschönen Ruck nach links bzw. rechts.

Abhilfe würde hier

html
{
 height:101%;
}

schaffen.

Viele Grüße
MiTsch

[Wolf Larsen]

Danke MiTsch! Die Arbeit hat die ganze Nacht gedauert. Das mit den Scrollbars war schon verzwickt. Den CSS habe ich gleich reingehauen, so hat man immer einen Scrollbalken und das Ruckeln ist weg.

So richtig smooth läuft das Akkordeon noch nicht. Dieses Blitzen des Inhaltes ist schwierig. Bei Neuladen sieht man immer kurz den Inhalt. Das bemerke ich auch bei der originalen moo_accordion.tpl

Das angesprochene Formular im Akkordeon ist so eine Sache. Dazu gibt es hier einen Thread. Dort stellt ways2web ein Template bereit, was in die Fehlermeldung springt. Nur bei mir springt es aber nicht dahin :-)

Ich bin froh, dass man überhaupt recht einfach verschiedene Inhaltselemente in so ein Akkordeon bringt. Von der Idee, eine ganze Webseite flach in so ein Akkordeon zu packen, bin ich nicht begeistert. Ich darf es nur umsetzen. Webseiten haben richtige URLs, die man anspringen kann und echte Seiten.

Das Hintergrundbild am Rand, also der Typ, soll sich auch je Akkordeon-Element ändern. Ich bin gespannt.

Schönen Tag,
Wolf

[soweit_ok]

@MiTsch
Das mit dem ruckeln war mir auch auf gefallen, passiert immer, wenn ein Scrollbalken an die Seite hinzukommt. Das Problem hatte ich seinerzeit auch, hatte sich mit der Sticky-Footer Variante von fe_page.tpl dann von selbst erledigt. Dadurch wird der Scrollbalken ja ständig angezeigt. Was mich eigentlich auch stört, aber ich kann damit leben. Ich wollte schon einen unsichtbaren Footer vorschlagen. Wenn man den nicht braucht, tuts height:101% genauso - gute Idee. Manchmal kommt man auf die einfachsten Dinge nicht.

@all
Das Accordion-Template von ways2web hatte ich auch schonmal probiert. Nee, das funzt leider nicht. Das Scrollen zur ersten Fehlerposition hält das Acc-Element nicht vom Schließen ab. Ein anderes Forumsmitglied hatte einen Workaround gefunden, der teils genauso arbeitet, aber stattdessen den initialen display-Wert setzt. Funktioniert angeblich, aber halt nur, wenn das Formular im ersten Acc liegt. Na ja, besser als nix. Habs noch nicht probiert.

Mich begeistert eine solche flache Webseitenstruktur auch nicht und setze Accordion- u. Reiterelemente bzw. versteckte Divs nur punktuell ein. Aber für so ne kleine Web-Visitenkarte mit wenig Inhalt finde ich es noch vertretbar. Denn andererseits auch nachvollziehbar, dass Dein Kunde sich mangels Inhaltsfülle mit ungewöhnlichem Design abheben möchte. Flash-Seiten braucht schließlich auch kein Mensch, trotzdem leben so manche Agenturen bis heute ganz gut von dem Spielkram.

Den Hintergrundwechsel on the fly musst Du viell. garnicht selber bauen. Wenn ich mich nicht irre, gibts dafür eine kleine Erweiterung. Und einen Trigger beim Klick auf Toggler im JS-Template einbauen, dürfte wohl kein Riesenproblem werden.