Hi ihr,
ich hoffe, ihr könnt mir helfen - ich steht gerade etwas auf dem Schlauch.
Ich habe eine Tabelle mit zwei Spalten, die 100% der Seitenhöhe ausfüllen soll.
Darin habe ich mehrere Zellen definiert, davon soll die erste Zelle das Logo (genau 186 pixel hoch) enthalten, die zweite Zeile das Menü, und der Rest dann den Seiteninhalt. Dieser enthält nochmals eine Tabelle.
Nun habe ich das Prob, dass die erse (Logo)-Zeile immer dann zu groß angezeigt wird, wenn die Seite nicht ganz 'gefüllt' ist. Sprich, bei den Seiten mit Text, der länger als der angezeigte Bildschirm ist, wird die erste Zeile korrekt angezeigt: die erste Zeile ist so hoch wie das Logo.
Ist aber der Seiteninhalt kleiner als der Bildschirm, dann wird die Tabelle an sich irgendwie 'zentriert' und die erste Zeile größer dargestellt, also oben das Logo und darunter dann Leerraum.
Ich hab schon ewig rumprobiert und gesucht, finde aber keine Lösung für das Problem. Vielleicht habt ihr einen Tipp?
Viele Grüße
Jacky
Hier noch der Code:
Datei index.html
und hier die dazugehörige CSS-Datei mm.css
ich hoffe, ihr könnt mir helfen - ich steht gerade etwas auf dem Schlauch.
Ich habe eine Tabelle mit zwei Spalten, die 100% der Seitenhöhe ausfüllen soll.
Darin habe ich mehrere Zellen definiert, davon soll die erste Zelle das Logo (genau 186 pixel hoch) enthalten, die zweite Zeile das Menü, und der Rest dann den Seiteninhalt. Dieser enthält nochmals eine Tabelle.
Nun habe ich das Prob, dass die erse (Logo)-Zeile immer dann zu groß angezeigt wird, wenn die Seite nicht ganz 'gefüllt' ist. Sprich, bei den Seiten mit Text, der länger als der angezeigte Bildschirm ist, wird die erste Zeile korrekt angezeigt: die erste Zeile ist so hoch wie das Logo.
Ist aber der Seiteninhalt kleiner als der Bildschirm, dann wird die Tabelle an sich irgendwie 'zentriert' und die erste Zeile größer dargestellt, also oben das Logo und darunter dann Leerraum.
Ich hab schon ewig rumprobiert und gesucht, finde aber keine Lösung für das Problem. Vielleicht habt ihr einen Tipp?
Viele Grüße
Jacky
Hier noch der Code:
Datei index.html
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="mm.css" type="text/css" />
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr >
<td width="678" nowrap="nowrap" bgcolor="#DEDEDE" height="10">
<img src="images/titel_links.jpg" alt="" width="678" height="186"/></a><br />
</td>
<td bgcolor="#C2C2C2" align="left" height="86">
<img src="images/titel_rechts.jpg" alt="" width="343" height="186"/>
</td>
</tr>
<tr bgcolor="#ffffff">
<td colspan="2"><img src="mm_spacer.gif" alt="" width="1" height="1" border="0" /></td>
</tr>
<tr bgcolor="#a4c2c2">
<td width="678" height="16" bgcolor="#C2C2C2" class="navText" id="navigation" align="left" valign="top">
<img src="images/break.gif" alt=""/><a href="index.html">Home</a>
<img src="images/break.gif" alt=""/><a href="kontakt.html">Kontakt</a>
</td>
<td bgcolor="#A9A9A9"> </td>
</tr>
<tr bgcolor="#ffffff">
<td colspan="2"><img src="mm_spacer.gif" alt="" width="1" height="1" border="0" /></td>
</tr>
<tr bgcolor="#ffffff">
<td colspan="2"><img src="mm_spacer.gif" alt="" width="1" height="1" border="0" /></td>
</tr>
<tr>
<td width="678" bgcolor="#ffffff"><br />
<table border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td colspan="2" class="pageName"><span class="pageName">
HOME
----snip---- Hier kommt der Seiteninhalt ----snip----
</span></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>und hier die dazugehörige CSS-Datei mm.css
Code:
body {
margin:0px;
height: 100%;
background-color: #FFFFFF;
}
html {
height: 100%;
}
table {
height:100%;
vertical-align: top;
margin-left: 0px;
}
td {
color:#333333;
font-family: arial;
font-size: 12px;
vertical-align: top;
line-height: normal;
}
tr {
vertical-align: top;
}