Ingo Siemon: mitwachsende Tabellenzellen

Tach alerseits

So, ich bin schon wieder ein Stück weiter bei meiner
CSS-Lern-Orgie :)

Nun stehe ich aber vor einem "Problem", wo ich nicht recht weiss,
wie ich es lösen soll. Bei SelfHTML und auch bei Google gibts ne
Menge Text dazu, aber so richtig weiter bin ich dadurch nicht.

Ich möchte folgendes Darstellen:
Text 01:          Text 05
Text 02:          Text 06
Text 03:          Text 07
Text 04:          Text 08

Es soll sozusagen eine Tabelle mit 2 Spalten sein.
Diese Tabelle soll eine feste Breite von 510px und
nur einen äusseren Rahmen haben.

Bisher habe ich das erstmal so gelöst:

HTML
-----------------------------------------------------------------

<table>  
<tr>  
<td width=150>Text 01: </td>  
<td>Text 05</td>  
</tr>  
<tr>  
<td>Text 02: </td>  
<td>Text 06</td>  
</tr>  
<tr>  
<td>Text 03: </td>  
<td>Text 07</td>  
</tr>  
<tr>  
<td>Text 04: </td>  
<td>Text 08</td>  
</tr>  
</table>

-----------------------------------------------------------------

CSS
-----------------------------------------------------------------

table {  
  background-color: #004559;  
  border: 1px solid #ffffff;  
  width: 510px;  
  table-layout: fixed;  
  margin: 0 0 7px;  
}

-----------------------------------------------------------------

Meine Frage an Euch ist nun, ob das eine Zweckentfremdung einer
Tabelle (im Sinne von CSS-basiertem Layouten) darstellt.
(Nicht dass ich mir gleich wieder die Trickserei angewöhne).

Ansehen kann man sich das hier: http://www.spaceart.de/___Test-01.shtml
(Es geht um diese Box mit "Artikel", "Material", "Größe" usw.)
Sieht ja soweit gut aus, aber wenn man nun die Schriftgröße
des Browsers verändert, laufen die Zeleninhalte der ersten
Spalte irgendwann in die der zweiten Spalte.
Ich hätte es gerne so, dass die Zelleninhalte dann in Ihrer Zelle umbrechen.

Oder kann man das ganze Anliegen vielleicht mit CSS
noch ganz anders lösen? Ich hatte schon überlegt,
zwei nebenander liegende Listen zu machen oder so.
Aber so ganz astrein kommt mir das nun auch nicht vor :)

