Kurt: (?unlösbares?) height problem

Ich konfrontier euch nun mit einem Problem, welches mich nun schon tagelang beschäftigt. Die Situation ist folgende:

Ich möchte eine Tabelle erstellen, bestehend aus einer Zeile und zwei Spalten. In die rechte Spalte kommt ein Text mit variabler Länge rein. Die Tabelle soll sich in der Höhe diesem Text anpassen. In der linken Spalte möchte ich eine Grafik haben, welche sich auf die volle Höhe der Tabelle ausdehnt. Diese Grafik ist 10px breit und 1px hoch, und sollte eigentlich durch das Attribut height="100%" auf die Tabellenhöhe, gedehnt werden, was jedoch nicht geschieht.

Hier der Quellcode:

<html>
  <head>
    <title>height Problem</title>
    <style>
      HTML { width:100%;height:100%;}
      body { width:100%;height:100%;}
    </style>
  </head>

<body>
    <table width="100%" cellspacing="0" cellpadding="0" border="1">
      <tr>
        <td>img alt="" src="theme/bars/bar_vertical.png" width=19 height="100%"></td>
        <td>
          text<br>
          text<br>
          text<br>
          text<br>
          text<br>
          text<br>
        </td>
      </tr>
    </table>
  </body>
</html>

übrigens nützt es auch nichts, wenn man im <td>-tag welches das img-tag umschliesst das Attribut style="height:100%" hinzufügt. Es funktioniert nur wenn eine feste Höhe angegeben wird, also zB style="height:500px", jedoch ist das nicht der Sinn von der Sache, denn ich möchte schlussendlich mit Hilfe von php und mysql Newsfenster generieren, dessen Höhe unterschiedlich ist.

Fragen:
gibt's einen Fehler im code?
gibt's eine andere Lösung?

