Wirklich feste Tabellenhöhen

Status
Nicht offen für weitere Antworten.
D

djnelly

Erfahrenes Mitglied
Hallo..

ich habe folgendes Problem.
Ich habe ein Template aus einer Tabelle mit mehren Zellen drin.
In diesen Zellen habe ich geschnittene Bilder als Hintergrund. Um auf dem Bilder Text in die Zelle einfügen zu können.

Nun habe ich aber immer das Problem, dass trotz fester Angabe der Zellenhöhe die Zellen immer auseinandergezogen werden, wenn der Inhalt in der mittleren Zelle länger wird.

Ich habe mal ein Beispiel mit angehangen. Vielleicht kann einer helfen?

PS: Auf der linken Seite, welche das Menü wird, sind drei Zellen untereinander und in der Mitte, welche den Inhalt zeigt ist eine Zelle.

Nun sollen die zwei oberen Zellen des Menüs die Höhe behalten und nur die dritte Zelle die Höhe anpassen, wenn der Inhalt in der Inhaltzelle länger wird.


DANKE
 

Anhänge

  • zellen.rar
    552 Bytes · Aufrufe: 14
Hi,

Du könntest in die Zellen, die eine feste Höhe haben sollen, einen Div-Container
einfügen, der die Höhe und die Breite der Zelle besitzt. Weiterhin bekommt dieser
Container die CSS-Eigenschaft overflow: auto zugewiesen. Damit werden
Scrollbars angezeigt, wenn der Inhalt zu gross wird.
Code: 
<table>
    <tr style="height: 200px;">
        <td style="width: 200px;">
            <div style="height: 200px; width: 200px; overflow: auto;">Inhalt</div>
        </td>
    </tr>
</table>
Ciao
Quaese
 
Danke für die Antwort:


Wenn ich das richtig verstanden habe, füge ich die Zellen, bei denen der Zellraum gleich bleiben soll, diesen Container ein.
aber warum soll dann noch der style overflow:auto da rein? die Zelle soll doch nicht scrollbar sein, sondern einfach nur in der Größe bleiben...

Ich will aber keine zusätzlichen Scrollbalken in der Zelle.. die sind bereits am rand.. Die Zelle soll sich schon richtig ausdehnen.. Aber halt nur eine bestimmte Zelle vom Menü soll sie in der Höhe mit anpassen, die anderen nicht.

Vielleicht könntest du den html code mal so anpassen, wie du das meinst.
Wäre nett...


Gruß

Code: 
<table width="100%" border="0">
  <tr> 
    <td width="16%" height="20%">*</td>
    <td width="84%" rowspan="3">-</td>
  </tr>
  <tr> 
    <td width="16%" height="20%">*</td>
  </tr>
  <tr> 
    <td width="16%">
<p>+</p>
      <p>&nbsp;</p></td>
  </tr>
</table>
 
Zuletzt bearbeitet:
Hi,

sorry, da hatte ich Dein Problem zuerst wohl missverstanden.

Willst Du feste Höhen haben, so solltest Du auf prozentuale Angaben für die Höhe
verzichten, da sich diese Angabe auf die Höhe der Tabelle beziehen. Eine Änderung
der Höhe der Content-Zelle zieht eine Änderung der Tabellenhöhe und somit eine
Höhenänderung der Zellen mit sich, die eigentlich fest bleiben sollen.

Mein Vorschlag wäre folgender - die festen Höhenangaben (150px) kannst Du
selbstverständlich individuell anpassen:
Code: 
<table style="width: 100%;" border="0" cellpadding="0" cellspacing="0">
  <tr valign="top">
    <!-- Navigationsspalte -->
    <td style="width: 16%;">
      <!-- Navigationstabelle -->
      <table style="width: 100%;" border="0" cellpadding="0" cellspacing="0">
        <tr style="height: 150px;">
          <td>1. Zelle mit fester Höhe</td>
        </tr>
        <tr style="height: 150px;">
          <td>2. Zelle mit fester Höhe</td>
        </tr>
      </table>
      Zelle, die sich der Höhe der Content-Zelle anpasst
    </td>
    <!-- Contentspalte -->
    <td>
      ContentZelle
    </td>
  </tr>
</table>
Ciao
Quaese
 
Aha...

das ist genau das Problem, was ich hatte... net schlacht...

Aber warum klappt das bei diesem Code nicht so toll

Oder habe ich was falsch gemacht