Gruß
Ingo

  1. hi,

    Meine Frage an Euch ist nun, ob das eine Zweckentfremdung einer
    Tabelle (im Sinne von CSS-basiertem Layouten) darstellt.

    das kommt einzig und allein darauf an, ob es sich bei den in der tabelle dargestellten daten um tabellarische handelt.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. Hallo

      das kommt einzig und allein darauf an, ob es sich bei den in der tabelle dargestellten daten um tabellarische handelt.

      Es ist sowas wie:
      Größe:    10 cm
      Gewicht:  12 kg
      Material: Plastik
      Preis:    55,- EUR

      Das sind doch tabellarische Daten, oder irre ich mich da?

      Gruß
      Ingo

      1. hi,

        Es ist sowas wie:
        Größe:    10 cm
        Gewicht:  12 kg
        Material: Plastik
        Preis:    55,- EUR

        da wäre bspw. eine definitionsliste ein recht brauchbarer elementtyp für.

        Das sind doch tabellarische Daten, oder irre ich mich da?

        jein.
        ich würde eher zur definitionsliste tendieren.

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
  2. Hallo Ingo

    Meine Frage an Euch ist nun, ob das eine Zweckentfremdung einer
    Tabelle (im Sinne von CSS-basiertem Layouten) darstellt.

    Sind es tabellarische Daten, oder dient die Tabelle dem Layout?

    (Nicht dass ich mir gleich wieder die Trickserei angewöhne).

    Ansehen kann man sich das hier: http://www.spaceart.de/___Test-01.shtml
    (Es geht um diese Box mit "Artikel", "Material", "Größe" usw.)

    Darüber lässt sich trefflich streiten, ob es eine Tabelle oder eine
    Definitionsliste ist.

    Sieht ja soweit gut aus, aber wenn man nun die Schriftgröße
    des Browsers verändert, laufen die Zeleninhalte der ersten
    Spalte irgendwann in die der zweiten Spalte.

    Warum verwendest du table-layout: fixed;?

    Oder kann man das ganze Anliegen vielleicht mit CSS
    noch ganz anders lösen? Ich hatte schon überlegt,
    zwei nebenander liegende Listen zu machen oder so.

    Dann eher eine Definitionsliste, die dann mittels CSS formatiert wird.

    Auf Wiederlesen
    Detlef

    --
    - Wissen ist gut
    - Können ist besser
    - aber das Beste und Interessanteste ist der Weg dahin!
    1. Lieber Detlef

      Sind es tabellarische Daten, oder dient die Tabelle dem Layout?
      ...

      http://www.spaceart.de/___Test-01.shtml

      (Es geht um diese Box mit "Artikel", "Material", "Größe" usw.)
      ...
      Darüber lässt sich trefflich streiten, ob es eine Tabelle oder eine
      Definitionsliste ist.

      Tja, wem sagst Du das :)

      Warum verwendest du table-layout: fixed;?

      Weil doch sonst die ganze Tabelle mit dem Inhalt wächst.
      Und das möchte ich ja nicht. Die Tabelle insgesamt soll
      auf jeden Fall immer 510px breit bleiben.

      Dann eher eine Definitionsliste, die dann mittels CSS formatiert wird.

      Bei dem Definitionslisten-Beispiel von SelfHTML
      http://de.selfhtml.org/html/text/anzeige/dl_dt_dd.htm
      sind ja die Inhalte der beiden "Spalten" um eine Zeile versetzt.
      Ist das bei Definitionsliten denn immer so?

      Gruß
      Ingo

      1. Hallo Ingo

        Warum verwendest du table-layout: fixed;?

        Weil doch sonst die ganze Tabelle mit dem Inhalt wächst.

        Hast du das getestet?
        Wann wächst die Tabelle mit dem Inhalt?

        Und das möchte ich ja nicht. Die Tabelle insgesamt soll
        auf jeden Fall immer 510px breit bleiben.

        Was sieht besser aus, wenn die Tabelle wächst, wenn der Inhalt beim besten
        Willen wirklich nicht mehr hineinpasst, oder wenn die Schrift über den
        Border ragt?

        Dann eher eine Definitionsliste, die dann mittels CSS formatiert wird.

        Bei dem Definitionslisten-Beispiel von SelfHTML
        http://de.selfhtml.org/html/text/anzeige/dl_dt_dd.htm
        sind ja die Inhalte der beiden "Spalten" um eine Zeile versetzt.

        Ja, das ist die übliche Defaultanzeige der Browser.

        Ist das bei Definitionsliten denn immer so?

        Zumindest so lange, wie du nicht mittels CSS sagst, dass du es anders
        möchtest.

        (Sieht deine Navigationsliste (ul) noch so aus, wie die Beispiele in
        Selfhtml?)

        Auf Wiederlesen
        Detlef

        --
        - Wissen ist gut
        - Können ist besser
        - aber das Beste und Interessanteste ist der Weg dahin!
        1. Lieber Detlef

          Bei Definitionslisten sind ja die Inhalte der beiden "Spalten" um eine Zeile versetzt.

          Zumindest so lange, wie du nicht mittels CSS sagst, dass du es anders
          möchtest.

          Tja, ich nun schon ne halbe Ewigkeit am googlen,
          wie ich eine Defintionsliste so formatiren kann,
          dass die "Inhalte" von <dt> und <dd> jweils nebeneinander
          erscheinen und nicht um eine Zeile versetzt.
          Ist das denn überhaupt machbar?

          (Sieht deine Navigationsliste (ul) noch so aus, wie die Beispiele in
          Selfhtml?)

          Nein, ich habe die erstmal wieder rausgeschmissen.
          Warum fragst Du?

          Gruß
          Ingo

          1. Hallo Ingo,

            ich schreibe meist keine direkten Lösungen, sondern versuche dir, auch mit
            rhetorisch gemeinten Fragen, zu helfen, die Lösungen selbst zu finden.

            Zumindest so lange, wie du nicht mittels CSS sagst, dass du es anders
            möchtest.
            Ist das denn überhaupt machbar?

            Könnte dir ein geschickter Einsatz von float (Textumfluss) eventuell helfen?
            Dazu überlege, welche Elemente aus dem Fluss genommen werden müssen, damit
            der Rest nicht darunter sondern daneben beginnt.

            (Sieht deine Navigationsliste (ul) noch so aus, wie die Beispiele in
            Selfhtml?)

            Warum fragst Du?

            Du meintest, die dl bei Selfhtml sähe anders aus, als du sie brauchst.
            Die ul, bei deiner Navigation oder bei den #footerlinks sieht durch das CSS
            auch anders aus, als die Beispiele in Selfhtml.

            Auf Wiederlesen
            Detlef

            --
            - Wissen ist gut
            - Können ist besser
            - aber das Beste und Interessanteste ist der Weg dahin!
            1. Lieber Detlef

              ich schreibe meist keine direkten Lösungen, sondern versuche dir, auch mit
              rhetorisch gemeinten Fragen, zu helfen, die Lösungen selbst zu finden.

              Ja, das begrüse ich auch sehr!
              So werde ich hatlt "genötigt", nicht dem inneren bequemen
              Schweinehund nachzugehen, sondern selbst zu wurschteln.

              Könnte dir ein geschickter Einsatz von float eventuell helfen?

              Allerdings :)
              Hätte ich natürlich inzwischen auch selbst drauf kommen müssen.
              Ich habe aber das Gefühl, dass die Tabelle doch besser geeignet ist,
              weil bei der Definitionsliste ja nun der Inhalt von <dd> direkt,
              neben dem von <dt> steht. Nun fehlt mir da halt noch so eine
              Art Tabulator. Aber dafür ist so eine Definitionsliste wohl auch
              nicht gedacht. Im Grunde sind es doch eigentlich auch tabellarische Daten,
              weil die Begriffe in der ersten Spalte ja bei allen Produkten gleich sind.

              Du meintest, die dl bei Selfhtml sähe anders aus, als du sie brauchst.
              Die ul, bei deiner Navigation oder bei den #footerlinks sieht durch das CSS
              auch anders aus, als die Beispiele in Selfhtml.

              Sorry, da kann ich nun nicht folgen.
              Ist aber auch egal, denke ich, weil ich mich bei Design der
              Navi eh noch nicht entschlossen habe.

              Gruß
              Ingo

              1. Hallo Ingo,

                Sorry, da kann ich nun nicht folgen.

                Darf ich mal eben das Brett wegnehmen... so... ja, jetzt müsste es gehen. ;-)

                Was Detlef sagen wollte: Wenn du es bei einer Liste (UL) geschafft hast, das Aussehen durch CSS erheblich zu verändern, dann wirst du das doch wohl bei einer Definitionsliste (DL) auch hinkriegen!

                Ist aber auch egal, denke ich, weil ich mich bei Design der
                Navi eh noch nicht entschlossen habe.

                Na gut, dann warten wir mal ab.

                So long,

                Martin

                1. Lieber Martin

                  Wenn du es bei einer Liste (UL) geschafft hast, das Aussehen durch CSS erheblich zu verändern, dann wirst du das doch wohl bei einer Definitionsliste (DL) auch hinkriegen!

                  Ja, klar ... sorry für das Brett ... habs nun hinbekommen.
                  Aber die bündige Anordnung von den <dt>s und <dd>s ist doch mit CSS
                  nicht möglich ... oder?
                  Ich will nur ein JA oder NEIN hören.
                  Wenn ich nicht geht, brauche ich mir ja auch keinen abbrechen:)
                  Und wenn es doch geht, werde ich natürlich weiterforschen.

                  Gruß
                  Ingo

                  1. Hallo Ingo.

                    Aber die bündige Anordnung von den <dt>s und <dd>s ist doch mit CSS
                    nicht möglich ... oder?
                    Ich will nur ein JA oder NEIN hören.

                    Ich denke, dass dich nur „Ja“ oder nur „Nein“ bei dieser Formulierung der Frage nur verirren würde.

                    Also: </archiv/2005/5/t106772/#m662651>

                    Einen schönen Mittwoch noch.

                    Gruß, Ashura

                    --
                    Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
                    30 Days to becoming an Opera8 Lover -- Opera Mini on Treo
                    Meine Browser: Opera 8.02 | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
                    [Deshalb frei! - Argumente pro freie Software]
                    1. Hallo Ashura

                      Ich denke, dass dich nur „Ja“ oder nur „Nein“ bei dieser Formulierung der Frage nur verirren würde.

                      Also: </archiv/2005/5/t106772/#m662651>

                      Ich denke, dass ist viel mehr, als er braucht, vielleicht sogar irreführend.

                      Der Hinweis, dass Weite und/oder Mindestweite für viele Elemente angegeben
                      werden können, hätte doch gereicht.

                      Und wenn das nicht reichen sollte, in einem anderen Thread von Ingo, gab es
                      so ein Beispiel von mir.
                      Fröliche Suche! ;-)

                      Auf Wiederlesen
                      Detlef

                      --
                      - Wissen ist gut
                      - Können ist besser
                      - aber das Beste und Interessanteste ist der Weg dahin!
                      1. Lieber Detlef

                        Also: </archiv/2005/5/t106772/#m662651>

                        Der Hinweis, dass Weite und/oder Mindestweite für viele Elemente angegeben
                        werden können, hätte doch gereicht.

                        So weit bin ich inzwischen schon, dass ich innerhalb von
                        Sekunden den für mich relevanten Teil mit Weite und/oder
                        Mindestweite in dem Beispiel entdeckt hatte.
                        Und dann kahm natürlich auch gleich der Gedanke,
                        dass ich mal wieder auf das Naheliegenedste nicht selber gekommen bin ;-) (Ich muss wohl doch noch viel CSSen im Kopf)

                        Wenn ich solche Beispiele sehe, versuche ich natürlich immer,
                        den Teil herauszufiltern um den es mir geht.
                        Und wenn mir das nicht gelingt, speichere ich mir das lokal ab
                        und streiche alles aus dem Code, von dem ich mir sicher bin
                        dass es nichts mit meinem Anliegen zu tun hat.
                        Und wenn dann das pbriggebliebene noch funktioniert,
                        versuche ich natürlich, dass zu verstehen.
                        Das müsste doch eine ganz gute Methode sein, wobei ich natürlich
                        zu allererst immer versuche, mir den Code selber zusammenzustricken!

                        Gruß
                        Ingo

                    2. Liebe Ashura

                      Ich denke, dass dich nur „Ja“ oder nur „Nein“ bei dieser Formulierung der Frage nur verirren würde.

                      :-))) ... Du traust mir noch nicht viel zu, gelle?

                      Also: </archiv/2005/5/t106772/#m662651>

                      OK ich habe mir das Beispiel mal angesehen und mich natürlich
                      gleich geärgert, dass ich auf das einfachste mal wieder nicht
                      selber gekommen bin ;-)

                      Ich habs nun so gemacht:

                      dl {  
                        background-color: #004559;  
                        border: 1px solid #ffffff;  
                        margin: 0 auto 7px;  
                        padding: 0.2em;  
                      }  
                      dt {  
                        float: left;  
                      }  
                      dd {  
                        margin-left: 8em;  
                      }
                      

                      Das Ergebnis ist hier: http://www.spaceart.de/___Test-01.shtml
                      Das obere ist eine Tabelle und das untere die Definitionsliste.
                      Die Definitionsliste sieht besser aus und vor allem ist
                      das Code-Stückchen auch wieder viel kleiner.

                      Was mich nur noch wundert ist, dass meine weiss-gerahmte Box beim
                      nicht mitwächst, wenn man die Schriftgröße z.B. im FF so dermassen
                      vergrößert, dass die Inhalte von den <dd>-Elementen nicht
                      merh umgebrochen werden können.

                      Hier auch nochmal ein Link ur entsprechenden CSS-Datei:
                      http://www.spaceart.de/___Test-01.css

                      Gruß
                      Ingo

                      1. Hallo Ingo

                        Was mich nur noch wundert ist, dass meine weiss-gerahmte Box beim
                        nicht mitwächst, wenn man die Schriftgröße z.B. im FF so dermassen
                        vergrößert, dass die Inhalte von den <dd>-Elementen nicht
                        merh umgebrochen werden können.

                        Ganz einfach, Tabellen passen sich der Größe des Inhalts an, wenn du das
                        nicht mittels table-layout:fixed verbietest. Andere Elemente halten sich
                        (außer im IE) an die angegebenen Maße.
                        In deinem CSS steht:

                          
                        #Inhalt {  
                          width: 510px;  
                          margin: auto;  
                          min-width: 10em;  
                        }  
                        
                        

                        Damit hat dann auch dl eine Breite von 510px und eine Mindestbreite von
                        10em.
                        Bei 8em margin-left für dd und 0.2em padding für dl, bleibt nicht genug
                        Platz für den Inhalt von dd übrig.
                        Du hast jetzt die Möglichkeiten, entweder min-width für Inhalt zu
                        vergrößern (Spaltenbreite wächst eher), extra min-height für dl anzugeben (Verhalten, wie bei der Tabelle) oder es so wie bei meinem Beispiel zu machen.

                        Auf Wiederlesen
                        Detlef

                        --
                        - Wissen ist gut
                        - Können ist besser
                        - aber das Beste und Interessanteste ist der Weg dahin!
                        1. Lieber Detlef

                          Ganz einfach, Tabellen passen sich der Größe des Inhalts an

                          Ok, ich verstehe.

                          Bei 8em margin-left für dd und 0.2em padding für dl, bleibt nicht genug
                          Platz für den Inhalt von dd übrig.

                          OK, das verstehe ich auch.
                          Mann, das muss man ja echt aufpassen, wenn sich diese ganzen em
                          und paddings summieren :)

                          meinem Beispiel

                          Ich habe mir das angesehen ... vielen Dank erstmal dafür.
                          Nur verstehe ich nicht, warum Du da so viele paddings
                          für <dl>, <dt> und <dd> jeweils einzeln angegeben hast.
                          Es würde auch ein einziges em für <dl> reichen, also so:

                          dl {  
                            background-color: #004559;  
                            border: 1px solid #ffffff;  
                            margin: 0 auto 7px;  
                            padding: 0.2em;  
                          }  
                          dt {  
                            float: left;  
                            min-width: 160px;  
                          }  
                          dd {  
                            margin-left: 160px;  
                          }
                          

                          Hast Du das gemacht, dami der "Zeilenabstand" etwas größer wird
                          oder steckt noch ein anderer Grund dahinter?

                          Gruß
                          Ingo

                          1. Hallo Ingo

                            Hast Du das gemacht, dami der "Zeilenabstand" etwas größer wird
                            oder steckt noch ein anderer Grund dahinter?

                            Richtig erkannt, dadurch haben zusammengehörigen Listenpunkte einen kleinen
                            Abstand zu den Anderen, ohne dass sich der Abstand zum Border ändert.
                            Es wäre auch noch ein etwas Größerer möglich:

                              
                            dl {  
                              background-color: #004559;  
                              border: 1px solid #ffffff;  
                              margin: 0 auto 7px;  
                              padding: 0 0.2em;  
                            }  
                            dt {  
                              float:left;  
                              min-width:160px;  
                              padding-top: 0.2em;  
                            }  
                            dd {  
                              margin-left:160px;  
                              padding: 0.2em 0;  
                            }  
                            
                            

                            Auf Wiederlesen
                            Detlef

                            --
                            - Wissen ist gut
                            - Können ist besser
                            - aber das Beste und Interessanteste ist der Weg dahin!
                            1. Lieber Detlef

                              Richtig erkannt, »» Es wäre auch noch ein etwas Größerer möglich: ...

                              OK, verstehe.
                              Mal sehen, welcher Abstand mir besser gefällt.
                              Danke und Gruß
                              Ingo

      2. hi,

        Bei dem Definitionslisten-Beispiel von SelfHTML
        http://de.selfhtml.org/html/text/anzeige/dl_dt_dd.htm
        sind ja die Inhalte der beiden "Spalten" um eine Zeile versetzt.
        Ist das bei Definitionsliten denn immer so?

        nein, das kommt natürlich - wie immer - auf die formatierung an.

        auch dd und dt könnten beispielsweise mit display:inline oder float formatiert werden.

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
        1. Lieber wahsaga

          nein, das kommt natürlich - wie immer - auf die formatierung an.
          auch dd und dt könnten beispielsweise mit display:inline oder float formatiert werden.

          Ahhh, prima.
          Ich werde heute mal ne Weile mit diesen Definitionslisten herumspielen.
          Mal sehen, wie mir das gelingt.

          Gruß
          Ingo