[CSS]Jak zrobić stronę na każdą rozdzielczość ? Opcje

[przemek89k]

Jako początkujący w tym temacie mam pewne pytanie.
Napotkałem pewne problemy z wyglądem strony w różnych rozdzielczościach i przeglądarkach.
Na początek dam, mały obrazek o co mi chodzi :
(IMG:http://img839.imageshack.us/img839/783/64615739.th.jpg)

Na obrazku powyżej obramowanie to okno przeglądarki, w którym jest strona internetowa.
Załóżmy, że w css ustawiam sobie jakieś tło (na obrazku to zielone) - i chcę stworzyć u góry na nim przy krawędzi menu (czarne).
Dodaję zatem nowy obrazek graficzny (menu) i za pomocą padding i/lub margin (wpisując liczbę px) przesuwam je odpowiednio od lewej krawędzi tak aby było na równi z tłem zielonym (tak jak to jest przy obrazku Firefox).

I w ten sposób jeżeli ktoś ma inną przeglądarkę niż moja np. IE albo inną rozdzielczość to marginesy są większe i wpisana przeze mnie liczba px jest inna niż on ma, dlatego u niego będzie się to krzaczyło ?
Jak w takim razie zrobić uniwersalną stronę, aby działała ona w każdej rozdzielczości i pod każdą przeglądarką (mogą być małe wyjątki).

PS: A czy ktoś miałby na tyle siły i chęci, aby pomógł mi poskładać w CSS stronę - jest ona niewielka, grafikę mam przygotowaną i pokazaną jak ma wyglądać - pozostaje kwestia napisania kodu (napisałem sam, ale właśnie są problemy o których piszę ).

[CuteOne]

A w jakim celu chcesz używać position: (IMG:style_emoticons/default/questionmark.gif) wystarczy nadać wszystkim blokom wewnątrz kontenera odpowiednie rozmiary

[HTML] pobierz, plaintext 
<style>
#container {
   width: 1000px; // standardowa wielkość :)
   margin: 0px auto;
}
.top {
   width: 500px;
   float: left;
}
</style>
<div id="container">
     <div class="top">
        <img src="obrazek.jpg">
     </div>
     <div class="top">
        <img src="obrazek.jpg">
     </div>
<div style="clear:both"></div>
</div>
[HTML] pobierz, plaintext 

lub z jednym elementem na środku kontenera:

[HTML] pobierz, plaintext 
<style>
#container {
   width: 1000px; // standardowa wielkość :)
   margin: 0px auto;
}
.top {
   background: black;
   width: 300px;
   height: 100px;
   margin: 0px auto;
}
</style>
<div id="container">
     <div class="top"></div>
</div>
[HTML] pobierz, plaintext 

Ten post edytował CuteOne 31.08.2011, 18:37:30