Wyśrodkowanie strony. Rozjeżdżanie przy powiększaniu. Rozdzielczość ekranu. PROBLEM

[ohcs]

Witam!
Od niedawna bawię się CSS i HTML. Tworzę właśnie stronę pod radio internetowe. Chciałbym, żeby strona była wypośrodkowana (razem z tłem). Wypośrodkowałem więc tło w CSS za pomocą

Kod:

background-position-x: center;

, natomiast body za pomocą

Kod:

margin: 0 auto;

. Następnie musiałem ustawić parę grafik na stronie i ustawiałem je za pomocą

Kod:

position: relative; top: LICZBApx; left: LICZBApx;

. Jednak gry przesiadłem się na komputer z inną rozdzielczością ekranu, zauważyłem, że owe grafiki są w całkowicie innym miejscu! Zmieniłem więc relative na absolute, ale tu efekt taki sam! Proszę o pomoc. Mam niewiele czasu na wykonanie strony, ponieważ to do szkoły na projekt edukacyjny :/
Pozdrawiam
OHCS

[ohcs]

Nie działa :/ (albo jestem na to zbyt głupi)

Może ja podeślę część mojego CSSa na którym mi zależy. "Obrazki" to divy buttony.

Kod:

body {
    margin: 0;
    position: absolute; left: 200px; right: 200px;
    display: table;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: url(images/background.jpg) no-repeat;
    background-position-x: center;
    font-size: 13px;
    color: #FCFFFD;
    width: 1000px;
    height: 1000px;
    text-align: center;
}

h1, h2, h3 {
    margin-top: 0;
    color: #6E6C00;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.6em;
}

h3 {
    font-size: 1em;
}

ul {
}

a {
    text-decoration: none;
    color: #FFFFFF;
}

a:hover {
    border-bottom: none;
}

a img {
    border: none;
}

img.left {
    float: left;
    margin: 0 20px 0 0;
}

img.right {
    float: right;
    margin: 0 0 0 20px;
}

/* Header */

#srodkowyDiv {
    margin:0px auto;
    background: #fff url(images/background.jpg) repeat-x center;
    width: 1000px;
    height: 1000px;
}

#header {
    width: 1000px;
    height: 210px;
    position: absolute; left: 252px; right: 252px;
}

#logo {
    width: 1000px;
    height: 150px;
    margin-top: -32.5 px;
    margin-left: 325 px;
    padding: 0 px;
}

#logo h1, #logo p {
    float: left;
    margin: 0;
    color: #FFFFFF;
}

#logo h1 {
    padding: 80px 0 0 0;
    text-transform: lowercase;
    font-weight: normal;
    font-size: 3em;
}

#logo p {
    text-transform: uppercase;
    padding: 130px 100px 0 0px;
    margin-left: -150px;
    font-size: 15px;
    color: #FFFFFF;
}

#logo a {
    border: none;
    text-decoration: none;
    color: #FFFFFF;
}


/* Wrapper */

#wrapper {
    width: 1000px;
    height: 790px;
    position: absolute; left: 252px; right: 252px; top: 210px;
}

/* Page */

#page {
    width: 1000px;
    height: 790px;
    margin: 0 auto;
    padding: 30px 0;
    position: absolute; left: 252px; right: 252px;
}

#page-bg {
    padding: 11px 24px;
}

#button-more {
    width: 80px;
    height: 40px;
    position: absolute; top: 700 px; left: 105 px;
}

#button-about {
    position: absolute; top: 245px; left: 380px; right: 380px;
    width: 40px;
    height: 40px;
}

#button-djs {
    width: 50px;
    height: 50px;
    position: absolute; top: 240px; left: 522px;
}

#button-stations {
    width: 60px;
    height: 60px;
    position: absolute; top: 220px; left: 597.5px;
}

#button-contact {
    width: 65px;
    height: 65px;
    position: absolute; top: 190px; left: 685px;
}

Co tu należy poprawić?

[Ancik]

Staraj się pozycjonować za pomocą floatów, marginów, paddingów. Wogóle wsadź tutaj cały kod, bo nie mogę się połapać, który kontener pozycjonujesz do środka okna przeglądarki. Body?

Jeżeli możesz, to najlepiej puść tutaj link do strony.

[Ancik]

Trochę dziwnie to zrobiłeś... Ja zamiast dawać position:absolute dla body wwaliłbym cały content do jednego diva

Na dobrą sprawę, body to też pojemnik .