Zum Inhalt springen

Tabelle zappelt

Erstellt am 24. Mai 2004 · 7 Antworten · letzte Antwort am 25. Mai 2004

Tags: HTML & CSS, Frage

TW ·

hi
schau mal dein html template nach, da is der fehler drinnen

cu
thorsten

Tiuri ·

Eindeutig Dein Template. Versuche mal, alles in eine große Tabelle zu bauen, eine zweite eingeschachtelte maximal noch für das genaue Ausrichten der Menüs zu nutzen.

Wenn Du dann mit Hilfe von Grafiken (zur Not Blindgifs) die Größe der Feststehenden Breiten bzw. Höhen definierst und die variablen Zellenbreiten und Höhen jeweils mit 100% angibst, kriegst Du das was Du willst - und sogar noch mehr, letztendlich kannst Du die Seite immer dem Bild anpassen. Schau Dir mal www.zappasys.de an, ist zwar hässlich ;-) , aber ändere mal die Größe des Browserfensters - die Ränder bleiben identisch. Ebenso beil allen Menüpunkten.

Erfordert ein Stück Übung und fürs Schnellmachen dann Erfahrung, sieht aber letztendlich oft ganz gut aus.

Tiuri

PS: Sehe gerade, die Seite ist mit Frames gebaut ..... ist aber das gleiche Prinzip ... Irgendwo gabs doch noch eine Tabellenversion als Test ....... (Die wegen dem Textscrollen nicht genommen wurde)

johanness ·

Hi! Danke für die Hilfe. Aner ich weiß leide nicht so ganz was ich jetzt ändern soll.

Vielleicht soll ich ja mal die main.html posten, von der aus alles ausgeht:

<html>
<head>
<title>Creative Copenhagen</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<!-- ###HEADER_DATA### begin-->
<style type="text/css">

