<div>-Layer in CSS zentrieren [3]

Hi :)

Auf der Suche nach einer Lösung für ein CSS Problem mit der Zentrierung von divs, bin ich auf dieses Forum gestossen. Vielleicht kann mir ja jemand helfen, also:

Ich arbeite zur Zeit an einem Layout, welches in etwa so gegliedert ist: problem.gif

Ich verwende die 'position' Angaben um dafür zu sorgen, dass alle Elemente ausser dem Inhalt fixiert sind --> So dass sich bei vertikalem scrollen nur der Inhalt des Content Divs bewegt aber Navigation, Head und Footer immer im Browserfenster sichtbar sind.

Die position:fixed und position:absolute Angaben setzen bei mir margin:auto ausser Kraft. Laut selfhtml.org sind in diesem Fall right/left:auto; Angaben zu verwenden. Diese erbringen jedoch kein befriedigendes Resultat, es passiert gar nichts.

Ein funktionierendes Design habe ich erreicht, in dem ich anstatt Auto einfach % Werte genommen habe, aber die bringen mich nun erst zum eigentlichen Problem.

Das Layout sollte auch bei sehr niedrigen Auflösungen noch funktionieren. Bei einer Auflösung von 640*480 sollte der Container das Browserfenster komplett ausfüllen. Die Definition von einigen min-width Angaben brachte nicht den gewünschten Erfolg: Da die right/left % Angaben immer noch ihren Tribut fordern, wird ein zu kleiner Teil des Fensters ausgenutzt genutzt.

Ich hoffe jemand hat eine Idee wie ich das Problem angehen soll.

Hier ein Verweis zu einem Test-Design. Seht ihn euch doch bitte Mal mit 640*480 an.

wasted.ch/ND/index.html

Und hier der verwendete CSS Code:

body {
background-color: #E6DDD6;
width: 100%;
margin: 0px;
padding: 0px;
}
 
a {color: #807539;}
a:hover {color: #000000;}

a.nav {color: #595228; text-decoration: none;}
a:hover.nav {color: #807539; text-decoration: none;}


#container {
position: fixed;
right: 15%;
left: 15%;
top: 0px;
bottom: 0px;
min-width: 600px;
height: 100%;
overflow: hidden;
background-color: #ffffff;
}

#head {
position: fixed;
right: 16%;
left: 16%;
top: 0px;
bottom: auto;
padding: 0px;
padding-bottom: 10px;
margin: auto;
min-width: 600px;
text-align: center;
word-spacing: 6px;
font-stretch: wider;
font: normal 15px courier;
overflow: hidden;
background-color: #ffffff;
border-bottom: 1px dashed #A99380;
}

#content {
position: absolute;
right: 5%;
left: 5%;
top: 153px;
bottom: 83px;
padding: 0px;
overflow: auto;
color: #6F5B32;
background-color: #ffffff;
border-top: 2px solid #A27757;
border-left: 2px solid #BDA391;
border-right: 2px solid #D5C9BD;
border-bottom: 2px solid #DED6CE;
}

#subnav {
position: fixed;
right: 25%;
left: 25%;
top: auto;
bottom: 47px;
min-width: 400px;
text-align: center;
word-spacing: 6px;
font-stretch: wider;
font: normal 15px courier;
overflow: hidden;
background-color: #ffffff;
}

#footer {
position: fixed;
right: 16%;
left: 16%;
top: auto;
bottom: 0px;
min-width: 600px;
min-height: 32px;
max-height: 32px;
text-align: right;
vertical-align: bottom;
font: normal 11px courier;
color: #595228;
background-color: #ffffff;
border-top: 1px dashed #A99380;
}

Hallo Ruben,

zu dem Problem mit dem IE:

der Internet Explorer versteht kein position:fixed, zeigt die betreffenden Elemente dann so an, als ob sie mit position:normal definiert wären; besser wäre ein position:absolute, dann bleibt zwar nichts stehen beim Scrollen, aber die Grundpositionen stimmen dann wenigstens. Dazu muss man das jeweilige Element erstmal mit position:absolute definieren und anschließend nochmal über einen Selector, den der IE nicht kennt, für Firefox u.a. als fixed

#container {
position: absolute;
}
body>#container {
position:fixed; 
}

zu der Zentrierung der fixen Layer:

eine Möglichkeit wäre es vielleicht, die Zentrierung über den body vorzunehmen:

body {
background-color: #E6DDD6;
width: 640px;
margin: 0px auto;
padding: 0px;
}

die Abstände von #container müssen dann entsprechend auf Null gesetzt werden:

#container {
position: fixed;
right: 0px;
left: 0px;
top: 0px;
bottom: 0px;
width: 600px;
height: 100%;
overflow: hidden;
background-color: #ffffff;
}

für body und #container braucht es dabei feste Breiten-Angaben - und auch die anderen Layer müssen in ihrer Breite noch angepasst werden

Die Zentrierung über margin: 0px auto; im Body funktioniert nicht, da fixed und absolute Elemente in ihrer Position nur durch die top/bottom/right/left Attribute bestimmt werden.

der body selbst ist aber nicht fixed oder absolute positioniert, nur die anderen Elemente sind fix / absolut im Verhältnis zum body. Deswegen funktioniert das Zentrieren über den body, wenn auch nur mit fester Breite

wäre es evt. möglich alle Elemente erst als static/normal zu definieren, das ganze design so coden, dass es mit static divs das selbe Layout hat wie jetzt mit absolute/fixed, um dann über selectors die Fixed und Absolute Werte ein zu fügen? Dann liessen sich die 'static' divs auch mit margin:auto; zentrieren.

das weiß ich nicht, ob man die Browser so überlisten kann, ich bezweifle es, aber ein Versuch ist es vielleicht wert

Ansonsten wäre es vielleicht eine Möglichkeit, auf das position:fixed überhaupt zu verzichten, den #content-Container auf eine bestimmte Höhe zu beschränken und mit overflow:auto dafür zu sorgen, dass längerer Inhalt darin gescrollt wird, während Header und Footer stehen bleiben.

Ich habe die unterschiedliche Themen mal in eigene Threads verschoben:

Wozu float:left, float:right?

Unterschiedliche Interpretation bei padding

Höhe des Footers

Hallo sa1x,

das margin:auto richtet sich nach dem übergeordneten Element aus und führt zur Missachtung des vorhergehenden float. Du kannst die Breite des linken Container aber auch noch über ein padding-left berücksichtigen

#contentborder {
margin: auto;
width: 800px;
padding-left:220px;
}

Allerdings sehe ich hier noch ein anderes Problem: bei einer relativ verbreiteten Auflösung von 1024 * 768 wird es bei den betreffenden Breitenangaben schon so eng, dass die Browser einen horizontalen Scrollbalken einfügen oder den Inhalt nach unten verschieben (IE)