Mathias Bigge: schwierige Layoutumsetzung

Beitrag lesen

Hallo Sönke,

ich habe auch mal eine ganz simple Lösung gestrickt, zuerst nur mal für den Mozilla, dann mir aber das Ding auch mal im IE 5.5 und im Netscape 4.73 angesehen. Jetzt hast Du ja sehr schön aufgezeigt, wie man so eine Art "Browserweiche" ohne Javascript zum Einsatz bringen kann, und ich könnte die Probleme auf diese Art umgehen. Da aber schon der Standard gar nicht so katastrophal aussieht wie ich dachte, habe ich nochmal eine CSS-Vollformatierungsneueinsteigerfrage: Warum gibt es beim untenstehenden Code diesen leichten Postionsversatz des Inhaltsfensters gegenüber dem Menüfenster. Der passiert übrigens in dem Moment, wenn man die absolute durch eine "gefixte" Position ersetzt. Kann man das Problem auch auf dieser Ebene lösen? Der Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>CSS Test</title>
<style type="text/css">
<!--
#Menu {
   position:fixed;
   background-color:silver;
   top:70px;
   left:10px;
   width:175px;
   padding:10px;
   margin:0px;
   border:4px solid #000000;
}
#Inhalt {
   position:absolute;
   top:70px;
   left:230px;
   width:570px;
   padding:10px;
   background:silver;
   margin:0px;
   border:4px solid #000000;
}
h1#fett {
   font-family:Verdana,Arial,sans-serif;
   font-size:22px;
   font-weight:bold;
   color:black;
}
h1#normal {
 font-family:Verdana,Arial,sans-serif;
   font-size:18px;
   font-weight:bold;
   color:black;
   }
-->
</style>
</head>
<body>
<div style="background-color: Aqua;"><h1 id="fett">Seitentitel</h1></div>
<div id="Menu"><h1 id="normal">Menu</h1>
<span>Home</span><br>
<span>Technik</span><br>
<span>CSS</span>
</div>
<div id="Inhalt">
  <h1>Inhalt</h1>
  <p>Dieser Bereich enthält den Text. Dieser Bereich enthält den Text.
    Dieser Bereich enthält den Text. Dieser Bereich enthält den Text.
    Dieser Bereich enthält den Text. Dieser Bereich enthält den Text.
    Dieser Bereich enthält den Text. Dieser Bereich enthält den Text.
    Dieser Bereich enthält den Text. Dieser Bereich enthält den Text.
    Dieser Bereich enthält den Text. Dieser Bereich enthält den Text.
    Dieser Bereich enthält den Text. Dieser Bereich enthält den Text.
    Dieser Bereich enthält den Text. Dieser Bereich enthält den Text.
    Dieser Bereich enthält den Text. Dieser Bereich enthält den Text.
    Dieser Bereich enthält den Text. Dieser Bereich enthält den Text.
    Dieser Bereich enthält den Text. </p>
  <p>Dieser Bereich enthält den Text. Dieser Bereich enthält den Text.
    Dieser Bereich enthält den Text. Dieser Bereich enthält den Text.
    Dieser Bereich enthält den Text. Dieser Bereich enthält den Text.
    Dieser Bereich enthält den Text. Dieser Bereich enthält den Text.
    Dieser Bereich enthält den Text. Dieser Bereich enthält den Text.
    Dieser Bereich enthält den Text. Dieser Bereich enthält den Text.
    Dieser Bereich enthält den Text. Dieser Bereich enthält den Text.
    Dieser Bereich enthält den Text. Dieser Bereich enthält den Text.
  </p>
  <p>Dieser Bereich enthält den Text. Dieser Bereich enthält den Text.
    Dieser Bereich enthält den Text. Dieser Bereich enthält den Text.
    Dieser Bereich enthält den Text. Dieser Bereich enthält den Text.
    Dieser Bereich enthält den Text. Dieser Bereich enthält den Text.
    Dieser Bereich enthält den Text. Dieser Bereich enthält den Text.
    Dieser Bereich enthält den Text. Dieser Bereich enthält den Text.
    Dieser Bereich enthält den Text. Dieser Bereich enthält den Text.
    Dieser Bereich enthält den Text. </p>
  <p>Dieser Bereich enthält den Text. Dieser Bereich enthält den Text.
    Dieser Bereich enthält den Text. Dieser Bereich enthält den Text.
    Dieser Bereich enthält den Text. Dieser Bereich enthält den Text.
    Dieser Bereich enthält den Text. Dieser Bereich enthält den Text.
    Dieser Bereich enthält den Text. Dieser Bereich enthält den Text.
    Dieser Bereich enthält den Text. Dieser Bereich enthält den Text.
    Dieser Bereich enthält den Text. Dieser Bereich enthält den Text.
    Dieser Bereich enthält den Text. Dieser Bereich enthält den Text.
  </p>
  <p>Dieser Bereich enthält den Text. Dieser Bereich enthält den Text.
    Dieser Bereich enthält den Text. Dieser Bereich enthält den Text.
    Dieser Bereich enthält den Text. Dieser Bereich enthält den Text.
    Dieser Bereich enthält den Text. Dieser Bereich enthält den Text.
    Dieser Bereich enthält den Text. Dieser Bereich enthält den Text.
    Dieser Bereich enthält den Text. Dieser Bereich enthält den Text.
    Dieser Bereich enthält den Text. Dieser Bereich enthält den Text.
  </p>
  <p>  </p>
</div>
</body>

</html>

Vielen Dank schon einmal für neue Tipps!
Mathias Bigge