problem beim zentrieren

[jayb]

Hallo Leute!
Habe schon zu dem Thema gesucht, hat aber alles nichts geholfen!
Folgendes Problem:

Ich will einen Div-bereich, der horizontal mittig ist, in dem dann noch weitere divs sein werden, wie z.B. die Navigation etc.

body {
background: url(PS_graphics/background1_2.png);
background-repeat: repeat-x;
text-align:center;
}

.middlebox {
height:100%;
width:900px;
background-color:yellow;
margin:0px auto;
}

.leftbox { /*linke Box-->Kategorien*/
position: absolute;
top: 0;
left: 0;
height: auto;
width: 170px;
border: none;
}

.rightbox { /*rechte Box*/
position: absolute;
top: 0;
right: 0;
height: auto;
width: 170px;
border: none;
}

.inhaltdiv { /*mittlere Box*/
position: absolute;
top: 0;
left: 170px;
height: auto;
width: 560px;
border: none;
}

das ist der inhalt meiner css Datei. .middlebox soll der Div sein, der zentriert ist. hab schon alles mögliche versucht, nichts klappt. ich lasse mir das im FireFox anzeigen. Bin dankbar für eure Hilfe

edit: http://4mo.square7.ch/ <--Link zur Seite

MfG

 

[prm]

Ein Link zur Problemseite wäre hilfreich.

 

[Space Vampire]

Mit position:absolute; nimmst du die Elemente aus dem Fluss.
Soll heißen: sie orientieren sich nicht mehr an deiner .middlebox sondern ausschließlich am Viewport(Browseranzeigeberich).
verzichte auf die absoluten Positionierungen und arbeite lieber mit Floats und alles wird gut.

Die height:100%; deiner .middlebox ist ebenfalls unzureichend.
100% von was?
html und body müssen ebenfalls 100% zugeordnet bekommen, damit .middlebox einen Bezugspunkt hat!

 

[jayb]

Danke für die schnellen Antworten! Habs geschafft :)

 

[jayb]

kann mir jemand bei meiner Navigation helfen? Die obere Navigation. Ich weiß nicht woher die Abstände zwischen den einzelnen Buttons kommen?

 

[mermshaus]

Die kommen von ul#NavHor li { display: inline; }. Whitespace zwischen Inline-Elementen wird „gepackt“ (mehre Whitespace-Zeichen werden zu einem Zwischenraum) und gerendert. Das ist ganz normales Verhalten.

Nutze li { float: left; display: block; width: 200px; } oder so oder entferne die Zwischenräume im Code, um das zu ändern.