Einfachen <TABLE> mit <DIV> darstellen

[Aqua]

Hallo!

Für mich persönlich ist es ein recht großes Problem,
einen speziellen <TABLE> nur mit <DIV> darzustellen,
obwohl es eigentlich recht einfach aussieht.

Und zwar mal der Source:

<table cellpadding="0" cellspacing="0" style="width:500px;">
    <tr>
      <td style="background-color:#ff0000;"> </td>
      <td style="background-color:#cc33ff;">bla<br>bla<br>bla<br>bla<br>bla</td>
      <td style="background-color:#33ccff;"> </td>
    </tr>
</table>

Also, die Farben von Links nach rechts sind also ROT, VIOLETT und BLAU
Das geht noch einfach mit DIV's zu machen.

Das Problem dabei:
Das ganze soll dynamisch sein,

Im moment ist es so,
dass nur in der mittleren (violetten) Spalte Inhalt drinnen ist.

_Automatisch_  vergrößert sich dadurch aber auch die Höhe der
linken (roten) und der rechten (blauen) Spalte.

Würde nun einer der aeusseren beiden Spalten mehr Inhalt haben
als die mittlere, so würde die mittlere automatisch mitwachsen.

Eine feste Angabe für "height" kommt also nicht in Frage.

Die Frage

Wie kann ich genau die selbe Darstellung mit selbigem
"Dehnungseffekt" (siehe oben) erreichen, wenn ich das ganze
ausschließlich mit <DIV> machen will?

(Bitte um einen Beispiel-Code wie ich es oben mit der Tabelle tat...)

Danke und Liebe Grüße,
Aquariophile

[Michael Jendryschik]

Hallo Aqua,

<table cellpadding="0" cellspacing="0" style="width:500px;">
    <tr>
      <td style="background-color:#ff0000;"> </td>
      <td style="background-color:#cc33ff;">bla<br>bla<br>bla<br>bla<br>bla</td>
      <td style="background-color:#33ccff;"> </td>
    </tr>
</table>

[...]

Im moment ist es so,
dass nur in der mittleren (violetten) Spalte Inhalt drinnen ist.

Du hast also drei voneinander unabhängige Bereiche und möchtest nun, dass alle Bereiche unabhängig von deren individuellem Inhalt unten bündig abschließen? Darüber hinaus möchtest du dich nicht auf eine bestimmte Höhe festlegen, sondern diese dynamisch vom Browser berechnen lassen?
Nun, das lässt sich nur dann erreichen, wenn zwischen den drei Bereichen eine Abhängigkeit besteht, die Höhe des einen Bereiches sich also an der Höhe des anderen Bereiches ausrichtet. Eine gewünschte Anordnung in Spalten legt eine tabellarische Abhängigkeit nahe, diese ist semantisch allerdings nicht vorhanden. Du siehst, deine gestalterischen Absichten widersprechen den semantischen Gegebenheiten. Verzichte also entweder auf die Anforderungen oder auf die richtige Semantik, sprich: leb damit, dass die Bereiche nicht bündig abschließen oder aber verwende eine Tabelle.

Gruß,

MI

[molily]

Hallo Michael,

Du hast also drei voneinander unabhängige Bereiche und möchtest nun, dass alle Bereiche unabhängig von deren individuellem Inhalt unten bündig abschließen? Darüber hinaus möchtest du dich nicht auf eine bestimmte Höhe festlegen, sondern diese dynamisch vom Browser berechnen lassen?
Nun, das lässt sich nur dann erreichen, wenn zwischen den drei Bereichen eine Abhängigkeit besteht, die Höhe des einen Bereiches sich also an der Höhe des anderen Bereiches ausrichtet.

Der Elementinhalt kann durchaus dort zu Ende sein, wo er im freien Fluss zu Ende ist, erreichbar ist hingegen eine durchgehende Hintergrundgestaltung, sodass der gewünschte Spalteneffekt entsteht.

Eine gewünschte Anordnung in Spalten legt eine tabellarische Abhängigkeit nahe, diese ist semantisch allerdings nicht vorhanden.

Zwei rechteckige gleich hohe (optische) Kästen (nicht CSS-Boxen) nebeneinander positionieren zu wollen, hat mit tabellarischer Abhängigkeit exakt nichts zu tun. Man kann dies auch tun, ohne dass eine solche vorliegt. Lediglich die Umsetzung mittels Tabellen, nicht die Idee/Anforderung, legt eine entsprechende Relation nahe.

Du siehst, deine gestalterischen Absichten widersprechen den semantischen Gegebenheiten.

Wieso ist es semantisch unstimmig, zwei Blöcke nebeneinander zu positionieren, selbst wenn keine spezielle Inhaltsbeziehung wie in einer Datentabelle vorliegt, ganz unabhängig von der letztlich verwendeten Technik?

Mathias

[Michael Jendryschik]

Hallo,

Der Elementinhalt kann durchaus dort zu Ende sein, wo er im freien Fluss zu Ende ist, erreichbar ist hingegen eine durchgehende Hintergrundgestaltung, sodass der gewünschte Spalteneffekt entsteht.

Deine unter http://home.t-online.de/home/dj5nu/fanhost/css-spaltenlayout.html aufgeführten Workarounds greifen hier nicht, da nicht klar ist, welche Spalte von den dreien den meisten Inhalt haben wird.

Du siehst, deine gestalterischen Absichten widersprechen den semantischen Gegebenheiten.

Wieso ist es semantisch unstimmig, zwei Blöcke nebeneinander zu positionieren, selbst wenn keine spezielle Inhaltsbeziehung wie in einer Datentabelle vorliegt, ganz unabhängig von der letztlich verwendeten Technik?

Du hast mich falsch verstanden: Der Semantik widersprechen würde hier eine naheliegende Lösung mit einer Layouttabelle, allerdings ist dies IMO die einzig wirklich funktionierende Methode, wenn denn wirklich ein bündiger Abschluss der drei Elemente gewünscht wird.

Gruß,

MI

[fastix®]

Moin!

(Bitte um einen Beispiel-Code wie ich es oben mit der Tabelle tat...)

Ganz einfach: pack die drei div's in einen vierten.

<div>
   <div style="height:100%;width:33%;display:inline;">Inhalt</div>
   <div style="height:100%;width:33%;display:inline;">Zeile1<br>Zeile2</div>
   <div style="height:100%;width:33%;display:inline;">Inhalt</div>
</div>

Wird jetzt einer von diesen größer, vergrößert das Elternelement und zieht somit die anderen nach.

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix®

[Michael Jendryschik]

Hallo,

Ganz einfach: pack die drei div's in einen vierten.

<div>
   <div style="height:100%;width:33%;display:inline;">Inhalt</div>
   <div style="height:100%;width:33%;display:inline;">Zeile1<br>Zeile2</div>
   <div style="height:100%;width:33%;display:inline;">Inhalt</div>
</div>

Hast du das mal ausprobiert? Du missachtest, dass die Eigenschaften 'width' und 'height' den Content-Bereich eines Elementes dimensionieren, und über einen solchen verfügen nur Block-Elemente und solche Elemente, deren Dimensionen in CSS bereits bekannt sind (so genannte "replaced elements"), also keine Elemente, die ausdrücklich mit einer Inline-Box dargestellt werden sollen, so wie du es hier angibst.

Gruß,

MI

[Jan L.]

Hallo,

width:33%;display:inline;

Seit wann kann man Elemente als 'inline' anzeigen lassen und ihnen trotzdem eine Breitenagabe geben?

Ich kann mir nicht vorstellen, daß das 'width:33%;' z.B. auf Gecko-Browsern irgendwas bewirkt.

Gruß, Jan

[fastix®]

Moin!

Seit wann kann man Elemente als 'inline' anzeigen lassen und ihnen trotzdem eine Breitenagabe geben?

Hm. Das ausgerechnet geht.

<div style="padding:0px;">
  <div style="display:inline;float:left;height:100%;width:32%;background-color:#ffc0c0;padding:5px;margin:0px;border:thin solid red">Inhalt Zelle 1</div>
  <div style="display:inline;float:left;height:100%;width:32%;background-color:#c0ffc0;padding:5px;margin:0px;border:thin solid red">Zeile1<br>Zeile2<br>Zeile3<br>Zeile4</div>
  <div style="display:inline;float:left;height:100%;width:32%;background-color:#c0c0ff;padding:5px;margin:0px;border:thin solid red">Inhalt Zelle 2</div>
  <br clear="all">
</div>

<hr>

<div style="padding:0px;width:100%">
  <div style="display:block;float:left;height:100%;width:32%;background-color:#ffc0c0;padding:5px;margin:0px;border:thin solid red">Inhalt Zelle 1</div>
  <div style="display:block;float:left;height:100%;width:32%;background-color:#c0ffc0;padding:5px;margin:0px;border:thin solid red">Zeile1<br>Zeile2</div>
  <div style="display:block;float:left;height:100%;width:32%;background-color:#c0c0ff;padding:5px;margin:0px;border:thin solid red">Inhalt Zelle 2</div>
  <br clear="all">
</div>

Nur die Höhenanpassung will nicht.

Die geht wiederum !nur im Mozilla! mit folgender Methode (als "Tabellen- Div's"):
http://selfhtml.teamone.de/css/eigenschaften/anzeige/display2.htm
Dafür kann man dann keine Breite zuweisen....

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix®

[molily]

Hallo Aqua,

Die Frage

Wie kann ich genau die selbe Darstellung mit selbigem
"Dehnungseffekt" (siehe oben) erreichen, wenn ich das ganze
ausschließlich mit <DIV> machen will?

Siehe </archiv/2003/1/35082/> und andere...

(Bitte um einen Beispiel-Code wie ich es oben mit der Tabelle tat...)

http://home.t-online.de/home/dj5nu/fanhost/css-spaltenlayout.html
Mit drei Spalten (das ist das frühere Layout von barrierefreies-webdesign.de): http://home.t-online.de/home/dj5nu/fanhost/css-spaltenlayout2.html

Mathias