[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ę ).

[Rid]

Jeśli szuka Pan ,żeby ktoś Panu layout napisał to temat jest chyba do działu zlecę (IMG:style_emoticons/default/smile.gif)
Powiem tyle,że jak chce Pan mieć layout "odporny" na zmianę rozdzielczości to zamiast px używać %

[sadistic_son]

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).

Nie ma jednoznacznej odpowiedzi, a właściwie to nie ma żadnej na 100% pewnej. Różnice między przeglądarkami to odwieczne utrapienie webmasterów.
W walce z tym przydadzą się narzędzia diagnostyczne w IE (klawisz F12) oraz FireBug w FF (trzeba go doinstalować). Po prostu robisz stroną i sprawdzasz ją na bieżąco w najpopularniejszych przeglądarkach: FF, IE 6, IE >=7, Opera, Chrome, Safari. I stopniowo rezygnujesz z opcji które na jednej przeglądarce działają bez zarzutu a na innej w ogóle nie działają, lub zastępujesz je innymi.

[!*!]

Umieść stronę w głównym kontenerze

[HTML] pobierz, plaintext 
<div id="glowny">text</div>
[HTML] pobierz, plaintext 

Ten kontener wyśrodkuj za pomocą css i nadaj odpowiednią szerokość (obecny standard 980px)

[CSS] pobierz, plaintext 
#glowny{margin:0 auto;width:980px}
[CSS] pobierz, plaintext 

Jeśli chodzi o tło to zależy gdzie, można dać je w body. A menu umieszczasz w tym divie głównym. I tyle, wszędzie będzie wyglądało tak samo.

[przemek89k]

Ale ja określiłem wcześniej jakie wymiary ma mieć body - jaką szerokość i wysokość i na tej podstawie dodawałem resztę divów.

Rozumiem, że w takim razie (jak dam główny kontener) przemieszczając elementy np. zdjęcia mam używać position: absolute a nie relative ?

Ten post edytował przemek89k 31.08.2011, 18:27:08

[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

[sazian]

poczytaj tu http://www.fox.com.pl/articles/web/layout.php
lub skorzystaj z jakiegoś framework'a np. http://960.gs/

[eccocce]

poczytaj tu http://www.fox.com.pl/articles/web/layout.php

data: 2005-01-30

(IMG:style_emoticons/default/ph34r.gif)

[!*!]

[CSS] pobierz, plaintext 
width: 1000px; // standardowa wielkość :)
[CSS] pobierz, plaintext 

A scroll? Poziomy się pojawi (IMG:style_emoticons/default/smile.gif)

[CuteOne]

dla rozdzielczości 1024x768 i wyższej żadne scrolle się nie pojawią (IMG:style_emoticons/default/smile.gif)