Umbruch vermeiden bei Liste mit float:right und Überbreite

[Yoeto]

<yoeto>

Hallo,
in einem Dokument verwende ich eine Liste von Bildern, die nebeneinander angezeigt werden. Ich habe sie in einer Liste stehen, wobei die einzelnen Listeneinträge per float:right nebeneinander statt untereinander gestellt sind.

Diese Liste soll nun Überbreite haben, das heißt, nach rechts aus dem Bild hinauslaufen und quer gescrollt werden. (Nicht schimpfen, es ist ein Künstlerportfolio, und da ist sowas erlaubt.)

Der Code sieht jetzt sinngemäß so aus:

  
<div id="liste">  
<ul>  
<li><img ...></li>  
...  
<li><img ...></li>  
</ul></div>  

  
#liste {position:fixed; background-color:#666666; overflow:scroll;}  
  
#liste ul {width:3600px; white-space:nowrap;}  
  
#liste ul li {float:left; width:200px;}  

Nun funktioniert das so zwar, aber die feste Breite für die <ul> ist ein ziemliches Gepfusche. Gibt es andere Wege, wie ich die Liste breit genug machen kann, dass alle Bilder nebeneinander angezeigt werden?

Eine gangbare Alternative wäre, die Struktur Liste aufzugeben. Was aber semantisch nicht so sauber wäre.

Und wenn mir noch jemand verrät, wie ich nur einen Scrollbalken am unteren Rand, nicht aber einen blinden am rechten Rand hinbekomme, dann bin ich sehr viel weiter!

Danke im Voraus,
</yoeto>

[Axel Richter]

Hallo,

in einem Dokument verwende ich eine Liste von Bildern, die nebeneinander angezeigt werden. Ich habe sie in einer Liste stehen, wobei die einzelnen Listeneinträge per float:right nebeneinander statt untereinander gestellt sind.

Diese Liste soll nun Überbreite haben, das heißt, nach rechts aus dem Bild hinauslaufen und quer gescrollt werden. (Nicht schimpfen, es ist ein Künstlerportfolio, und da ist sowas erlaubt.)

Der Code sieht jetzt sinngemäß so aus:

<div id="liste">
<ul>
<li><img ...></li>
...
<li><img ...></li>
</ul></div>

>   
> ~~~css
  

> #liste {position:fixed; background-color:#666666; overflow:scroll;}  
>   
> #liste ul {width:3600px; white-space:nowrap;}  
>   
> #liste ul li {float:left; width:200px;}  
> 

Nun funktioniert das so zwar, aber die feste Breite für die <ul> ist ein ziemliches Gepfusche. Gibt es andere Wege, wie ich die Liste breit genug machen kann, dass alle Bilder nebeneinander angezeigt werden?

Ein display:inline statt dem float:left für die LI-Elemente. Dann können diese natürliche keine Breite mehr bekommen. Da könnte man aber mit margin für die IMG-Elemente für etwas Abstand zwischen diesen sorgen.

Und wenn mir noch jemand verrät, wie ich nur einen Scrollbalken am unteren Rand, nicht aber einen blinden am rechten Rand hinbekomme, dann bin ich sehr viel weiter!

Mit overflow:auto statt overflow:scroll.

  
#liste { position:fixed; left:0; background-color:#666666; overflow:auto; }  
#liste ul { white-space:nowrap; }  
#liste ul li { display:inline; }  
#liste ul li img { margin:0 20px; }  

Ps.: Um den IE kümmerst Du Dich noch?

viele Grüße

Axel

[Yoeto]

<yoeto>

viele Grüße

Axel

Vielen Dank, Sie haben eine einfache Tür sehr glücklich gemacht!

</yoeto>