eGospodarka.pl
eGospodarka.pl poleca

eGospodarka.plGrupypl.comp.wwwDostosowanie szablonu pod 1024x768 lub dowolnejDostosowanie szablonu pod 1024x768 lub dowolnej
  • Path: news-archive.icm.edu.pl!news.gazeta.pl!newsfeed.pionier.net.pl!news.glorb.com!p
    ostnews.google.com!h32g2000yqm.googlegroups.com!not-for-mail
    From: WebCM <w...@g...com>
    Newsgroups: pl.comp.www
    Subject: Dostosowanie szablonu pod 1024x768 lub dowolnej
    Date: Wed, 11 Aug 2010 16:10:38 -0700 (PDT)
    Organization: http://groups.google.com
    Lines: 111
    Message-ID: <9...@h...googlegroups.com>
    NNTP-Posting-Host: 83.1.217.52
    Mime-Version: 1.0
    Content-Type: text/plain; charset=ISO-8859-2
    Content-Transfer-Encoding: quoted-printable
    X-Trace: posting.google.com 1281568238 24922 127.0.0.1 (11 Aug 2010 23:10:38 GMT)
    X-Complaints-To: g...@g...com
    NNTP-Posting-Date: Wed, 11 Aug 2010 23:10:38 +0000 (UTC)
    Complaints-To: g...@g...com
    Injection-Info: h32g2000yqm.googlegroups.com; posting-host=83.1.217.52;
    posting-account=KmuZcQoAAACFwi1E7xIpy-n6K4ZXwoJm
    User-Agent: G2/1.0
    X-HTTP-UserAgent: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.2.6)
    Gecko/20100625 Firefox/3.6.6 (.NET CLR 3.5.30729),gzip(gfe)
    Xref: news-archive.icm.edu.pl pl.comp.www:396434
    [ ukryj nagłówki ]

    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.

Podziel się

Poleć ten post znajomemu poleć

Wydrukuj ten post drukuj


Następne wpisy z tego wątku

Najnowsze wątki z tej grupy


Najnowsze wątki

Szukaj w grupach

Eksperci egospodarka.pl

1 1 1

Wpisz nazwę miasta, dla którego chcesz znaleźć jednostkę ZUS.

Wzory dokumentów

Bezpłatne wzory dokumentów i formularzy.
Wyszukaj i pobierz za darmo: