Probleme mit Texten die aus dem Slider-Container ragen...

Hallo Leute!

Vielleicht kann mir jemand von Euch zufällig weiterhelfen. Ich setze derzeit ein Projekt für einen Kunden um wo in dem Slider 2 fixe Textbereiche (h1 + Caption) absolut positioniert sind.

Beide Boxen sollen um -7px links aus dem Slider-wrap rausragen. Das Problem ist, dass diese Boxen vom Wap einfach abgeschnitten werden. Ich habs schon mit z-index:9999; und overflow:visible; versucht. Leider ohne Erfolg. Bei anderen Slidern hat das eigentlich immer wunderbar funktioniert.

Das interessante ist, dass die Boxen die links aus dem Wrap rausragen, von rechts wieder in das Wrap reinwandern. Sehr strange...

Hier ein Screenshot:
Anhang 12354

Das geht eigentlich ganz einfach. Auf dem caroufredsel_wrapper ist glaub ich ein overflow:hidden gesetzt. Das musst du dann wegnehmen mit !important. Das sollte es gewesen sein. Jedenfalls ist es an sich kein Problem auch die Elemente außerhalb des Containers zu platzieren.

Zitat:

---

Zitat von Dirch

Das geht eigentlich ganz einfach. Auf dem caroufredsel_wrapper ist glaub ich ein overflow:hidden gesetzt. Das musst du dann wegnehmen mit !important. Das sollte es gewesen sein. Jedenfalls ist es an sich kein Problem auch die Elemente außerhalb des Containers zu platzieren.

---

Das habe ich mir auch gedacht. Ich habs mal so getestet:

Code:

---

.mod_caroufredsel, .content-slider, .caroufredsel_skin, .caroufredsel, .caroufredsel .ce_image, .image_container, .slider-wrapper {
        overflow: visible !important;
        visibility: visible !important;
}

---

Jedoch leider mit dem selben Ergebnis. Ich lade in diesem Template auch nur das "CSS-Reset" und kein anderes Contao-CSS.

So sieht der Quellcode aus:

HTML-Code:

---

<div class="mod_caroufredsel block">
          <div class="caroufredsel_skin" id="caroufredsel_skin_3">
            <div class="caroufredsel" id="caroufredsel_3">
              <div class="ce_image block">
                <h1>Biomechanische Diagnostik</h1>
                <div class="image_container"> <img src="files/Uploads/Slider/slide_01.jpg" width="1197" height="476" alt="" />
                  <div class="caption" style="width:1197px">Bewegungsabläufe beschreiben – das Ziel. ---</div>
                </div>
              </div>
              <div class="ce_image block">
                <h1>Biomechanische Diagnostik</h1>
                <div class="image_container"> <img src="files/Uploads/Slider/slide_02.jpg" width="1197" height="476" alt="" />
                  <div class="caption" style="width:1197px">Bewegungsabläufe beschreiben – das Ziel.</div>
                </div>
              </div>
            </div>
          </div>
        </div>

---

Wie ich oben schrieb, mußt du das overflow auf dem "caroufredsel_wrapper" wegnehmen. Das kann ich nicht in deinem CSS-Schnipsel sehen. Schau doch mal mit dem Firebug oder sonstigen Tools den laufenden Slider an. Da kannst du genau die Stelle finden, an der die Sachen abgeschnitten werden. Ich habs gerade nicht im Kopf, aber die Erweiterung setzt das nicht. Das macht das caroufredsel-Script selbst, daher wird es auf caroufredsel_wrapper gesetzt sein.

Beste Grüße…
…Dirk

Zitat:

---

Zitat von Dirch

Wie ich oben schrieb, mußt du das overflow auf dem "caroufredsel_wrapper" wegnehmen. Das kann ich nicht in deinem CSS-Schnipsel sehen. Schau doch mal mit dem Firebug oder sonstigen Tools den laufenden Slider an. Da kannst du genau die Stelle finden, an der die Sachen abgeschnitten werden. Ich habs gerade nicht im Kopf, aber die Erweiterung setzt das nicht. Das macht das caroufredsel-Script selbst, daher wird es auf caroufredsel_wrapper gesetzt sein.

Beste Grüße…
…Dirk

---

Danke.

Das ist zwar gut gemeint und funktioniert, allerdings zeigt er mir dann alle Slides nebeneinander. Das ist auch nicht optimal...

