Nur horizontaler Scrollbar für gefloatete <LI> Elemente

[Dirk]

Hallo,

mein Problem:
Ich habe eine ausschliesslich über CSS gestaltete Seite und möchte eine Liste von Elementen so darstellen, dass diese ähnlich wie bei einem Filmstreifen innerhalb ihres Containers horizontal nebeneinander erscheinen und ein horizontaler Scrollbar erscheint, wenn mehr Elemente angezeigt werden sollen als nebeneinander in den Container passen.

Eine Seite die das mit Frames löst, was für mich keine Option ist, ist z.B. http://www.maxhetzler.com/index.php?pn=exhibitions&show=current&id=207

Aber diesen Effekt möchte ich erreichen.

Meine Source sieht z.B. so aus:

<div id="main">//bekommt im CSS eine bestimmte Breite
<ul>
<li>
<div class="Image"><img src="1.jpg"></div><h4>1</h4></li>
<div class="Image"><img src="2.jpg"></div><h4>2</h4></li>
<div class="Image"><img src="3.jpg"></div><h4>3</h4></li>
<div class="Image"><img src="4.jpg"></div><h4>4</h4></li>
<div class="Image"><img src="5.jpg"></div><h4>5</h4></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.
Ich finde immer nur Lösungen, die dann automatisch zu einem Umbruch führen, wenn die Breite von main-div erreicht ist, egal ob ich den einzelnen LIs float-Angaben mitgebe oder nicht.

Jeder konstruktive Hinweis wird mich in Dankbarkeit zum Jubeln bringen :-)

[Lachgas]

Hallo Dirk!

  

> <div id="main">//bekommt im CSS eine bestimmte Breite  
> <ul>  
> <li>  
> <div class="Image"><img src="1.jpg"></div><h4>1</h4></li>  
> <div class="Image"><img src="2.jpg"></div><h4>2</h4></li>  
> <div class="Image"><img src="3.jpg"></div><h4>3</h4></li>  
> <div class="Image"><img src="4.jpg"></div><h4>4</h4></li>  
> <div class="Image"><img src="5.jpg"></div><h4>5</h4></li>  
> </ul>  
> </div>  

Was ist das bitte?
       1. Die LI-Elemente verschachteln sich nicht richtig.
       2. Du benutzt ein DIV in einem LI. Das ist nicht zulässig.
       3. Warum denn nochmal ein DIV um das IMG?
       4. Hx innerhalb einer LI ist ebenfalls unzulässig.

℆, ℒacℎgas

[Thomas J.S.]

Hallo,

Was ist das bitte?
       1. Die LI-Elemente verschachteln sich nicht richtig.

korrekt.

2. Du benutzt ein DIV in einem LI. Das ist nicht zulässig.

inkorrekt

3. Warum denn nochmal ein DIV um das IMG?

weil er das so möchte?

4. Hx innerhalb einer LI ist ebenfalls unzulässig.

inkorrekt

Grüße
Thomas

[Klawischnigg]

Hallo,

Eine Seite die das mit Frames löst, was für mich keine Option ist, ist z.B.

Was ist an inline-Frames so schlimm?

Meine Source sieht z.B. so aus:

<div id="main">//bekommt im CSS eine bestimmte Breite
<ul>
<li>
<div class="Image"><img src="1.jpg"></div><h4>1</h4></li>
<div class="Image"><img src="2.jpg"></div><h4>2</h4></li>
<div class="Image"><img src="3.jpg"></div><h4>3</h4></li>
<div class="Image"><img src="4.jpg"></div><h4>4</h4></li>
<div class="Image"><img src="5.jpg"></div><h4>5</h4></li>
</ul>
</div>

Browser, die diesen div-sauce auch nur ansatzweise verstehen, kennen auch inline-frames.

Jeder konstruktive Hinweis wird mich in Dankbarkeit zum Jubeln bringen :-)

gerne geschehen...

[Thomas J.S.]

Hallo,

<div id="main">//bekommt im CSS eine bestimmte Breite
<ul>
<li>

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.
Ich finde immer nur Lösungen, die dann automatisch zu einem Umbruch führen, wenn die Breite von main-div erreicht ist, egal ob ich den einzelnen LIs float-Angaben mitgebe oder nicht.

bitte verschachtele die Liste richtig. Dann z.B.
#main ul li { width:500px; overflow:auto; }

du kannst auch mit proprietären CSS versuchen, von welchem jedoch abzuraten ist für IE und Mozilla (wenn es kommt) ab 1.8 bzw. FF Deer Park:  overflow-x:auto;

Grüße
Thomas

[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

[Dirk]

Danke schon mal und ja sorry, beim Beispielcode pasten war ich unaufmerksam.

Etwas wichtiges habe ich nicht explizit erwähnt, weswegen die vorgeschlagene Lösung leider nicht funktioniert: ich weiss nicht, wie breit mein Inhalt wird, da eine variable Zahl LI-Elemente vorkommen kann. Ich kann also auch keine explizite Breite für das UL bzw. ein umgebendes Element angeben. Noch eine Idee?

[Detlef G.]

Hallo Dirk

Etwas wichtiges habe ich nicht explizit erwähnt, weswegen die vorgeschlagene Lösung leider nicht funktioniert: ich weiss nicht, wie breit mein Inhalt wird, da eine variable Zahl LI-Elemente vorkommen kann. Ich kann also auch keine explizite Breite für das UL bzw. ein umgebendes Element angeben. Noch eine Idee?

Ja, z.B.:

  
#main ul {  
  display:table-row;  
}  
#main li {  
  display:table-cell;  
}  

hat nur einen Schönheitsfehler: Der IE ist dafür zu dumm!

Andere Frage:
Warum weißt du nicht, wie viele <li> es werden?
Oder andersherum, wer weiß es?

