CSS-Herausforderung bei Akkordeon
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.
http://muenchen-surf.de/wolflarsen/einzeln.jpg
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:
http://muenchen-surf.de/wolflarsen/umschlag.jpg
Der nimmt nun mehrmals meine Definition her und vergeigt damit das Layout.
Hier der CSS, der beim Einzel passt, beim Umschlag nicht:
HTML-Code:
.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
Liste der Anhänge anzeigen (Anzahl: 1)
Zitat:
Zitat von
Wolf Larsen
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 :D ...
Anhang 4376
Liste der Anhänge anzeigen (Anzahl: 1)
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. :D 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.
Anhang 4390
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:
Code:
/*////////////////////////////////////////////////////////////////////////*/
/* 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
Liste der Anhänge anzeigen (Anzahl: 1)
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.
Anhang 4397
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.
Liste der Anhänge anzeigen (Anzahl: 1)
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
Liste der Anhänge anzeigen (Anzahl: 2)
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.
Anhang 4399Anhang 4400
