[_ohliv_]

Hallo allerseits.

Ich bin ziemlich verloren auf der Suche nach einer Möglichkeit im Dreamweaver, über eine Slideshow (mit jquery erstellt) Navigationspfeile zu legen. Die Pfeile sollen am liebsten Unicode Zeichen sein: ▶ & ◀.
Meine Slideshows sehen so aus (http://oliviaschneeberger.com/animals.html) nur merkt leider keiner, dass es eine Slideshow ist, da die Bilder nicht von alleine Rotieren und keine Navi sichtbar ist.

Hier den Code den ich im CSS ausprobiert habe, den Fehler konnte ich aber leider nicht finden.

img::before{
content: "◀";
position: relative;
top: 50%;
left: 10px;
color: #FFFFFF;
}

img::after{
content: "▶";
position: relative;
top: 50%;
right: 10px;
color: #FFFFFF;
}


Wäre extrem froh um Hilfe, da ich noch nicht so gewandt bin im Programmieren.

Lg Olivia

[DesignKater]

Wie wärs mit:

[SimonDerDude]

Nein, die ::before-Notation wurde mit CSS 3 eingeführt um Pseudo-Klassen und Pseudo-Elemente besser zu unterscheiden. Ein colon ( : ) ist die veraltete CSS 2 Syntax - daher liegt der Fehler darin, dass Pseudo-Elemente welche auf Bilder angewandt werden von den meisten Browsern nicht unterstützt/verstanden werden.

Es wäre sowieso ratsam nicht das globale HTML-Tag (img) sondern eher den Slideshow-Container dafür zu nutzen.

[_ohliv_]

Habe DesignKater's Vorschlag ausprobiert, funktioniert leider nicht.

Und hab's auch so versucht:

.slideshow2:before{
content: "◀";
position: relative;
top: 50%;
left: 10px;
color: #FFFFFF;
}

.slideshow2:after{
content: "▶";
position: relative;
top: 50%;
right: 10px;
color: #FFFFFF;
}

und denselben Code mit :: nach '.slideshow2', funktioniert auch nicht, dann verschiebts mir den ganzen content.

Mann, was mach ich falsch?!
Danke schonmal für eure Hilfe!

[SimonDerDude]

Dein Inhalt wird verschoben da der content der Pseudo-Elemente relativ platziert wird, das ist korrektes Browserverhalten. Ich täte testhalber die Schriftfarbe verändern damit man auch sieht woran man arbeitet und der CSS-Content nicht mit dem Hintergrund verschmilzt.

Vorteilhaft wäre es, Pseudo-Elemente absolut (absolute) zu positionieren - das übergeordnete Elternelement wird relativ (relative) positioniert, damit der Bezug zum Container hergestellt wird. Google das, wenn du es nicht verstehst.

[SimonDerDude]

// entschuldigt den Doppelpost aber:

Wenn du später versuchen solltest, einen Click-Event auf die Pseudo-Elemente anzuwenden - das funktioniert nicht. Das sind keine Objekte, welche im DOM verfügbar sind (werden nicht initial in HTML geladen) und können dadurch nicht referenziert werden.

Bietet die Slideshow welche du eingebaut hast keine Navigationselemente? - dürfte in der Dokumentation stehen.