nicht angemeldet
Hi Jessy!
Ist ja schon mal ein Anfang! Also den CSS-Teil hätten wir jetzt. Und wo ist der zugehörige HTML-Code?
Im HTML-Code werden einfach nacheinander die Boxen mit dem entsprechenden Inhalt aufgerufen (aktuell noch Blindtext):<div id="header"> ... </div>
<div id="logo"> </div>
<div id="inhalt"> ... </div>
<div id="marginal"> ... </div>
<div id="footer"> ... </div>
So sieht nun mein Layout aus. Dem Bereich Logo wurde einfach ein eigener Platz zugewiesen. Das ist von der Aufteilung her auch sehr angenehm, weil es die Seite von der Struktur her ein wenig auflockert. Marginal gibt es für Zusatzinfos, weiterführende Links etc.
Ich gehe jetzt mal davon aus, dass "Content" = "inhalt" sein soll. Und es fehlen jetzt immer noch die CSS-Angaben (wenn vorhanden) zu header + footer.
Wenn du jetzt mal deine vorhandenen CSS-Angaben in die Skizze einfügst, ergibt sich folgendes:
header Logo width:20%; height:50px; ----------------- Content float: left; width:35%; height:70%;
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.
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.
Ich würde dir prinzipiell folgendes empfehlen:
- 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.
- Packe dein Logo in den Header (dort gehört es imho nämlich hin)
Es gibt unzählige Beispiele im Netz für solche Layouts. Sehr lehrreich (wenn auch für Einsteiger vielleicht etwas schwierig zu verstehen) ist in diesem Zusammenhang auch: Grundlagen für Spaltenlayout mit CSS
Mit deinem jetzigen Ansatz wirst du jedenfalls nicht das erreichen, wovon ich ausgehe, dass du es erreichen möchtest.
Und noch eins: Wozu arbeitest du mit den Höhenangaben? Das ist in aller Regel
1. nicht notwendig und
2. machst du dir einen der größten Vorteile, nämlich dass sich die jeweiligen Elemente in ihrer Höhe dem Inhalt anpassen, zu Nichte. Also verzichte auf explizite Hohenangaben.
Gruß Gunther