Code:

---

.caroufredsel_wrapper {
        overflow:visible !important;
}

---

Anhang 12355

So, ich habs nun gelöst indem ich das äußersten Wrap um die Breite (7px) der überstehenden Überschrift breiter gemacht habe und dem Image ein margin-left:7px; zugewiesen habe. Optimal ist diese Lösung für mich nicht aber es funktioniert zumindest bei "fade" Überblendungen.

Absolut positionierte Überschriften die aus dem Slider rausragen machen offensichtlich Probleme...

Zitat:

---

Zitat von cyborgxxl

Absolut positionierte Überschriften die aus dem Slider rausragen machen offensichtlich Probleme...

---

Nope machen sie definitiv nicht. Allerdings hängt das von der Seite ab und wie deren Struktur ist. Der Wrapper ist in der Tat die falsche Stelle, aber wie gesagt ich hab's nicht genau mehr im Kopf gehabt. Je nachdem wie groß nämlich der Slider ist - also wie viel Platz er horizontal einnimmt tritt das auf. Das liegt daran, daß Contao auf #main .inside ein overflow:hidden setzt. Ist der Slider also so breit wie die Main-Spalte, wird alles was rechts/links davon platziert wird ausgeblendet. Abhilfe schafft in dem man den Container für den Slider breit genug wählt.

It's all about CSS und hat mit der Erweiterung/Slider nicht wirklich viel zu tun.

Beste Grüße…
…Dirk

Zitat:

---

Zitat von Dirch

Nope machen sie definitiv nicht. Allerdings hängt das von der Seite ab und wie deren Struktur ist. Der Wrapper ist in der Tat die falsche Stelle, aber wie gesagt ich hab's nicht genau mehr im Kopf gehabt. Je nachdem wie groß nämlich der Slider ist - also wie viel Platz er horizontal einnimmt tritt das auf. Das liegt daran, daß Contao auf #main .inside ein overflow:hidden setzt. Ist der Slider also so breit wie die Main-Spalte, wird alles was rechts/links davon platziert wird ausgeblendet. Abhilfe schafft in dem man den Container für den Slider breit genug wählt.

It's all about CSS und hat mit der Erweiterung/Slider nicht wirklich viel zu tun.

Beste Grüße…
…Dirk

---

Danke nochmals für die Infos. Das hat mich zumindest ein wenig weitergebracht.

Nachdem ich ungefähr 1 ganzen Tag an dem Problem gesessen bin und keine brauchbare Lösung gefunden habe, habe ich mal einige andere Slider getestet. Bei allen hatte ich das selbe Problem bis auf den [npslider]. Der Funktioniert bei meinem Website-Aufbau wunderbar. Das ist zwar erst eine "alpha" Version, ich konnte aber bis jetzt keinen Fehler entdecken.

Auch mit negativ Margins bei absolut positionierten Texten über dem Slider gab es überhaupt keine Probleme.

@intercorp: Wenn Du das nächste mal jemanden per PM anschreibst, dann solltest Du deine Sicherheitseinstellungen dahingehend modifiziert haben, dass man Dir auch Nachrichten schicken darf. Sonst funktioniert das nicht mit dem Antworten... ;)

Wahrscheinlich habe ich dich auch mißverstanden, aber vermutlich hätten dir auch folgende Einstellungen geholfen:

Karussell-Breite > Element-Breite und zwar um den Faktor größer, den dein Text übersteht. Manchmal leuchtet einem nicht gleich ein wozu es möglich ist beide Größen setzen zu können.

Aber wenn du nun einen anderen Slider gefunden hast, der sofort tut was du wolltest ist doch auch schön. =)

Zitat:

---

Zitat von Dirch

Wahrscheinlich habe ich dich auch mißverstanden, aber vermutlich hätten dir auch folgende Einstellungen geholfen:

Karussell-Breite > Element-Breite und zwar um den Faktor größer, den dein Text übersteht. Manchmal leuchtet einem nicht gleich ein wozu es möglich ist beide Größen setzen zu können.

Aber wenn du nun einen anderen Slider gefunden hast, der sofort tut was du wolltest ist doch auch schön. =)

---

hmmmm... das ist wahrscheinlich die einzige Variante die ich noch nicht versucht habe.. ;-) Danke nochmals. Vielleicht helfen Deine Tipps ja noch anderen die ein ähnliches Problem haben...