:link {text-decoration: none ;color: #006699;}
:visited {text-decoration: none ;color: #006699;}
:active {text-decoration: none ;color: #006699;}
:hover {text-decoration: underline ;color: #000000;}

</style>
<!-- ###HEADER_DATA### end -->

</head>

<body bgcolor="#D6D3CE" text="#333333" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" link="#006699" vlink="#006699" alink="#006699">
<!-- ###DOCUMENT_BODY### start-->
<table width="778" height="100%" border="0" bgcolor="#FFFFFF" cellspacing="0" cellpadding="0" align="center">
  <tr> 
    <td align="left" valign="top" rowspan="3"> 
      <table width="1" border="0" cellpadding="0" cellspacing="0">
        <tr valign="middle"> 
          <td height="22" colspan="2" align="center"><img height="150" src="media/uploads/crcph/logo.gif" width="150" border="0" alt="" /></td>
        </tr>
        <tr valign="middle" bgcolor="#CEDBDE"> 
          <td height="10" colspan="2" align="center"><img src="clear.gif" width="10" height="10" alt="" /></td>
        </tr>

	<!-- ###SUB_MENU### start
		This surrounds all the menuitems, substituted with the dynamic menu
	-->

	<!-- ###SUB_MENU_ITEM### begin
		This is a single menu item
	 -->
        <tr> 
          <td height="25" align="right"><font face="Verdana, Arial, Helvetica, sans-serif" size="1"><!--###LINK###-->###MENU_TITLE###<!--###LINK###--></font></td>
          <td height="25" align="right" width="10"><img src="media/uploads/crcph/pil.gif" width="3" height="5" alt="" /></td>
        </tr>
        <tr bgcolor="#D6D3CE"> 
          <td colspan="2" align="right"><img src="clear.gif" width="1" height="1" alt="" /></td>
        </tr>
	<!-- ###SUB_MENU_ITEM### end -->
	<!-- ###SUB_MENU_ITEM_ACT### begin
		This is a single menu item, active mode
	 -->
        <tr> 
          <td height="25" align="right"><font face="Verdana, Arial, Helvetica, sans-serif" size="1"><!--###LINK###--><strong>###MENU_TITLE###</strong><!--###LINK###--></font></td>
          <td height="25" align="right" width="10"><img src="media/uploads/crcph/pil.gif" width="3" height="5" alt="" /></td>
        </tr>
        <tr bgcolor="#D6D3CE"> 
          <td colspan="2" align="right"><img src="clear.gif" width="1" height="1" alt="" /></td>
        </tr>
	<!-- ###SUB_MENU_ITEM_ACT### end -->

        <tr> 
          <td height="25" align="right"><font face="Verdana, Arial, Helvetica, sans-serif" size="1"><a href="nyheder.html">Nyheder</a></font></td>
          <td height="25" align="right" width="10"><img src="media/uploads/crcph/pil.gif" width="3" height="5" alt="" /></td>
        </tr>
        <tr bgcolor="#D6D3CE"> 
          <td colspan="2" align="right"><img src="clear.gif" width="1" height="1" alt="" /></td>
        </tr>
        <tr> 
          <td height="25" align="right"><font face="Verdana, Arial, Helvetica, sans-serif" size="1"><a href="arrangementer.html">Arrangementer</a></font></td>
          <td height="25" align="right" width="10"><img src="media/uploads/crcph/pil.gif" width="3" height="5" alt="" /></td>
        </tr>
        <tr bgcolor="#D6D3CE"> 
          <td colspan="2" align="right"><img src="clear.gif" width="1" height="1" alt="" /></td>
        </tr>
        <tr> 
          <td height="25" align="right"><font face="Verdana, Arial, Helvetica, sans-serif" size="1"><a href="profiler.html">Profiler</a></font></td>
          <td height="25" align="right" width="10"><img src="media/uploads/crcph/pil.gif" width="3" height="5" alt="" /></td>
        </tr>
        <tr bgcolor="#D6D3CE"> 
          <td colspan="2" align="right"><img src="clear.gif" width="1" height="1" alt="" /></td>
        </tr>
        <tr> 
          <td height="25" align="right"><font face="Verdana, Arial, Helvetica, sans-serif" size="1" alt="" /><a href="nn">Forum</a></font></td>
          <td height="25" align="right" width="10"><img src="media/uploads/crcph/pil.gif" width="3" height="5" alt="" /></td>
        </tr>
        <tr bgcolor="#D6D3CE"> 
          <td colspan="2" align="right"><img src="clear.gif" width="1" height="1" alt="" /></td>
        </tr>
        <tr> 
          <td height="25" align="right"><font face="Verdana, Arial, Helvetica, sans-serif" size="1"><a href="information.html">Information</a></font></td>
          <td height="25" align="right" width="10"><img src="media/uploads/crcph/pil.gif" width="3" height="5" alt="" /></td>
        </tr>
        <tr bgcolor="#D6D3CE"> 
          <td colspan="2" align="right"><img src="clear.gif" width="1" height="1" alt="" /></td>
        </tr>

	<!-- ###SUB_MENU### end -->

      </table>
    </td>
    <td align="center" valign="center" bgcolor="#CEDBDE" height="1">Some pictures will use as haeder here!</td>
    <td align="center" valign="top" bgcolor="#CEDBDE" height="1"> 
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <td align="center" width="100"> 
            <table width="59%" border="0" cellpadding="0">
              <tr> 
                <td align="center"><font face="Verdana, Arial, Helvetica, sans-serif" color="#FFFFFF" size="1"><a href="index.php?id=123"><img src="media/uploads/crcph/home.gif" width="15" height="13" border="0" alt="" /></a></font></td>
                <td align="center"><font face="Verdana, Arial, Helvetica, sans-serif" color="#FFFFFF" size="1"><a href="index.php?id=123">Front page and some bodytext using fo nothing</a></font></td>
              </tr>
            </table>
          </td>
          <td bgcolor="#FFFFFF" width="1"><img src="clear.gif" width="1" height="1" alt="" /></td>
            <td align="center" width="100" valign="middle" height="1"> 
            </td>
          </tr>
      </table>
    </td>
  </tr>
  <tr> 
    <td align="center" valign="top" bgcolor="#FFFFFF" height="1"><img src="clear.gif" width="448" height="1" alt="" /></td>
    <td align="center" valign="top" bgcolor="#FFFFFF" height="1"><img src="clear.gif" width="180" height="1" alt="" /></td>
  </tr>
  <tr> 
    <td align="center" valign="top" height="100%"> <br />


      <table width="90%" border="0" cellspacing="2" cellpadding="2">
        <tr>
          <td valign="top"> 
            <!-- ###SUB_CONTENT### start
	
	This indicates the main content area
	
	-->
            <!-- ###SUB_HEADER1### 
	
	This is the layout of header type 1
	
	-->
            <table width="100%" border="0" cellspacing="2" cellpadding="0">
        <tr> 
          <td><font face="Verdana, Arial, Helvetica, sans-serif" size="3" color="#999999">###MARK_HEADER###</font></td>
        </tr>
        <tr> 
          <td bgcolor="#D6D3CE"><img src="clear.gif" width="1" height="1" alt="" /></td>
        </tr>
        <tr> 
          <td bgcolor="#D6D3CE"><img src="clear.gif" width="1" height="1" alt="" /></td>
        </tr>
        <tr> 
          <td bgcolor="#D6D3CE"><img src="clear.gif" width="1" height="1" alt="" /></td>
        </tr>
      </table>
	<!-- ###SUB_HEADER1### -->

	  
		<!-- ###SUB_CONTENT### end -->
</td></tr></table>

    </td>
    <td align="center" valign="top" bgcolor="#E7EBEF" height="100%"> <br />
      <table width="90%" border="0" cellspacing="2" cellpadding="2">
        <tr>
          <td valign="top"> 
            <!-- ###SUB_CONTENT_MARGIN### begin 
	
		Secondary content...
		
	-->
            <!-- ###SUB_HEADER2### 
	
	This is the layout of header type 2
	
	-->
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr > 
          <td><font size="1" face="Verdana, Arial, Helvetica, sans-serif"><b>###MARK_HEADER###</b></font></td>
        </tr>
        <tr> 
                <td><img src="clear.gif" width="1" height="4" alt="" /></td>
        </tr>
        <tr> 
                <td bgcolor="#B5BECE"><img src="clear.gif" width="1" height="1" alt="" /></td>
        </tr>
        <tr> 
                <td><img src="clear.gif" width="1" height="4" alt="" /></td>
        </tr>
      </table>
	<!-- ###SUB_HEADER2### -->


	<!-- ###SUB_L2MENU### start	-->
            <table width="100%" border="0" cellspacing="2" cellpadding="2">
              <!-- ###SUB_L2MENU_ALLITEMS### start	-->
              <!-- ###SUB_L2MENU_ITEM### start	-->
              <tr> 
          <td valign="top"><img src="media/uploads/crcph/pil2.gif" width="3" height="9" alt="" /></td>
          <td valign="top" align="left"><font face="Verdana, Arial, Helvetica, sans-serif" size="1"><!--###LINK###-->###MENU_TITLE###<!--###LINK###--></font></td>
        </tr>
			<!-- ###SUB_L2MENU_ITEM### end	-->
			<!-- ###SUB_L2MENU_ITEM_ACT### start	-->
	     <tr> 
          <td valign="top"><img src="media/uploads/crcph/pil2.gif" width="3" height="9" alt="" /></td>
          <td valign="top" align="left"><font face="Verdana, Arial, Helvetica, sans-serif" size="1"><!--###LINK###--><strong>###MENU_TITLE###</strong><!--###LINK###--></font></td>
        </tr>
			<!-- ###SUB_L2MENU_ITEM_ACT### end	-->
        <tr> 
          <td valign="top"><img src="media/uploads/crcph/pil2.gif" width="3" height="9" alt="" /></td>
          <td valign="top" align="left"><font face="Verdana, Arial, Helvetica, sans-serif" size="1"><a href="ghj">Investorer</a></font></td>
        </tr>
        <tr> 
          <td valign="top"><img src="media/uploads/crcph/pil2" width="3" height="9" alt="" /></td>
          <td valign="top" align="left"><font face="Verdana, Arial, Helvetica, sans-serif" size="1"><a href="ghj">R&aring;dgivere 
            og andre</a></font></td>
        </tr>
        <tr> 
          <td valign="top"><img src="media/uploads/crcph/pil2.gif" width="3" height="9" alt="" /></td>
          <td valign="top" align="left"><font size="1" face="Verdana, Arial, Helvetica, sans-serif"><a href="jj">Etableret 
            virksomhed</a></font></td>
        </tr>
        <tr> 
          <td valign="top"><img src="media/uploads/crcph/pil2.gif" width="3" height="9" alt="" /></td>
          <td valign="top" align="left"><font size="1" face="Verdana, Arial, Helvetica, sans-serif"><a href="add_profil.htm">Tilf&oslash;j 
            profil</a></font></td>
        </tr>
		<!-- ###SUB_L2MENU_ALLITEMS### end -->
      </table>
	<!-- ###SUB_L2MENU### end -->




	<!-- ###SUB_CONTENT_MARGIN### end -->
</td></tr></table>
    </td>
  </tr>
  <tr> 
    <td align="center"><font face="Verdana, Arial, Helvetica, sans-serif" size="1"><a href="#top">Top top</a></font> <img src="media/uploads/crcph/toparrow.gif" width="7" height="11" alt="" /></td>
    <td align="center"><font face="Verdana, Arial, Helvetica, sans-serif" size="1" color="#999999">&copy; </font><a href="http://www.fotoscherg.de.tf" target="_blank"><font face="Verdana, Arial, Helvetica, sans-serif" size="1" color="#999999">by Johannes Scherg</font></a></td>
    <td align="center" valign="top" bgcolor="#E7EBEF">&nbsp;</td>
  </tr>
</table>
<br />


<!-- ###DOCUMENT_BODY### end -->

</body>
</html>
TW ·

hi
also es liegt definitv an deinem html template....
habs mir gerade mal angeschaut und eines muss ich sagen:
das is HTML FROM HELL!

das du dabei, so wie deine tabelle angelgt ist nicht noch mehr probleme bekommst wundert mich eigentlich........

das soll hier jetzt nicht klingen, als wäre ich der klugscheisser schlechthin, aber mit so nem html gerüst, kann man einfiach nicht gut arbeiten!

sorry, ich hätts auch korregiert, aber so nicht, da müsste ich alles neu machen und dazu habe ich keine zeit......

vielleicht is ja jemand hier der das mal eben machen kann....
aber schönes html gerade als template für ein cms sieht echt anders aus...

versteh das mal bitte als konstruktive kritik!
ich muss hier in der firma auch mit dem müll meiner vorgänger betreffs schlechter HTML vorlagen fertig werden und es nervt!

cu
thorsten

johanness ·

Das ist eigenlitch nur das Standart-Template CrChp. Ich habe lediglich paar Kleinigkeiten abgeändert.

Von den Einzügen in der verschiedenen Zeilen, also der Formatierung, mal abgesehen - was muss ich an so einem Code ändern? Kann mir das vielleicht jemand machen?

johanness ·

Ich hab den Code jetzt etwas umgeschrieben. Ist das besser so, oder kann man noch mehr kürzen und so???

<html>
<head>
<title>1. ISC Reichertshausen</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ###HEADER_DATA### begin-->
<!-- ###HEADER_DATA### end -->
</head>

<body bgcolor="#D6D3CE" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ###DOCUMENT_BODY### start-->
<table width="778" height="100%" border="0" bgcolor="#FFFFFF" cellspacing="0" cellpadding="0" align="center">
  <tr> 
    <td align="left" valign="top" rowspan="3"> 
      <table width="1" border="0" cellpadding="0" cellspacing="0">
        <tr valign="middle"> 
          <td height="22" colspan="2" align="center"><img height="150" src="media/uploads/crcph/logo.gif" width="150" border="0" alt="" /></td>
        </tr>
        <tr valign="middle" bgcolor="#CEDBDE"> 
          <td height="10" colspan="2" align="center"><img src="clear.gif" width="10" height="10" alt="" /></td>
        </tr>

	<!-- ###SUB_MENU### start
		This surrounds all the menuitems, substituted with the dynamic menu-->

	<!-- ###SUB_MENU_ITEM### begin
		This is a single menu item -->
        <tr> 
          <td height="25" align="right"><font face="Verdana, Arial, Helvetica, sans-serif" size="1"><!--###LINK###-->###MENU_TITLE###<!--###LINK###--></font></td>
          <td height="25" align="right" width="10"><img src="media/uploads/crcph/pil.gif" width="3" height="5" alt="" /></td>
        </tr>
        <tr bgcolor="#D6D3CE"> 
          <td colspan="2" align="right"><img src="clear.gif" width="1" height="1" alt="" /></td>
        </tr>
	<!-- ###SUB_MENU_ITEM### end -->
	
	<!-- ###SUB_MENU_ITEM_ACT### begin 
		This is a single menu item, active mode -->
        <tr> 
          <td height="25" align="right"><font face="Verdana, Arial, Helvetica, sans-serif" size="1"><!--###LINK###--><strong>###MENU_TITLE###</strong><!--###LINK###--></font></td>
          <td height="25" align="right" width="10"><img src="media/uploads/crcph/pil.gif" width="3" height="5" alt="" /></td>
        </tr>
        <tr bgcolor="#D6D3CE"> 
          <td colspan="2" align="right"><img src="clear.gif" width="1" height="1" alt="" /></td>
        </tr>
	<!-- ###SUB_MENU_ITEM_ACT### end -->

	<!-- ###SUB_MENU### end -->

      </table>
    </td>
    <td align="center" valign="center" bgcolor="#CEDBDE" height="1">Some pictures will use as haeder here!</td>
    <td align="center" valign="top" bgcolor="#CEDBDE" height="1">Some<br> pictures<br> will<br> use as<br> haeder<br> here!</td>
  </tr>
  <tr> 
    <td align="center" valign="top" bgcolor="#FFFFFF" height="1"><img src="clear.gif" width="448" height="1" alt="" /></td>
    <td align="center" valign="top" bgcolor="#FFFFFF" height="1"><img src="clear.gif" width="180" height="1" alt="" /></td>
  </tr>
  <tr> 
    <td align="center" valign="top" height="100%"> <br />


      <table width="90%" border="0" cellspacing="2" cellpadding="2">
        <tr>
          <td valign="top"> 
    <!-- ###SUB_CONTENT### start	
	This indicates the main content area-->

	    <!-- ###SUB_HEADER1### 
		This is the layout of header type 1-->
		<table width="100%" border="0" cellspacing="2" cellpadding="0">
		  <tr> 
			<td><font face="Verdana, Arial, Helvetica, sans-serif" size="3" color="#999999">###MARK_HEADER###</font></td>
		  </tr>
		</table>
		<!-- ###SUB_HEADER1### -->

	<!-- ###SUB_CONTENT### end -->
</td></tr></table>


    </td>
    <td align="center" valign="top" bgcolor="#E7EBEF" height="100%"> <br />
      <table width="90%" border="0" cellspacing="2" cellpadding="2">
        <tr>
          <td valign="top"> 
	<!-- ###SUB_CONTENT_MARGIN### begin 	
		Secondary content...-->

    <!-- ###SUB_HEADER2### 
		This is the layout of header type 2-->
			<table width="100%" border="0" cellspacing="0" cellpadding="0">
	        	<tr > 
    		      <td><font size="1" face="Verdana, Arial, Helvetica, sans-serif"><b>###MARK_HEADER###</b></font></td>
	        	</tr>
			</table>
	<!-- ###SUB_HEADER2### -->


	<!-- ###SUB_L2MENU### start	-->
			<table width="100%" border="0" cellspacing="2" cellpadding="2">
			<!-- ###SUB_L2MENU_ALLITEMS### start-->
			
				<!-- ###SUB_L2MENU_ITEM### start-->
	        	<tr> 
    		      <td valign="top"><img src="media/uploads/crcph/pil2.gif" width="3" height="9" alt="" /></td>
	        	  <td valign="top" align="left"><font face="Verdana, Arial, Helvetica, sans-serif" size="1"><!--###LINK###-->###MENU_TITLE###<!--###LINK###--></font></td>
	    	    </tr>
				<!-- ###SUB_L2MENU_ITEM### end-->
				<!-- ###SUB_L2MENU_ITEM_ACT### start-->
		    	 <tr> 
    		      <td valign="top"><img src="media/uploads/crcph/pil2.gif" width="3" height="9" alt="" /></td>
	        	  <td valign="top" align="left"><font face="Verdana, Arial, Helvetica, sans-serif" size="1"><!--###LINK###--><strong>###MENU_TITLE###</strong><!--###LINK###--></font></td>
	        	</tr>
				<!-- ###SUB_L2MENU_ITEM_ACT### end-->
		
			<!-- ###SUB_L2MENU_ALLITEMS### end -->
			</table>
		<!-- ###SUB_L2MENU### end -->


	<!-- ###SUB_CONTENT_MARGIN### end -->
	</td></tr></table>

    </td>
  </tr>
  <tr> 
    <td align="center"><font face="Verdana, Arial, Helvetica, sans-serif" size="1"><a href="#top">Top top</a></font> <img src="media/uploads/crcph/toparrow.gif" width="7" height="11" alt="" /></td>
    <td align="center"><font face="Verdana, Arial, Helvetica, sans-serif" size="1" color="#999999">&copy; </font><a href="http://www.fotoscherg.de.tf" target="_blank"><font face="Verdana, Arial, Helvetica, sans-serif" size="1" color="#999999">by Johannes Scherg</font></a></td>
    <td align="center" valign="top" bgcolor="#E7EBEF">&nbsp;</td>
  </tr>
</table>


<!-- ###DOCUMENT_BODY### end -->

</body>
</html>
Tiuri ·

sieht erst mal besser aus. Tausch mal bitte aus und probiere (u.a. deshalb hab ich mich in T3 verliebt ;-) ).

Bei mir ist da jetzt eine Leerzeile zu viel drin unter dem Kopf. Stimmt da nur die Farbe nicht? Ansonsten könnte man diese auch mit Hilfe von rowspans rausnehmen.

Tiuri