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:
[HTML] pobierz, plaintext 
  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">
[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.
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.
[HTML] pobierz, plaintext 
  1. <body>
  2.   <div id="top"></div>
  3.   <div id="pasekMenu"></div>
  4.   <div id="kontenerNaSmieci">
  5.     <div id="srodkowyPanel"></div>
  6.     <div id="lewyPanel"></div>
  7.     <div id="prawyPanel"></div>
  8.   </div>
  9.   <div id="stopka"></div>
  10. </body>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
  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. }
[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.
Go to the top of the page
+Quote Post

Posty w temacie
- WebCM   Dostosowanie szablonu pod 1024x768   12.08.2010, 00:07:43
- - Damonsson   Według mnie optymalnie to: Stała szerokość 1024x76...   12.08.2010, 01:21:13
- - everth   Hm, nie znam się co prawda dobrze na layoutach ale...   12.08.2010, 06:59:06
- - WebCM   @everth: nie działa, jak trzeba, chyba że źle coś ...   12.08.2010, 19:19:35
- - maverick22   ja zawsze ustawiam stałe wartości, załóżmy mam to...   12.08.2010, 20:10:49
- - everth   Tak działa, wymaga tylko pewnego przetasowania ele...   12.08.2010, 20:13:43
- - WebCM   CytatTak działa, wymaga tylko pewnego przetasowani...   12.08.2010, 20:41:53
- - darophp   A ja zapraszam na eduweb.pl --> http://blog.ed...   12.08.2010, 21:03:12
- - WebCM   Tam są już nieaktualne dane. Odsetek 1024x768 zmni...   12.08.2010, 22:30:55

« Następny starszy · CSS · Następny nowszy »
 

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

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 12.10.2025 - 16:30
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn