Kein Zeilenumbruch im Scrollbaren Div

[luc]

Hallo,

ich habe folgenden Div mit 3 Bildern drinnen:

  
<div id="roll1">  
  <div><a href="#"><img src="img/special2.gif" width="306" height="136" alt="" /></a></div>  
  <div><a href="#"><img src="img/special3.gif" width="306" height="136" alt="" /></a></div>  
  <div><a href="#"><img src="img/special4.gif" width="306" height="136" alt="" /></a></div>  
</div>  

CSS:

  
#roll1 { width:306px; height:136px; overflow:scroll; }  
#roll1 div { float:left; }  

Diese Bilder sollen nun nebeneinander angezeigt werden, sodass der User nach rechts und links innerhalb des Divs scrollen kann. Allerdings werden die Bilder alle untereinander angezeigt, sodass man nach oben und unten scrollen muss.

Hat jemand einen Lösungsvorschlag?

Danke,
luc

[ChrisB]

Hi,

ich habe folgenden Div mit 3 Bildern drinnen:

<div id="roll1">
  <div><a href="#"><img src="img/special2.gif" width="306" height="136" alt="" /></a></div>
  <div><a href="#"><img src="img/special3.gif" width="306" height="136" alt="" /></a></div>
  <div><a href="#"><img src="img/special4.gif" width="306" height="136" alt="" /></a></div>
</div>

  
Und warum packst du die Bilder noch mal in extra-DIVs?  
  

> Diese Bilder sollen nun nebeneinander angezeigt werden, sodass der User nach rechts und links innerhalb des Divs scrollen kann. Allerdings werden die Bilder alle untereinander angezeigt, sodass man nach oben und unten scrollen muss.  
>   
> Hat jemand einen Lösungsvorschlag?  
  
<http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#white_space>  
  
MfG ChrisB  
  

-- 
“Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]

[luc]

Und warum packst du die Bilder noch mal in extra-DIVs?

Hatte zuerst das float:left Attribut auf die Bilder (also img) angewendet. Als es dann nicht ging, habe ich mir überlegt, dass vielleicht nur Divs auf float:left ansprechbar sind. Ja, und dann hab ich eben die Divs um die Bilder gemacht ...

Hat aber auch nichts gebracht, deswegen kann man sie theoretisch wieder weg machen.

http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#white_space

Ok danke, so funktioniert es jetzt.
Wen der Code interessiert:

  
<div id="roll1">  
  <a href="#"><img src="img/special2.gif" width="306" height="136" alt="" /></a>  
  <a href="#"><img src="img/special2.gif" width="306" height="136" alt="" /></a>  
  <a href="#"><img src="img/special2.gif" width="306" height="136" alt="" /></a>  
</div>  

CSS:

  
#roll1 { width:306px; height:136px; overflow:scroll; white-space:nowrap; }  

[ChrisB]

Hi,

Und warum packst du die Bilder noch mal in extra-DIVs?

Hatte zuerst das float:left Attribut auf die Bilder (also img) angewendet. Als es dann nicht ging, habe ich mir überlegt, dass vielleicht nur Divs auf float:left ansprechbar sind. Ja, und dann hab ich eben die Divs um die Bilder gemacht ...

Das ist Unfug.
Auch Bilder lassen sich problemlos floaten.
Und ohne die DIVs würdest du gar kein Floating brauchen.

MfG ChrisB