Hallo,

ich dachte, das System des Grid960 mit den ganzen Optionen wie Push/Pull, Suffix/Prefix u.a. einigermaßen verstanden zu haben. Aber mit den Spaltenabständen bzw. Rändern stehe ich irgendwie auf Kriegsfuß.

In meinem 12-spaltigen Layout soll am Ende ein farbiger Balken über die gesamte Breite gehen. Also habe ich ein Div mit class="grid_12" angelegt und ihm eine Hintergrundfarbe verpasst. Der gesamte Container hat eine andere Hintergrundfarbe. Container und Balken sollten links und rechts genau abschließen. Jetzt ist allerdings der Balken um jeweils 10px (=margin) schmaler. Also dachte ich, dass kann man ja mithilfe Alpha und Omega auf 0 setzen. Jetzt schließt der Balken links mit dem Container ab, aber rechts ist der Versatz nun 20px, d.h., der farbige Bereich ist einfach nur um 10px nach links gerutscht.

Wie geht es richtig?

Gruß und danke,
Enibas

wenn der footer wie im Beispiel ganz unten ist, könntest du ihn auch ausserhalb des.page div's platzieren und eine Breite definieren. Ansonsten prüfe, ob es evtl. paddings gibt, die nicht da sein sollen.

Moin,

wo ist der Link zum Problem?
So können wir nur rumraten.

__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus

Pack den Footer in einen eigenen container_12, dem du die Hintergundfarbe gibst, grid_12 hat von Hause aus {width: 940px;}, wenn du also an den grundlegenden Klassen festhalten willst (wogegen nichts spricht), bleibt dir nichts anderes.

alpha & omega sind nur für grid_x, die sich innerhalb eines grid_x befinden.

Achso, wenn der Footer lediglich Dekoration ohne Inhalt ist, kannst du auch einfach einen border-bottom für den page-Container definieren.

__________________
Die Zeit hat ihre Kinder längst gefressen: hund (back in black) | ??? | ??? | ...

Danke für Eure Ideen und Hinweise.
Ich hab' meine Anfänge gerade mal online gestellt.

Den einfarbigen Footer ohne Inhalt könnte ich sicher auch per Border an der Seite bündig abschließen lassen. Aber es gibt in anderen Zellen (grid_x) noch Fotos im Hintergrund, wo ich auch mit diesem Problem kämpfe - siehe Header und das Foto rechts. Irgendeinen Workaround müsste es doch geben? Ich seh' wohl gerade den Wald vor lauter Bäumen nicht.
...

Oder ich muss die Hintergrundfarbe weiß nicht für den container festlegen sondern für grid_12, in den dann alles weitere hineingeschachtelt wird. Was meint ihr dazu?

Gruß, Enibas

Wie schon erwähnt, pack den Footer in einen eigenen container_12, dem kannst du die Hintergrundfarbe geben. Verzichte auf die Klassen alpha und omega, die sind für deine Zwecke nicht relevant. Schau dir nochmal den grundlegenden Aufbau des 960er-Grids an, dann siehst du recht schnell, was du wie einbinden musst.

960 Grid System — Demo

Und lass mal die ganzen leeren Divs weg, welchen Zweck sollen die denn erfüllen?

__________________
Die Zeit hat ihre Kinder längst gefressen: hund (back in black) | ??? | ??? | ...

Ok, ich hab' mal etwas aufgeräumt. Allerdings ist der Streifen unten kein extra container sondern border-bottom in verschachtelten grid-Zellen.

Aber nun ein neues Problem: Das Foto rechts in der Randspalte sowie der unterste Punkt in der angedeuteten Navigation (Impressum) soll unten am Ende des weißen Bereichs ausgerichtet werden. Wie mache ich das? Die Suche hier im Forum habe ich schon bemüht und einiges gelesen, aber ich komme trotzdem nicht weiter. Die divs links und rechts sind ja nur so hoch wie ihr Inhalt. Zur Verdeutlichung habe ich links die graue Hintergrundfarbe eingesetzt.

Habt Ihr dafür Lösungsvorschläge?

Gruß und danke, Enibas

Hab' das Problem inzwischen gelöst. Das Bild in der Randspalte wurde im Hintergrund platziert und füllt mit der Haupttextspalte ein gemeinsames Div. Sollte der Text mal sehr kurz ausfallen, kommt die Mindesthöhe zum tragen. Der Link, der an die Unterkante sollte, wurde noch unterhalb des Farbbalkens gesetzt und mit negativem Margin über den Balken verschoben.

Manchmal hilft ja auch das längere Nachdenken, während man hier tippt ...