Tabellenlayout: Höhe 100%, Footer & Header in Pixel

Jakob

Aktives Mitglied
Thread Starter
Dabei seit
05.01.2004
Beiträge
1.070
Reaktionspunkte
21
Hallo,

über den (Un)Sinn eines Tabellenlayouts für eine Homepage weiß ich viel und es hat mir auch echt Leid getan, aber es ging anders nicht. (d.h. in allen Browsern bis auf den IE ging's und nach 10 Stunden rumfimmelei hab ich's dann halt gelassen)

Mein Problem:

Habe eine Tabelle

Code:
|-----------|
|-----------|   header: 90px
|           |   content: 100%
|-----------|
|-----------|   footer: 90px

Funktioniert überall bis auf … ihr könnt's raten: Da wird der Header auch auseinandergezogen, sobald das Fenster größer wird.

Im 5.5 funktioniert noch alles, im 6er nicht mehr :rolleyes:

Vielen Dank!
 
Zuletzt bearbeitet:
*grübel* also ich bin mir nicht ganz sicher, aber wenn du dem content schon 100% höhe gibst und dem head und footer dann mit 90px eine feste höhe.... das hört sich etwas schräg an.
Ich mache schon seit einiger Zeit keine Tabellenlayouts mehr, daher kann es auch sein, dass ich mich irre, aber nimm doch lieber mal 3 einzelne tabellen hintereinander, die du mit den Werten formatierst, die du schon genannt hast. Dann sollte es klappen.
 
Hm.. ich glaub bei 3 Tabellen und der mittleren bei 100% schiebt er mir die anderen bzw. den Footer aus dem Bild... Aber trotzdem schonmal danke!

Falls Ihr nen Anschauungsexemplar braucht: www.knowthat.de/knowthat

Das beschriebene Problem taucht natürlich nur auf, wenn Ihr fremd(Win+IE6)surft

Würde auch viel lieber nen XHTML-Layout machen, aber die linke Navigation bekomm ich da einfach nich hin. Nicht mit negative margins und den ganzen float Tricks...
 
Navigation links:
Und eine Liste links absolut positionieren mit CSS?
 
Versuch mal das:
Lege 5 Divs an, in der Reihenfolge:

Code:
<div id="wrapper>
<div id="head"></div>
<div id="navi"></div>
<div id="content"></div>
<div id="footer"></div>
</div>

Formatiere sie so in der CSS-Datei:

Code:
body {
margin:0;
padding:0;
text-align:center;
}
#wrapper {
width:760px;
height:auto;
margin:0px auto;
text-align:left;
}
#head {
width:760px;
height:90px;
}
#navi {
width: /*Passende Breite der Navi*/;
height: auto;
float:left;
}
#content {
width: /*Passende Breite des Content*/;
height:auto;
float:left;
}
#footer {
width:760px;
height:90px;
clear:both;
}

In die jeweiligen DIVs legst du dann deine Tabellen rein, wenn du es nicht mit margin und padding machen willst.
 
Zuletzt bearbeitet:
Jakob schrieb:
Im 5.5 funktioniert noch alles, im 6er nicht mehr :rolleyes:

Entweder blick ichs nicht, oder mein IE6 zieht da nix auseinander???

Also das Bsp. unten funktioniert, ohne daß etwas verändert wird bei Größenänderung des Fensters.

Thomas.

--

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="90" bgcolor="#66CC99">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#FFCC99">&nbsp;</td>
</tr>
<tr>
<td height="90" bgcolor="#66CCFF">&nbsp;</td>
</tr>
</table>
</body>
</html>
 
@joachim: Fällt leider weg, da das Design in der Mitte des Bildschirms erscheinen soll.

@beebop: Probier ich morgen mal aus, aber ich wette, dass einer der witzigen Browser da durchknallt. Problem ist, dass das Design an manchen Stellen recht genau passen muss. Wenn einer mal die Komplexität von nem „ganz einfachen“ 3-Spalten-CSS-Design sehen will, muss er sich nur mal Piefecta angucken. Das ist wirklich cross-browser, aber da find ich ja ein Tabellenlayout fast besser, obwohl ich's nie mehr machen wollte. Manchmal hauen eben Deadlines dazwischen...

@XVCD: Ich probier das auch noch mal so, wie Du's gemacht hast, wobei ich damit halt voll in die pre-CSS-Ära und damit der Trennung von Design und Inhalt eintauche, aber wenn's der einzige Weg ist. In meinem derzeitigen Design haben die TDs eben IDs und werden über ein CSS-File mit den Größenangaben beglückt. Kann sein, dass das für den IE nen Problem darstellt.
 
Hallo,

das Problem hatte ich auch vor Kurzem. Hier meine Lösung:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<style type="text/css">
/* Hide from IE-Mac \*/
body, html {
	height: 100%;
}
/* end hide */

body {
	margin: 0;
	padding: 0;
}

/* be nice to Opera */
html>body {
	margin: 0;
	padding: 0;
}
/* end Opera */
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
<tr>
	<td bgcolor="#ff0000" valign="bottom">
	Sehe da es funktioniert :)<br>
	Tabelle, 100% hoch und margin und padding gleich null.<br>
	Funktioniert mit Safari, Firefox Win/Mac, IE 5 Mac/Win, IE 6 Win und Opera ab 6 Win/Mac,<br>
	sowie allen anderen auf deren Engines basierenden Browsern.
	</td>
</tr>
</table>
</body>
</html>

Die Tabelle kannst du nach eigenen Wünschen gestalten. Ich habe innerhalb
dann mit CSS DIVs etc. gearbeitet.

Das Ganze funktioniert super, lediglich die Angabe "height: 100%" der
Tabelle ist nicht für den Doctype erlaubt, aber alle Browser interpretieren
alles wie gewünscht :)

Gruß,
michanismus

EDIT:
P.S. Wichtig ist der Doctype.
 
Zuletzt bearbeitet:
Nachtrag. Wenn du das Ganze mittit haben willst machst du das dann so.

Meine Lösung:

Code:
<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
<tr>
<td width="50%">&nbsp;</td>
<td bgcolor="#ff0000" valign="bottom">

<div style="width: 800px;">

Sehe da es funktioniert :)<br>
Tabelle, 100% hoch und margin und padding gleich null.<br>
Funktioniert mit Safari, Firefox Win/Mac, IE 5 Mac/Win, IE 6 Win und Opera ab 6 Win/Mac,<br>
sowie allen anderen auf deren Engines basierenden Browsern.

</div>
</td>
<td width="50%">&nbsp;</td>
</tr>
</table>

Linke und Rechte Zelle auf jeweils 50%. Dann in der Zelle in der Mitte
einen DIV Container einsetzen und mit CSS 800 Pixel Breite festlegen.

Hoffe ich hatte dich richtig verstanden... ;)
 
Alle guten Dinge sind 3 ;)

hier deine Lösung mit Header und Footer:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<style type="text/css">

/* Hide from IE-Mac \*/
body, html {
	height: 100%;
}
/* end hide */

body {
	margin: 0;
	padding: 0;
}

/* be nice to Opera */
html>body {
	margin: 0;
	padding: 0;
}
/* end Opera */
</style>
</head>
<body>

<table width="100%" border="0" cellspacing="0" cellpadding="0" height="100%">
<tr>
	<td width="50%" rowspan="3">&nbsp;</td>
	<td bgcolor="#00ff00" height="90">Header</td>
	<td width="50%" rowspan="3">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#ff0000" valign="bottom">

<div style="width: 800px;">
Sehe da es funktioniert :)<br>
Tabelle, 100% hoch und margin und padding gleich null.<br>
Funktioniert mit Safari, Firefox Win/Mac, IE 5 Mac/Win, IE 6 Win und Opera ab 6 Win/Mac,<br>
sowie allen anderen auf deren Engines basierenden Browsern.
</div>

</td>
</tr>
<tr>
	<td bgcolor="#0000ff" height="90">Footer</td>
</tr>
</table>
</body>
</html>

Gruß und gute Nacht,
Michanismus
 
Hallo,

vielen Dank für Deine Mühe!

Nochmal ne Frage: Man könnte die Höhen und Breiten doch auch in CSS anlegen, oder? Dann kann man auch nen anderen Doctype nehmen... Oder geht es eben grad nicht in CSS und das war mein Fehler?

Danke!
 
Oh.. nein!

Hab in Browsercam nachgeschaut und siehe da, das gleiche Problem! Es tritt nirgendwo auf, nur im 6er IE! (den 4er Netscape zu vernachlässigen ist ja obligatorisch)
Hab nur den Code kopiert und ein Bild eingefügt um das besser zu sehen (Testdatei unter http://www.knothat.de/knowthat/test.php)
*resignier*

ie6problem.jpg


Bisschen verbessern konnte ich auf meiner Seite das Problem, indem ich dem mittleren TD auch 100% gegeben hab, ganz gelöst hat's das trotzdem nich...
 
Zuletzt bearbeitet:
Okay,

die Variante funktioniert auch mit IE6/Win.

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<style type="text/css">

/* Hide from IE-Mac \*/
body, html {
	height: 100%;
}
/* end hide */

body {
	margin: 0;
	padding: 0;
}

/* be nice to Opera */
html>body {
	margin: 0;
	padding: 0;
}
/* end Opera */

#header {
	height: 90px;
	background: #000;
	color: #fff;
}

#main {
	width: 800px;
}

#footer {
	height: 90px;
	background: #000;
	color: #fff;
}
</style>
</head>

<body>

<table width="100%" border="1" cellspacing="0" cellpadding="0" height="100%">
<tr>
	<td width="50%">links</td>
	<td valign="top">
		<div id="header">
			navigation etc
		</div>
		<div id="main">
			Sehe da es funktioniert :)<br>
			Tabelle, 100% hoch und margin und padding gleich null.<br>
			Funktioniert mit Safari, Firefox Win/Mac, IE 5 Mac/Win, IE 6 Win und Opera ab 6 Win/Mac,<br>
			sowie allen anderen auf deren Engines basierenden Browsern.
		</div>
	</td>
	<td width="50%">rechts</td>
</tr>
<tr>
	<td>unten links</td>
	<td valign="bottom">
		<div id="footer">
			Footer
		</div>
	</td>
	<td>unten rechts</td>
</tr>
</table>
</body>
</html>

Die Feinheiten musst du natürlich sebst umsetzen. Musst du ein wenig tricksen mit Tabellenhintergrund etc. Du schaffst das schon ;)
 
Tatsache! Was hast Du geändert? Im Grunde nur die Höhenangaben auch in CSS-Form geschrieben, oder?
 
Obiges Layout hat für mein Design auch nicht geklappt, sodass ich nochmal kurz nach ner nur-CSS-Lösung gesucht hab, das dann aufgegeben habe und mir überlegt hab:

Der IE 5 und 5.5 machen's noch richtig, der 6er nicht mehr...

Was hat sich da geändert?

Der DOCTYPE-Switch!!

IE 6 geht bei jedem DOCTYPE ab HTML 4 in den Standards-mode, der beim IE zwar ne Beleidigung ist, aber egal. Wenn man den DOCTYPE um die URL verkürzt, geht's! Einfach so!

Jetz leg ich mich ins Bett...

Browser-DOCTYPE-Vergleiche
 
Zurück
Oben Unten