• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

td höhe 100%

skiordie

New member
Hi,

hab eine Tabelle mit Spalten:

<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

diese sind immer unterschiedlich hoch und ich möchte sozusagen als Füllelement ein Div oder was auch immer an das Ende von jedem <td> setzen, sodass alle 3 immer gleich unten abschließen. Wie kann ich das erreichen???

Hab schon mit div und height:auto; und height:100%; probiert. Hat aber alles keine Wirkung gezeigt, im IE und firefox war das Div immer noch so hoch wie eine Zeile...

danke,
tom
 
OK. Mein Fehler. Hatte die Height Angabe nicht korrekt von oben nach unten durchgegeben. Im Firefox funktioniert das ganze nun. Nur im Internet Explorer zeigt die Height Angabe keine Wirkung...

PHP:
<table cellpadding="0" cellspacing="0" height="100%">
 <tr>
<!--linke Spalte -->
  <td valign="top" height="100%" style="padding-right:7px;">
  <table cellpadding="0" cellspacing="0" height="100%">
    <tr>
      <td id="leftcolumntd">
        <div id="leftcolumndiv" style="border-top:1px solid #9c9a9c;"></div>
      </td>
    </tr>
    <tr>
      <td id="leftcolumntd" height="100%">
        <div id="leftcolumndiv" style="border-top:1px solid #9c9a9c;"> </div>
      </td>
    </tr>
  </table>
  </td>


<!--mittlereSpalte -->

<table id="contenttable" cellspacing="0" height="100%">
  <tr>
    <td id="pathway"> </td>
  </tr>
  <tr>
    <td id="contenttabletd" height="100%">
     
    </td>
  </tr>
</table>
  </td>
  <td valign="top" height="100%">

<!--rechte Spalte -->
<table cellpadding="0" cellspacing="0" height="100%">
  <tr>
    <td id="rightcolumntd2">
     
    </td>
  </tr>
  <tr><td style="line-height:7px;"> </td></tr>
  <tr>
    <td id="rightcolumntd2" height="100%">
 
    </td>
  </tr>
<!-- Ende des Inhaltes -->
</table>

</td>
</tr>
<tr>
<td valign="top" style="padding-right:7px;"><div id="box"></div></td>
<td valign="top" style="padding-right:7px;"><div id="box"></div></td>
<td valign="top"><div id="box"></div></td>
</tr>

</table>

das interessante css:

PHP:
#leftcolumntd {
border:1px solid #9c9a9c;
width:221px !important;
border-top:0px;
vertical-align:top;
background-color:#f2eddc;
overflow:hidden;
}

#leftcolumndiv {
width:221px !important;
overflow:hidden;
}

#rightcolumntd2 {
border:1px solid #9c9a9c;
width:221px !important;
border-top:0px;
vertical-align:top;
background-color:#d2d5e4;
overflow:hidden;
}
/* Inhaltsspalte */
.contentcolumntd {
padding-left:7px;
padding-right:7px;
vertical-align:top;
height:100% !important;
background: url('images/contenttablebg.PNG') center center repeat-y;
}

#contenttable {
width:518px !important;
#height:100% !important;
border:1px solid #9c9a9c;
border-bottom:0px; }

#contenttabletd {
padding-left:20px;
padding-bottom:10px;
padding-top:5px;
padding-right:10px;
vertical-align:top; 
}

Also wie gesagt, im firefox sieht das ok aus, aber im IE eben nicht. Es sollen alle drei Spalten immer gleich lang sein und mit der zweiten Zeile, welche die Abschlüsse enthält, abschließen.
 
Kannst du mal einen screenshot zeigen wie das aussehen soll?

Ich hab das mit dem Code nebst CSS ausprobiert und in keinem Browser kommt irgendwas raus was ich mir vorstellen kann, das es so aussehen soll.
 
Wenn ich mir deinen Code ansehe, dann find ich die Verwendung von Tabellen und divs doppelt gemoppelt.

Generell gibts immer gewisse Schwierigkeiten wenn man alle Spalten in gleicher Höhe haben möchte und das Ganze auch noch höhenmäßig skalierbar sein soll.

Ich arbeite dann oft mit einer Hintergrundgrafik, die über die ganze Breite geht und in einem aussen herum liegenden container definiert wird. Allerdings muß man dann wissen, das durch die feste Breite der Hintergrundgrafik die horizontale Skalierbarkeit nicht mehr gegeben ist. Meine Layouts sind im Gegensatz zu denen von css-intensivstation überwiegend auf float aufgebaut.

Du kannst auch mal hier schauen, da sind einige Tabellenlose Layouts drin. Vielleicht ist das richtige dabei.
http://www.intensivstation.ch/templates/
 
Hi,

im Normalfall arbeite ich auch lieber ohne Tabellen, aber in dem Fall ist jemandem der Designer abgesprungen oder besser gesagt er hat kapituliert und mir wurde ein vollkommenes Wirrwar an Divs und Tabellen übergeben. Jetzt hab ich das grob sortiert und die Höhen funktionieren auch im Firefox. Laut Referenz sollte die height Angabe auch im IE ab Versoin 2.0 zur Verfügung stehen, aber irgendwie funktioniert das ganze nicht. Ich hab das ganze heute Nachmittag bekommen und die Luft brennt, weil die Seite morgen übergeben werden soll...

