C
S
S

sevencats

seven-cats.com

artykuły

+home √ +artykuły √ +linki √ +email √
22.03.2006

Szerokość okna przeglądarki a układ paneli strony

Obecnie duży kłopot sprawia rozwój wilekości monitorów czyli ich rozdzielczość. Jeszcze 2 lata temu największa spotykana rozdzielczość wynosiła 1024x768 pixeli a najmniejsza 640x480. Obecnie ponad 76% monitorów w Sieci ma rozdz. 1024x768 i większą, 800x600 to już tylko ok 20% (źródło: Browser News: Statistics - Trendsinny serwis).

Powstaje poważny problem: czy strona ma się dostosowywać do rozdzielczości monitora, czy raczej zachować stałą szerokość? Ogromna większość webmasterów decyduje się na to drugie rozwiązanie. Najczęściej ustalają szerokość strony na 800px aby nie stresować właścicieli takich monitorów ciągłym przesuwaniem strony w poziomie. Zwykle taki panel ustawiany jest centralnie w oknie przeglądarki.

Wadą takiego rozwiązania jest strona dość skromnie wyglądająca na tle wielkiego okna przeglądarki i faktycznie zupełnie nie wykorzystująca możliwości dużego ekranu.

Wadą strony dostosowującej się do szerokości okna jest nadmierne rozciągnięcie paneli.

Postanowiłem spróbować stworzyć kod strony pozbawionej obu tych wad w możliwie największym stopniu. Rozwiązanie takie okazało się możliwe z pomocą arkuszy CSS. Poniżej jest kod HTML takiej strony:


<DIV ID="header">
  </DIV><!-- header end -->

<DIV ID="container">
  <DIV ID="centro">
    <DIV ID="left">
      </DIV><!-- left end -->
    <br clear="all">
    <DIV ID="footer">
      </DIV><!-- footer end -->
    <br clear="all">
  </DIV><!-- container end -->

A oto niezbędny kod arkusza CSS:

BODY {
  margin: 0px;
  padding: 0px;
  text-align: center;
}
DIV#container{
  position: relative !important;
  width: 80%;
  padding: 0px;
  margin: 0px auto 4px auto;
  text-align: left;
  vertical-align: top;
}
DIV#header {
  margin: 0px;
  padding: 0px;
}
DIV#left {
  position: absolute;
  top: 0%;
  right: 107%;
  width: 33% !important;
  margin: 0px 0px 16px 0px;
  vertical-align: top;
}
DIV#centro {
  width: 74% !important;
  position: absolute;
  top: 0%;
  left: 28%;
  margin: 0px;
  background-color: transparent;
  vertical-align: top;
}
DIV#right {
  position: absolute;
  top: 0%;
  left: 105%;
  margin: 0px;
  padding: 0px;
  width: 35%;
  z-index: 2;
  }
#footer {
  float: right;
  z-index: 1;
  clear: both;
  width: 100%;
  text-align: left;
  padding: 4px 0px 0px 0px;
  margin: 0px 0px 6px 0px;
}

Taki kod CSS powoduje zmianę szerokości paneli zależnie od wielkości okna przeglądarki, ponieważ ich szerokość deklarowana jest w procentach. Zmienna jest też odległość pomiędzy panelami ponieważ i ona jest deklarowana w procentach. Wszystko to zostało zrealizowane na warstwach a nie tabelach.

Wadą takiego rozwiązania jest położenie stopki strony. Powinna się wyświetlić na końcu dokumentu i zwykle tak jest. Niestety, w przypadku kiedy główny panel ("centro" ) strony jest krótszy niż sąsiednie stopka pokaże się wysoko. Powodem jest dowiązanie panelu stopki do panelu centralnego.

Kod działa na pewno we wszystkich głównych przeglądarkach dla WIN: Opera, IE6, Netscape (powyżej v.4), Firefox.

Stronę o takich założeniach zrealizowałem w praktyce: Fundacja "Dziecięcy Uśmiech"inny serwis

do góry
© Copyright 2004-2005, all rights reserved: seven-cats.com