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

YotErra

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).
 
basti1012 hat gesagt.:
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.
https://codepen.io/basti1012/pen/WNGJPQa
Da ist mehr auf Flexbox gesetzt als wie Float
Zum Vergrößern anklicken....
hallo basti1012 - vielen lieben dank!
in "meinen" css habe ich die ganzen border eingesetzt um das ganze besser verstehen zu können. die vorlage ist nicht von mir, ich beschäftige mich zum ersten mal mit diesem thema. das ganze sieht für einen kenner bestimmt sehr übersichtlich aus, für mich als hobby-css-benutzer gibt es da sehr viele neue und noch immer unbekannte zeilen/befehle (und all die vererbungen, positionierungen usw. erfolgen bei mir noch immer sehr häufig nach vielen stunden try&error. deshalb auch all die vielen wirren kommentare da drin)

Kannst du mir erklären wo/wie der wert für das aktuell sichtbare bild an das label übergeben wird?
Und es gibt bestimmt eine schönere möglichkeit abstand zwischen die labels in deinem beispiel zu setzen jenseits von   im html?
 
Ja checked ist gut, das siehst du ja auch bei mir im Beispiel.
Wegen deinem Border:
Setze die einfach * für alle Elemente.
Diese CSS kann man eigentlich fast immer benutzen
Code: 
*{
    box-sizing:border-box;
    padding:0;
    margin:0;
}
Wenn du dann zum Testen einen Border setzt (Das habe ich auch schon öfters gemacht, weil man dann sieht wie groß welches Element ist usw.),
setze dann einfach einen Border dazu
Code: 
[CODE]*{
    box-sizing:border-box;
    padding:0;
    border:1px solid red;
    margin:0;
}
[/CODE]
Das geht bei so wenig HTML ganz gut, bei einer kompletten Seite sollte man da wohl nicht machen, weil das dann doch sehr kompliziert aussehen kann.
Wegen der sogenannten Unordnung:
Jeder macht das etwas anders, aber ich versuche in der CSS, genau die rein folge einzuhalten, wie im HTML
Zb:
HTML: 
<html>
    <body>
        <nav>
           <ul>
              <li>
                 <a></a>
              </li>
            </ul>
        </nav>
        <main>
        </main>
        <footer></footer>
    </body>
</html>
Der CSS Code würde dann die gleiche rein folge haben
Code: 
*{
   margin:0;
   padding:0;
}
html{}
body{}
nav{}
nav ul {}
nav ul li{}
nav ul li a{}
main{}
footer{}
@keyframes{}
@media {}
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück