Tabellenbreite größer als Bildschirm

[td22]

Liebe Forum-Leser,

wie kann man Tabellen erzwingen, die größer sind als der Bildschirm?

Folgende Situation:

• Eine Tabelle mit einer Zeile
• Jede Zelle enthält genau 1 Bild

Heraus kommen soll eine horizontale Bilderleiste, die horizontal scrollbar ist. Die meisten Broser zeigen die Zellen jedoch untereinander an. Und zwar selbst dann, wenn man manuell an der Tabellenbreite herumspielt. Habe jetzt folgendes gemacht:

 table.bilderleiste {  
  height: 98%;  
  width: 20000px;  
  table-layout: fixed;  
 }

Firefox und IE brechen die Spalten trotzdem um. Was kann ich denn noch tun?

Viele Grüße
Andreas

[ChrisB]

Hi,

Was kann ich denn noch tun?

Eine Bilderl(e)iste nicht als Tabelle, sondern als Liste auszeichnen.

List-Items floaten, ganzer Liste eine Breite geben, die der Summe der Breiten der LI entspricht - fertig.

MfG ChrisB

[td22]

Hallo Chris,

danke für die schnelle Antwort. Ich bin mir nicht sicher, ob ich dich richtig verstehe.

Eine Bilderl(e)iste nicht als Tabelle, sondern als Liste auszeichnen.

List-Items floaten, ganzer Liste eine Breite geben, die der Summe der Breiten der LI entspricht - fertig.

  
<ul style="width:20000px">  
  <li style="text-align:float"><img src="Bild1"</li>  
  <li style="text-align:float"><img src="Bild2"</li>  
</ul>  

Du meinst irgendwie so, oder? Ist zwar mal ein kreativer Ansatz, bloß funktionieren tut's leider nicht... ;)

Der Grund dafür, dass ich das als Tabelle gemacht habe, ist, dass die Bilder mittig ausgerichtet sein sollen (vertical-align: middle;) Ne Alternative wärs sicherlich, jedes Bild in einen div mit position:absolute zu packen, aber das würde ich mir eigentlich gern ersparen.

[suit]

<ul style="width:20000px">
  <li style="text-align:float"><img src="Bild1"</li>
  <li style="text-align:float"><img src="Bild2"</li>
</ul>

>   
> Ist zwar mal ein kreativer Ansatz, bloß funktionieren tut's leider nicht... ;)  

besser im <http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float@title=handbuch nachschlagen> als "irendwas" probieren  
  

> Ne Alternative wärs sicherlich, jedes Bild in einen div mit position:absolute zu packen, aber das würde ich mir eigentlich gern ersparen.  

wieso, du hast doch die li-elemente in der liste?

[td22]

Ne Alternative wärs sicherlich, jedes Bild in einen div mit position:absolute zu packen, aber das würde ich mir eigentlich gern ersparen.
wieso, du hast doch die li-elemente in der liste?

Naja, wenn ich mit position:absolute arbeite und mir händisch für jedes Bild die genauen Koordinaten ausrechnen muss, dann ist es für mich eigentlich naheliegend, das Ganze über divs zu machen. Welche Vorteile sollte denn da eine Liste haben? Bei divs hat man schätzungsweise auch eine höhere Browser-Kompatilität, oder?

[suit]

Welche Vorteile sollte denn da eine Liste haben? Bei divs hat man schätzungsweise auch eine höhere Browser-Kompatilität, oder?

ob du eine liste, ein p-element oder ein div-element verwendest ist prinzipiell egal - es ist auch nicht "inkompatibler" als ein anderes element

eine liste hat halt den vorteil, dass sie eine liste ist - dh auch diese logische (bzw semantische) aussage besitzt

in diesem fall ist das zwar nicht so sonnenklar, aber vielleicht in folgendem beispiel

<div>blah</div>
was ist das? ein element mit dem inhalt "blah" ohne weitere bedeutung

<h1>blah</h1>
was ist es jetzt? richtig: eine überschrift erster ordnung

<p>blah</p>
und jetzt ein absatz

<dfn>blah</dfn>
und jetzt eine defintion

bei der liste selbst ist die aussage "ich ein element eine liste und gehöre zu den anderen elementen dazu" - zwar gruppiert ein weiteres div-element alle darinliegenden anderen divs ebenfalls, aber wenn du in einem css nur elemente des typs "div" hast, kennst du dich nicht mehr aus

da kommen dann selektoren wie div div img { } raus - da finde ich ul li img { } wesentlich praktischer

zudem kannst du bei einer liste die logische abfolge bestimmen - ein ol-element sagt "meine li-elemente sind in der genannte reihenfolge zu sehen"

<ol id="tagesablauf">  
  <li>morgens  
    <ol>  
      <li>aufstehen</li>  
      <li>zaehne putzen</li>  
    </ol>  
  </li>  
  <li>mittags  
    <ol>  
      <li>essen</li>  
      <li>einkaufen</li>  
    </ol>  
  </li>  
  <li>abends  
    <ol>  
      <li>aufräumen</li>  
      <li>schlafengehen</li>  
    </ol>  
  </li>  
</ol>

diese liste stellt die logische abfolge in exakt dieser sequenz dar - eine andere reihenfolge würde das logische gefüge dieser liste zerstören

bei einer unsortierten liste hingegen macht es nichts, wenn man die reihnung tauscht

<ul id="einkaufsliste">  
  <li>1x brot</li>  
  <li>7x milch</li>  
  <li>4x butter</li>  
</ul>

natürlich kann man das auch kombinieren, in dem fall ist die reihung ob ich zuerst zum friseur oder bäcker gehe egal - beim friseur selbst ist die reihung wirchtig, beim bäcker nicht

<ul id="todo">  
  <li>friseur  
    <ol>  
      <li>waschen</li>  
      <li>schneiden</li>  
      <li>haare trocknen</li>  
    </ol>  
  </li>  
  <li>baecker  
    <ul>  
      <li>brot kaufen</li>  
      <li>semmeln kaufen</li>  
      <li>kipferl kaufen</li>  
    </ul>  
  </li>  
</ul>

[td22]

Welche Vorteile sollte denn da eine Liste haben? Bei divs hat man schätzungsweise auch eine höhere Browser-Kompatilität, oder?

ob du eine liste, ein p-element oder ein div-element verwendest ist prinzipiell egal - es ist auch nicht "inkompatibler" als ein anderes element

eine liste hat halt den vorteil, dass sie eine liste ist - dh auch diese logische (bzw semantische) aussage besitzt

Klingt alles sehr logisch. Wie gesagt finde ich die Idee, eine horizontale Bilderleiste als Liste zu sehen, sehr kreativ, und das meine ich absolut nicht negativ, sondern eher im Sinne von interessant. Ich wäre selbst nie auf die Idee gekommen.

Bei älteren Browsern habe ich tatsächlich schon die Erfahrung gemacht, dass sie <p style="position: absolute; ..."> nicht richtig interpretieren, <div> und <span> dagegen schon. Das liegt jetzt aber auch schon etliche Jahre zurück, als die absolute Postionieriung von Elementen ganz neu eingeführt wurde.

Warum ich außerdem eher skeptisch hinsichtlich der Listen bin, liegt daran, dass die normale Anzeige von Listen eben mit Punkten oder Nummerierung, und eingerückt, je nach Browser mit ganz unterschiedlichen Margin- und Padding-Voreinstellungen. Sobald ein Browser die css-Datei also nicht einliest, weil er Beispielsweise auf Benutzermodus eingestellt ist, wird die Darstellung für meine Begriffe sehr unästhetisch.

Um wieder zurück auf die ursprüngliche Fragestellung zu kommen: Ist es möglich, bei möglichst jedem Browser eine Tabelle zu erzwingen, die breiter ist als der Bildschirm? Wie?

Andreas

[suit]

Sobald ein Browser die css-Datei also nicht einliest, weil er Beispielsweise auf Benutzermodus eingestellt ist, wird die Darstellung für meine Begriffe sehr unästhetisch.

html hat nichts mit dem design zu tun, nur weil das browser default-stylesheet nicht deinen wünschen entspricht, verwendest du keinen semantisch vernünftigen code?

dh du entsagst dem h1-element und zeichnest deine überschriften lieber mit <b>überschrift</b><br><br> aus, weil das auch ohne stylesheet eher so aussieht, wie du es dir vorstellst? ;)

Um wieder zurück auf die ursprüngliche Fragestellung zu kommen: Ist es möglich, bei möglichst jedem Browser eine Tabelle zu erzwingen, die breiter ist als der Bildschirm? Wie?

wenn ich mich nicht täusche: indem du feste breiten vergibst sowie unter nutzung von table-layout: fixed;

[td22]

html hat nichts mit dem design zu tun, nur weil das browser default-stylesheet nicht deinen wünschen entspricht, verwendest du keinen semantisch vernünftigen code?

"Semantisch vernünftig" ist halt Definitionssache. Eine Liste werde ich immer als Liste auszeichnen, eine Überschrift immer als Überschrift. Aber wenn ich Fotos irgendwie künstlerisch auf einer Seite anordnen möchte, dann ist das für mich semantisch weder eine Liste, noch eine Tabelle - Liste und Tabelle sind dann aus meinen Augen nur Mittel zur richtigen Positionierung. Konventionell verwendet man dazu eben häufig Tabellen, siehe: <http://de.selfhtml.org/html/tabellen/layouts.htm@title=Tabellen als Mittel für Web-Seiten-Layouts>.

Um wieder zurück auf die ursprüngliche Fragestellung zu kommen: Ist es möglich, bei möglichst jedem Browser eine Tabelle zu erzwingen, die breiter ist als der Bildschirm? Wie?

wenn ich mich nicht täusche: indem du feste breiten vergibst sowie unter nutzung von table-layout: fixed;

Hmm, hab inzwischen festgestellt, dass ich wohl irgendwo einen Fehler in meiner Syntax haben muss. Habe jetzt eine ganz simple Tabelle gebaut, und damit funktioniert es (sogar ohne table-layout: fixed;)

Andreas

[td22]

Hmm, hab inzwischen festgestellt, dass ich wohl irgendwo einen Fehler in meiner Syntax haben muss. Habe jetzt eine ganz simple Tabelle gebaut, und damit funktioniert es (sogar ohne table-layout: fixed;)

So, inzwischen ist das Problem gelöst. Es war kein HTML-Problem, sondern ein JavaScript-Problem. Und zwar hatte ich die Tabelle nach folgendem Prinzip als JavaScript ausgegeben:

  
function start() {  
  document.getElementById("body").innerHTML += "<table><tr>";  
  document.getElementById("body").innerHTML += "<td>Bild01</td>";  
  for (m = 2; m <=  anzahl_bilder; m++) {  
    document.getElementById("body").innerHTML += "<td>Bild" + m + "</td>";  
  }  
  document.getElementById("body").innerHTML += "</tr></table>";  
}  

Opera stellt dabei tatsächlich eine Tabelle dar, in der Bild01 und Bild02 (...) als Zellen enthalten sind. Internet Explorer und Firefox geben erst mal eine Tabelle aus, in der zwar Bild01 enthalten ist, alle anderen Bilder aus der for-Schleife werden dann allerdings außerhalb der Tabelle plaziert.

Dieses Problem konnte ich ganz einfach lösen, indem ich die HTML-Elemente erst in einer Variable zusammengefügt habe und anschließend in einem Schwung ausgeben lasse:

  
function start() {  
  var html = "<table><tr>";  
  html += "<td>Bild01</td>";  
  for (m = 2; m <=  anzahl_bilder; m++) {  
    html += "<td>Bild" + m + "</td>";  
  }  
  html += "</tr></table>";  
  document.getElementById("body").innerHTML += html;  
}  

[ChrisB]

Hi,

Ist zwar mal ein kreativer Ansatz, bloß funktionieren tut's leider nicht... ;)

"Funktioniert nicht" funktioniert nicht.

<li style="text-align:float"><img src="Bild1"</li>

*Das* ist zwar mal ein kreativer Ansatz - aber bei HTML und CSS ist keine Kreativitaet im Erfinden neuer Eigenschaften oder -swerte gefordert, sondern Nutzung der definierten.
text-align:float gibt es nicht.

Der Grund dafür, dass ich das als Tabelle gemacht habe, ist, dass die Bilder mittig ausgerichtet sein sollen (vertical-align: middle;)

Mittig in Bezug auf was?
Wenn du lediglich oben und unten Abstand haben willst, kannst du ein Padding vergeben.
Wenn alle Inhalte garantiert einzeilig sind, kannst auch mit line-height arbeiten.

MfG ChrisB

[td22]

<li style="text-align:float"><img src="Bild1"</li>

*Das* ist zwar mal ein kreativer Ansatz - aber bei HTML und CSS ist keine Kreativitaet im Erfinden neuer Eigenschaften oder -swerte gefordert, sondern Nutzung der definierten.
text-align:float gibt es nicht.

Oh sorry, mein Fehler. Hatte jetzt float mit justify verwechselt und mich schon gewundert...

Der Grund dafür, dass ich das als Tabelle gemacht habe, ist, dass die Bilder mittig ausgerichtet sein sollen (vertical-align: middle;)

Mittig in Bezug auf was?

Mittig in Bezug zueinander. Das heißt, man denke sich eine horizontale Linie, die sämtliche Grafiken in der Mitte schneiden.

Viele Grüße
Andreas

[td22]

List-Items floaten, ganzer Liste eine Breite geben, die der Summe der Breiten der LI entspricht - fertig.

Hmm, also was float ist, ist mir jetzt klar. Aber ich weiß immer noch nicht so recht, wie du es meinst. Hab jetzt mal folgendes ausprobiert, geht das in die richtige Richtung?

<ul style="width:20000px">  
  <li style="float:left"><img src="fotos/bild01.jpg"</li>  
  <li style="float:left"><img src="fotos/bild02.jpg"</li>  
</ul>

[suit]

<ul style="width:20000px">

<li style="float:left"><img src="fotos/bild01.jpg"</li>
  <li style="float:left"><img src="fotos/bild02.jpg"</li>
</ul>

das geht schon eher in die richtige richtung, dein html ist allerdings noch ungültig und wenn die bilder nicht grade jeweils über 10000 pixel breit sind, wirst du auch nicht viel merken ;)

[Kalle_B]

<ul style="width:20000px">

<li style="float:left"><img src="fotos/bild01.jpg"</li>
  <li style="float:left"><img src="fotos/bild02.jpg"</li>
</ul>

  
Bei <table> werden 20000px ignoriert, bei einer Liste aber akzeptiert? Das wäre ein Fehler des Browsers und kann wohl nicht Standard sein.  
  
Kalle

[Kalle_B]

Folgende Situation:

• Eine Tabelle mit einer Zeile
• Jede Zelle enthält genau 1 Bild

Firefox und IE brechen die Spalten trotzdem um.

So mitten in dem einzigen Bild? Zeig mal.

Was kann ich denn noch tun?

Den Fehler verständlich beschreiben.

Kalle