Stronka dopasowująca się do rozdzielczości ekranu każdego komputera!

Witam!
Piszę sobie stronkę używając CSS.
Poustalałem położenie każdego elementu w pikselach
np.

obrazek {
position : relative;
left:600px;
top: 200px;
}

Ale później po otwarciu tej strony na innym komputerze wszystko mi się rozjechało ;/

Więc przerobiłem te współrzędne z pikselowych na procentowe:)

Dałem np.

obrazek {
position : relative;
left:20%;
top: 5%;
}

Oki ale dalej wciąż elementy strony mi się rozjeżdżają.

Jak zrobić aby strona automatycznie dopasowywała się do rozdzielczości ekranu użytkownika?

Pozdrawiam Odyn :)

W praktyce dość rzadko używa się pozycjonowania bezwzględnego (position: absolute) dla większych elementów na stronie. Zamiast tego stosuje się elementy pływające (float: left).

Obecnie, przy mocno graficznych stronach, używa się zwykle layoutu o ustalonej szerokości (ang. fixed width layout). Znaczy to, że główna część strony ma np. 1000 pikseli szerokości niezależnie od rozdzielczości. Najczęściej ta główna część jest wyśrodkowana. Czyli: jeżeli masz monitor o szerokości 1280 pikseli, to te 1000 pikseli "strony właściwej" jest wyświetlanych na środku, a 140 pikseli po lewej i po prawej stronie wypełnia tło (dla prostoty pomijam paski przewijania przeglądarki). Aby osiągnąć taki efekt, wystarczy zrobić coś takiego:

html {
  background: #FFF; /* kolor tła całego "ekranu" */
}

body {
  margin: 0 auto;
  width: 1000px; /* szerokość głównej części strony */
}

Dodaj position: relative do body i już możesz w środku używać nawet pozycjonowania bezwzględnego, ale zwykle nie będzie to konieczne.

Jeśli strona składa się jedynie z pojedynczej kolumny, bez pasków bocznych itp., to możesz w ogóle nie definiować szerokości elementów. Elementy blokowe -- divy, nagłówki, paragrafy itp. -- wypełnią wtedy całą dostępną, poziomą przestrzeń.

Możesz także zastosować tzw. płynny layout (ang. liquid layout), w którym jeden lub dwa paski boczne mają ustaloną szerokość (np. 200 pikseli), a środkowa, główna kolumna wypełnia "resztę przestrzeni", przy tym ta reszta zależy od szerokości ekranu.

Jeszcze inny sposób to definiowanie szerokości elementów w formie procentowej. W przykładowym kodzie używasz procentów dla własności left oraz top, ale możesz też ich użyć do width.

Starałem się tutaj podawać dość ścisłe nazwy technik, niekiedy wraz z angielskimi odpowiednikami. Po to żebyś mógł sobie pogooglać.

No spoko ;]
Właśnie robie podobnie ;)

Dzięki za pomoc ;)