Problem mit CSS-Design und kleinen Fenstern

Status
Nicht offen für weitere Antworten.
X

x3n

Hallo ich habe folgendes Problem.

http://www.monkeh.de/user/xen/files/passivhaus_allgemeines.html

Die Seite sieht im IE und Firefox ziemlich gleich aus. Wenn man jedoch das Fenster kleiner macht und zwar so klein, dass der Inhalt rechts aus dem Fenster hinausragt, dann wird der Hintergrund im Firefox nicht mehr angezeigt und IE verschiebt den Inhalt nach unten.
Woran könnte das liegen?

Hier noch ein Link zur Stylesheet:

http://www.monkeh.de/user/xen/files/stylesheet.css
http://www.monkeh.de/user/xen/files/stylesheet_ie.css
 
Mein Lösungsvorschlag gegen das Umbrechen der rechten Spalte bei verkleinertem Browserfenster:

Bette die DIVs #navigation und #haupteil in ein übergeordnetes Parent-DIV ein, das eine feste Breite besitzt.

Für das Darstellungsproblem im Firefox habe ich leider (noch) keinen Tipp parat :confused:

Dafür habe ich aber noch einen anderen Tipp:

In der stylesheet_ie.css werden nur die Selektoren mit den angepassten Eigenschaften notiert, und nicht der komplette CSS-Code der stylesheet.css wiederholt ;)

CSS-Code der stylesheet_ie.css:
Code:
div#hauptteil {
  padding:14px 0 10px 9px;
  margin:0 0 0 177px;
  }

#hauptmenu a {
  width:141px;
  }
 
Ich habe nun auch eine Lösung für die abgeschnittene Hintergrundgrafik im DIV#kopfleiste gefunden: die Hintergrundgrafik wird dem body-Element übergeben ;)

Hier mein Lösungsvorschlag, der alle drei genannten Tipps enthält:

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>

  <title>Passivbau GmbH</title>

  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
  <meta name="description" content="Beschreibung" />
  <meta name="author" content="Autor" />
  <meta name="keywords" content="Schlüssel, Wörter" />
  <meta name="date" content="2005-12-15" />
  <meta name="robots" content="index" />

  <link rel="stylesheet" type="text/css" href="stylesheet.css" />

  <!--[if lt IE 7]>
  <link rel="stylesheet" type="text/css" href="stylesheet_ie.css" />
  <![endif]-->

