Seite im Browser mit CSS zentrieren zwischen oben und unten

[augenball]

Moin, ich habe zwei Probleme. - Das erste ist ich möchte das das body-Element im Browser auf der y-Achse (???) zentriert wird. Das zweite Problem ist ich möchte das auch für meinen "ContentHeadermix" (der soll genau in der Mitte auf dem Body-Hintergrund zentiert werden.

Bisher habe ich mit margin und den background 0 0, auto, center usw. rumgespielt keine Chance ... selbst mein ContentHeadermix wird nicht zentriert ausgerichtet.

Hier mal der CSS-Code:

/*komplettes HTML-Element*/
* { margin:0; padding:0; border:0; }

/*Html-Element*/
html {background:url(../images/html_bg.jpg) 0 0 repeat;}

/* Body-Element*/
body { 
    widht:70px;
    height:459px;
    font-family: "Arial", Helvetica, Verdana, sans-serif;
    background:url(../images/body_bg_seamless.jpg) 0 0 repeat-x;
 }
 
/*Content*/
div#contentContainer {width: 960px; height:459px; background:url(../images/website_content.jpg) no-repeat; position:absolute; margin:auto auto;}

und hier mal ein Bild vom ist-Status:



Kann mir jemand einen Tipp geben? - Ich komme nicht mehr weiter.

Gruß Ulf

 

[hedoo]

AW: Seite im Browser mit CSS zentrieren zwischen oben und unten

Hallo,
schau mal auf dieser Seite.
Dort ist der Inhalt sowohl vertikal als auch horuízontal zentriert:

Dead Centre

Gruß
hedoo

 

[augenball]

AW: Seite im Browser mit CSS zentrieren zwischen oben und unten

Ah die Seite macht schon einiges klarer ... auch das man mit Prozentwerten arbeiten kann ... werde mal sehen versuchen wie ich das anwenden kann ... Danke

So habe jetzt weiter rumprobiert ... *heul* meinen contentheadermix habe ich zentriert bekommen, aber mit diesem Hintergrund werde ich noch wahnsinnig ... der will nicht und will nicht ... egal was ich anstelle: jetzt hat er sogar einen abstandt zum linken und rechten rand ... ??? Also ich brauch noch mehr Hilfe ... hier nochmal der ist-Status:



und das ist der aktuelle Css-Code:

* { margin:0; padding:0; border:0; }

/*Html-Element*/
html {background:url(../images/html_bg.jpg) 0 0 repeat;}

/* Body-Element*/
body { font-family: "Arial", Helvetica, Verdana, sans-serif; }
 
/*Content*/
div#contentbackground {widht:70; height:459px; background:url(../images/body_bg_seamless.jpg) repeat-x; top:50%; }

div#contentContainer {width: 960px; height:459px; background:url(../images/website_content.jpg) no-repeat; position:absolute; bottom:50%; margin-top:-230px; right:50%; margin-left: -480px; left:50%; top:50%;}

Was mache ich falsch? :'(

 

[joha]

AW: Seite im Browser mit CSS zentrieren zwischen oben und unten

ich sehe hier erst maleinen kleinen Fehler


div#contentbackground {widht:70;

wird zwar nicht zwingend weiter helfen,aber oft übersieht man manches einfach, mir geht es jedenfallsso *gg

 

[augenball]

AW: Seite im Browser mit CSS zentrieren zwischen oben und unten

Oh danke für den Hinweis aber auch mit der Korrektur zentriert er den Background nicht horizontal ... irgendwie *grrr* ... nach meiner logik her müsste ich mit margin: auto auto; alles automatisch zentrieren können horizontal und vertikal ...