Forum PHP.pl

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 :


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

Jeśli szuka Pan ,żeby ktoś Panu layout napisał to temat jest chyba do działu zlecę
Powiem tyle,że jak chce Pan mieć layout "odporny" na zmianę rozdzielczości to zamiast px używać %

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.

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

A w jakim celu chcesz używać position: 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

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

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

A scroll? Poziomy się pojawi

dla rozdzielczości 1024x768 i wyższej żadne scrolle się nie pojawią