</head>
<body>
  <div id="kopfleiste">
    <img src="http://www.tutorials.de/forum/images/logo.gif" alt="Passivbau GmbH: Energieeffizienter Wohnungsbau" />
  </div>

  <div id="wrapper">

  <div id="navigation">

    <ul id="hauptmenu">
      <li><a href="index.html">Startseite</a></li>
      <li><span id="aktiv">Passivhaus</span>

        <ul id="untermenu">
          <li><a href="passivhaus_allgemeines.html">Allgemeines</a></li>
          <li><a href="passivhaus_funktion.html">Funktion</a></li>
          <li><a href="passivhaus_technik.html">Technik</a></li>
          <li><a href="passivhaus_foerderung.html">Förderung</a></li>
        </ul>
      </li>

      <li><a href="projekte.html">Projekte</a></li>
      <li><a href="unternehmen_wirueberuns.html">Unternehmen</a></li>
      <li><a href="kontakt.html">Kontakt</a></li>
    </ul>

    <div id="impressum"><a href="impressum.html">Impressum</a></div>

  </div>

  <div id="hauptteil">

    <div class="text">
      <img src="http://www.tutorials.de/forum/images/bullet.gif" alt="" />
      <h1>Das Passivhaus</h1>
      <h2>Was ist das Besondere an einem Passivhaus?</h2>
      <p />
      <img class="inhalt" style="float:right" src="http://www.tutorials.de/forum/images/pavatexhaus_rgb.gif" alt="Der Aufbau eines Passivhauses" />
      Energiesparen heißt das Gebot der Stunde. Und eines ist sicher: Energie wird auch ich Zukunft teuer bleiben. Wer zeitgemäß und zukunftssicher bauen will, sollte sich besonders intensiv mit Dämmsystemen und Haustechnik auseinandersetzen.
      Das moderne, hochgedämmte Passivhaus setzt ganz auf den wirtschaftlichen Wärme- und Lüftungshaushalt. Durch höchste Standards bei Planung, Material und Ausführung wird der Wärmebedarf soweit reduziert, dass auf ein übliches Heizsystem verzichtet werden kann.
      <h2 style="clear:right">Umweltschutz, der sich bezahlt macht...</h2>
      <p />
      <img class="inhalt" style="float:left" src="http://www.tutorials.de/forum/images/pba_diagramm_klein.gif" alt="Energriekennwerte im Vergleich" />Die BRD hat sich verpflichtet, und somit alle Städte und Dörfer ihren CO2 Ausstoß bis zum Jahre 2005, verglichen mit dem des Jahres 1987, um 25% zu verringern. Durch alleinige Erhöhung der Energieeffizienz, rationeller Energieverwendung, sowie energiebewusstes Management und Verhalten kann bis zum Jahre 2005 ein CO2 Reduktionspotential von rund 20 % erreicht werden. CO2 Emission stehen in direkten Zusammenhang zum Primärenergieeinsatz. Aufgrund der großen Anzahl der Wohnungen bzw. Gebäude bringt schon eine geringe Verminderung des Primärenergieeinsatzes zur Raumbeheizung in der Gesamtheit beachtliches Einsparpotential. Der Wärmebedarf eines Gebäudes setzt sich dabei im wesentlichen aus Transmissionswärmebedarf QT und dem Lüftungswärmebedarf QL zusammen. Die Forschung nach neuen und besseren Dämmstoffen zur Reduzierung des Transmissionswärmebedarfs eines Gebäudes ist mittlerweile an den Grenzen des technisch Machbaren angelangt. Bei gut wärmegedämmten Gebäuden kann somit eine nennenswerte Reduzierung der benötigten Heizenergie nur durch Verringerung des Lüftungswärmebedarfs erfolgen, welcher hier bis zu 50 % des Gesamtenergiebedarfs für die Beheizung ausmachen kann. Zur Senkung des Lüftungswärmebedarfs können mechanische Lüftungsgeräte, vorzugsweise mit Wärmerückgewinnung betrieben werden. Deshalb sollten wir uns alle an der CO2 Reduktion beteiligen, mit dem Bau von Passivhäusern haben wir alle die Möglichkeit den CO2 Ausstoß zu verringern.
      <h2 style="clear:left">Vorteile auf einen Blick</h2>
      <p />
      <ul class="auflistung">
        <li>bewährte Trockenbauweise</li>
        <li>höchste Dichtigkeit</li>
        <li>sehr hohe Dämmwerte</li>
        <li>geringste Wärmeverluste</li>
        <li>angenehmes Wohnklima</li>
      </ul>

      <h2> Folgende Planugsunterlagen müssen beim Bau von Passivhäusern beachtet werden:</h2>

      <ul class="auflistung">
        <li>Südorientierung der Hauptfassade (+/- 30°) mit großen Süd-Fensterflächen</li>
        <li>Verschattungsfreiheit für passive Solarenergienutzung</li>
        <li>kompakte Bauformen (Anbaumöglichkeiten nutzen)</li>
        <li>Verglasungen nach Süden nutzen, Ost-, West-, Nordfenster kleiner halten</li>
        <li>Verschattungsfreiheit in der Planung beachten (Dachüberstände, Vorbauten gering halten)</li>
        <li>Dämmdicken der Außenbauteile einplanen, Außenbauteile u-Wert kleiner 15 W/m_K</li>
        <li>Wärmebrücken vermeiden von der Planung bis zur Ausführung</li>
        <li>Kurze Leitungsführungen planen (Bäder über oder neben Küchen)</li>
        <li>Energiekennwertberechnung durchführen (PHPP, Passivhaus Projektierungspaket)</li>
        <li>Einplanung von Passivhaus zertifizierten Komponenten (Fenstern, Lüftungsgeräte)</li>
      </ul>
    </div>
    <span class="anker"><a href="#"><img src="http://www.tutorials.de/forum/images/pfeil_oben.gif" border="0" alt="Nach oben" />Nach oben</a></span>
    <div id="sitemap">
    <a href="index.html">Startseite</a> | <a href="passivhaus_allgemeines.html">Allgemeines zum Passivhaus</a> | <a href="passivhaus_funktion.html">Funktion</a> | <a href="passivhaus_technik.html">Technik</a> | <a href="passivhaus_foerderung.html">Förderung</a>
    <br />
    <a href="projekte.html">Projekte</a> | <a href="unternehmen_wirueberuns.html">Wir über uns</a> | <a href="unternehmen_leistungen.html">Leistungen</a> | <a href="unternehmen_partner.html">Partner</a> | <a href="kontakt.html">Kontakt</a> | <a href="impressum.html">Impressum</a>
    <br />
    Copyright 2005 - Passivhaus GmbH | Webgestaltung: Christoph Stroppel
    </div>
  </div>

  </div><!-- end DIV#wrapper -->

