✔ Horizontale Scrollbar in CSS

[BMo]

Hi,
ich möchte etwas simples in Css umsetzen, doch irgendwie klappt es nicht so wie ich will. Ich möchte auf einer Seite ein div erstellen, mit horizontaler Scrollbar.
Also overflow-x:scroll; doch leider kann ich nicht nach rechts scrollen, sondern nur nach unten, auch wenn keine Scrollbar vertikal angezeigt wird.

Hier mal mein Beispielcode, der leider nicht klappt:

<div id='Hintergrundebene' >1, 2, 3 bla bla...			
	<div style="overflow: hidden; overflow-x:scroll; height:90px; width:100%;">
					<img name="a" src="" width="120" height="80" alt=""> &nbsp; <img name="a" src="" width="120" height="80" alt=""> &nbsp; <img name="a" src="" width="120" height="80" alt="">
					<img name="a" src="" width="120" height="80" alt=""> &nbsp; <img name="a" src="" width="120" height="80" alt=""> &nbsp; <img name="a" src="" width="120" height="80" alt="">
					<img name="a" src="" width="120" height="80" alt=""> &nbsp; <img name="a" src="" width="120" height="80" alt=""> &nbsp; <img name="a" src="" width="120" height="80" alt="">
                   </div> 
</div>

Kann mir jemand helfen?
Danke!

Grüße

 

[Maik]

Hi,

du benötigst zwei Boxen, bei der die innere eine höhere Breite besitzt, als die äußere Box - siehe z.B. http://www.cssplay.co.uk/menu/scroll_gallery.html

mfg Maik

 

[BMo]

Hi, ich hab es selbst gelöst

Ich hab mir einfach den Quelltext des Code-Bereichs meines oben angegebenen Codes angesehen, da ich es ganz genau so haben wollte und siehe da es liegt am Tag pre!

So funktioniert es nun:

<div id='Hintergrundebene' >
				<div style="overflow: auto; height:120px; width:100%;">
					<pre><img name="a" src="" width="120" height="80" alt=""> &nbsp; <img name="a" src="" width="120" height="80" alt=""> &nbsp; <img name="a" src="" width="120" height="80" alt=""> <img name="a" src="" width="120" height="80" alt=""> &nbsp; <img name="a" src="" width="120" height="80" alt=""> &nbsp; <img name="a" src="" width="120" height="80" alt=""> <img name="a" src="" width="120" height="80" alt=""> &nbsp; <img name="a" src="" width="120" height="80" alt=""> &nbsp; <img name="a" src="" width="120" height="80" alt=""></pre>
				</div> 
			</div>

 

[Maik]

So geht's natürlich auch

mfg Maik

 

[BMo]

Im Chrome und Safari, wird der pre-Tag leider nach einer bestimmten länge trotzdem
in eine zweite Zeile umgewandelt.
Da ich die Inhalte dynamisch erzeuge, weiß ich nicht wirklich, wie breit diese werden und es ist daher schlecht das ganze mit zwei unterschiedlich großen Ebenen zu lösen.
Ich brauch ja sicher für die untere Ebene eine feste breite in px oder?

Gibt es eine Möglichkeit, dass trotzdem hin zu bekommen?
Kann ich das Problem im Safari und Chrome irgendwie anders lösen?
Danke!


edit
wer suchet, der findet:

pre {
white-space: nowrap;
}