Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów
Wyśrodkowanie strony. Rozjeżdżanie przy powiększaniu. Rozdzielczość ekranu. PROBLEM - Wersja do druku

+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: Wyśrodkowanie strony. Rozjeżdżanie przy powiększaniu. Rozdzielczość ekranu. PROBLEM (/thread-wy%C5%9Brodkowanie-strony-rozjezdzanie-przy-powiekszaniu-rozdzielczo%C5%9Bc-ekranu-problem)

Wyśrodkowanie strony. Rozjeżdżanie przy powiększaniu. Rozdzielczość ekranu. PROBLEM - ohcs - 22-02-2012

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

RE: Wyśrodkowanie strony. Rozjeżdżanie przy powiększaniu. Rozdzielczość ekranu. PROBLEM - ohcs - 22-02-2012

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ć?

RE: Wyśrodkowanie strony. Rozjeżdżanie przy powiększaniu. Rozdzielczość ekranu. PROBLEM - Ancik - 23-02-2012

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.

RE: Wyśrodkowanie strony. Rozjeżdżanie przy powiększaniu. Rozdzielczość ekranu. PROBLEM - Ancik - 24-02-2012

Cytat: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 Smile.