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.

[maverick22]

ja zawsze ustawiam stałe wartości,

załóżmy mam top,menupoziome,lewybox,content,prawybox,stopka wszystko to wrzucam w kontener



<div id="container">reszta divów</div>


container { width: 960px;
margin-left: auto;
margin-right: auto;
}






top { width: stała wartość np 960px;
height: 100px;
float:left;
}

menupoziome { width: 960px;
height: 20px;
float: left;
}

lewybox { width: 200px;
height: 200px;
float: left;

content { width: 560px;
height: 200px;
float: left;
}

prawybox { width: 200px;
height: 200px;
float: left;
}

stopka { width: 960px;
height: 20px;
clear: both;
}


obecnie BARDZO mało osób ma rozdzielczość mniejszą niż 1024 więc ja preferuje stałe. i mam pewnosc że strona mi się nie rozjedzie.

no chyba że robisz stronę pod telefon (IMG:style_emoticons/default/smile.gif)