Strona główna  ¦  Kontakt  ¦  Mechanika  ¦  Etykieciarki  ¦  Matryce  ¦  Wózki inwalidzkie  ¦  Tłumaczenia techniczne  ¦  Galeria  ¦  Poradnik

Jak dopasować marginesy do rozdzielczości ekranu 

Witaj internauto. Skoro znalazłeś tę stronę znaczy, ze szukałeś w internecie informacji o centrowaniu body, czyli: Jak można ustawić margines z prawej i lewej strony, aby nasza witryna wyglądała dobrze przy różnych rodzielczościach ekranu?

A oto jak wygląda nasza strona w różnych przeglądarkach - od Opery, przez Firefoxy do Internet Explorer 6 7 8 - różne wersje z różnych lat, pomimo to w każdej jest idealnie pośrodku!

Strona sobann.pl w różnych przeglądarkach - screenshoty.

Obejrzyj poniższe rysunki, czy o to chodzi? Prezentujemy wygląd naszej strony na różnych rozdzielczościach - centrum strony jest zawsze pośrodku ekranu w równej odległości od prawego i lewego brzegu strony:

Monitor 960px x 600 px. Ustawianie marginesu.

Monitor 1024px x 768 px. Sodkowanie ekranu.

Najszerszy ekran 1440px x 900 px, obraz jest w punkcie środkowym.

Teraz wykonaj proste działanie matematyczne. Ile jest:

960 px  - 920 px =

1024 px  - 920 px = 

1440 px  - 920 px=

Pierwsze liczby, 960, 1024, 1440 to różna szerokość ekranu w pixelach. Liczba 920 to szerokość body tej strony, na której teraz jesteś. Body, czyli wszystko co jest widoczne i edytowalne.

Pamiętaj, ze do body musi dojść jeszcze kawałek miejsca na suwak. 

Dlatego nie rób nigdy za szerokiego body, internauci mają komputery  o różnej szerokości ekranu. Najlepiej robić body ok. 900 px szerokości.

W przykładach 960px, 1024px i 1440px widac, że strona o body 920 px zmieści się na ekranie bez problemu i można ją wycentrować. 920 px ma body naszej strony, na której teraz jesteś.

Centrowanie ekranu w html i CSS, aby marginesy były równe 

  • JEŚLI STRONA JEST ZBUDOWANA NA DIVACH, NIE TABELKACH:
  • Musisz wydać komendę dla body i dla diva, w którym jest wszystko zapakowane. Strona www to jak walizka z ubraniami, walizka jest elementem ostatecznym, a więc głównym divem. W środku walizki (czyli diva ) znajdują się ubrania, czyli nasze menu, obrazki, teksty itd.
  • Dla body wpisz komendę:     margin: 0px;  text-align: center;
  • Dla walizki, czyli otoczki wpisz komendę: text-align: center; margin-left: auto; margin-right: auto; 
  • kod wyglada tak:
    Jak ustawić body i dopasować stronę do rozdzielczości ekranu?
  • Jesli chcesz wpisać style w CSS, to tak samo jak powyżej, tylko w klamrowych nawiasach. Diva możesz nazwać, większość stron nazywa go id="container" .

Jeśli strona jest zbudowana na tabelkach - html i CSS

  • Gdy nie używasz CSS. W kodzie html strony napisz:
    Jak ustwaić marginesy z prawej i lewej strony dla tabelki.
  • Przy użyciu CSS mamy problem, ponieważ CSS nie ustawia tabel, nie można wydawać komedn dla tabel poprzez style kaskadowe. Musisz dizałać dwutorowo:
  • Dla body w CSS wpisz komendę w nawiasie klamrowym:   body   margin: 0px;  text-align: center;
  • Dla tabelki w CSS wpisz w nawiasie klamrowym width,  np.  table  width:100 px.
  • Przejdź do kodu źródłowego strony i wpisz w html:
     Jak usawić na środku ekranu tabelkę na ekranie.
  • Jeśli zapomnisz wpisać width tabelki, albo wpiszesz width dla body - nie wyjdzie!
  • Trzymaj się ściśle poleceń i obejrzyj swoją stronę w pełnej krasie - pasującą do każdego monitora. Powodzenia!

Strona chroniona Copyscape przed kopiowaniem, możesz linkować, ale nie kopiuj !


System antyplagiatowy. Nie kopiuj treści. Możesz linkować stronę. 
 Kontrola poprawności stylu CSS. Kontrola kodu XHTML 1.0 strict. Kontrola kodu XHTML 1.0 strict.