[HTML] Tabellen-Anzeige-Schwierigkeiten

[kerbstone]

Ich möchte gerne mein Tabellenfeld 't2' in 100%iger Höhe
im Vergleich zur Zeilenhöhe 't1.td1'.
Die Anzeige sieht bei mir zur Zeit leider so aus,
dass das Feld 't1.td1' über mehrere Zeilenumbrüche geht,
't2' sich aber nicht der Höhe entsprechend anpasst.

Ich wäre dankbar für eure Tipps.

<table name="t1" width="800" bgcolor="#FFDF00">
        <tr>
          <td name="t1.td1" bgcolor="#009F00" vAlign="top">unbestimmter text<br>
unbestimmter text<br><br>
          <br>
          <br>
          <br>
          unbestimmter text</td>
          <td name="t1.td2" bgcolor="#FFFFFF" vAlign="top"><table name="t2" bgcolor="#9C9E9C">
            <tr>
              <td name="t2.td1">unbestimmter text</td>
            </tr>
          </table></td>
        </tr>
      </table> 

[mcmurphy]

td {width:100%; height:100%;}
aber mußt meines Wissens auch der Tabelle width & height per CSS zuweisen

[kerbstone]

Erstmal möchte ich mich enstchuldigen, dass ich aus Versehen
zweimal diesen Post erstellt habe. Mein Browser war abgestürzt.
Leider kann man ja die Beiträge auch nicht selber löschen.

Zum Zweiten @ mcmurphy:
Das hatte ich schon versucht, hat aber leider nichts bewirkt,
außer in der Weite.

[ghostgambler]

Kein Wunder, du hast im zweiten ja auch noch eine Tabelle rein geschachtelt...

btw.:
http://www.vorsprungdurchwebstandard.../retro-coding/

Und:
http://seybold.jan-andresen.de/

[kerbstone]

Okay, ich habe soweit kapiert, dass CSS die effektivere Variante
von Layouten ist, aber wie kann ich das auf mein Beispiel übertragen?
Ich möchte ja nur diesen bestimmten Teil in grau hinterlegt bekommen.
Kannst du mir bitte die Befehlsreferenz dafür geben?

[mcmurphy]

Kein Wunder, du hast im zweiten ja auch noch eine Tabelle rein geschachtelt...

ups, hatte ich übersehen, die is' aber mit einer Zelle überflüssig (oder wenn du sie unbedingt behalten willst auch je 100% geben)
-> die Prozent beziehen sich auf das Elternelement, dafür muß diesem aber auch ein Wert zu gewiesen sein!

[ghostgambler]

<div style="color:#9C9E9C; height:100%;">unbestimmter text</div>

oder sowas~

[kerbstone]

Ich habe allen Tabellen,TRs und TDs die Werte height=100% zugesprochen und trotz alledem bleibt der Zelleninhalt bei einer Zeilenhöhe und geht nicht wie beabsichtigt bis an das Fußende der linken Tabelle

[mcmurphy]

gib doch mal ein online beispiel...

[kerbstone]

Ein online Beispiel:

      <table name="t1" height="100%" width="800" bgcolor="#FFDF00">
        <tr>
          <td name="t1.td1" height="100%" bgcolor="#009F00" vAlign="top">
unbestimmter text<br>unbestimmter text<br><br>
          <br>
          <br>
          <br>
          unbestimmter text</td>
          <td height="100%" name="t1.td2" bgcolor="#FFFFFF" vAlign="top">
<table width="100%" height="100%" name="t2" bgcolor="#9C9E9C">
            <tr>
              <td width="100%" height="100%" name="t2.td1">unbestimmter text</td>
            </tr>
          </table></td>
        </tr>
      </table> 

[arkos]

willst du dich nun von tabellen verabschieden und css lernen oder nicht?

wenn du nicht gerade eine "ECHTE" datentabelle benötigst, solltest du table auch nicht für layout-zwecke missbrauchen.

so könnte dein html aussehen:

<div id="linkeBox">
   unbestimmter text<br />
   unbestimmter text<br />
   <br />
   <br />
   <br />
   unbestimmter text<br />
</div>
<div id="rechteBox">
    unbestimmter text
</div>

der ganze rest wird via css gesteuert.
fertsch!

[ghostgambler]

Original geschrieben von kerbstone
Ein online Beispiel:

Online-Beispiel = Link - nicht Code...

[kerbstone]

Nun lassen sich aber keine Boxen nebeneinander anreihen.
Alle meine durch <div id> definierten Boxen werden
untereinander geschrieben:

<style type="text/css">
<!--
#webseitenBox { background-color: #FFFF00; width: 800px }
#linkeBox { background-color: #0000FF; width: 200px }
#rechteBox { background-color: #FFFFFF; width: 600px }
-->
</style>

<div id="webseitenBox">
<div id="linkeBox">
   unbestimmter text<br />
   unbestimmter text<br />
   <br />
   <br />
   <br />
   unbestimmter text<br />
</div>
<div id="rechteBox">
    unbestimmter text
</div>
</div> 

[Kropff]

schau dir mal das tutorial zum thema floaten an.

gruß
peter

[kerbstone]

Okay, nun hätten wir das table-layout durch css ersetzt.
festzuhalten bleibt meine eigentliche fragestellung,
wie ich nun die rechte box mit der hintergrundfarbe
genauso tief gehen lasse wie die linke box, wobei
die rechte box mit keinerlei inhalten (noch nicht)
gefüllt ist.

Ich habe es nun so ausprobiert, geht aber leider auch nicht:

<style type="text/css">
<!--
#webseitenBox { background-color: #FFFF00; width: 800px; height: 100% }
#linkeBox { float: left; background-color: #0000FF; width: 200px; height: 100% }
#rechteBox { float: left; background-color: #FFFFFF; width: 600px; height: 100% }
-->
</style>

<div id="webseitenBox">
<div id="linkeBox">
   unbestimmter text<br />
   unbestimmter text<br />
   <br />
   <br />
   <br />
   unbestimmter text<br />
</div>
<div id="rechteBox">
    unbestimmter text
</div>
</div> 

Mir ist bewusst, dass wenn ich #webseitenBox in Pixeln definiere,
dass dies dann funktioniert, jedoch ändert sich mein Inhalt auf der linken
Seite dynamisch, sodass ich nicht sagen kann, ob dieser 300 oder 600
Pixel hoch ist...