Abstände passen nicht & bg-Bild in Box positionieren

[Gunther]

Hallo Jessy!

Also, ich habe jetzt nochmal ergänzt und es ergibt sich Folgendes:

| header                      |
| height: 100px;              |
| width: 60%;                 |

border-top:0;(ansonsten 2px)
Logo
width:20%;
height:50px;
-----------------
Inhalt
float: left;
width:35%;
height:70%;
border: 2px;

---

|       Footer                |
|       clear: both;          |
|       width: 60%;           |
|       height: 40px;         |

padding-top: 15px;

Das Web ist viereckig. Alle erzeugten Boxen sind _immer_ viereckig.
Aus deinen Breitenangaben (width) ergäbe sich (ist auch noch von einigen anderen Faktoren, wie Reihenfolge im Quell-Code abhängig, die ich jetzt nicht kenne) dann vermutlich folgendes Bild (mal angenommen deine oben genannten 'Container' sind DIV-Elemente):

0   10%  20%  30%  40%  50%  60%  70%  80%  90%  100%
+-----------------------------+
|     Header width:60%        |
+-----------------------------+
|  Logo   |
|width:20%|
+---------+------+
|    Inhalt      |
| width:35%      |
+---------+------+
|Marginal |
|width:20%|
+---------+-------------------+
|     Footer width:60%        |
+-----------------------------+

dazu gibt es noch einen grundlegenden Abstand nach links (margin-left: 20%;) für header, logo, inhalt und footer.

Du möchtest deine Seite zentriert angezeigt bekommen?
Dann verwende: margin: 0 auto;
und zwar am besten für einen sog. 'Wrapper', der alle Elemente der Seite umschließt.

Alleine daraus müsstest du schon erkennen, dass das so nicht hinhauen kann. Ganz abgesehen von den ganzen Margins, die du noch da reingehauen hast.
Das ist mir jetzt leider nicht ganz schlüssig. Warum kann genau kann das nicht hinhauen? Mir ist bewußt, dass logo und inhalt nicht den gleichen Abstand haben. Gibt es noch weitere Gründe? Insgesamt soll die Webseite 60% der zur Verfügung stehenden Fläche einnehmen.

Der Grundgedanke ist richtig - deine Umsetzung allerdings nicht.
Warum willst du bspw. jemandem dessen Anzeigebereich im Browserfenster "nur" 800px breit ist, deine Seite nur auf 480px Breite anzeigen?
Die gängige Methode ist die Eigenschaften max-width und min-width zu verwenden (für den Wrapper) - allerdings haben die IEs < 7 damit Probleme. Hier hilft dir Google weiter: max-width for ie.

• Packe dein Logo in den Header (dort gehört es imho nämlich hin)
  Wenn ich den Bereich Logo in den header packe, muss ich dort auch wieder Einiges verändern. Auch hier wird dann eine zusätzliche Box unumgänglich werden. Es ist so, dass der header-Bereich anders gestaltet ist. Das Logo liegt quasi auf dem Hintergrund des Browserfensters (sozusagen im body, auch wenn das sicher so nicht richtig formuliert ist). Header, inhalt und marginal sehen vollkommen anders aus (insich aber gleich).

Grundsätzlich: Betrachte deine Seite _ohne_ jegliche CSS-Formatierung. Die dann angezeigte Reihenfolge der einzelnen Elemente (ist abhängig von ihrer Platzierung im Quell-Code) sollte dann ihrer jeweiligen Bedeutung/ Wichtigkeit entsprechen.

• Logo
• Überschrift / Name der Website
• Inhalt
• ergänzende Inhalte
• Navigation
• Fußzeile

Ob die Navigation vor oder nach dem eigentlichen Inhalt kommen sollte, wird immer wieder "heiß" diskutiert. Meine Meinung findest du oben.

Logo und Überschrift werden üblicherweise im Header zusammengefasst.

Und noch eins: Wozu arbeitest du mit den Höhenangaben?
Ich habe mit Höhenangaben gearbeitet, damit ich eine Mindesthöhe immer angezeigt bekomme.

Dann hättest du aber zumindest min-height verwenden sollen.

Das hat allerdings sowieso nicht richtig funktioniert, deswegen stimme ich hier absolut mit dir überein und entferne es.

Nein, das ist ja auch nicht verwunderlich. Denn ein Element weiss selbst am besten, wie hoch es sein muss, damit der entsprechende Inhalt darin Platz hat - im Gegensatz zu dir! Also solange es keine zwingenden Gründe gibt, und du _genau_ weißt, was du tust: "Finger weg von irgendwelchen Höhenangaben!".

Ich werde weiter daran arbeiten und versuchen deine Hinweise zu beherzigen und mein Layout zu verbessern. Ich wäre dir allerdings für weitere parallele Hinweise dankbar, die mir noch mehr Aufschluß geben.

Ich poste dir hier mal zur besseren Veranschaulichung eine sehr vereinfachte Beispiel-Datei, die vermutlich in etwa das Ergebnis produziert (in standardkonformen Browsern und IE7), was ich glaube, was du erreichen willst:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN">  
<html>  
 <head>  
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  <title>Test Jessy</title>  
  <style type="text/css">  
   body {  
    font-size: 100.01%;  
   }  
  
  #wrapper {  
    max-width: 65em;  
    min-width: 750px;  
    margin: 0 auto;  
   }  
  
  #header {  
    background: #ffc;  
   }  
  
   #logo {  
    width: 20%;  
    background: #fcf;  
   }  
  
   #inhalt {  
    float: left;  
   width: 67%;  
    background: #cff;  
   }  
  
   #marginal {  
    float: right;  
   width: 32%;  
    background: #fcc;  
   }  
  
   #footer {  
    clear: both;  
    background: #ccf;  
   }  
  </style>  
 </head>  
  
 <body>  
  <div id="wrapper">  
  
   <div id="header">  
    <p>Header</p>  
   </div>  
  
   <div id="logo">  
    <p>Logo</p>  
   </div>  
  
   <div id="inhalt">  
    <p>Inhalt</p>  
   </div>  
  
   <div id="marginal">  
    <p>Marginal</p>  
   </div>  
  
   <div id="footer">  
    <p>Footer</p>  
   </div>  
  
  </div>  
 </body>  
</html>  

Und bei allen weiteren Fragen, würde ich dich bitten, deinen relevanten HTML- und CSS-Code zu posten, damit man konkret sehen kann, was du gemacht hast.

Gruß Gunther