Tabellenhöhe ändert sich mit Inhalt

djnelly · 15. November 2004

Hallo..

ich habe eine Tabelle, den Code habe ich unten angefügt. Jedes mal, wenn ich in den Main Inhalt Teil was schreibe, ändert sich die Höhe aller Tabellen.

Die Zellen, in denen der Link und die Bilder drunter sind, sollen sich in der Höhe nicht ändern, die eine Zelle jedoch anpassen. ich habe es reingeschrieben.

Kann einer helfen ?

Danke

Code:

<table border="0" cellpadding="0" cellspacing="0" width="780">
  <!-- fwtable fwsrc="style2.png" fwbase="main.jpg" fwstyle="Dreamweaver" fwdocid = "527869237" fwnested="0" -->
  <tr>
    <td><img src="images/global/spacer.gif" width="24" height="1" border="0" alt=""></td>
    <td><img src="images/global/spacer.gif" width="2" height="1" border="0" alt=""></td>
    <td><img src="images/global/spacer.gif" width="149" height="1" border="0" alt=""></td>
    <td><img src="images/global/spacer.gif" width="2" height="1" border="0" alt=""></td>
    <td><img src="images/global/spacer.gif" width="23" height="1" border="0" alt=""></td>
    <td><img src="images/global/spacer.gif" width="23" height="1" border="0" alt=""></td>
    <td><img src="images/global/spacer.gif" width="62" height="1" border="0" alt=""></td>
    <td><img src="images/global/spacer.gif" width="5" height="1" border="0" alt=""></td>
    <td><img src="images/global/spacer.gif" width="85" height="1" border="0" alt=""></td>
    <td><img src="images/global/spacer.gif" width="5" height="1" border="0" alt=""></td>
    <td><img src="images/global/spacer.gif" width="95" height="1" border="0" alt=""></td>
    <td><img src="images/global/spacer.gif" width="5" height="1" border="0" alt=""></td>
    <td><img src="images/global/spacer.gif" width="16" height="1" border="0" alt=""></td>
    <td><img src="images/global/spacer.gif" width="79" height="1" border="0" alt=""></td>
    <td><img src="images/global/spacer.gif" width="5" height="1" border="0" alt=""></td>
    <td><img src="images/global/spacer.gif" width="85" height="1" border="0" alt=""></td>
    <td><img src="images/global/spacer.gif" width="5" height="1" border="0" alt=""></td>
    <td><img src="images/global/spacer.gif" width="82" height="1" border="0" alt=""></td>
    <td><img src="images/global/spacer.gif" width="7" height="1" border="0" alt=""></td>
    <td><img src="images/global/spacer.gif" width="21" height="1" border="0" alt=""></td>
    <td><img src="images/global/spacer.gif" width="1" height="1" border="0" alt=""></td>
  </tr>
  <tr>
    <td colspan="9"><img name="main_r1_c1" src="images/global/main_r1_c1.jpg" width="375" height="180" border="0" alt="Navigations Bild"></td>
    <td colspan="10"><img name="main_r1_c10" src="images/global/main_r1_c10.jpg" width="384" height="180" border="0" alt="Navigations Bild"></td>
    <td><img name="main_r1_c20" src="images/global/main_r1_c20.jpg" width="21" height="180" border="0" alt="Navigations Bild"></td>
    <td><img src="images/global/spacer.gif" width="1" height="180" border="0" alt=""></td>
  </tr>
  <tr>
    <td colspan="2"><img name="main_r2_c1" src="images/global/main_r2_c1.jpg" width="26" height="8" border="0" alt="Navigations Bild"></td>
    <td colspan="2"><img name="main_r2_c3" src="images/global/main_r2_c3.jpg" width="151" height="8" border="0" alt="Navigations Bild"></td>
    <td colspan="2"><img name="main_r2_c5" src="images/global/main_r2_c5.jpg" width="46" height="8" border="0" alt="Navigations Bild"></td>
    <td colspan="12"><img name="main_r2_c7" src="images/global/main_r2_c7.jpg" width="529" height="8" border="0" alt="Navigations Bild"></td>
    <td><img name="main_r2_c19" src="images/global/main_r2_c19.jpg" width="7" height="8" border="0" alt="Navigations Bild"></td>
    <td><img name="main_r2_c20" src="images/global/main_r2_c20.jpg" width="21" height="8" border="0" alt="Navigations Bild"></td>
    <td><img src="images/global/spacer.gif" width="1" height="8" border="0" alt=""></td>
  </tr>
  <tr>
    <td colspan="2"><img name="main_r3_c1" src="images/global/main_r3_c1.jpg" width="26" height="14" border="0" alt="Navigations Bild"></td>
    <td colspan="2"><img name="main_r3_c3" src="images/global/main_r3_c3.jpg" width="151" height="14" border="0" alt="Navigations Bild"></td>
    <td colspan="2"><img name="main_r3_c5" src="images/global/main_r3_c5.jpg" width="46" height="14" border="0" alt="Navigations Bild"></td>
    <td><a href="#"><img name="main_r3_c7" src="images/global/main_r3_c7.jpg" width="62" height="14" border="0" alt="Navigations Bild"></a></td>
    <td><img name="main_r3_c8" src="images/global/main_r3_c8.jpg" width="5" height="14" border="0" alt="Navigations Bild"></td>
    <td><a href="#"><img name="main_r3_c9" src="images/global/main_r3_c9.jpg" width="85" height="14" border="0" alt="Navigations Bild"></a></td>
    <td><img name="main_r3_c10" src="images/global/main_r3_c10.jpg" width="5" height="14" border="0" alt="Navigations Bild"></td>
    <td><a href="#"><img name="main_r3_c11" src="images/global/main_r3_c11.jpg" width="95" height="14" border="0" alt="Navigations Bild"></a></td>
    <td><img name="main_r3_c12" src="images/global/main_r3_c12.jpg" width="5" height="14" border="0" alt="Navigations Bild"></td>
    <td colspan="2"><a href="#"><img name="main_r3_c13" src="images/global/main_r3_c13.jpg" width="95" height="14" border="0" alt="Navigations Bild"></a></td>
    <td><img name="main_r3_c15" src="images/global/main_r3_c15.jpg" width="5" height="14" border="0" alt="Navigations Bild"></td>
    <td><a href="#"><img name="main_r3_c16" src="images/global/main_r3_c16.jpg" width="85" height="14" border="0" alt="Navigations Bild"></a></td>
    <td><img name="main_r3_c17" src="images/global/main_r3_c17.jpg" width="5" height="14" border="0" alt="Navigations Bild"></td>
    <td><a href="#"><img name="main_r3_c18" src="images/global/main_r3_c18.jpg" width="82" height="14" border="0" alt="Navigations Bild"></a></td>
    <td><img name="main_r3_c19" src="images/global/main_r3_c19.jpg" width="7" height="14" border="0" alt="Navigations Bild"></td>
    <td><img name="main_r3_c20" src="images/global/main_r3_c20.jpg" width="21" height="14" border="0" alt="Navigations Bild"></td>
    <td><img src="images/global/spacer.gif" width="1" height="14" border="0" alt=""></td>
  </tr>
  <tr>
    <td colspan="2"><img name="main_r4_c1" src="images/global/main_r4_c1.jpg" width="26" height="12" border="0" alt="Navigations Bild"></td>
    <td colspan="2"><img name="main_r4_c3" src="images/global/main_r4_c3.jpg" width="151" height="12" border="0" alt="Navigations Bild"></td>
    <td colspan="2"><img name="main_r4_c5" src="images/global/main_r4_c5.jpg" width="46" height="12" border="0" alt="Navigations Bild"></td>
    <td colspan="12"><img name="main_r4_c7" src="images/global/main_r4_c7.jpg" width="529" height="12" border="0" alt="Navigations Bild"></td>
    <td><img name="main_r4_c19" src="images/global/main_r4_c19.jpg" width="7" height="12" border="0" alt="Navigations Bild"></td>
    <td><img name="main_r4_c20" src="images/global/main_r4_c20.jpg" width="21" height="12" border="0" alt="Navigations Bild"></td>
    <td><img src="images/global/spacer.gif" width="1" height="12" border="0" alt=""></td>
  </tr>
  <tr>
    <td colspan="19"><img name="main_r5_c1" src="images/global/main_r5_c1.jpg" width="759" height="22" border="0" alt="Navigations Bild"></td>
    <td><img name="main_r5_c20" src="images/global/main_r5_c20.jpg" width="21" height="22" border="0" alt="Navigations Bild"></td>
    <td><img src="images/global/spacer.gif" width="1" height="22" border="0" alt=""></td>
  </tr>
  <tr>
    <td colspan="5" background="images/global/main_r6_c1.jpg" style="height:24px; background-repeat:no-repeat">Link1&nbsp;</td>
    <td colspan="15" rowspan="10" align="left" valign="top">
	<!-- Main Inhalt -->
	Inhalt Zelle
	
	<!-- Main Inhalt Ende -->
    </td>
   <td style="height:24px; background-repeat:no-repeat"><img src="images/global/spacer.gif" width="1" height="24" border="0" alt=""></td>
  </tr>
  <tr>
    <td style="height:24px; background-repeat:no-repeat" colspan="5" background="images/global/main_r7_c1.jpg">Link2&nbsp;</td>
    <td style="height:24px; background-repeat:no-repeat"><img src="images/global/spacer.gif" width="1" height="24" border="0" alt=""></td>
  </tr>
  <tr>
    <td style="height:24px; background-repeat:no-repeat" colspan="5" background="images/global/main_r8_c1.jpg">Link3&nbsp;</td>
    <td style="height:24px; background-repeat:no-repeat"><img src="images/global/spacer.gif" width="1" height="24" border="0" alt=""></td>
  </tr>
  <tr>
    <td style="height:24px; background-repeat:no-repeat" colspan="5" background="images/global/main_r9_c1.jpg">Link4&nbsp;</td>
    <td style="height:24px; background-repeat:no-repeat"><img src="images/global/spacer.gif" width="1" height="24" border="0" alt=""></td>
  </tr>
  <tr>
    <td style="height:24px; background-repeat:no-repeat" colspan="5" background="images/global/main_r10_c1.jpg">Link5&nbsp;</td>
    <td style="height:24px; background-repeat:no-repeat"><img src="images/global/spacer.gif" width="1" height="24" border="0" alt=""></td>
  </tr>
  <tr>
    <td style="height:12px; background-repeat:no-repeat"><img name="main_r11_c1" src="images/global/main_r11_c1.jpg" width="24" height="12" border="0" alt="Navigations Bild"></td>
    <td style="height:12px; background-repeat:no-repeat" colspan="2"><img name="main_r11_c2" src="images/global/main_r11_c2.jpg" width="151" height="12" border="0" alt="Navigations Bild"></td>
    <td style="height:12px; background-repeat:no-repeat" colspan="2"><img name="main_r11_c4" src="images/global/main_r11_c4.jpg" width="25" height="12" border="0" alt="Navigations Bild"></td>
    <td style="height:12px; background-repeat:no-repeat"><img src="images/global/spacer.gif" width="1" height="12" border="0" alt=""></td>
  </tr>
  <tr>
    <td style="height:12px; background-repeat:no-repeat"><img name="main_r12_c1" src="images/global/main_r12_c1.jpg" width="24" height="12" border="0" alt="Navigations Bild"></td>
    <td style="height:12px; background-repeat:no-repeat" colspan="2"><a href="#"><img name="main_r12_c2" src="images/global/main_r12_c2.jpg" width="151" height="12" border="0" alt="Navigations Bild"></a></td>
    <td style="height:12px; background-repeat:no-repeat" colspan="2"><img name="main_r12_c4" src="images/global/main_r12_c4.jpg" width="25" height="12" border="0" alt="Navigations Bild"></td>
    <td style="height:12px; background-repeat:no-repeat"><img src="images/global/spacer.gif" width="1" height="12" border="0" alt=""></td>
  </tr>
  <tr>
    <td style="height:13px; background-repeat:no-repeat"><img name="main_r13_c1" src="images/global/main_r13_c1.jpg" width="24" height="13" border="0" alt="Navigations Bild"></td>
    <td style="height:13px; background-repeat:no-repeat" colspan="2"><img name="main_r13_c2" src="images/global/main_r13_c2.jpg" width="151" height="13" border="0" alt="Navigations Bild"></td>
    <td style="height:13px; background-repeat:no-repeat" colspan="2"><img name="main_r13_c4" src="images/global/main_r13_c4.jpg" width="25" height="13" border="0" alt="Navigations Bild"></td>
    <td style="height:13px; background-repeat:no-repeat"><img src="images/global/spacer.gif" width="1" height="13" border="0" alt=""></td>
  </tr>
  <tr>
    <td style="height:29px; background-repeat:no-repeat" colspan="5"><img name="main_r14_c1" src="images/global/main_r14_c1.jpg" width="200" height="29" border="0" alt="Navigations Bild"></td>
    <td style="height:29px; background-repeat:no-repeat"><img src="images/global/spacer.gif" width="1" height="29" border="0" alt=""></td>
  </tr>
  <tr>
    <td colspan="5" valign="top" background="images/global/main_r15_c1.jpg" style="background-repeat:repeat-y; height:auto">Zelle die Größe anpassen soll&nbsp;</td>
    <td><img src="images/global/spacer.gif" width="1" height="56" border="0" alt=""></td>
  </tr>
  <tr>
    <td colspan="5"><img name="main_r16_c1" src="images/global/main_r16_c1.jpg" width="200" height="45" border="0" alt="Navigations Bild"></td>
    <td colspan="8"><img name="main_r16_c6" src="images/global/main_r16_c6.jpg" width="296" height="45" border="0" alt="Navigations Bild"></td>
    <td colspan="6"><img name="main_r16_c14" src="images/global/main_r16_c14.jpg" width="263" height="45" border="0" alt="Navigations Bild"></td>
    <td><img name="main_r16_c20" src="images/global/main_r16_c20.jpg" width="21" height="45" border="0" alt="Navigations Bild"></td>
    <td><img src="images/global/spacer.gif" width="1" height="45" border="0" alt=""></td>
  </tr>
