nicht angemeldet
Moin!
+------------+
| kopf |
|############|
| m # d e |
| e # t a |
| n # i l s|
| u # |
| # |
| # |
+------------+
Zuerst mal: Deine Probleme werden geringer, wenn du die Aufgabenstellung CSS-mäßig modifizierst. Solange du in Tabellen denkst, kommt designmäßig auch immer nur eine Tabelle heraus - und die kannst du logischerweise einfacher als Tabelle umsetzen. :)
Aber grundsätzlich ist CSS nicht anders, als eine Tabelle auch: Man definiert rechteckige Bereiche. Der Unterschied ist: Diese Bereiche sind nicht in ein starres Muster gepreßt, wie bei einer Tabelle, sondern sind wirklich frei beweglich, können sich überlagern, nebeneinander stehen, umflossen werden und so weiter.
Wenn ich mir dein Layout so ansehe, dann erkenne ich grundsätzlich folgende Struktur:
Oben quer ein Bereich über die gesamte Breite. Darunter zweispaltig links/rechts mehr Inhalt.
Die Balken sind erstmal garnicht von Belang. Die kriegt man ganz sicher durch Angabe einer "border" hin.
Als HTML umgesetzt würde das so aussehen:
<body>
<div style="background:blue;">Headline</div>
<div>
<div style="width:100px; background:red; float:left;">
Menübereich<br><br><br><br>
</div>
<div style="background:green;">
Inhaltsbereich<br>
Inhaltsbereich<br>
Inhaltsbereich<br>
Inhaltsbereich<br>
Inhaltsbereich<br>
Inhaltsbereich<br>
Inhaltsbereich<br>
Inhaltsbereich<br>
Inhaltsbereich<br>
</div>
</div>
</body>
Das ist _in etwa_ schon das, was du wolltest.
Das Menü liegt oben links elegant seitlich vom Inhalt, welcher es umfließt. Durchaus nicht uninteressant, dieser Effekt.
Aber da du ja Tabellenartiges wolltest, kriegst du das auch:
Das Menü muß links bleiben können, der Inhalt aber weiter nach rechts gerückt werden.
Das zweite ist simpel: Linkes Padding oder margin erhöhen (da wir noch einen Balken wollen, lieber margin nehmen):
<div>
<div style="width:100px; background:red; float:left;">Menübereich<br><br><br><br></div>
<div style="background:green; margin-left:100px;">Inhaltsbereich<br>Inhaltsbereich<br>Inhaltsbereich<br>Inhaltsbereich<br>Inhaltsbereich<br>Inhaltsbereich<br>Inhaltsbereich<br>Inhaltsbereich<br>Inhaltsbereich<br> </div>
</div>
Oh Wunder, das gewünschte ist schon erreicht! Jedenfalls in meinem Opera. Um das mit anderen Browsern zu bestätigen, gleich dort testen. Vor allem Netscape 4 könnte Probleme machen...
Opera 6: OK!
IE 5.5: OK!
IE 6.0: OK!
NS 4.78: Nicht hingucken, sieht etwas grausamst aus (noch).
Mozilla: Hab ich gerade nicht da, sollte eigentlich auch ordentlich sein.
Netscape 4 verreißt. Aber es sieht nur scheinbar so grausam aus - grundsätzlich ist Netscape durchaus in der Lage (und zeigt es ja auch), daß er die grundsätzliche Position der DIVs hinkriegt. Nur scheinbar scheint er das Menü nicht über den Rand zu legen, sondern ihn extra einzufügen.
Dagegen kann man natürlich etwas tun: Den roten Menülayer absolut positionieren:
<div style="width:100px; background:red; float:left; position:absolute; top:0px; left:0px;">
Menübereich<br><br><br><br>
</div>
Dummerweise sorgt das dafür, daß der Layer ausbricht und sich ganz links oben hinsetzt. Besser wäre, wenn er sich einfach ganz links oben innerhalb des umschließenden DIV hinsetzt, wo er vorher ja auch war. Kein Problem:
<div style="position:relative; left:0px; top:0px;">
<div style="width:100px; background:red; float:left; position:absolute; top:0px; left:0px;">
Menübereich<br><br><br><br>
</div>
<div style="background:green; margin-left:100px;">Inhaltsbereich<br>
Inhaltsbereich<br>
Inhaltsbereich<br>Inhaltsbereich<br>Inhaltsbereich<br>Inhaltsbereich<br>
Inhaltsbereich<br>
Inhaltsbereich<br>
Inhaltsbereich<br>
</div>
</div>
Wenn der umschließende Layer relativ positioniert ist, werden enthaltene Layer innerhalb dieses Layera ausgerichtet, nicht relativ zum Browserfenster.
Dummerweise schießt jetzt der IE quer.
Naja, einen Trick hätte ich da noch: Statt margin nehmen wir padding:
<div style="background:green; padding-left:100px;">Inhaltsbereich<br>
Inhaltsbereich<br>
Inhaltsbereich<br>Inhaltsbereich<br>Inhaltsbereich<br>Inhaltsbereich<br>
Inhaltsbereich<br>
Inhaltsbereich<br>
Inhaltsbereich<br>
</div>
Und BINGO! Alles da, wo es sein soll.
Die Rahmen werden jetzt auf zwei Arten erstellt. Der erste Rahmen ist ein border-bottom unterhalb der Headline:
<div style="background:blue;border-bottom:solid 10px yellow;">Headline</div>
Netscape 4 versagt da leider. Wenn's wirklich wichtig ist, dann sollte die Linie durch eine Grafik erstellt werden.
Der senktrechte Balken kann simpel durch ein Hintergrundbild erstellt werden. Auch das wird der Netscape 4 nicht so recht können, bzw. er verschiebt sicherlich das Bild. Eventuell hilft es, das Hintergrundbild in den umschließenden Layer zu packen.
An diesem Punkt muß man sich eben entscheiden: Gefrickel wegen Netscape 4, oder Zufriedenheit nur für Benutzer aktueller Browser?
Ach ja: Erst jetzt ist es angebracht, die Style-Attribute aus den DIVs zu entfernen und in ein externes Stylesheet zu packen. Die Layer erhalten dann IDs und eventuell auch noch Klassen zugewiesen, um die Formatierungen zu erhalten. Vorteil bei den style-Angaben: Ich muß bei Änderungen nur eine Datei speichern und kann direkter am Objekt arbeiten. Das geht aber nur eine begrenzte Entwicklungszeit gut.
- Sven Rautenberg