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

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

YotErra

Mitglied
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
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?
 

basti1012

Erfahrenes Mitglied
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 {}
 
Status
Dieses Thema wurde gelöst! Zur Lösung gehen…