</body>
</html>
stylesheet.css
Code:
  body {
  background-color:#ebeff1;
  color:#42697d;
  margin:0;
  padding:0;
  font-family:Verdana,Arial,sans-serif;
  height:100%;
  background:url(images/hg_kopfleiste.gif) repeat-x;
  }

  div#kopfleiste {
  height:127px;
  }

  div#wrapper {
  width:786px;  
  ]

  div#navigation {
  float:left;
  width:155px;
  background-color:#ebeff1;
  margin:0;
  padding:0 10px;
  background-image:url(images/hg_navigation.gif);
  background-repeat:repeat-x;
  color:#849daa;
  }

  div#hauptteil {
  float:right;
  background-color:#ffffff;
  border-top: 1px solid #cccccc;
  background-image:url(images/hg_hauptteil.gif);
  background-repeat:repeat-x;
  color:#42697d;
  min-height:400px;
  }

  ul#hauptmenu {
  padding:8px 0 0 0;
  margin:5px 0 10px 0;
  list-style-type:none;
  }

  #hauptmenu li {
  padding:2px 0 0 0;
  }

  #hauptmenu a {
  background-color:#42697d;
  font-size:14px;
  letter-spacing:1px;
  display:block;
  padding:3px 0 3px 14px;
  text-decoration:none;
  color:#849daa;
  font-weight:bold;
  }

  #hauptmenu a:visited {
  background-color:#42697d;
  font-size:14px;
  letter-spacing:1px;
  display:block;
  padding:3px 0 3px 14px;
  text-decoration:none;
  color:#849daa;
  font-weight:bold;
  }

  #hauptmenu a:hover {
  background-color:#42697d;
  font-size:14px;
  letter-spacing:1px;
  display:block;
  padding:3px 0 3px 7px;
  text-decoration:none;
  color:#e3e9ec;
  border-left:7px solid #1a455b;
  }

  #hauptmenu a:active {
  background-color:#42697d;
  font-size:14px;
  letter-spacing:1px;
  display:block;
  padding:3px 0 3px 14px;
  text-decoration:none;
  color:#849daa;
  font-weight:bold;
  }

  span#aktiv {
  background-color:#42697d;
  font-size:14px;
  letter-spacing:1px;
  display:block;
  padding:3px 0 3px 7px;
  text-decoration:none;
  color:#ffffff;
  border-left:7px solid #1a455b;
  font-weight:bold;
  }

  ul#untermenu {
  padding:0 0 0 0;
  margin:5px 1px;
  list-style-type:none;
  border-left:1px solid #cccccc;
  border-right:1px solid #cccccc;
  border-bottom:0;
  }

  #untermenu li {
  padding:1px 0;
  border:0
  }

  #untermenu a {
  background-color:#ebeff1;
  font-size:12px;
  letter-spacing:1px;
  display:block;
  padding:0 0 0 1em;
  text-decoration:none;
  color:#849daa;
  font-weight:normal;
  border:0;
  }

  #untermenu a:visited {
  background-color:#ebeff1;
  font-size:12px;
  letter-spacing:1px;
  display:block;
  padding:0 0 0 1em;
  text-decoration:none;
  color:#849daa;
  font-weight:normal;
  border:0;
  }

  #untermenu a:hover {
  background-color:#ebeff1;
  font-size:12px;
  letter-spacing:1px;
  display:block;
  padding:0 0 0 1em;
  text-decoration:none;
  color:#1a455b;
  font-weight:bold;
  border:0;
  }

  #untermenu a:active {
  background-color:#ebeff1;
  font-size:12px;
  letter-spacing:1px;
  display:block;
  padding:0 0 0 1em;
  text-decoration:none;
  color:#849daa;
  font-weight:normal;
  border:0;
  }

  div.text {
  border-left:1px solid #cccccc;
  border-right:1px solid #cccccc;
  background-image:url(images/hg_text.gif);
  background-repeat:no-repeat;
  margin:14px 10px 20px 10px;
  padding:10px 10px 0 10px;
  font-size:12px;
  letter-spacing:1px;
  line-height:18px;
  text-align:justify;
  width:567px;
  }

  h1 {
  display:inline;
  margin:0 0 0 5px;
  padding:0;
  font-size:23px;
  font-weight:bold;
  letter-spacing:1px;
  text-align:left;
  }

  h2 {
  display:block;
  margin:0;
  padding:0;
  font-size:14px;
  font-weight:bold;
  letter-spacing:1px;
  text-align:left;
  }

  div#copyright {
  margin:0;
  padding:5px 0;
  background-color:#42697d;
  text-align:center;
  font-size:12px;
  color:#849daa;
  }

  img.inhalt {
  border:1px dashed #cccccc;
  padding:10px;
  display:block;
  margin:10px;
  }

  ul.auflistung {
  list-style-type:square;
  margin:1em;
  padding:0;
  text-align:left;
  }

  a:link {
  font-weight:bold;
  color:#42697d;
  text-decoration:none;
  background-color:#ffffff;
  }

  a:visited {
  font-weight:bold;
  color:#42697d;
  text-decoration:none;
  background-color:#ffffff;
  }

  a:hover {
  font-weight:bold;
  color:#42697d;
  text-decoration:underline;
  background-color:#ffffff;
  }

  a:active {
  font-weight:bold;
  color:#42697d;
  text-decoration:none;
  background-color:#ffffff;
  }

  span.anker {
  margin:0 0 0 10px;
  font-size:12px;
  font-weight:bold;
  }

  div#sitemap {
  border-top:1px dashed #cccccc;
  margin:50px 10px 10px 10px;
  padding:10px 10px 0 10px;
  font-size:12px;
  letter-spacing:1px;
  line-height:18px;
  text-align:center;
  width:567px;
  color:#cccccc;
  background-color:#ffffff;
  }

  div#impressum {
  border-top:1px dashed #cccccc;
  font-size:12px;
  letter-spacing:1px;
  line-height:18px;
  text-align:left;
  color:#849daa;
  background-color:#ebeff1;
  display:block;
  }

  #impressum a {
  color:#849daa;
  font-weight:normal;
  background-color:#ebeff1;
  }

  #impressum a:visited {
  color:#849daa;
  font-weight:normal;
  background-color:#ebeff1;
  }

  #impressum a:hover {
  color:#849daa;
  font-weight:normal;
  background-color:#ebeff1;
  }

  #impressum a:active {
  color:#849daa;
  font-weight:normal;
  background-color:#ebeff1;
  }
stylesheet_ie.css:
Code:
#hauptmenu a {
  width:141px;
  }
 
Das ist schonmal gut, aber nun ist die Navigationsdiv nicht nach ganz unten durchgezogen.
 
Hierfür gibt es auch eine Lösung ;)

Das DIV#wrapper erhält eine Hintergrundgrafik mit den Dimensionen 786*1 Pixel, die die beiden Spalten (Navigation, Content) farblich simuliert und mit der CSS-Eigenschaft background-repeat:repeat-y vertikal wiederholt wird.
 
Status
Nicht offen für weitere Antworten.
Zurück