Die <li>s mit den Bildern müssen doch irgendwo her kommen. Wenn du sie in
den Quelltext schreibst, kannst du es jeweils ausrechnen (OK macht etwas
Arbeit). Wenn ein serverseitiges Script die Seiten aufbaut, könnte dieses
doch die Breiten summieren.

Zur Not ließe sich sicher auch eine Variante basteln, die display:table-...
für Browser benutzt und für den IE float:left und eine immer ausreichende
Breite angibt, die dann mittels Javascript angepasst wird.

Auf Wiederlesen
Detlef

[Thomas J.S.]

Hallo,

Ja, z.B.:

#main ul {
  display:table-row;
}
#main li {
  display:table-cell;
}

>   
> hat nur einen Schönheitsfehler: Der IE ist dafür zu dumm!  
  
Tja, wo ist dann der Unterschied zu <tr> und <td> wofür die meisten Browser nicht zu dumm sind?  
  
Grüße  
Thomas  

-- 
Surftip: kennen Sie schon Pipolino's Clowntheater?  
<http://www.clowntheater-pipolino.net/>  

[Detlef G.]

Hallo Thomas

Tja, wo ist dann der Unterschied zu <tr> und <td> wofür die meisten Browser nicht zu dumm sind?

In der Anzeige keiner.

Es wurde aber nach Möglichkeiten für nebeneinander darzustellende
Listenelemente gefragt.

Auf Wiederlesen
Detlef

[Thomas J.S.]

Hallo Dertelf,

Tja, wo ist dann der Unterschied zu <tr> und <td> wofür die meisten Browser nicht zu dumm sind?

In der Anzeige keiner.

"hat nur einen Schönheitsfehler: Der IE ist dafür zu dumm!" ;-)

Es wurde aber nach Möglichkeiten für nebeneinander darzustellende
Listenelemente gefragt.

Ich dand es nur witzig, dss man eben in diesem Fall doch wieder auf "Tabellen" zurückgreift ;-)

Grüße
Thomas

[Detlef G.]

Hallo Thomas

Ich dand es nur witzig, dss man eben in diesem Fall doch wieder auf "Tabellen" zurückgreift ;-)

Wenn etwas unbedingt nebeneinander angezeigt werden soll, und in einer Reihe
bleiben soll, eignet sich dazu eine Tabelle oder display:table-... am besten.
Wenn die Daten, die in genau diesem Layout so dargestellt werden sollen, von
der logischen Struktur keine Tabelle sind oder sein sollen, ist eine Tabelle
dafür eher ungeeignet, nicht nur aus Gründen der "reinen Lehre", sondern
auch aus praktischen Erwägungen.
In dem Beispiel mit einer Reihe Bildern, die im aktuellen Layout gescrollt
werden sollen, fände ich es angenehmer, wenn diese in Browsern ohne CSS
untereinander angezeigt würden, als nebeneinander die Seitenreite
aufzublasen.
Auch bekomme ich den IE dazu überredet, die Listenelemente scrollbar
nebeneinander anzuordnen. Wenn das Design aber geändert werden sollte,
schaffe ich es kaum, den IE von der Nebeneinanderdarstellung abzubringen,
ohne das (X)HTML zu ändern.

Auf Wiederlesen
Detlef

[Dirk]

Warum wieso warum:

1. mit dem erzeugten Output werden in einem  CMS-System verschiedene Websites gepflegt, deren Layout sich ausscchliesslich über CSS-Anweisungen ausfaltet.

2. Ich weiss nicht, wie viele LI ich habe, weil der Inhalt dynamisch  erstellt wird, also müsste ich auch z.B. die Breite eines umgebenden DIVs dynamisch aus der Anzahl LI und deren Breite bestimmen. So ginge das dann zwar IMO in allen Browsern, aber dafür wäre eine Anpassung am gesamten System für alle Sites nötig, obwohl nur eine einzige Site dieses extra DIV benötigte. Fallschaltungen sind aus unserer Sicht in einem generischen System immer ziemlich lästig und auf lange Sicht häufige Quelle für mühsame Fehler.

Sieht aus, als gäbe es keine Möglichkeit, mit reinen CSS-Anweisungen <LI>s horizontal scrollbar darzustellen, wenn man nicht die Gesamtbreite für den Container kennt und als Wert angibt?

[Dirk]

jaja, CM-System oder CMS
(just in case some KlugscheisserESS is out there...  ;-) )

[Detlef G.]

Hallo Dirk

Sieht aus, als gäbe es keine Möglichkeit, mit reinen CSS-Anweisungen <LI>s horizontal scrollbar darzustellen, wenn man nicht die Gesamtbreite für den Container kennt und als Wert angibt?

Meines Wissens nicht.
Eine Möglichkeit wäre, eine Tabelle dafür zu verwenden, was ich auch nicht
wirklich schön finde.

Aber auch dabei treten Probleme auf, wenn die Höhe der <li>s unbekannt ist
und für .main nicht angegeben angegeben werden.

Der IE verwendet dann nur die Höhe, die er ohne Scrollbalken benötigen
würde, schneidet also ein Stück unten ab, und zeigt auch eine vertikale
Scrolleiste.
Das ließe sich dann mittels * html .main ul {margin-bottom:17px;} und
* html .main {overflow-y: hidden;} vermeiden.
Der Firefox  stellt .main (ohne Höhenangabe) zu viel zu niedrig dar, wenn
die Seite nicht bereits vor dem Aufruf im Cache war.
Dies lässt sich auch nur teilweise vermeiden, indem die Höhen der Bilder
angegeben sind.

Es wird wohl keine wirklich funktionierende Möglichkeit geben, ohne die
notwenbdigen Maße zu ermitteln und anzugeben.

Auf Wiederlesen
Detlef