zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden grid960 Spaltenabstände bzw. Ränder

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 09.11.2010, 19:35
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.11.2010
Beiträge: 17
enibas befindet sich auf einem aufstrebenden Ast
Standard grid960 Spaltenabstände bzw. Ränder

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.

Code:
<div class="container_12 page">
...
<div class="grid_12 alpha omega footer"> 
</div>
</div>

div.page { background-color:#fff; }
div.footer { background-color:#2fa6b3; height: 11px; }
Wie geht es richtig?

Gruß und danke,
Enibas
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 10.11.2010, 07:19
Benutzerbild von siliciumcarbid
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.10.2010
Ort: Basel
Beiträge: 115
siliciumcarbid befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 10.11.2010, 08:09
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Moin,

wo ist der Link zum Problem?
So können wir nur rumraten.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #4 (permalink)  
Alt 10.11.2010, 15:31
Benutzerbild von derHund
durstiges Tier
XHTMLforum-Mitglied
 
Registriert seit: 16.09.2004
Beiträge: 869
derHund befindet sich auf einem aufstrebenden Ast
Standard

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) | ??? | ??? | ...

Geändert von derHund (10.11.2010 um 15:33 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 10.11.2010, 20:27
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.11.2010
Beiträge: 17
enibas befindet sich auf einem aufstrebenden Ast
Standard

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

Geändert von enibas (16.11.2010 um 21:32 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 11.11.2010, 17:15
Benutzerbild von derHund
durstiges Tier
XHTMLforum-Mitglied
 
Registriert seit: 16.09.2004
Beiträge: 869
derHund befindet sich auf einem aufstrebenden Ast
Standard

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 &mdash; 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) | ??? | ??? | ...
Mit Zitat antworten
  #7 (permalink)  
Alt 12.11.2010, 16:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.11.2010
Beiträge: 17
enibas befindet sich auf einem aufstrebenden Ast
Standard

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

Geändert von enibas (16.11.2010 um 21:32 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 16.11.2010, 21:39
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.11.2010
Beiträge: 17
enibas befindet sich auf einem aufstrebenden Ast
Standard

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 ...
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
DIV bzw. section mit dynamischem bzw. variablem inhalt SteveB (X)HTML 1 07.01.2011 19:23
Div ein- bzw. ausblenden funktioniert nur bedingt basillio Javascript & Ajax 2 29.11.2010 10:55
ränder in css machen savtiger CSS 10 16.11.2010 23:16
Layout: Dynamische Ränder + Kopf, Menü, Content, Fuss + Scrollbar sailing-alex CSS 2 08.02.2007 14:53
Positionierung bzw. Steuerung Navigation |SONY| CSS 2 11.05.2006 19:22


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:49 Uhr.