Mit overflow:auto waagerecht scrollen lassen

[Taker]

Hi Leute,

ich hab folgendes Problem:

Ich hab mehrere Li's die waagerecht zueinander stehen:

  
<ul>  
<li style="float:left;">test 1</li>  
<li style="float:left;">test 2</li>  
<li style="float:left;">test 3</li>  
<li style="float:left;">test 1</li>  
<li style="float:left;">test 2</li>  
<li style="float:left;">test 3</li>  
<li style="float:left;">test 1</li>  
<li style="float:left;">test 2</li>  
<li style="float:left;">test 3</li>  
<ul>  

Nun hat die UL aber eine bestimmte Breite, die kürzer ist als die ganzen LI's zusammen. Deshalb will ich sie verkürzen mit overflow:auto;. Dabei sollen sie aber die Liste nicht senkrecht gescrollt werden sondern waagerecht, egal wie lange sie ist.

Kann mit jemand weiter helfen?

Mfg Taker

[LiAn]

Hallo Taker

Kann mit jemand weiter helfen?

So kann's gehen:

um die <ul> ein <div> legen. Die Breite des <div> festlegen auf den sichtbaren Bereich. und den overflow des <div> auf auto stellen.

dann der <ul> die exakte Breite geben.

Beispiel:

CSS:

#container {  
 width:500px;  
 overflow:auto;  
}  
  
ul {  
 height:100px;  
 width:1300px;  
 list-style:none;  
}  
  
ul li {  
 float:left;  
 width:100px;  
 height:50px;  
 padding:5px;  
 margin:5px;  
 background:#333;  
}

HTML
 ~~~html <div id="container">
  <ul>
      <li>test1</li>
         <li>test2</li>
         <li>test3</li>
         <li>test4</li>
         <li>test5</li>
         <li>test6</li>
         <li>test7</li>
         <li>test8</li>
         <li>test9</li>
     </ul>
    </div>

  
Gruss,  
LiAn  
  

[Taker]

Danke für deine schnelle Antwort,

aber ich weiß nicht die Anzahl der LI's, da sie dynamisch erzeugt werden.
Deshalb kann ich eine exakte Breite angeben.

[Beat]

aber ich weiß nicht die Anzahl der LI's, da sie dynamisch erzeugt werden.

Dann schau, dass dir die dynamische Erzeugung diese Kenntnis vermittelt.

Deshalb kann ich eine exakte Breite angeben.

Nicht "deshalb" sondern "dann"...

mfg Beat

[LiAn]

Dann schau, dass dir die dynamische Erzeugung diese Kenntnis vermittelt.

Da hast du recht. Ohne diese Breite zu wissen, kann ich mir nicht vorstellen, dass das gehen soll.

Gruss,
LiAn

[Taker]

Alles klar, ich danke euch.

Ich lass jetzt einfach Javascript die Anzahl der LI's ermitteln und somit die Breite zurückgeben lassen.

[Beat]

das musst du so lösen:
<div id=horizontal_scroll_fenster>
 <ul>
  <li>...</li>
  <li>...</li>
 </ul>
</div>

Jetzt gibst du ul eine Breite der Summe der <li>'s
und dem <div> die Eigenschaft overflow und width, also z.B width:100% (relativ zum body oder was auch immer.)

mfg Beat

[Detlef G.]

Hallo Taker

<ul>
<li style="float:left;">test 1</li>
…
<li style="float:left;">test 3</li>
<ul>

  
Das zweite <ul> ist doch hoffentlich nur ein Vertipper.  
  

> Nun hat die UL aber eine bestimmte Breite, die kürzer ist als die ganzen LI's zusammen. Deshalb will ich sie verkürzen mit overflow:auto;. Dabei sollen sie aber die Liste nicht senkrecht gescrollt werden sondern waagerecht, egal wie lange sie ist.  
  
Bei der Beispielliste könnte das `float:left`{:.language-css} weggelassen werden, stattdessen ins Stylesheet:  
~~~css
ul {  
  overflow:auto;  
  white-space:nowrap;  
}  
li {  
  display:inline;  
}

(Der IE zumindest der 6er braucht dann noch eine passende Höhe für ul)

Wenn die Listenpunkte Blöcke bilden sollen oder Blockelemente enthalten sollen, dann fällt mir leider keine Lösung ein, die im IE funktioniert.

Auf Wiederlesen
Detlef