</table>

Gumbo · 15. November 2004

Ich geb dir einen Tipp: Lerne die Vorzüge tabellenlosen Layouts:

Warum Layout mit Tabellen dumm ist: Probleme definiert, Lösungen angeboten

Moan · 15. November 2004

Kannst du dein Problem vielleicht noch ein bisschen näher erläutern?

Ich weiß nicht ganz welche Zellen du mit

Die Zellen, in denen der Link und die Bilder drunter sind, sollen sich in der Höhe nicht ändern, die eine Zelle jedoch anpassen. ich habe es reingeschrieben.

meinst.

Vielleicht habe ich es ja verstanden: Pack dochmal dein ganzes Menu nocheinmal in ein eine Tabelle und gib innerhalb der Spalte valign='top' an.

Sorry, wenn ich dein Problem eventuell nicht ganz verstandne habe.

Greetz

djnelly · 15. November 2004

Code:

 <tr>
    <td colspan="5" background="images/global/main_r6_c1.jpg" style="height:24px; background-repeat:no-repeat">Link1&nbsp;</td>
    <td colspan="15" rowspan="10" align="left" valign="top">
	<!-- Main Inhalt -->
	Inhalt Zelle
	
	<!-- Main Inhalt Ende -->
    </td>
   <td style="height:24px; background-repeat:no-repeat"><img src="images/global/spacer.gif" width="1" height="24" border="0" alt=""></td>
  </tr>
  <tr>
    <td style="height:24px; background-repeat:no-repeat" colspan="5" background="images/global/main_r7_c1.jpg">Link2&nbsp;</td>
    <td style="height:24px; background-repeat:no-repeat"><img src="images/global/spacer.gif" width="1" height="24" border="0" alt=""></td>
  </tr>
  <tr>
    <td style="height:24px; background-repeat:no-repeat" colspan="5" background="images/global/main_r8_c1.jpg">Link3&nbsp;</td>
    <td style="height:24px; background-repeat:no-repeat"><img src="images/global/spacer.gif" width="1" height="24" border="0" alt=""></td>
  </tr>
  <tr>
    <td style="height:24px; background-repeat:no-repeat" colspan="5" background="images/global/main_r9_c1.jpg">Link4&nbsp;</td>
    <td style="height:24px; background-repeat:no-repeat"><img src="images/global/spacer.gif" width="1" height="24" border="0" alt=""></td>
  </tr>
  <tr>
    <td style="height:24px; background-repeat:no-repeat" colspan="5" background="images/global/main_r10_c1.jpg">Link5&nbsp;</td>
    <td style="height:24px; background-repeat:no-repeat"><img src="images/global/spacer.gif" width="1" height="24" border="0" alt=""></td>
  </tr>
  <tr>
    <td style="height:12px; background-repeat:no-repeat"><img name="main_r11_c1" src="images/global/main_r11_c1.jpg" width="24" height="12" border="0" alt="Navigations Bild"></td>
    <td style="height:12px; background-repeat:no-repeat" colspan="2"><img name="main_r11_c2" src="images/global/main_r11_c2.jpg" width="151" height="12" border="0" alt="Navigations Bild"></td>
    <td style="height:12px; background-repeat:no-repeat" colspan="2"><img name="main_r11_c4" src="images/global/main_r11_c4.jpg" width="25" height="12" border="0" alt="Navigations Bild"></td>
    <td style="height:12px; background-repeat:no-repeat"><img src="images/global/spacer.gif" width="1" height="12" border="0" alt=""></td>
  </tr>
  <tr>
    <td style="height:12px; background-repeat:no-repeat"><img name="main_r12_c1" src="images/global/main_r12_c1.jpg" width="24" height="12" border="0" alt="Navigations Bild"></td>
    <td style="height:12px; background-repeat:no-repeat" colspan="2"><a href="#"><img name="main_r12_c2" src="images/global/main_r12_c2.jpg" width="151" height="12" border="0" alt="Navigations Bild"></a></td>
    <td style="height:12px; background-repeat:no-repeat" colspan="2"><img name="main_r12_c4" src="images/global/main_r12_c4.jpg" width="25" height="12" border="0" alt="Navigations Bild"></td>
    <td style="height:12px; background-repeat:no-repeat"><img src="images/global/spacer.gif" width="1" height="12" border="0" alt=""></td>
  </tr>
  <tr>
    <td style="height:13px; background-repeat:no-repeat"><img name="main_r13_c1" src="images/global/main_r13_c1.jpg" width="24" height="13" border="0" alt="Navigations Bild"></td>
    <td style="height:13px; background-repeat:no-repeat" colspan="2"><img name="main_r13_c2" src="images/global/main_r13_c2.jpg" width="151" height="13" border="0" alt="Navigations Bild"></td>
    <td style="height:13px; background-repeat:no-repeat" colspan="2"><img name="main_r13_c4" src="images/global/main_r13_c4.jpg" width="25" height="13" border="0" alt="Navigations Bild"></td>
    <td style="height:13px; background-repeat:no-repeat"><img src="images/global/spacer.gif" width="1" height="13" border="0" alt=""></td>
  </tr>
  <tr>
    <td style="height:29px; background-repeat:no-repeat" colspan="5"><img name="main_r14_c1" src="images/global/main_r14_c1.jpg" width="200" height="29" border="0" alt="Navigations Bild"></td>
    <td style="height:29px; background-repeat:no-repeat"><img src="images/global/spacer.gif" width="1" height="29" border="0" alt=""></td>
  </tr>
  <tr>
    <td colspan="5" valign="top" background="images/global/main_r15_c1.jpg" style="background-repeat:repeat-y; height:auto">Zelle die Größe anpassen soll&nbsp;</td>
    <td><img src="images/global/spacer.gif" width="1" height="56" border="0" alt=""></td>
  </tr>

