Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Dostosowanie szablonu pod 1024x768, lub dowolnej rozdzielczości + techniki 3 kolumny
WebCM
post
Post #1





Grupa: Zarejestrowani
Postów: 375
Pomógł: 20
Dołączył: 28.07.2006

Ostrzeżenie: (0%)
-----


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:
  1. <div id="top"></div>
  2. <div id="poziomyPasekMenu"></div>
  3. <div id="lewyPanel"></div>
  4. <div id="srodkowyPanel"></div>
  5. <div id="prawyPanel"></div>
  6. <div id="stopka">

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.
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi
WebCM
post
Post #2





Grupa: Zarejestrowani
Postów: 375
Pomógł: 20
Dołączył: 28.07.2006

Ostrzeżenie: (0%)
-----


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.
  1. <div id="top"></div>
  2. <div id="pasekMenu"></div>
  3. <div id="kontenerNaSmieci">
  4. <div id="srodkowyPanel"></div>
  5. <div id="lewyPanel"></div>
  6. <div id="prawyPanel"></div>
  7. </div>
  8. <div id="stopka"></div>
  9. </body>

  1. #srodkowyPanel {
  2. float: left;
  3. width: 100%; /* nie wiem, ile % szerokości zajmie panel przy danej szerokości !! */
  4. }
  5.  
  6. #lewyPanel {
  7. float: left;
  8. margin-left: -100%; /* chyba to ma związek z ustawieniem 100% dla środkowego */
  9. position: relative;
  10. right: 240px; /* chyba to samo to left: -240px, uwzględniamy margines 10px */
  11. width: 230px;
  12. }
  13.  
  14. #prawyPanel {
  15. float: left; /* ostatecznie można ustawić right */
  16. margin-right: -240px;
  17. width: 230px;
  18. position: relative;
  19. }
  20.  
  21. #kontenerNaSmieci {
  22. min-width: 400px; /* minimalna szerokość środka */
  23. padding-left: 240px;
  24. padding-right: 230px;
  25. position: relative;
  26. }

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.
Go to the top of the page
+Quote Post

Posty w temacie


Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 9.10.2025 - 02:11