Dostosowanie szablonu pod 1024x768, lub dowolnej rozdzielczości + techniki 3 kolumny Opcje

[WebCM]

Kiedyś stosowałem technikę One True Layout. Tym razem nie ma potrzeby, bo tło dla wszystkich 3 kolumn jest jednakowe.

Szablon, który podpinam, ma ściśle określone szerokości. Strona wyświetla się w całości pod wyższą rozdzielczością. Na rynku dominują panoramiczne monitory LCD i OLED, ale w netbookach, laptopach i tabletach 1024x768 pewnie wciąż jest standardem.

Układ jest taki:

[HTML] pobierz, plaintext 
<div id="top"></div>
<div id="poziomyPasekMenu"></div>
<div id="lewyPanel"></div>
<div id="srodkowyPanel"></div>
<div id="prawyPanel"></div>
<div id="stopka">
[HTML] pobierz, plaintext 

Wszystko działa. Style CSS:

Kod

#top {
  float: left;
  width: 1100px;
  height: 117px;
  overflow: hidden;
}

#poziomyPasekMenu {
  float: left;
  width: 1080px;
  height: 28px;
  padding: 12px 10px 0;
  margin-bottom: 10px;
}

#lewyPanel {
  float: left;
  width: 230px;
}

#prawyPanel {
  float: right;
  width: 230px;
}

#srodkowyPanel {
  float: left;
  width: 620px;
  margin: 0 10px
}

Jak widać, każdy panel ma swoje miejsce i nic nie powinno "wypłynąć" albo przesunąć się.

Załóżmy, że szablon ma wyświetlać się w całości na 1024x768. Powiecie, że nie opłaca się, bo technika się szybko rozwija. Mimo wszystko prawie wszystkie strony biorą tę rozdzielczość pod uwagę.

W czym problem?

Załóżmy, że szerokość strony zależy od szerokości okna przeglądarki. Może to wyglądać tak:

Lewy panel: wartość stała
Środkowy panel: wartość procentowa (!)
Prawy panel: wartość stała

Jeżeli boczne panele będą miały stałą szerokość, a środkowy - procentową, strona może się rozjechać przy zbyt małej rozdzielczości ekranu albo szerokości okna przeglądarki. Po prostu środkowy panel będzie zbyt duży, dlatego prawy wyleci na dół.

Jakie rozwiązanie?

Mogę zapożyczyć rozwiązanie z One True Layout, czyli pozycjonowanie relatywne, marginesy i prawdopodobnie float. Raczej nie ma problemu z wyświetlaniem w IE, ale ma kilka wad:

1) Edycja jest trudna - dla mniej wprawionych webmasterów
2) Środkowy i prawy panel mają (prawie) ściśle ustawione marginesy - nie wiem, czy to nie utrudnia życia użytkownikom mobilnych rozwiązań

Są też zalety:

1) Środkowy panel może być ładowany na początku, a potem boczne
2) Można określić minimalną i maksymalną szerokość strony

Co o tym wszystkim myślicie?

A tak w ogóle jaki układ doradzacie? Strona o stałej czy zmiennej szerokości? Wydaje mi się, że szkoda marnować połowę miejsca na marginesy (byle nie przesadzić), z drugiej strony ewentualne obrazki na stronie trzeba skalować (max-width: 100%). Może zastosować inną technikę albo pozostać przy tej, która już jest (czyli float i stałe szerokości)?

Zależy mi na tym, by przeglądarka wyświetlała (renderowała) stronę tak szybko, jak to możliwe.

[Damonsson]

Według mnie optymalnie to: Stała szerokość 1024x768

Obalam Twój argument o tym, że strona się będzie rozjeżdżać przy mniejszych rozdzielczościach...aktualnie mniej niż 1024px szerokości posiada 0,7% rynku

Przy stałej szerokości strona będzie wyglądać tak samo, czy na małym monitorze, czy na wielkim panoramicznym LCD, czy też na laptopie. Bez zbędnego martwienia się.

Wszystkie nowe strony są dopasowywane do 1024px, ba Nasza Klasa jakieś dopiero pół roku temu przeszła bodajże z 800px, dopiero na 1024px

Myślę, że przez najbliższe 2 lata procentowy udział 1024px w rynku nie spadnie poniżej 20%, a to jest już sporo.