CSS Slider - Steuerung auf/über den Bildern // Problem mit position?

Status
Dieses Thema wurde gelöst! Zur Lösung gehen…

YotErra

Mitglied
Hallo ihr lieben,
ich versuche mir endlich einen CSS Slider "beizubringen", als Hobby, hier das momentane Versuchsergebnis:
CSS Slider Übungen und hier meine bisherigen CSS erkentnisse: http://yoterra.de/slider/formate_slider.css
Leider bekomme ich die Steuerungspunkte/das Navi nicht über den Bildern plaziert. Ich vermute ich habe da einen grundsätzlichen Fehler bei der position?

Habe dazu im www diese schöne Vorlage gefunden (Imageslider ohne Javascript - Ein einfacher Slider mit reinem CSS | Ebene 11 - Webentwicklung . AutoCAD . Schulung), sitze schon seit zwei Tagen dran und zerteste sie Zeile für Zeile.

Habe hier im forum gerade ein recht interessantes plazierungs-Beispiel von 2012 entdeckt: Navi über Slider legen und hier die Lösung dazu: Edit fiddle - JSFiddle - Code Playground - habe ich noch nicht ausprobiert...

Über Hilfe die Steuerung über die Bilder zu schieben sehr dankbar!
YotErra

PS. Sehr gerne würde ich eine CSS Bildergallerie mit "nur" Pfeilen zum durchklicken rechts/links der Bilder bauen können - noch keine gute Vorlage ohne JS entdeckt. Wordpress mag ich nicht. Vorschläge sehr willkommen!
Und in dieser aktuellen Vorlage verstehe ich ohnehin etliche Schritte noch nicht ganz (".cssSlider input" zbsp. komplett unklar).
 
Dann viel Erfolg! In meinen Augen ist es auch als Übungsaufgabe nicht lohnend, einen Slider ohne JS zu kreieren, weil dieser ganz schlecht erweiterbar sein wird. CSS-Animationen auf jeden Fall, aber ganz ohne Skript besser nicht. Sieh dir die Webanimations-API an, dann hast Du ein lohnenderes Übungsobjekt:
JavaScript/Animation – SELFHTML-Wiki
 
Dann viel Erfolg! In meinen Augen ist es auch als Übungsaufgabe nicht lohnend, einen Slider ohne JS zu kreieren, weil dieser ganz schlecht erweiterbar sein wird. CSS-Animationen auf jeden Fall, aber ganz ohne Skript besser nicht. Sieh dir die Webanimations-API an, dann hast Du ein lohnenderes Übungsobjekt:
JavaScript/Animation – SELFHTML-Wiki
ja, ist klar - ich habe aber von JS bisher leider absolut keine Ahnung, außer mal eine dezimalstelle zu ändern. will nicht etwas benutzen womit ich selbst so gar nicht umgehen kann. Steht aber auf meiner todo-liste :)
 
...in diesem speziellen Fall ist es eher ein plazierungs-problem was da auftaucht. hat so spontan nix mit slider oder nicht slider zu tun. vermutlich und höhstwahrscheinlich...?
 
Na gut, es kann nie schaden, wenn man weiß, wie eine solche Platzierung funktioniert. Wenn Du die Pfeile über dem Bild platzieren willst, gibt es im Wesentlichen zwei Möglichkeiten. Vom Prinzip her ist das nichts anderes als in der Demo hier, wo Text über einem Bild platziert wird:
Edit fiddle - JSFiddle - Code Playground
Statt des Textes würdest Du dann die Pfeile platzieren.
 
Na gut, es kann nie schaden, wenn man weiß, wie eine solche Platzierung funktioniert. Wenn Du die Pfeile über dem Bild platzieren willst, gibt es im Wesentlichen zwei Möglichkeiten. Vom Prinzip her ist das nichts anderes als in der Demo hier, wo Text über einem Bild platziert wird:
Edit fiddle - JSFiddle - Code Playground
Statt des Textes würdest Du dann die Pfeile platzieren.
ich bleibe erstmal bei dem steuerungsmenü als listenpunkte bis ich es zufriedenstellend kapiert habe.
(in der hoffnung, dass dies auch wirklich mal eintritt )
habe die steuerung mittlerweile auf die bilder bekommen: CSS Slider Übungen (Die untere Steuerungszeile wie es vorher war) und hier das angepasste css: http://yoterra.de/slider/formate_slider_V2.css

Was jetzt aber leider nicht mehr funktioniert ist die ausgegraute Klickfläche beim sichtbaren Bild. Jemand einen tipp?

Die platzierung des Menüs auf den Bildern ist so mittelerfolgreich - kann bisher noch nicht verhindern, dass sie bei kleiner Fenstergröße aus dem bildbereich nach unten "herausrutschen"...
Was ich auch seit stunden nicht finden kann ist woher dieser Abstand zwischen den Bildern und dem unterem Rand des .sliderElements figure herkommt - da scheint auf jeden fall body durch (habe den roten rand im CSS zeile 32 eingebaut)
 
Ich finde das deine Css etwas zu viel Input hat.
Deinen ganzen border:solid 0px ... , warum sind die da ?
Dein jetziger Slider würde bei mir so aussehen.

Link zur Lösung

Da ist mehr auf Flexbox gesetzt als wie Float
 
Zuletzt bearbeitet:
Was ich auch seit stunden nicht finden kann ist woher dieser Abstand zwischen den Bildern und dem unterem Rand des .sliderElements figure herkommt
Das ist auch nicht ganz leicht zu finden, aber etwas wonach relativ häufig gefragt wird. Der Grund ist, dass bei img-Elementen der Default-Wert für vertical-align baseline ist. Mit vertical-align: top; für die Bilder verschwindet der Abstand.
 
Zuletzt bearbeitet:
Status
Dieses Thema wurde gelöst! Zur Lösung gehen…
Zurück