Code: 
<div id="Layer1" style="position:absolute; width:905px; height:115px; z-index:1; left: 1px; top: 0px;">
  <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <!-- fwtable fwsrc="Unbenannt" fwbase="main.gif" fwstyle="Dreamweaver" fwdocid = "742308039" fwnested="0" -->
    <tr>
      <td><img src="images/layout/spacer.gif" width="18" height="1" border="0" alt=""></td>
      <td><img src="images/layout/spacer.gif" width="137" height="1" border="0" alt=""></td>
      <td><img src="images/layout/spacer.gif" width="361" height="1" border="0" alt=""></td>
      <td><img src="images/layout/spacer.gif" width="238" height="1" border="0" alt=""></td>
      <td><img src="images/layout/spacer.gif" width="270" height="1" border="0" alt=""></td>
      <td><img src="images/layout/spacer.gif" width="1" height="1" border="0" alt=""></td>
    </tr>
    <tr>
      <td width="18" height="405" rowspan="16" background="images/layout/main_r1_c1.gif">&nbsp;</td>
      <td colspan="2"><img name="main_r1_c2" src="images/layout/main_r1_c2.jpg" width="498" height="91" border="0" alt=""></td>
      <td><img name="main_r1_c4" src="images/layout/main_r1_c4.jpg" width="238" height="91" border="0" alt=""></td>
      <td width="260" height="405" rowspan="16" background="images/layout/main_r1_c5.jpg">&nbsp;</td>
      <td><img src="images/layout/spacer.gif" width="1" height="91" border="0" alt=""></td>
    </tr>
    <tr style="height:79px">
      <td width="137" background="images/layout/main_r2_c2.jpg"></td>
      <td height="484" colspan="2" rowspan="18" align="left" valign="top" background="images/layout/main_r2_c3.jpg">
      <div align="left">
	  <? 
	  if($page == "impressum") { include("seiten/impressum.php"); }
	  if($page == "impressum2") { include("seiten/impressum2.php"); }
	  if($page == "ueberuns") { include("seiten/ueberuns.php"); }
	  if($page == "standort") { include("seiten/standort.php"); }
	  if($page == "philosophie") { include("seiten/philosophie.php"); }
	  if($page == "produkte") { include("seiten/produkte.php"); }

	  ?>
      </div>
      </td>
      <td><img src="images/layout/spacer.gif" width="1" height="79" border="0" alt=""></td>
    </tr>
    <tr style="height:28px">
      <td width="137" height="28" background="images/layout/main_r3_c2.jpg"><span class="Stil11"><? echo $startseite?></span></td>
      <td><img src="images/layout/spacer.gif" width="1" height="24" border="0" alt=""></td>
    </tr>
    <tr>
      <td><img src="images/layout/main_r4_c2.jpg" alt="" name="main_r4_c2" width="137" height="4" border="0"></td>
      <td><img src="images/layout/spacer.gif" width="1" height="4" border="0" alt=""></td>
    </tr>
    <tr style="height:28px">
      <td width="137" height="28" background="images/layout/main_r5_c2.jpg"><span class="Stil11"><a href="#" onclick="show('sub_unt')"><? echo $unternehmen?></a>
	  </span>
        <div class="Stil11" id="sub_unt" style="display:none">
		  <div align="right"><br>
		  <a href="index.php?spr=<? echo $spr?>&page=ueberuns" class="Stil7"><? echo $ueberuns?></a><br><br>
		  <a href="index.php?spr=<? echo $spr?>&page=standort" class="Stil7"><? echo $standort?></a><br><br>
		  <a href="#" class="Stil7"><? echo $ansprechpartner?></a><br><br>
		  <a href="index.php?spr=<? echo $spr?>&page=philosophie" class="Stil7"><? echo $philosophie?></a><br><br>
	      </div>
        </div>
	  </td>
      <td><img src="images/layout/spacer.gif" width="1" height="23" border="0" alt=""></td>
    </tr>
    <tr>
      <td><img src="images/layout/main_r6_c2.jpg" alt="" name="main_r6_c2" width="137" height="4" border="0"></td>
      <td><img src="images/layout/spacer.gif" width="1" height="4" border="0" alt=""></td>
    </tr>
    <tr style="height:28px">
      <td width="137" height="28" background="images/layout/main_r7_c2.jpg"><span class="Stil11"><a href="#" onclick="show('sub_pro')"><? echo $produkte?></a>
	  	 </span>
        <div class="Stil11" id="sub_pro" style="display:none">
		  <div align="right"><br>
		  <a href="#" class="Stil7"><? echo $hausschuhe?></a><br><br>
		  <a href="#" class="Stil7"><? echo $automotive?></a><br><br>
	      </div>
        </div>
	  </td>
      <td><img src="images/layout/spacer.gif" width="1" height="25" border="0" alt=""></td>
    </tr>
    <tr>
      <td><img src="images/layout/main_r8_c2.jpg" alt="" name="main_r8_c2" width="137" height="4" border="0"></td>
      <td><img src="images/layout/spacer.gif" width="1" height="4" border="0" alt=""></td>
    </tr>
    <tr style="height:28px">
      <td width="137" height="28" background="images/layout/main_r9_c2.jpg"><span class="Stil11"><? echo $technik?></span></td>
      <td><img src="images/layout/spacer.gif" width="1" height="26" border="0" alt=""></td>
    </tr>
    <tr>
      <td><img src="images/layout/main_r10_c2.jpg" alt="" name="main_r10_c2" width="137" height="4" border="0"></td>
      <td><img src="images/layout/spacer.gif" width="1" height="4" border="0" alt=""></td>
    </tr>
    <tr style="height:28px">
      <td width="137" height="28" background="images/layout/main_r11_c2.jpg"><span class="Stil11"><? echo $shop?></span></td>
      <td><img src="images/layout/spacer.gif" width="1" height="28" border="0" alt=""></td>
    </tr>
    <tr>
      <td><img src="images/layout/main_r12_c2.jpg" alt="" name="main_r12_c2" width="137" height="4" border="0"></td>
      <td><img src="images/layout/spacer.gif" width="1" height="4" border="0" alt=""></td>
    </tr>
    <tr style="height:28px ">
      <td width="137" height="28" background="images/layout/main_r13_c2.jpg"><span class="Stil11"><a href="#" onclick="show('sub_ser')"><? echo $service?></a>
	  	</span>
        <div class="Stil11" id="sub_ser" style="display:none">
		  <div align="right"><br>
		  <a href="#" class="Stil7"><? echo $beratung?></a><br><br>
		  <a href="#" class="Stil7"><? echo $lieferung?></a><br><br>
		  <a href="#" class="Stil7"><? echo $faq?></a><br><br>
	      </div>
        </div>
	  </td>
      <td><img src="images/layout/spacer.gif" width="1" height="29" border="0" alt=""></td>
    </tr>
    <tr>
      <td><img src="images/layout/main_r14_c2.jpg" alt="" name="main_r14_c2" width="137" height="4" border="0"></td>
      <td><img src="images/layout/spacer.gif" width="1" height="4" border="0" alt=""></td>
    </tr>
    <tr style="height:28px ">
      <td width="137" height="28" background="images/layout/main_r15_c2.jpg"><span class="text"><a href="index.php?spr=<? echo $spr?>&page=impressum"><? echo $impressum?></a></span></td>
      <td><img src="images/layout/spacer.gif" width="1" height="26" border="0" alt=""></td>
    </tr>
    <tr style="height:30px ">
      <td width="137" height="30" background="images/layout/main_r16_c2.jpg">&nbsp;</td>
      <td><img src="images/layout/spacer.gif" width="1" height="30" border="0" alt=""></td>
    </tr>
    <tr style="height:106px ">
      <td width="18" height="170" rowspan="3" background="images/layout/main_r17_c1.jpg">&nbsp;</td>
      <td width="137" height="106" background="images/layout/main_r17_c2.jpg"><p>&nbsp;</p>
	  	  <?
	  if($spr == "german") { $spr_lang = "english"; $flagge = "flagge_en.jpg"; $language = "English Version";}
	  if($spr == "english") { $spr_lang = "german"; $flagge = "flagge_dt.jpg"; $language = "Deutsche Version";}
	  ?>
      <p><img src="images/layout/<? echo $flagge?>" width="35" height="17"> <span class="Stil9">
	  <a href="index.php?spr=<? echo $spr_lang?>&page=<? echo $page?>"><? echo $language?></a></span> </p></td>
      <td width="270" height="170" rowspan="3" background="images/layout/main_r17_c5.jpg">&nbsp;</td>
      <td><img src="images/layout/spacer.gif" width="1" height="106" border="0" alt=""></td>
    </tr>
    <tr style="height:34px ">
      <td width="137" height="34" background="images/layout/main_r18_c2.jpg">&nbsp;</td>
      <td><img src="images/layout/spacer.gif" width="1" height="34" border="0" alt=""></td>
    </tr>
    <tr>
      <td width="137" background="images/layout/main_r19_c2.jpg"><p>&nbsp;</p></td>
      <td><img src="images/layout/spacer.gif" width="1" height="30" border="0" alt=""></td>
    </tr>
  </table>
</div>
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück