flexible content-Bereichshöhe nach strict.dtd mit Menü ganz oben und unten
Ein Layout, dass sich zu 100% der Fensterhöhe anpasst - opera hinkt ein bisschen, wie immer,
mit einer statischen Menüzeilenhöhe am oberen und am unteren Fensterrand,
sowie eine flexiblen iframe-Höhe dazwischen, ohne Javascript.
PHP:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Layout-Test</title>
<style type="text/css">
html {
<? if (USR_AGT == "IE"){ ?>
padding: 80px 0 40px 0;
overflow-y: hidden;
<? } ?>
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
font-size: 86%;
color: #930;
font-family: Arial, Helvetica, sans-serif;
}
table#main {
<? if (USR_AGT == "IE"){ ?>
position:relative;
top:-80px;
<? } ?>
height: 100%;
width: 768px;
margin: 0 auto;
border-spacing: 0px;
border: 1px solid orange;
}
td#menueoben {
height: 80px;
background-color: orange; /* testweise */
}
td#mitte {
height: 100%;
}
td#menueunten {
height: 40px;
background-color: orange; /* testweise */
}
iframe#inhalt {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<table id="main" cellspacing=0 summary=""><!-- IE6 versteht kein CSS border-spacing:0 -->
<tr><td id="menueoben">
menü<p>titel
</td></tr>
<tr><td id="mitte">
<iframe id="inhalt" src="kann_nicht_angezeigt_werden.htm" frameborder=0>Ihr Browser kann leider keine eingebetteten Frames darstellen.</iframe>
</td></tr>
<tr><td id="menueunten">
menü
</td></tr>
</table>
</body>
</html>
Die CSS-Angaben enthalten PHP-Bedingungen - short-tags - ein
Alternativbeispiel dazu (mit Berücksichtigung der IE-Version):
PHP:
<!--[if lt IE 7]>
<style type="text/css">
html {
padding: 80px 0 40px 0;
overflow-y: hidden;
}
table#main {
position:relative;
top:-80px;
}
</style>
<![endif]-->
<style type="text/css">
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
font-size: 86%;
color: #930;
font-family: Arial, Helvetica, sans-serif;
}
table#main {
height: 100%;
width: 768px;
margin: 0 auto;
border-spacing: 0px;
border: 1px solid orange;
}
td#menueoben {
height: 80px;
background-color: orange; /* testweise */
}
td#mitte {
height: 100%;
}
td#menueunten {
height: 40px;
background-color: orange; /* testweise */
}
iframe#inhalt {
height: 100%;
width: 100%;
}
</style>
Was mich an der ganzen Sache stört:
Es lässt sich offenbar nicht mit DIV realisieren.
Ich dachte an ein DIV mit fester Höhe stets am oberen Fensterrand und eines stets am unteren Fensterrand.
Dazwischen eines mit flexibler Höhe (overflow:auto).
-> mit geckos nichts zu machen, das mittlere sprengt immer die Fensterhöhe. (?) :sad:
Im mittleren content-div soll der eigentliche "content" nicht wie in meinem table-iframe-Beispiel in ein iframe geladen werden.
Solche iframe-Inhalte werden von Suchmaschinen indiziert und dadurch ohne "Menü-Rahmen" aufgerufen, was z.B. ein mod-rewrite erforderlich macht.
Der "content" soll vielmehr zur Seite gehören, wie die Menü-DIV oben und unten.
Andererseits erzeugen Inhalte, die mehr als die Fensterhöhe benötigen, in einem solchen content-DIV mit overflow:auto automatisch Scrollleisten.
Will man nun dem Inhalt Hyperlinks verpassen nach #top, funktioniert das nicht mit dem oberen padding des body:
der Browser zeigt das obere Menü-DIV nicht mehr an, da es "außerhalb" des body-Bereiches liegt.
Meine Fragen wären also:
1. Wie erzeugt man ein solches Layout mit DIV auf
einer Seite?
2. Wie erzeugt man Hyperlinks in einem mittleren content-DIV, die dieses DIV nach oben scrollen lassen,
ohne damit ein oberes DIV (im padding-Bereich des body) gleichzeitig auszublenden?
(Beispiel
nur für IE)
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Layout-Test</title>
<!--[if lt IE 7]>
<style type="text/css">
html {
padding: 80px 0 40px 0;
overflow-y: hidden;
}
#oben {
position: relative;
bottom: 80px;
}
#inhalt {
position: relative;
bottom: 80px;
}
#unten {
position: relative;
bottom: 80px;
}
</style>
<![endif]-->
<style type="text/css">
html, body {
height:100%;
margin: 0;
}
body {
font-size: 86%;
color: #930;
font-family: Arial, Helvetica, sans-serif;
}
#main {
width: 768px;
margin: 0px auto;
min-height:100%;
height: auto !important;
height:100%;
}
#oben {
height: 80px;
background-color:yellow;
}
#inhalt {
height: 100%;
overflow:auto;
background-color: orange; /* testweise */
}
#unten {
color: white;
height: 40px;
background-color: green; /* testweise */
}
</style>
</head>
<body>
<div id="main">
<div id="oben">
menü<h3>titel</h3>
</div>
<div id="inhalt">
<a name="top" id="top">top</a>
<p style="line-height:400px;border:1px solid black">dummy</p>
<p style="line-height:400px;border:1px solid black">dummy</p>
<a href="#top">top</a>
<p style="line-height:400px;border:1px solid black">dummy</p>
</div>
<div id="unten">
menü
</div>
</div>
</body>
</html>
