-
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.
Następne wpisy z tego wątku
- 12.08.10 12:30 Paweł Piskorz
- 12.08.10 22:11 WebCM
Najnowsze wątki z tej grupy
- Jakie znacie działające serwery grup dyskusyjnych?
- is it live this group at news.icm.edu.pl
- php, linki z nazwami a $_GET, SEO
- www polityka pl captcha
- dyktatura brudnego palucha
- www.znanylekarz.pl
- Czy pytanie o sczytywanie stron programami/skryptami to tu?
- Grupy webdevowe
- Jak wydrukować stronę?
- IIS, kilka witryn
- linki <a href="/strona.php"> (ze slashami)
- co rozszerza stronę??
- responsywny akapit <p>
- Czy istnieje jakiś emulator przeglądarek pod Mac'a?
- taka sama konfiguracja dla localhost i produkcji
Najnowsze wątki
- 2025-03-05 Zielona Góra => Senior Field Sales (system ERP) <=
- 2025-03-05 Warszawa => Data Engineer (Tech Lead) <=
- 2025-03-05 Kraków => Business Development Manager - Network and Network Security
- 2025-03-05 Zaniepokojeni mieszkańcy
- 2025-03-05 Ile pieniędzy ma bank?
- 2025-03-05 Ostrów Świętokrzy => Node.js / Fullstack Developer <=
- 2025-03-05 Białystok => Architekt rozwiązań (doświadczenie w obszarze Java, A
- 2025-03-05 Warszawa => Frontend Developer (Angular13+) <=
- 2025-03-05 Warszawa => Frontend Developer (obszar Angular13+) <=
- 2025-03-05 Chiny-Kraków => Backend Developer (Node + Java) <=
- 2025-03-05 Warszawa => JavaScript / Node / Fullstack Developer <=
- 2025-03-05 China-Kraków => Key Account Manager IT <=
- 2025-03-05 China-Kraków => Senior PHP Symfony Developer <=
- 2025-03-05 Gdańsk => Specjalista ds. Sprzedaży <=
- 2025-03-05 Ostrów Wielkopolski => Konsultant Wdrożeniowy Comarch XL/Optima (Ksi