Das ist nur das Menü. ich kann dies nicht in eine extra tabelle schreiben, da der inhalt teile ebenfalls in einer <tr> ist. sieht man oben

REalSeramis · 16. November 2004

wäre mal nett, den link zum html-file zu posten

wieso brauchst du eigentlich die ganzen platzhalter ?

djnelly · 16. November 2004

Habe das Problem gelöst.

Hier der Code

Code:

<table style="width: 780px;" border="0" cellpadding="0" cellspacing="0">
  <tr valign="top">
    <!-- Navigationsspalte -->
    <td style="width: 200px; background-image:url(images/global/main_r13_c1.jpg); background-repeat:repeat-y">
      <!-- Navigationstabelle -->
      <table style="width: 200px;" border="0" cellpadding="0" cellspacing="0">
        <tr style="height:24px">
          <td height="24" background="images/global/main_r6_c1.jpg">&nbsp;</td>
        </tr>
		<tr style="height: 24px;">
          <td height="24" background="images/global/main_r7_c1.jpg">&nbsp;</td>
        </tr>
		<tr style="height: 24px;">
          <td height="24" background="images/global/main_r8_c1.jpg">&nbsp;</td>
        </tr>
		<tr style="height: 24px;">
          <td height="24" background="images/global/main_r9_c1.jpg">&nbsp;</td>
        </tr>
        <tr style="height: 24px;">
          <td height="24" background="images/global/main_r10_c1.jpg">&nbsp;</td>
        </tr>
		<tr style="height: 37px;">
          <td height="37"><img src="images/global/main_r11_c1.jpg" width="200" height="37"></td>
        </tr>
		<tr style="height: 29px;">
          <td height="29" background="images/global/main_r12_c1.jpg">&nbsp;</td>
        </tr>
      </table>
	  
    </td>
    <!-- Contentspalte -->
    <td colspan="3">
	<!-- Main Inhalt Anfang -->
	Inhalt
	<!-- Main Inhalt Ende -->
	</td>
  </tr>
  <tr valign="top">
    <td style="width: 200px;" width="200"><img src="images/global/main_r14_c1.jpg" width="200" height="45"></td>
    <td style="width: 296px;" width="296" height="45"><img src="images/global/main_r14_c4.jpg" width="296" height="45"></td>
    <td style="width: 263px;" width="263" height="45"><img src="images/global/main_r14_c12.jpg" width="263" height="45"></td>
    <td style="width: 21px;" width="21"><img src="images/global/main_r14_c18.jpg" width="21" height="45"></td>
  </tr>
</table>

Nach diesem Aufbau, bleiben die Menü Zellen gleich groß und die letzte zelle im menü passt sich dem inhalt aus content an.

Tabellenhöhe ändert sich mit Inhalt

djnelly

Erfahrenes Mitglied

Gumbo

Erfahrenes Mitglied

Moan

Mitglied

djnelly

Erfahrenes Mitglied

REalSeramis

Mitglied

djnelly

Erfahrenes Mitglied

Neue Beiträge