Platzierung der Navigation - ich krieg es nicht hin …

[Christina]

Hallo Community,

ich habe den caroufredsel-Slider auf einer Fotografen-Seite für eine Diashow eingesetzt. Funktioniert auch alles prima, das ist ein toller Slider!
Allerdings würde ich gern die Vor- und Zurück-Navigation ausserhalb des Bildbereichs (in der linken "Spalte") haben, damit sie immer an der gleichen Stelle sitzt. Momentan verschiebt sie sich ja je nach Bildhöhe rauf und runter, was die Navigation erschwert und auch blöd aussieht.
Mit absoluter Positionierung sollte das ja kein Problem sein - aber ich bekomme es einfach nicht hin! Sobald ich die Navi aus dem Diashow-Bereich schiebe wird sie unsichtbar. Ich habe es schon mit hohem z-index probiert und auch, alle möglichen divs auf "overflow: visible" zu stellen. Es klappt nicht!

Wäre toll wenn mir jemand helfen kann, vielleicht hat ja jemand einen Link auf eine Seite wo es funktioniert?

Hier die Seite: www.schroeder-fotografie.de/architektur.html

Danke!
Christina

[Oden]

Du könntest die Box der Bilder mit einem top:30px; versehen und die Navi mit top:0.

[Dirch]

Hallo Christina,

absolute Positionierung ist hier der richtige Weg. Daß du die Elemente nicht siehst kommt daher, daß der Slider ein overflow:hidden setzt und damit alles was außerhalb liegt ausblendet. Was du machen kannst ist, daß du die Slider-Größe entsprechen erweiterst und ihm ein Padding verpaßt, so daß die Elemente rechts und links genug Platz finden. Standardmäßig wird der Inhalt zentriert dargestellt. Wenn du dann deine Border zur linken Spalte entsprechend anpaßt oder die Header-Navi sollte es auch mit dem Layout passen.

Schau mal hier auf seiner Seite: http://caroufredsel.dev7studios.com das 2. Beispiel an. Da siehst du Bedienpfeile und wenn du da das CSS anschaust kannst du sehen, wie man diese platzieren kann.

Beste Grüße...
...Dirk

[Christina]

Danke für das schnelle Feedback!
Dirch, das mit dem Padding klingt nach einer Lösung - ich hoffe ich schaffe es heute Abend das zu probieren!

Christina

[Christina]

... ich habe "ce_caroufredsel" ein ordentliches padding-left verpasst, dann die Navibuttons mit absoluter Positionierung links vom Slider (innerhalb des Paddings) angeordnet und meine linke Spalte schmaler gemacht, damit das Slider-Padding sozusagen in der linken Spalte steht. Den Text in der linken Spalte habe ich dann relativ positioniert und ihm eine Breite zugewiesen, so dass er über den Rand der Spalte hinausläuft. Ist zwar etwas gebastelt, sollte aber stabil sein.

Vielen Dank Dirk für den Tipp!

Christina

[Dirch]

klingt in der Tat etwas abenteuerlich Aber ist in diesem Fall wohl nicht anders mit CSS zu lösen wenn die Buttons in der Linke Spalte stehen sollen.

Es gäbe noch eine elegantere aber kompliziertere zu hinterlegende Lösung. Dazu müßtest du etwas JavaScript schreiben:

- die Navigation im Slider selbst ausblenden
- die Buttons ganz normal als Bilder in der linken Spalte platzieren
- den Buttons über jQuery Klick-Events zuweisen in der Art:

("#button_left").click(function() { 
    $("#caroufredsel_ID").trigger("prev"); 
}).css("cursor", "pointer");
("#button_right").click(function() { 
    $("#caroufredsel_ID").trigger("next"); 
}).css("cursor", "pointer"); 

Wenn du diese Schnipsel - für beide Richtungen - ins js-Template legst bzw. die Slider-ID einträgst, dann geht das auch. Du steuerst damit den Slider von "außen" und mußt nicht mit CSS und Breiten/Paddings rumfuddeln.

Liebe Grüße...
...Dirk

[Christina]

Hallo Dirk,

das probiere ich dann beim nächsten Mal - oder wenn es Probleme gibt.
Danke für deine Unterstützung!

Christina