nicht angemeldet
Hallo Mathias!
Ich fände es deshalb auch gut, wenn es eine Kür 2 gäbe, die verlangt, das Ding außer in den 6.X Browsern auch im IE 5.5 und im Netscape 4.7 ans Laufen zu kriegen, zumindest so, dass es nicht peinlich wirkt, denn hier liegt für mich genau der Hase im Pfeffer!
Aufbauend auf Srob's und Stefans Ansatz habe ich auch mal ein wenig herumgespielt und versucht das Layout auch dem IE und NC 4.x beizubringen. Sieht natürlich etwas Überdemensioniert aus, aber die drei Stylesheets für die verschiedenen Browser kann man sicherlich
auch noch stärker zusammenlegen. Hatte ich aber keine Lust mehr zu. :)
Insgesamt bewegt sich das Ergebnis natürlich im Bereich der 'verschärften Schummelei' da IE / NC 4.x ja kein position:fixed, bzw. max-width können. Aber zumindestens im IE kann man position:fixed ja simulieren. Nachteil bei ihm ist aber das, wenn das Fenster arg klein wird, man um den Textbereich dann zwei Scrollbars hat. Was solls. *g* Für Netscape habe ich nur das nötigste gemacht.
Jetzt aber zum Quelltext.
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>foo.bar</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="content-type" content="text/html; charset=ISO-8859- 1" />
<style type="text/css">
<!--
@media all {
body {
max-width:650px;
background-color:red;
padding:0px;
margin:0px auto 0px auto;
}
div#navi {
position:fixed;
width:175px;
background-color:green;
}
div#inhalt {
margin-left:175px;
}
div#inhalt p {
margin:0px;
background-color:aqua;
}
}
-->
</style>
<!--[if IE]>
<style type="text/css">
body {
overflow:auto;
}
div#navi {
position:absolute;
left:0px;
width:175px;
margin-left:10%;
z-index:10;
}
div#inhalt {
height:100%;
padding-right:20%;
border-style:solid;
border-color:red;
border-width:0px 0px 0px 175px;
margin:0px;
overflow:auto;
}
div#page {
position:absolute;
top:0px;
left:0px;
height:100%;
padding-left:10%;
}
</style>
<![endif]-->
<style type="text/javascript">
<!--
with (tags.body) {
backgroundColor="red";
}
with (ids.page) {
marginLeft="10%";
marginRight="10%";
}
with (ids.navi) {
position="relative";
top="0px";
left="0px";
width="175px";
align="left";
layerBackgroundColor="green";
}
with (ids.inhalt) {
position="relative";
top="0px";
left="0px";
align="left";
marginTop="-1.1em";
backgroundColor="aqua";
}
// -->
</style>
</head>
<body>
<div id="page">
<div id="navi"><p><a href="#top">Link-Nr. 1</a></p><p><a href="#top">Link-Nr. 2</a></p><p><a href="#top">Link-Nr. 3</a></p><p><a href="#top">Link-Nr. 4</a></p></div>
<div id="inhalt"><p>Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat. <a href="#top">Duis te feugifacilisi</a>. Duis autem dolor in hendrerit in volputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugat nulla facilisi.</p></div>
</div>
</body>
</html>
Gruß,
Sönke
PS. Wehe jemand sagt was gegen meine wunderschöne Farbenkombination. :)