Wenn also jemand eine zündende Idee hätte, wie man das auch im IE zum laufen bringt, wäre ich mehr als dankbar...

Tom
 
Was mir noch aufgefallen ist, weshalb die Spalten mit deinem Code überhaupt nicht nebeneinander sondern untereinander erscheinen:

Vor der mittleren Spalte fehlt das öffnende td

Dann mußt Du unbedingt beachten, das eine id nur einmal vergeben werden darf.
für mehrfach Verwendung kannst du class nehmen.
 
Danke für deine Mühe. Das td ist in meinem Quellcode vorhanden. Keine Ahnung, warum das verloren gegangen ist.

Hab das auch mal mit Klassen probiert, aber das hat auch nicht funktioniert. Seltsam, dass keiner das Problem kennt. Sollte doch schon mal einem aufgefallen sein, dass der IE die height Angabe für td's ignoriert. Übrigens sowohl per Tag Attribut als auch per CSS (height="100%" und height:100%;).
 
also ich hab hier mal rumgefummelt

Dieser Stand der Dinge ist absolutes Huddeldidü, aber die Spalten sind gleich lang und verlängern sich auch wenn eine Spalte länger wird jeweils mit.

Ist aber total unausgegoren.
Code:
                        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test skiordie</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />

<style type="text/css">
.height	{
min-height:400px;
height:400px;
}

#left	{
background-color: #CCFF99;
padding-right: 7px;
}

#middle	{
background-color: #f5f5f5;
border:1px solid #9c9a9c;
border-bottom:0px;
}

#right	{
background-color: #FFBF80;
padding-left: 7px;
}


.leftcolumntd {
border:1px solid #9c9a9c;
/* border-top:1px solid #9c9a9c; */
border-top: 0px;
width:221px !important;
vertical-align:top;
background-color:#f2eddc;
overflow:hidden;

}

.rightcolumntd2 {
border:1px solid #9c9a9c;
width:221px !important;
border-top:0px;
vertical-align:top;
background-color:#d2d5e4;
overflow:hidden;
}
/* Inhaltsspalte */
.contentcolumntd {
padding-left:7px;
padding-right:7px;
min-height:400px;
height:400px;
background: url('images/contenttablebg.PNG') center center repeat-y;
}

#contenttable {
width:518px !important;

}

#contenttabletd {
padding: 5px 10px 10px 20px;
vertical-align:top;
min-height:400px;
height:400px;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" >
 <tr>
<!--linke Spalte -->
  <td id="left" valign="top">
  	<table cellpadding="0" cellspacing="0" >
	    <tr>
	      <td class="leftcolumntd">
	        leftcolumntd <br /><br />
Unterwegs traf es eine Copy. Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort "und" und das Blindtextchen solle umkehren und wieder in sein eigenes, sicheres Land zurückkehren.
  <br /><br />
	      </td>
	    </tr>
	    <tr>
	      <td class="leftcolumntd">
	        leftcolumntd</div>
	      </td>
	    </tr>
	  </table>
  </td>


<!--mittlereSpalte -->
<td id="middle" class="height" valign="top">
	<table id="contenttable" cellspacing="0" >
	  <tr>
	    <td id="pathway">pathway</td>
	  </tr>
	  <tr>
	    <td id="contenttabletd">
	    contenttabletd Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen. Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht – ein geradezu unorthographisches Leben.
 <br /><br />
 Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf und die Subline seiner eigenen Straße, der Zeilengasse. Wehmütig lief ihm eine rethorische Frage über die Wange, dann setzte es seinen Weg fort.

	    </td>
	  </tr>
	</table>
  </td>

  <td id="right" class="height" valign="top" >
<!--rechte Spalte -->
	<table cellpadding="0" cellspacing="0">
	  <tr>
	    <td class="rightcolumntd2">
	    rightcolumntd2
             <ul>
<li>liste</li>
<li>liste</li>
<li>liste</li>
<li>liste</li>
<li>liste</li>
<li>liste</li>
<li>liste</li>
</ul>
	    </td>
	  </tr>
	  <tr><td style="line-height:7px;"> </td></tr>
	  <tr>
	    <td class="rightcolumntd2" >
	rightcolumntd2<br />
         rightcolumntd2<br />
         rightcolumntd2<br />
         rightcolumntd2<br />
         rightcolumntd2<br />
         rightcolumntd2<br />
         rightcolumntd2<br />
         rightcolumntd2<br />
         rightcolumntd2<br />
         rightcolumntd2<br />
         rightcolumntd2<br />
         rightcolumntd2<br />
         rightcolumntd2<br />
         rightcolumntd2<br />
         rightcolumntd2<br />
         rightcolumntd2<br />
	    </td>
	  </tr>
	<!-- Ende des Inhaltes -->
	</table>

</td>
</tr>

<tr>
<td valign="top" style="padding-right:7px;"><div id="box"></div></td>
<td valign="top" style="padding-right:7px;"><div id="box"></div></td>
<td valign="top"><div id="box"></div></td>
</tr>

</table>
</body>
</html>

PS. grad kurz noch was geändert.
 
Zuletzt bearbeitet:
@bine:
Muss man ausgerechnet Dir 'Altem Hasen' auch noch erklären,
wie man Kästen um den Quältext macht? ;)
 
Zurück
Oben