Bitte helft mir, im bin sowas von verzweifelt. :(

  1. kleine Korrektur:

    <td><img alt="" src="irgendwas.png" width=10 height="100%"></td>

  2. Hallo Kurt,

    Diese Grafik ist 10px breit und 1px hoch, und sollte eigentlich durch das Attribut height="100%" auf die Tabellenhöhe, gedehnt werden, was jedoch nicht geschieht.

    Das passiert ja auch - die Tabelle selbst richtet sich _im Moment_ aber nach der Höhe des Inhalts. Daher:

    <table style="height: 100%" ...>

    Dann sollte es klappen, das height: 100%; für html und body hast Du ja schon.

    Viele Grüße,
    Christian

    --
    | http://www.selflinux.org/                                                  |
    | http://aktuell.de.selfhtml.org/tippstricks/beitrag.htm                      |
    | sh:) fo:) ch:] rl:( br:> n4:& ie:% mo:) va:) de:] zu:) fl:( js:| ss:) ls:[ |
    | http://emmanuel.dammerer.at/selfcode.html                                  |
    1. Hallo Kurt,

      Diese Grafik ist 10px breit und 1px hoch, und sollte eigentlich durch das Attribut height="100%" auf die Tabellenhöhe, gedehnt werden, was jedoch nicht geschieht.

      Das passiert ja auch - die Tabelle selbst richtet sich _im Moment_ aber nach der Höhe des Inhalts. Daher:

      <table style="height: 100%" ...>

      Dann sollte es klappen, das height: 100%; für html und body hast Du ja schon.

      Viele Grüße,
      Christian

      danke für die umgehende Antwort, jedoch löst es mein Problem nicht. Denn ich möchte ja, dass sich die Tabelle der Höhe des Inhalts (also des Text auf der rechten Seite) anpasst, also nicht grösser ist als der Text. Darum darf im <table>-tag das height-Attribut nicht vorkommen, da sonst die Tabelle auf die Gesamthöhe des Bildschirms ausgedehnt wird. Die Grafik soll aber schlussendlich nur so gross sein wie der Text.

      Andere Vorschläge??

      1. bin gerade auf ne lösung gestossen:

        <td background="irgendwas.png" style="background-repeat: repeat-y"></td>

        :D

        1. Hi Kurt,

          <td background="irgendwas.png" style="background-repeat: repeat-y"></td>

          Vom Prinzip her schonmal richtig, aber das Attribut "background" gibt es (so oft es auch verwendet werden mag und so viele Browser es auch darstellen mögen) meines Wissens nach in HTML garnicht. Berichtige mich wer, wenn ich irre. Machs doch einfach komplett mit CSS, da gibts nämlich "background":

          <td style="background:url(bildchen.png) center center repeat-y"> </td>

          Das geschützte Leerzeichen muss sein, da nicht alle Browser völlig leere <td>s darstellen. sonst tuts auch ein 1x1 pixel grosses transparentes Gif.

          Mehr über CSS findest Du überigends in Selfhml.

          Viel Spass + schö

          stefan

          --
          Der Optimist sagt: "Dies ist die beste aller möglichen Welten!"
          Der Pessimist antwortet: "Das stimmt."
  3. hier kommt eine verschärfte Problemstellung... bitte schaut euch das Bild unter folgender Adresse an: www.70megs.com/zubspace/problem.jpg

    So wie das Bild sollte schlussendlich die Tabelle aussehen. 3 Zeilen und 2 Spalten, die 3 Zeilen auf der rechten Seite sind miteinander verbunden und dort soll der Text rein. Links kommt in der obersten und untersten Zeile ein Bild mit fester grösse rein, in der mittleren Zeile soll ein Balken sein, welcher sich je nach Textumfang in der Höhe ändert. Jedoch dehnt sich dieser Balken im MSExplorer nicht auf die erwünschte Höhe aus :( Der Balken besteht aus einem Bild mit Höhe 1 und sollte doch durch das Attribut height="100%" gedehnt werden, oder irre ich mich???

    Hier mein Quellcode:

    <html>
      <head>
        <title>height Problem</title>
        <style>
          HTML { width:100%;height:100%;}
          body { width:100%;height:100%;}
        </style>
      </head>

    <body>

    <table width="100%" cellspacing="0" cellpadding="0" border="1">
          <tr>
            <td style="height:20px"><img src="bildoben.png" width=20 height=20></td>
            <td rowspan="3">
              text<br>
              text<br>
              text<br>
              text<br>
              text<br>
              text<br>
              text<br>
              text<br>
              text<br>
            </td>
          </tr>

    <tr>
            <td style="height:100%"><img src="ein_pixel_hohes_bild.png" width=20 height=100%></td>
          </tr>

    <tr>
            <td style="height:20px"><img src="bildunten.png" width=20 height=20></td>
          </tr>
        </table>

    </body>
    </html>

    Bitte helft mir...

    1. Hallo Kurt,

      AFAIK (wie immer ohne Gewähr) kommen %-Angaben nur dann zum Tragen, wenn auch die gesamte Tabelle eine Höhenangabe hat
      <table ... style="height:100%">

      Und außerdem könnte dir noch ein table-layout:fixed
      <table ... style="height:100%;table-layout:fixed">
      weiterhelfen.

      Gruß Gunther

    2. hier kommt eine verschärfte Problemstellung... bitte schaut euch »»         <td style="height:100%"><img src="ein_pixel_hohes_bild.png" width=20 height=100%></td>

      Bild 100%??
      Funktioniert nicht!

      Mach es mit Background repeat!
      CSS!!
      Du schreibst ein ähnliches Problem zum 3. Mal!
      Du mußt ja wirklich vezweifelt sein.
      Also
      1. zurücklehnen und entspannen sonst wird die ganze Sache gar nichts.
      2. Kapitel Tabellen in selfhtml lesen
      3. Formatierung mit CSS lesen!
      4. Quelltext schreiben!
      Viele Grüße aus Berlin
      Tom