linsk und rechts Grösse variabel

[power]

Ich denke die Lösung ist sehr einfach nur habe ich keine Idee.
Hier mal die Seite --> Klick
Nun möchte ich, dass der schwarze und grüne Balken so breit wie der ganze Bildschirm ist, der Inhalt der beiden Balken aber erste auf der Höhe der linken Navigation beginnt. Die linke Navigation, der Content und der Rechte Content werden eine feste Breite bekommen. Wenn nun jemand einen breiten Bildschirm hat, soll der Header und die Topnavi automatisch verlängert werden, wenn man einen weniger breiten Bildschirm hat soll links und rechts einfach der Abstand kleiner sein oder gar kein Abstand haben. Wie baut man so ein Layout auf?

MfG
Power

 

[Efchen]

Nun möchte ich, dass der schwarze und grüne Balken so breit wie der ganze Bildschirm ist

Das meinst Du wahrscheinlich nicht wirklich, wenn jemand sein Browserfenster nicht maximiert hätte, würde er sich doch sehr wundern. Aber auf Breite des Viewports wäre problemlos machbar. Die Elemente sind so klein, weil Du dem div#container eine feste Breite von 1000px gegeben hast. Das solltest Du ändern. 100% ist übrigens die Breite des Viewports (bzw. des Elternelements) bei Block-Elementen.

der Inhalt der beiden Balken aber erste auf der Höhe der linken Navigation beginnt.

Du meinst nebeneinander? Dann können die Balken aber nicht mehr 100% breit sein.
Oder meinst Du untereinander auf der gleichen Höhe? Dazu müsste das Menü auch ganz links anfangen, tut es das nicht, steht das im Widerspruch zur 100% Breite.

Wenn nun jemand einen breiten Bildschirm hat...

Die Breite des Bildschirms ist, wie eingangs schon bemerkt, für Deine Website nicht relevant. Allein die Größe des Viewports zählt!

 

[power]

Das Layout soll so sein wie dort --> Klick. Ich hoffe das erklärt alle Fragen bezüglich des Layouts :-).

Ich finde es schön das sich der Abstand links und rechts vergrössert oder verkleinert, jenachdem wie breit der Browser ist. Habe ja fast alles, jetzt muss ich nur noch links und rechts neben Topnavi und Headers etwas haben, dass sich grösser oder kleiner darstellt, je nach Breite des Browsers.

 

[Efchen]

Das ist eine Seite mit fixer Breite, die horizontal zentriert ist.

#wrapper {
  width:700px;
  margin:0 auto;
}

 

[power]

So etwas ähnliches habe ich im CSS:

#container {
 width: 1000px;
 margin: 0px auto;
 background-color: #fff;
 color: #333;
 border: 1px solid gray;
 line-height: 130%;
}

Ich weis einfach nicht, wie ich links und rechts die zwei Balken verlängern soll. Ein weiteres Div kann ich ja nicht machen, denn dem müsste ich eine feste Breite geben damit man den ganzen Hintergrund sieht. Eine feste Breite kann ich nicht vergeben, dann würden sich die Ränder links und rechts nicht mehr automatisch vergrössern und verkleinern.

Also was für Möglichkeiten gibt es?

 

[Loon3y]

Ich nehme mal an, dass du mit "Balken" den Rahmen meinst. Das geht nicht. Rahmen ist nur solange wie das Element.

Möglich wäre "nur"

html

<div id="over">
   <div id="inner">


   </div>
</div>

css

#over { width:700px; height:500px; margin:0px auto; border:1px solid #000; border-bottom:0; }
#inner { width:700px; height:300px; border-bottom:1px solid #000; }

Anbei: Deine 1000px breite sind ein bisschen viel.....

Gruß
Loon3y

 

[Efchen]

Ich weis einfach nicht, wie ich links und rechts die zwei Balken verlängern soll.

Diese beiden Balken stehen innerhalb des div#container
Deswegen sind sie auch genau so breit. Wenn Du #container breiter machst, dann werden auch die Balken breiter. Aber eben auch der Inhalt darunter. Wenn Du das nicht willst, dann musst Du Deine Balken aus dem div#container herausnehmen.