✔ Div mit unendlicher Breite zum scrollen

[sreinhardt]

Ja, ich weiß, der Titel ist nicht ganz verständlich. Also beschreib ich mal, was ich will:

Ich würde gern eine Bilderseite machen, bei der die Vorschaubilder in einem langen Band im oberen Bereich der Seite zu sehen sind und horizontal gescrollt werden können. Darunter sieht man zu Beginn das erste große Bild. Nun soll es so sein, dass beim Anklicken eines Vorschaubildes einfach das große Bild ausgetauscht wird.

Der Austausch der Bilder per JS ist nicht das Problem und funktioniert. Wie aber bringe ich das Band von Vorschaubildern dazu, alle nebeneinander darzustellen? Momentan habe ich jedem Bild float=left zugeordnet. Allerdings wird trotzdem am Bildschirmrand umgebrochen und ich bekomme rechts den Scrollbalken am div. Das möchte ich aber nicht.

Ich habe auch schon versucht, das div für die Bilder mit einer Breite von 5000px anzulegen. Dann sind zwar die Bilder nebeneinander, aber ich kann nur das gesamte Fenster horizontal scrollen, der Scrollbalken ist also für das ganze Fenster. Auch das wollte ich nicht.

Zwar könnte ich das ganze über zwei Frames steuern und wäre schnell fertig. Das will ich aber vermeiden. Wie kann ich es also mit div's lösen?

 

[Maik]

Lösungsvorschlag:

div.outerBox {
width: 500px;
height: 100px;
overflow: auto;
border: 1px solid #000;
}

div.innerBox {
width: 1000px; /* entspricht der Summe aller Grafikbreiten */
}

<div class="outerBox">
     <div class="innerBox">
         <!-- Hier kommen die Vorschaubilder rein -->
     </div>
</div>

 

[j cop]

Versuchs mal mit overflow:scroll bei diesem div.

mfg
jcop

 

[sreinhardt]

Danke, michaelsinterface, deine Lösung funktioniert super. Da hab ich aber gewaltig auf der Leitung gestanden...