Zur Navigation

<div>-Layer in CSS zentrieren [3]

21 Ruben (Gast)

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;
}

18.04.2005 10:58

22 Ruben (Gast)

Noch eine kurze Anmerkung: Das Test Design funkioniert im Moment am besten mit Firefox. Die mangelhafte CSS Implementation des IE lässt das ganze nicht sehr schön aussehen...

18.04.2005 11:15

23 Jörg

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

18.04.2005 12:08 | geändert: 18.04.2005 12:13

24 Ruben (Gast)

Also erst Mal Danke für die rasche Antwort :)

Nun, zu der Zentrierung über den Body, zwei Probleme:

1. 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. Das bedeutet entweder eine feste Angabe in px oder % zu diesen Werten. Die 'auto' Angabe funktioniert bei fixed/absoute Elementen weder im Zusammenhang mit margin/padding noch top/bottom etc.

2. Selbst wenn es funktionieren würde, wäre die maximale Breite der Internetseite auf 640px limitiert. User mit einer 1600*1200 Auflösung sehen dann nicht viel mehr als einen kleinen dünnen Streifen auf dem Bildschirm.

Hmm... 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 werd ich wohl versuchen, mal sehn :)

18.04.2005 12:52

25 Jörg

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.

18.04.2005 13:29 | geändert: 18.04.2005 13:31

26 Ruben (Gast)

Stimmt, also zumindest was absolute betrifft. Fixed wird direkt vom Browserfenster her gemessen, ich habs probiert. Da kann ich den Body auf 600px beschränken und einem fixed Element trotzdem die Breite 1000px oder 100% geben.

Das mit den Static Elementen hat sich als Fehlschlag entpuppt, schon alleine weil mit Static Divs das selbe Layout gar nicht möglich ist *g*.

Der Vorschlag mit dem begrenzten Container kl ingt gut. Werd ich probieren, danke für alles :)



18.04.2005 13:54

28 sa1x (Gast)

hi,
ich hätte da mal ein problem ;)

hab die seite / das forum über google gefunden. hoffe is ok wenn ich das alte topic benutze.

Ich habe links ein div für die links und daneben ein div für den content. das content div soll zentriert werden über margin:auto. Der ie stellt das ganze richtig dar ( bzw. so wie ich es will ) er zentriert das div in dem noch vorhandenen raum. Allerdings firefox und opera nicht da diese das div von der ganzen seite aus gesehen zentrieren und nicht das div für die links mit einbeziehen.

hier auch mal die seite: http://sa1x.uttx.eu/ZeR0/

hoffe könnt mir helfen.

mfg sa1x

05.10.2006 12:31

29 Jörg

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)

05.10.2006 13:09 | geändert: 05.10.2006 13:14

30 Nelly

@Jörg

Ich möchte mich an dieser Stelle für Deine Lösung von der ersten Seite dieses Threads bedanken (Dein CSS-Code von "früher").

Er funktioniert tatsächlich immernoch super und hat mir unendliche Kopfschmerzen genommen.

Danke nochmals.

14.10.2006 14:19