Tabellen-Problem

mhribernik · 23. Juli 2005

Hallo.

Ich bastle nun schon seit einiger Zeit am Menü für meine Homepage. Ich habs nun total überarbeitet. Doch irgendwo hat sich ein fehler eingeschlichen. Ich weiß nur nicht wo.
Wie Ihr sehen könnt, wird in der ersten Tabellen-Zeile zu viel Abstand nach unten gelassen. Doch ich hab nirgends Höhenangaben gemacht, oder ein   eingefügt.

Woran kann das liegen?

PS. Alles wurde per Hand getippt. Also FrontPage oder ähnliches hat den Code nie berührt.

mhribernik · 23. Juli 2005

Ah ja, hier der Code zur Seite:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Final//EN">
<html>
<!--
   HTML 4.01
   Document type as defined on http://www.w3.org/TR/REC-html32
-->
<head>
       <title>Title here!</title>
           <style type="text/css">
    <!--
    
    font.normal { color: #666666; }
    
    font.hover { color: #7F9BC3; }
    
    td.image_top { border-top: 1px solid #808080; 
				   border-right: 1px solid #808080;
				   border-bottom: 1px solid #808080; 
				   border-left: 1px solid #808080;
				 }
    
    td.first_empty { background-image: url(The_Banner_adds/Navi/Zw_01.jpg);
					 border-top: 1px solid #808080; 
					 border-right: none; 
					 border-bottom: 1px solid #808080; 
					 border-left: 1px solid #808080; 
					 width: 20px;
				   }
        
    td.last_empty { background-image: url(The_Banner_adds/Navi/Zw_01.jpg);
		            border-top: 1px solid #808080; 
					border-right: 1px solid #808080; 
					border-bottom: 1px solid #808080; 
					border-left: none;
					width: 20px; 
				  }
					
    td.empty { background-image: url(The_Banner_adds/Navi/Zw_01.jpg); 
	           border-top: 1px solid #808080; 
			   border-right: none; 
		   	   border-bottom: 1px solid #808080; 
			   border-left: none; 
			   width: 20px;
			 }
    
    td.long_empty { background-image: url(The_Banner_adds/Navi/Zw_01.jpg);
	 			    border-top: 1px solid #808080; 
			        border-right: none; 
		   	        border-bottom: 1px solid #808080; 
			        border-left: none; 
				  }
    
    td.startseite { background-image: url(The_Banner_adds/Navi/Zw_01.jpg);
		            border-top: 1px solid #808080; 
			        border-right: none; 
		   	        border-bottom: 1px solid #808080; 
			        border-left: none; 
					width: 64px; 
					text-align: center;
					font-family: Arial,Helvetica,sans-serif;
					font-size: 9pt;
					color: #666666;
					vertical-align: middle;
					font-weight:bold;
				  }
    
	td.cinema { background-image: url(The_Banner_adds/Navi/Zw_01.jpg);
		        border-top: 1px solid #808080; 
			    border-right: none; 
		   	    border-bottom: 1px solid #808080; 
			    border-left: none; 
				width: 69px; 
				text-align: center;
				font-family: Arial,Helvetica,sans-serif;
				font-size: 9pt;
				color: #666666;
				vertical-align: middle;
				font-weight:bold;
			  }
    
	td.tutorials { background-image: url(The_Banner_adds/Navi/Zw_01.jpg);
		           border-top: 1px solid #808080; 
			       border-right: none; 
		   	       border-bottom: 1px solid #808080; 
			       border-left: none; 
				   width: 59px;  
				   text-align: center;
				   font-family: Arial,Helvetica,sans-serif;
				   font-size: 9pt;
				   color: #666666;
				   vertical-align: middle;
				 }
    
	td.projekte { background-image: url(The_Banner_adds/Navi/Zw_01.jpg);
		          border-top: 1px solid #808080; 
			      border-right: none; 
		   	      border-bottom: 1px solid #808080; 
			      border-left: none; 
				  width: 56px; 
			      text-align: center;
			      font-family: Arial,Helvetica,sans-serif;
			      font-size: 9pt;
				  color: #666666;
				  vertical-align: middle;
			    }
    
	td.downloads { background-image: url(The_Banner_adds/Navi/Zw_01.jpg);
		           border-top: 1px solid #808080; 
			       border-right: none; 
		   	       border-bottom: 1px solid #808080; 
			       border-left: none; 
				   width: 64px;
				   text-align: center;
				   font-family: Arial,Helvetica,sans-serif;
				   font-size: 9pt;
				   color: #666666;
				   vertical-align: middle;
				 }
    
	td.gallery { background-image: url(The_Banner_adds/Navi/Zw_01.jpg);
		         border-top: 1px solid #808080; 
			     border-right: none; 
		   	     border-bottom: 1px solid #808080; 
			     border-left: none; 
				 width: 49px;
				 text-align: center;
				 font-family: Arial,Helvetica,sans-serif;
				 font-size: 9pt;
				 color: #666666;
				 vertical-align: middle;
			   }
    
	td.jihaski { background-image: url(The_Banner_adds/Navi/Zw_01.jpg);
		         border-top: 1px solid #808080; 
			     border-right: none; 
		   	     border-bottom: 1px solid #808080; 
			     border-left: none; 
				 width: 83px;
				 text-align: center;
				 font-family: Arial,Helvetica,sans-serif;
				 font-size: 9pt;
				 color: #666666;
				 vertical-align: middle;
			   }
    
	td.links { background-image: url(The_Banner_adds/Navi/Zw_01.jpg);
		       border-top: 1px solid #808080; 
		       border-right: none; 
	   	       border-bottom: 1px solid #808080; 
		       border-left: none; 
			   width: 39px;
			   text-align: center;
			   font-family: Arial,Helvetica,sans-serif;
			   font-size: 9pt;
			   color: #666666;
			   vertical-align: middle;
			 }
    
	td.abmelden { background-image: url(The_Banner_adds/Navi/Zw_01.jpg);
		          border-top: 1px solid #808080; 
			      border-right: none; 
		   	      border-bottom: 1px solid #808080; 
			      border-left: none; 
				  width: 65px; 
				  text-align: center;
				  font-family: Arial,Helvetica,sans-serif;
				  font-size: 9pt;
				  color: #666666;
				  vertical-align: middle;
				}
	
	td.anmelden { background-image: url(The_Banner_adds/Navi/Zw_01.jpg);
		          border-top: 1px solid #808080; 
			      border-right: none; 
		   	      border-bottom: 1px solid #808080; 
			      border-left: none; 
				  width: 65px;
				  text-align: center;
				  font-family: Arial,Helvetica,sans-serif;
				  font-size: 9pt;
				  color: #666666;
				  vertical-align: middle;
				}
				    
    -->
    </style>
</head>
<body>
<center>
    <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;" bordercolor="#808080" id="Navi" width="556">
		<tr>
			<td class="image_top" colspan="19">
				<img src="The_Banner_adds/Typewriter_with.jpg">
			</td>
		</tr>
		<tr>
			<td class="first_empty">
				&nbsp;
			</td>
			<td class="startseite">
				<a href="index.php" style="text-decoration:none">
				<font class="normal" onmouseover=this.className="hover" onmouseout=this.className="normal">
				<b>Startseite</b>
				</font>
				</a>
			</td>
			<td class="empty">
				&nbsp;
			</td>
			<td class="cinema">
				<a href="cinema.php" style="text-decoration:none">
				<font class="normal" onmouseover=this.className="hover" onmouseout=this.className="normal">
				Cinema 4D
				</font>
				</a>
			</td>
			<td class="empty">
				&nbsp;
			</td>
			<td class="tutorials">
				<a href="tutorials.php" style="text-decoration:none">
				<font class="normal" onmouseover=this.className="hover" onmouseout=this.className="normal">
				<b>Tutorials</b>
				</font>
				</a>
			</td>
			<td class="empty">
				&nbsp;
			</td>
			<td class="projekte">
				<a href="projekte.php" style="text-decoration:none">
				<font class="normal" onmouseover=this.className="hover" onmouseout=this.className="normal">
				<b>Projekte</b>
				</font>
				</a>
			</td>
			<td class="empty">
				&nbsp;
			</td>
			<td class="downloads">
				<a href="downloads.php" style="text-decoration:none">
				<font class="normal" onmouseover=this.className="hover" onmouseout=this.className="normal">
				<b>Download</b>
				</font>
				</a>
			</td>
			<td class="empty">
				&nbsp;
			</td>
			<td class="gallery">
				<a href="gallery.php" style="text-decoration:none">
				<font class="normal" onmouseover=this.className="hover" onmouseout=this.className="normal">
				<b>Gallery</b>
				</font>
				</a>
			</td>
			<td class="empty">
				&nbsp;
			</td>
			<td class="jihaski">
				<a href="jihaski_paski.php" style="text-decoration:none">
				<font class="normal" onmouseover=this.className="hover" onmouseout=this.className="normal">
				<b>Jihaski Paski</b>
				</font>
				</a>
			</td>
			<td class="empty">
				&nbsp;
			</td>
			<td class="links">
				<a href="links.php" style="text-decoration:none">
				<font class="normal" onmouseover=this.className="hover" onmouseout=this.className="normal">
				<b>Links</b>
				</font>
				</a>
			</td>
			<td class="long_empty">
				&nbsp;
			</td>
			<td class="abmelden">
				<a href="abmelden.php" style="text-decoration:none">
				<font class="normal" onmouseover=this.className="hover" onmouseout=this.className="normal">
				<b>Anmelden</b>
				</font>
				</a>
			</td>
			<td class="last_empty">
				&nbsp;
			</td>
		</tr>
</table>
</center>
</body>
</html>

Maik · 23. Juli 2005

Vermutlich liegt es an den Absätzen innerhalb der Tabellenzelle, die ein Leerzeichen / Abstand zum unteren Tabellenzellenrand erzeugen

HTML:

<td class="startseite">
                                <a href="index.php" style="text-decoration:none">
                                <font class="normal" onmouseover=this.className="hover" onmouseout=this.className="normal">
                                <b>Startseite</b>
                                </font>
                                </a>
                        </td>

So sollte der Abstand nach unten verschwinden:

HTML:

<td class="startseite"><a href="index.php" style="text-decoration:none"><font class="normal" onmouseover=this.className="hover" onmouseout=this.className="normal"><b>Startseite</b></font></a></td>

Anmerkung: Lese mal bitte meine erste Antwort in dem Thema CSS Befehle gesucht.

[ editpost 11:39 ]

Wenn du aber die Zelle .image_top meinst, dann solltest du das <img> -Element aus der Zelle entfernen und die Grafik mittels CSS als Hintergrundbild definieren:

Code:

td.image_top { border-top: 1px solid #808080;
                                   border-right: 1px solid #808080;
                                   border-bottom: 1px solid #808080;
                                   border-left: 1px solid #808080;
                                   background: url(The_Banner_adds/Typewriter_with.jpg) repeat;
                                 }

HTML:

<td class="image_top" colspan="19"></td>

mhribernik · 23. Juli 2005

Das hat nix gebracht:

HTML:

</head>
<body>
<center>
    <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;" bordercolor="#808080" id="Navi" width="556">
		<tr><td class="image_top" colspan="19" height="103"><img src="The_Banner_adds/Typewriter_with.jpg"></td></tr>
		<tr><td class="first_empty">&nbsp;</td>
		<td class="startseite"><a href="index.php" style="text-decoration:none"><font class="normal" onmouseover=this.className="hover" onmouseout=this.className="normal"><b>Startseite</b></font></a></td>
		<td class="empty">&nbsp;</td>
		<td class="cinema"><a href="cinema.php" style="text-decoration:none"><font class="normal" onmouseover=this.className="hover" onmouseout=this.className="normal">Cinema 4D</font></a></td>
		<td class="empty">&nbsp;</td>
		<td class="tutorials"><a href="tutorials.php" style="text-decoration:none"><font class="normal" onmouseover=this.className="hover" onmouseout=this.className="normal"><b>Tutorials</b></font></a></td>
		<td class="empty">&nbsp;</td>
		<td class="projekte"><a href="projekte.php" style="text-decoration:none"><font class="normal" onmouseover=this.className="hover" onmouseout=this.className="normal"><b>Projekte</b></font></a></td>
		<td class="empty">&nbsp;</td>
		<td class="downloads"><a href="downloads.php" style="text-decoration:none"><font class="normal" onmouseover=this.className="hover" onmouseout=this.className="normal"><b>Download</b></font></a></td>
		<td class="empty">&nbsp;</td>
		<td class="gallery"><a href="gallery.php" style="text-decoration:none"><font class="normal" onmouseover=this.className="hover" onmouseout=this.className="normal"><b>Gallery</b></font></a></td>
		<td class="empty">&nbsp;</td>
		<td class="jihaski"><a href="jihaski_paski.php" style="text-decoration:none"><font class="normal" onmouseover=this.className="hover" onmouseout=this.className="normal"><b>Jihaski Paski</b></font></a></td>
		<td class="empty">&nbsp;</td>
		<td class="links"><a href="links.php" style="text-decoration:none"><font class="normal" onmouseover=this.className="hover" onmouseout=this.className="normal"><b>Links</b></font></a></td>
		<td class="long_empty">&nbsp;</td>
		<td class="abmelden"><a href="abmelden.php" style="text-decoration:none"><font class="normal" onmouseover=this.className="hover" onmouseout=this.className="normal"><b>Anmelden</b></font></a></td>
		<td class="last_empty">&nbsp;</td></tr>
</table>
</center>
</body>
</html>

Ich werd noch verrückt.

Maik · 23. Juli 2005

Handelt es sich nicht um die Tabellenzelle image_top, mit der darin eingebetteten Grafik Typewriter_with.jpg, die einen Abstand zum unteren Rand erzeugt ?!

Wenn ja, dann lese dir bitte noch mal meinen [ edit ] vom letzten Posting durch ;-]
Wenn nein, dann weiss ich es auch nicht

Tabellen-Problem

mhribernik

Erfahrenes Mitglied

Anhänge

mhribernik

Erfahrenes Mitglied

Maik

mhribernik

Erfahrenes Mitglied

Maik

Neue Beiträge