Vertikale Bildergalerie zum Scrolen

  • Oh, entschuldige bitte. Kann mir jemand sagen, wie ich die scroll funktion einbauen kann?

    Also ich habe ein div gemacht, das 90% der Fensterbreite ein nimmt und darin sind die Bilder drin. Die Bilder brechen jetzt jedoch immer um, wenn eine Zeile voll ist. Ich hab schon versucht den Umbruch mit white-space zu verhindern, aber dann wird die Website natürlich um die Breite der Bilder verbreitert, das alle aufeinmal hinterinander passen, was nicht passieren soll. Was muss ich an dem Code ändern?




    Code: HTML
    <div id="wrapvorschaubilder" >
                            <img src="jplichttechnik.de/IMG/Baby%20Party.jpg" id="Vorschaubilder">
                            <img src="jplichttechnik.de/IMG/Anfaenger%20Party.jpg" id="Vorschaubilder">
                            <img src="jplichttechnik.de/IMG/Fortgeschrittene%20Party.jpg" id="Vorschaubilder">
                            <img src="jplichttechnik.de/IMG/Profi%20Party.jpg" id="Vorschaubilder">
                            <img src="jplichttechnik.de/IMG/Profi%20Party%20+%20comprimiert.jpg" id="Vorschaubilder">
                            <img src="jplichttechnik.de/IMG/Legendaere%20Party.jpg" id="Vorschaubilder">
                        
                        </div>
    Code: CSS
    #wrapvorschaubilder{
        border: solid 1px gainsboro;
        width: 90%   
    }
    
    #Vorschaubilder{
        width: 200px;
        padding-left: 20px
    }
  • Ich habe mich falsch ausgedrückt, entschuldige bitte. Ich würde gerne die Scroll-Funktion hinkriegen, also das alle Bilder in einer Reihe sind und das ich das dann vertikal durch scrollen kann, aber trotzdem danke, jetzt habe ich zumindest den Umbruch weg

  • Was verstehst du unter 'Scroll-Funktion'? Du solltest jetzt einen HTML Scrollbar haben unter den Bildern.. hmm... ansonsten setze mal für die ID Vorschaubilder noch 'overflow: hidden;' ins CSS.

  • Funktioniert leider auch nicht. 'overflow: hidden;' wenn ich overflow: hidden' reinschreibe, verändert das die Größe der Bilder so, dass alles in das div (wrapvorschaubilder) passt. Das sieht jetzt so aus:

    html-seminar.de/woltlab/attachment/2339/

    Die Bilder währen eigentlich doppelt so groß.


    Mit Scroll-Funktion meine ich, dass ich die Bilder durchscrollen kann, wenn nicht alle Bilder in eine Reihe passen. Die Bilder sollen weiterhin in nur einer Reihe sein.


    Als Beispiel:

    html-seminar.de/woltlab/attachment/2341/ Hier passen nicht alle Bilder ins Bild, aner ich kann nach rechts scrollen, dann sehe ich die restlichen. Sähe dann so aus:


    html-seminar.de/woltlab/attachment/2340/

    (Ist mit excel gemacht)


    Mein CSS Code sieht jetzt folgendermaßen aus:

    Hast du noch eine Idee, wie ich das hinkriegen kann?

  • Der Code ist jederzeit zugänglich durch Rechtsklick - Seitenquelltext anzeigen o. ä. aber hier ist er nochmal:

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!