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.

[everth]

Hm, nie znam się co prawda dobrze na layoutach ale dlaczego ustalasz % szerokość środka? A takie coś:

[CSS] pobierz, plaintext 
body {min-width:800px;}
#lewyPanel {
  float: left;
  width: 230px;
}
#prawyPanel {
  float: right;
  width: 230px;
}
#srodkowyPanel {
  padding: 0 240px;
  width:100%;
}
[CSS] pobierz, plaintext 

Według tego środek skaluje się wraz z szerokością - ogranicznik dolnej szerokości w body wprowadzam po to że można było sensownie zaprojektować grafikę. Oczywiście układ ten może być bez sensu z jakiegoś (nieznanego mi) powodu, ale na pierwszy rzut oka powinno działać.

[WebCM]

@everth: nie działa, jak trzeba, chyba że źle coś robię. Wypróbowałeś ten sposób?

Chyba pozostanę przy Holy Grail, tyle że bez kombinowania z tłem. Jeżeli macie inne sposoby, chętnie przetestuję.

Wadą tej techniki jest trudna modyfikacja, przez co zniechęcę część osób do jakichkolwiek zmian.

Ten post edytował WebCM 12.08.2010, 19:21:31

[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)

[everth]

Tak działa, wymaga tylko pewnego przetasowania elementów w drzewku html -> tutaj masz prototypowy szablon.

Ten post edytował everth 12.08.2010, 20:16:12

[WebCM]

Tak działa, wymaga tylko pewnego przetasowania elementów w drzewku html

Wymaga, by najważniejsza część dokumentu (środek) znajdowała się w kodzie na samym końcu (po bocznych panelach). Wolę, by znalazł się na początku (zaraz po nagłówku i pasku menu) albo ostatecznie w środku. Wciąż kombinuję, ale może uda mi się znaleźć optymalne rozwiązanie.

W tej chwili udało mi się uzyskać taki efekt, że wymiary poszczególnych paneli są poprawne, ale prawy i lewy znajdują się pod środkowym (ale po obu stronach).

Ten post edytował WebCM 12.08.2010, 20:42:56

[darophp]

A ja zapraszam na eduweb.pl --> http://blog.eduweb.pl/rozmiar-strony-www/

[WebCM]

Tam są już nieaktualne dane. Odsetek 1024x768 zmniejszył się do ~25%, ale może utrzymywać się na tym samym poziomie. Większość korzysta jednak z wyższych rozdzielczości, dlatego to będzie główny target.

Możecie jeszcze przekonać mnie do stałej szerokości ~1024px, a duże marginesy przy wyższych nie są stratą przestrzeni.

Z tego wszystkiego wynika, że pozostaje One True Layout. Pobawiłem się trochę w CSS.

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

[CSS] pobierz, plaintext 
#srodkowyPanel {
  float: left;
  width: 100%; /* nie wiem, ile % szerokości zajmie panel przy danej szerokości !! */
}
 
#lewyPanel {
  float: left;
  margin-left: -100%; /* chyba to ma związek z ustawieniem 100% dla środkowego */
  position: relative;
  right: 240px; /* chyba to samo to left: -240px, uwzględniamy margines 10px */
  width: 230px;
}
 
#prawyPanel {
  float: left; /* ostatecznie można ustawić right */
  margin-right: -240px;
  width: 230px;
  position: relative;
}
 
#kontenerNaSmieci {
  min-width: 400px; /* minimalna szerokość środka */
  padding-left: 240px;
  padding-right: 230px;
  position: relative;
}
[CSS] pobierz, plaintext 

Coś może pomotałem, ale efekt powinien wyjść. Czy da się wyrzucić nadmiarowy element #kontenerNaSmieci? Jeżeli wrzuciłbym jego CSS-y do znacznika <body>, wtedy marginesy wpłyną na nagłówek, pasek menu i stopkę.

Pewnie istnieją lepsze sposoby na uzyskanie efektu (3 kolumny, boczne o stałej szerokości, środkowa o zmiennej). Najlepiej, by środkowa kolumna pojawiła się w kodzie jako pierwsza, a potem boczne - rozwiązanie ma swoje zalety.