ul neben arccordion soll nicht runter geschoben werden - CSS?

Hallo Contao-Fans,

ich hab jetzt eine Weile rumgefummelt, bekomme es aber leider nicht hin :o.

Ich möchte eine gefloatete Liste haben (kein Problem), wobei der erste Eintrag ein Accordion ist. Kann innerhalb oder außerhalb der ul sein...mir egal. Wenn der erste Eintrag das Akkordion ist und ich es öffne, verschiebt es die restlichen Einträge unterhalb des Accordions.
Wie müsste das CSS lauten, damit bei aktivem Toggler die restliche ul/Liste links davon bleibt ?

Schönen Abend,

varix

Hier mal zwei Bilder um das Problem besser zeigen zu können:

1) Accordion geschlossen:
Anhang 10502

2) Accrdion offen -> Die ul verschiebt sich nach rechts
Anhang 10503

Das Accordion wird per Insert-Tag eingebunden:

Code:

---

<div style="float:left;">
{{insert_content::24}}
</div>
<div class="footerlist">
  <ul>
  <li>Text</li>
  <li>Über</li>
  <li>Impressum</li>
 </ul>
</div>

---

Hatte dem toggler und toggler.active jeweils testweise eine Breite von 200px angegeben, aber wenn das Accordion aktiv ist, nimmt der toggler auch die Breite des Accordion an und verschiebt dann die
Inhalte nach rechts.

Wie müsste das CSS aussehen, damit der toggler die Breite behält, sich also die ul nicht nach rechts verschiebt, aber das aktive Accordion eine größere Breite hat. Geht das überhaupt?

Vielen Dank im Voraus,

varix

Das <div class="footerlist"> absolut zu positionieren ist keine Option?

Theoretisch ja, wollte es aber zunächst ohne versuchen. Sollte es keine andere CSS-Lösung geben, würde ich es wahrscheinlich so machen.

varix

deinem div wo du den inserttag drin hast eine fest breite und overflow: visible zuweisen. dem accordion dann halt die breite, die er braucht.
Oder habe ich was falsch verstanden?

@art-instinct:
Die von dir angesprochenen Eigenschaften für den div gelten eher dem toggler, da dieser ja angezeigt(generiert) wird. Habe also dem div und dem toggler die anweisungen gegeben und das passt erstmal. Die ul verschiebt
sich nicht mehr. Allerdings geht der Text im Panel jetzt auch nur bis maximal zu Breite des togglers. Leider ist es mir auch nicht gelungen den toggler anzusprechen, wenn er aktiv ist (trotz firebug).

Accordion:jquery
firebug: toggler aktiv

Code:

---

<div id="ui-accordion-1-panel-0" class="accordion ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" style="display: block;" aria-labelledby="ui-accordion-1-header-0" role="tabpanel" aria-expanded="true" aria-hidden="false">

---

Hier online zu sehen:
link

Kannst du mir sagen,was da noch wie angepasst werden muss?


varix

Hallo varix,

versuche doch mal

Code:

---

.ce_accordion {
    overflow: visible !important;
}

---

Hallo kos,

Code:

---

.ce_accordion {
    overflow: visible;
}

---

hat gereicht. Jetzt passt es. Vielen Dank.

@art-instinct: Danke für deine Hilfe.

varix