Re: Dostosowanie szablonu pod 1024x768 lub dowolnej - Grupy dyskusyjne w eGospodarka.pl

eGospodarka.pl › Grupy › pl.comp.www › Dostosowanie szablonu pod 1024x768 lub dowolnej › Re: Dostosowanie szablonu pod 1024x768 lub dowolnej

Data: 2010-08-12 22:11:16
Temat: Re: Dostosowanie szablonu pod 1024x768 lub dowolnej
Od: WebCM <w...@g...com> szukaj wiadomości tego autora
[ pokaż wszystkie nagłówki ]
> 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