Caroufredsel Slider Vor/Zurück Buttons ersetzen

Ich weiß eigentlich gehört sich das nicht, aber ich hab die Hoffnung, dass hier mehr Leute reingucken, als im Unterforum vom Slider.
Außerdem hat mein Problem garnicht so viel mit dem Slider zu tun, sondern ist doch eher ein allgemeines.

Ich will den Vor/Zurück Button durch ein Bild ersetzen. Bisher ist es einfach Text wie man hier sieht:
http://delco.de/contao/

Der Code für die Aktuelle Positionierung und Formatierung sieht wie folgt aus:

Code:

---

.caroufredsel_next {
    color: #fff;
    display: block;
    font-size: 30px;
    font-weight: bold;
    height: 40px;
    line-height: 37px;
    margin-top: -20px;
   
    position: absolute;
    right: 8%;
    text-align: right;
    text-decoration: none;
    top: 50%;
    width: 40px;
    z-index: 4;
   
   

 
 
}
 
 
  .caroufredsel_prev {
    color: #fff;
    display: block;
    font-size: 30px;
    font-weight: bold;
    height: 40px;
    line-height: 37px;
    margin-top: -20px;
   
    position: absolute;
    left: 4%;
    text-align: right;
    text-decoration: none;
    top: 50%;
    width: 40px;
    z-index: 4;
 }

---

Dadurch sind die beiden "Buttons" nun schonmal Links und Rechts vom Slider anstatt unten drunter und nebeneinander.

Wenn ich jetzt ein Bild wie einen Pfeil für Vor/Zurück einsetzen will mache ich das doch einfach so oder?

Code:

---

background: url(logo.png);
   
    overflow: hidden;
    text-indent: -9999px;

---

Wenn ich das so einsetze (mit richtiger url) ersetzt er z.B. das "Vor" einfach mit einem "RTS" warum auch immer. Aber das Bild erscheint nicht... Hat jemand ne Idee woran das liegt?

Zitat:

---

Zitat von Wrathberry

Wenn ich das so einsetze (mit richtiger url) ersetzt er z.B. das "Vor" einfach mit einem "RTS" warum auch immer. Aber das Bild erscheint nicht... Hat jemand ne Idee woran das liegt?

---

Tipp: rts ist einfach das Ende des Strings Vorwärts

Lass mal das ganze span mit dem String drin verschwinden, z.B.

HTML-Code:

---

.caroufredsel_next span {
    left:-9999px;
    position:absolute;
    display:none;
    font-size:1px;
}

---

Und dann was in der Art von

HTML-Code:

---

.caroufredsel_next:after {
    position:absolute;
    right:8%;
    top:50%;
    display: block;
    width: ...
    height: ...
    background-image: ...
    ...
    z-index: 10000;
}

---

Zitat:

---

Zitat von tab

Tipp: rts ist einfach das Ende des Strings Vorwärts

---

Manchmal kann ich mir echt nur vor den Kopf schlagen xD. Weiß du wie ich da gesessen hab und nur gedacht hab: "WTF, wie kann es sein, dass da nun auf einmal komplett "random" "rts" steht".

Den Rest probier ich gleich aus. Vielen Dank :)

Das mit dem Hintergrundbild klappt noch immer nicht. Ich habs nun erstmal so gelöst:

Code:

---

.caroufredsel_next span {
  display: none;
}
.caroufredsel_next:after {
 content: '>>>';
 border: solid blue;
 background-color: black;
}

---

Einfach den alten Text ausgeblendet und dafür einen neuen eingeblendet, das klappt soweit ohne Probleme.

Nur wenn ich nen Background-Image anzeige, wird dieses einfach nicht gezeigt. Der Link zum weiterscrollen ist noch immer an der selben Stelle aber halt unsichtbar. Und vom Bild ist nichts zu sehen.

1. Problem zumindest provisorisch gelöst.

nun zum 2.

Auf dem Handy also kleinerem Bildschirm, verschiebt er die vor/zurück-Pfeile viel weiter unten auf die Seite. D.h. sie sind extrem weit weg vom Slider. Habe doch aber alle Positionierungsangaben in % angegeben. Müssten die Pfeile dann nicht an der selben STelle sein, egal auf welchem Viewport?

Jemand ne Idee woran das liegt?

Ihr müsst quasi nur die Browserfensterbreite verkleinern, und schon seht ihr das PRoblem. Müsst also garnicht das Handy bemühen. Wie setze ich die Position der Pfeile neben dem Slider fest?

Nachdem der Text angezeigt wird, stimmt ja wohl zumindest die Positionierung. Dann kanns noch die Größe sein, das Hintergrundbild selbst erzeugt ja im Gegensatz zum Text keine Breite und Höhe. Die muss dann eben im CSS noch extra angegeben werden. Wird denn der Bildlink überhaupt im Quelltext ausgegeben und stimmt er auch?

Haste auch ne Idee wie ich es schaffe, dass der Text bei kleinerem Viewport nicht einfach weiter nach unten geschoben wird? Also der Vor/Zurück Text.

Zitat:

---

Zitat von Wrathberry

Auf dem Handy also kleinerem Bildschirm, verschiebt er die vor/zurück-Pfeile viel weiter unten auf die Seite. D.h. sie sind extrem weit weg vom Slider. Habe doch aber alle Positionierungsangaben in % angegeben. Müssten die Pfeile dann nicht an der selben STelle sein, egal auf welchem Viewport?

Jemand ne Idee woran das liegt?

---

Sicher. Weil sich die Position nicht auf den Slider bezieht. Soweit ich das in der Kürze der Zeit sehen kann, dürfte sich die Position auf den Wrapper beziehen. Gib einem geeigneten div deiner Wahl, innerhalb dessen das Element mit den Pfeilen liegt, die Eigenschaft position: relative; Dann wird sich deine Positionierung auf dieses Element beziehen.

Zitat:

---

Zitat von tab

Sicher. Weil sich die Position nicht auf den Slider bezieht. Soweit ich das in der Kürze der Zeit sehen kann, dürfte sich die Position auf den Wrapper beziehen. Gib einem geeigneten div deiner Wahl, innerhalb dessen das Element mit den Pfeilen liegt, die Eigenschaft position: relative; Dann wird sich deine Positionierung auf dieses Element beziehen.

---

Kannst du mir das ein bissl genauer erklären?`Also aktuell mach ich ja nichts anderes, als das normale Element "Vor/Zurück" innerhalb des Sliders direkt über das CSS anzusprechen und zu verändern.

Weiß nun ehrlich gesagt nicht, wo ich nen div anlegen soll, damit das Element mit den Pfeilen da drin liegt.

Und du meinst, wenn ich dann so ein Div erstellt habe, würden die Pfeile automatisch merken, dass sie innerhalb des Divs liegen und nicht mehr daraus abhauen?^^

Du hast doch bereits genügend divs außenrum. Zum Beispiel div.ce_caroufredsel. Wenn du dem einfach position:relative gibst, werden sich die absoluten Positionen deiner Pfeile auf dieses div beziehen. Je nachdem was du dann an Position angibst, können die Pfeile natürlich trotzdem außerhalb liegen. Aber (z.B.) top: 0px; heißt dann eben, dass die Pfeile immer am oberen Ende deines Sliders liegen und nicht am oberen Ende deines div#wrapper so wie im Moment. Im Moment passen die top: 40% mehr oder minder zufällig bei normaler Fensterbreite so halbwegs, aber wenn das Fenster schmäler wird und damit der Inhalt unter dem Slider mehr Höhe einnimmt, dann rutschen deine Pfeile eben nach unten.

Vielen Dank! :D