Nur horizontaler Scrollbar für gefloatete <LI> Elemente

[Detlef G.]

Hallo Dirk

Meine Source sieht z.B. so aus:

Nehmen wir mal an, es sähe so aus:

  
 <div id="main">  
  <ul>  
   <li><img src="1.jpg" alt="Beschreibung 1">1</li>  
   <li><img src="2.jpg" alt="Beschreibung 2">2</li>  
   <li><img src="3.jpg" alt="Beschreibung 3">3</li>  
   <li><img src="4.jpg" alt="Beschreibung 4">4</li>  
   <li><img src="5.jpg" alt="Beschreibung 5">5</li>  
  </ul>  
 </div>  

Nun soll also das "main"-div die 5 images nebeneinander anzeigen und dabei, weil die zusammen breiter sind als das main-div, einen Scrollbar für main-div erzeugen.

Das CSS dazu könnte dann so aussehen:

  
#main {  
  width:500px;    /* dafür deine gewünschte Breite */  
  height:220px;   /* 20px mehr ails für Bild und Schrift nötig sind */  
  overflow:auto;  
}  
#main ul, #main li {  
  margin:0;  
  padding:0;  
  list-style:none;  
}  
#main ul {  
  width:1500px;  /* ein klein wenig mehr als die Bilder zusammen breit sind */  
}  
#main li {  
  float:left;  
}  
#main img {  
  display:block; /* damit der Text unter den Bildern angezeigt wird */  
}  

Auf Wiederlesen
Detlef