Kiedyś stosowałem technikę One True Layout

http://www.alistapart.com/articles/holygrail

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:

<div id="top"></div>
<div id="poziomyPasekMenu"></div>
<div id="lewyPanel"></div>
<div id="srodkowyPanel"></div>
<div id="prawyPanel"></div>
<div id="stopka">

Wszystko działa. Style CSS:

#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.

do góry

On 2010-08-12 01:10, WebCM wrote:
> == 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ół.

Dodatkową wadą takiego rozwiązania jest to, że przy większej szerokości
strony masz dłuższe wiersze, żeby więc łatwiej się czytało powinieneś
zwiększyć font-size i interlinię, a tego w CSS nie zrobisz. Więc lepiej
odpuść sobie layout na %.

> A tak w ogóle jaki układ doradzacie? Strona o stałej czy zmiennej
> szerokości?

Jeżeli bardzo chcesz zmienną szerokość, to zrób tak, że przy węższych
stronach kolumny po prostu spadają na dół, tak jak się robi dla
przeglądarek mobilnych.

Chyba tu jest przykład takiego rozwiązania:
http://people.opera.com/brucel/demo/media-queries.ht
ml
(chyba, bo aktualnie strona leży, a u mnie z pamięcią różnie ;])


--
message[autor="PablO"]::after {
content:"Pozdrawiam";
}

do góry

> Dodatkową wadą takiego rozwiązania jest to, że przy większej szerokości
> strony masz dłuższe wiersze, żeby więc łatwiej się czytało powinieneś
> zwiększyć font-size i interlinię, a tego w CSS nie zrobisz. Więc lepiej
> odpuść sobie layout na %.

Z jednej strony tak, a z drugiej: w ciągu roku udział 1024x768 spadł
do ~25%. Może utrzymać się długo ze względu na wzrost ilości
netbooków, laptopów i innych urządzeń przenośnych. Jednak użytkowników
większych rozdzielczości jest więcej, dlatego chciałbym ułatwić im
życie - dostosować layout głównie dla nich.

Inną opcją jest stworzenie 2 wersji o stałej szerokości - jednej dla
1024x768, a drugiej dla wyższych (wtedy można newsy wyświetlać np. w 2
łamach). Pojawi się kolejny problem - drugą wersję dla jakiej
rozdzielczości? ;)

Naprawdę zagubiłem się :/

Pobawiłem się w CSS. Nie ma problemu z zastosowaniem One True Layout,
ale edycja takiego układu dla mniej cierpliwego webmastera może być
koszmarem. Robi się to tak:

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

#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;
}

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.

Na koniec wrócę do pytania o sens tworzenia szablonu, w którym boczne
panele są stałe, zaś środkowy dostosowuje się do szerokości okna
przeglądarki. Taki układ ma wady i zalety:

+ dostosuje się do szerokości = ładniejszy wygląd
+ nie trzeba tworzyć oddzielnych wersji
+ można ustawić max i min
- trochę nadmiarowego kodu HTML i CSS
- wymaga dużo obliczeń, modyfikacja jest trudna
- zawartość/tekst może stać się zbyt długi

do góry