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

Beitrag lesen

Hallöchen und vielen Dank für deine Unterstützung!

Also, ich habe jetzt nochmal ergänzt und es ergibt sich Folgendes:
-------------------------------
| header                      |
| height: 100px;              |
| width: 60%;                 |
| border-top:0;(ansonsten 2px)|
-------------------------------
| Logo           | Marginal   |
| width:20%;     | width:20%  |
| height:50px;   | height:70%;|
-----------------| border:2px;|
|                |            |
| Inhalt         |            |
| float: left;   |            |
| width:35%;     |            |
| height:70%;    |            |
| border: 2px;   |            |
|                |            |
-------------------------------
|       Footer                |
|       clear: both;          |
|       width: 60%;           |
|       height: 40px;         |
|       padding-top: 15px;    |
-------------------------------

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

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. Und sind es im Vergleich wirklich so viele margins? Meines Erachtens sind diese doch für die Abstände der Boxen zueinander da. Ließen sich da wirklich noch Einige vermeiden?
Ich habe mit Hilfe eines Buches gearbeitet und wirklich versucht es so "rein" wie möglich umzusetzen (mich quasi Schritt für Schritt vorgearbeitet).

Im Grunde ist das ein "klassisches" 2-Spalten Layout mit Header + Footer. Solche Layouts kann man entweder als fixed-width oder als fluides Layout umsetzen.

Danke für den Hinweis!

  • Umschließe Inhalt (Content) und Marginal noch mit einem zusätzlichen DIV, um den Footer immer unterhalb zu haben, egal welches der beiden Elemente die größere Höhe hat.

Ok, das macht für mich auf jeden Fall Sinn.

  • 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).

Und noch eins: Wozu arbeitest du mit den Höhenangaben?

Ich habe mit Höhenangaben gearbeitet, damit ich eine Mindesthöhe immer angezeigt bekomme. Das hat allerdings sowieso nicht richtig funktioniert, deswegen stimme ich hier absolut mit dir überein und entferne es.

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.

Danke und schöne Grüßle!
jessy