dreispaltiges layout - div anordnung?

[Nyasha]

Hallo, hier ist die Nyasha,
ich hab da mal ne Frage...

Mein Freund und ich rätseln schon länger an einem dreispaltigen Webseitenlayout ohne Tabellen.
(Es geht um das Nachfolgerdesign von www.tekk.tv.)
www.tekk.tv wurde aber noch mit solchen erstellt. Dies zu vermeiden, sind wir nun auf der Suche nach der CSS-Lösung.

Um den Seitenaufbau zu verdeutlichen bitte einmal auf:
www.kerstin-jahn.de/seitenaufbau.jpg schauen. Jeder farbige Kasten dort stellt ein Div-Container dar. Man sieht im Header 2, ansonsten drei nebeneinanderstehende.
Folgendes hatten wir uns überlegt:
Zentriert im Browserfenster befindet sich ein Container, der die komplette Seite quasi enthält. Zuerst oben links HeaderA und rechts daneben HeaderB. Macht man das mit float: left?
Jedenfalls liegt das Problem drunter:
In der Mitte soll ein ca. 500Pixel breiter Contentbereich entstehen, der links und rechts gesäumt ist mit zwei jeweils ca 200Pixel breiten Menüleisten. Jede Menüleiste enthält verschieden große(=lange) Menüs, zb. links oben das Navigationsmenü, gefolgt von einer Members-online-liste ect. und rechts ebenfalls mehrere Menüs zum Navigieren auf der Seite.

Wie man an den farbigen blauen (links) und grünen (rechts) Menüs erkennen kann, gestaltet sich die Länge (oder besser height) der Menüs je nach Inhalt unterschiedlich, weshalb wir schon daran dachten, die Menüs NICHT mit position:absolute auszurichten, weil sich die Menüs evt. überlappen könnten auf anderen HTML Seiten, wenn eins der Menüs drüber mal bisschen länger wird.. Und ein Scrollbalken wollen wir nicht im Menü haben! Die Menüs sollen sich automatisch vergrössern(=nach unten verlängern), wenn der Inhalt zunimmt.

Jetzt dachten wir schon daran, die Menüs links in einen Container zu packen, in dem die Menüs als einzelne Container einfach untereinander aufgereiht sind, dann den Content dazwischen und rechts wieder nen Menü-Container mit den aufgelisteten Menüs drin. Aber auch diese Idee warfen wir übern Haufen, weil wir uns nich vorstellen können, wie wir im Bedarfsfall ganz einfach zwei Menüs dieser beiden Spalten austauschen können, also bildlich gesprochen ein blaues und ein grünes Menü austauschen...
Etwas deutlicher wird das vielleicht bei www.error2k.com/test.html
Die blauen sind die Menüs mit den Inhalten, das gelbe der Content, das schwarze der Seitenbackground (der große Großelterncontainer ; ) Und das ROTE sind die Menüspalten, in denen die Menüs (blau) dann einfach aufgefädelt sind. Wenn man jetzt "Menü links1" mit "Menü rechts 2" austauschen wollte, ginge das dann überhaupt, wenn man das so verschachtelt, OHNE im Html rumschreiben zu müssen? Weil da geht ja dann der Sinn des Auslagerns beim CSS verloren, wenn man tausende HTML Seiten umbasteln müsste, weil man eine " class="menue4" " oder so austauschen und umschreiben müsste....

Puuh, viel Text, ich hoffe ihr versteht uns, was wir wollen. Bildlich ist es schon so dargestellt, wie wir den Seitenaufbau gerne hätten...
Unser Problem besteht quasi nur darin, die Menüs ohne position:absolute oder tabellen nebeneinander zu positionieren. Zumindest denken wir uns, dass wir das mit diesen Methoden nicht gut realisieren können.

Wir bitten um konstruktive Kritiken! : )
Danke schon mal und guts Nächtle,
Nyasha vs. ERRoR2k

[Engin]

Hi,

http://www.kerstin-jahn.de/seitenaufbau.jpg geht schon mal nicht,
daher ist es ein bisschen schwierig den Rest zu verstehen.  ;-)

Wenn man jetzt "Menü links1" mit "Menü rechts 2" austauschen wollte, ginge das dann überhaupt, wenn man das so verschachtelt, OHNE im Html rumschreiben zu müssen? Weil da geht ja dann der Sinn des Auslagerns beim CSS verloren, wenn man tausende HTML Seiten umbasteln müsste, weil man eine " class="menue4" " oder so austauschen und umschreiben müsste....

CSS ist nur für die Darstellung der Seite gedacht, nicht um Funktionen auszulagern.
Zum auslagern der Navi könntet ihr z.b. SSI/SSI benutzen.

Grüße,
Engin
 GYRO

[Nyasha]

Ui sorry, tut mir leid,

http://www.kerstin-jahn.de/seitenaufteilung.jpg wars... *g*
Okay, ich werd mal schaun, ob das so klappt mit den Tips aus der ersten Antwort...

Aber für weitere bin auch noch sehr dankbar!!! ; )
Ny

[Nyasha]

So, ich hab jetzt mal was mit float und diversen divs probiert und der IE zeigt es auch so an, wie ich es mir bisher vorgestellt hab. Nur der Mozilla bringt ja mal nur Käse:
Es geht um folgendes:

http://www.kerstin-jahn.de/test.html

Woran liegt das?
Ny

[Dennis (tekk.tv)]

Hi,

CSS ist nur für die Darstellung der Seite gedacht, nicht um Funktionen auszulagern.

Ist schon klar, tekk.tv bassiert auf PHP ... ;)

Was sie meinte ist folgendes:

Bei www.error2k.com/test.html sind ja 3 DIV Container links, mitte, rechts vorhanden... in container "links" sind dann nochmal 3 Container drin, Menu1links, Menu2links, Menu3links ... und für rechts das gleiche...

Gibt es aber eine Möglichkeit diese Verschachtelung durch die Container links, mitte, rechts zu umgehen?

So dass man dann später mal das Menü1Links mit Menü1Rechts austauschen kann, einfach indem man in der AUSGELAGERTEN CSS DATEI(.css) die Angaben ändert. So dass dann bei den gesamten HTML/PHP Dateien alles aufeinmal wirksam wird, ohne jede einzelne zu editieren.

Weil wenn man das mit dieser links rechts mitte Verschachtelung realisiert, dann sind die linken Menüs  ja immer an das Eltern-Element "links" gebunden und das gleiche Spiel mit den rechten Menüs und Eltern-Element "rechts". So das man ja in jeder datei die DIV-Container gegeneinander austauschen müsste, also Menu1Links z.B. mit Menu1Rechts.

Grüße Dennis...

[Engin]

Hi,

Gibt es aber eine Möglichkeit diese Verschachtelung durch die Container links, mitte, rechts zu umgehen?

Die grösse der Container bleibt doch konstant soweit ich das jetzt sehe.

So dass man dann später mal das Menü1Links mit Menü1Rechts austauschen kann, einfach indem man in der AUSGELAGERTEN CSS DATEI(.css) die Angaben ändert. So dass dann bei den gesamten HTML/PHP Dateien alles aufeinmal wirksam wird, ohne jede einzelne zu editieren.

Da hat ja kungschu schon einen vorschlag, basierend auf PHP gemacht.  (zum auslagern)
Auch mein vorschlag,das mit SSI zu lösen, wäre eine variante.
Nur mal als beispiel, das hier

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
     "http://www.w3.org/TR/REC-html40/loose.dtd">  
<html><head>  
<!--#include virtual="/inc/head.shtml"-->  
</head>  
<body id="startseite">  
<!--#include virtual="/inc/1.shtml"-->  
  
<h3 style="padding: 134px 0 0px 0;">Herzlich Willkommen bei Intcase<br> Wir wünschen Ihnen einen angenehmen Surfaufenthalt</h3>  
<img src="/bild/tastatur.jpg" style="margin:0 0;padding-bottom:0; padding-left:0;">  
<!--#include virtual="/inc/2.shtml"-->  
</body>  
</html>

steht in meineer Index Datei, wenn du dir den Quelltext auf deinen Browser ansiehst, verstehst du vllt. was ich meine.
Ich könnte jetzt beispielsweise mit wenigen handgriffen die Linke Navi mit der Rechten austauschen, und es wäre auf allen Seiten mit verändert.

Grüße,
Engin
 GYRO

[kungschu]

Hallo.

Zuerst zur Zentrierung einer Webseite: Die Möglichkeiten dazu findet ihr in den FAQs unter:
/navigation/faq.htm#mittig_zentrierte_inhalte.

Ein Besispiel (mit Code) für ein dreispaltiges Layout wie ihr es plant, findet ihr unter:
/css/layouts/mehrspaltige.htm#dreispaltig.
Info: Für ein Menü sind Listen meist am besten geeignet.(/html/text/listen.htm / http://css.maxdesign.com.au/listamatic/)

Alles zur Positionierung von Elementen findet ihr unter:
/css/eigenschaften/positionierung.htm

Wenn sich ein div-Element nach unten ausdehnen soll, verzichtet man einfach auf eine Angabe von height. So entstehen grundsätzlich auch ersteinmal keine Scrollbalken. Zusätzlich ist es sinnvoll, overflow zu definieren.

Euer Menü könntet ihr in eine seperate html-File auslagern und dann mittels include (php) einbinden. Das hätte den Vorteil, bei anstehenden Änderungen nur eine Seite umschreiben zu müssen. Hierfür muss euer Hoster euch natürlich php anbieten.

Das könnte dann zB so aussehen:
[...]

  
<body>  
<?php  
include "menue.html";  
?>  
</body>  

~~~[...]  
  
MfG, Kungschu.