Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Płynny układ strony oparty o obrazki
Forum PHP.pl > Forum > Po stronie przeglądarki
Asmox
Przyglądając się głębiej stronom WWW, które przeglądam na co dzień, doszedłem do wniosku, że strony wykorzystujące jedynie CSS do ubarwiania strony wymiękają. (Tylko co robić, jak komuś nie za dobrze idzie grafika? sad.gif ).
Jak już używać obrazków do upiększania strony, to można zacząć od ramki, która ją otacza. Wykorzystanie reguł powtarzających element w zależności od rozmiarów kontenera to błahostka. Problem niestety pojawia się przy rozważaniu rozmiarów strony. Niektórzy już rezygnują z monitorów i pracują na telewizorów, a z drugiej strony są osoby pracujące na starych CRT w rozdzielczości max. 1024x768. Przy czymś takim trudno stworzyć stronę, która ładnie wyświetlałaby się na jednych i drugich ekranach.

Dobrze, wyjaśniłem już głębię mojego problemu, a teraz o co mi naprawdę chodzi:
Czy da się stworzyć płynny układ oparty o obrazki?
Chwila zastanowienia i pojawia się w głowie coś takiego:
  1.  
  2. <div id="top"> <!--Posiada lewy górny róg-->
  3. <div id="top_width"></div> <!--Elementy ramki rozszerzające się zgodnie z rozdzielczością przeglądarki-->
  4. <div id="top_right"></div> <!--Prawy górny róg-->
  5. </div>
  6.  
  7. <div id="middle">
  8. <div id="left_panel"></div> <!-- Lewy panel posiada po lewej elementy ramki -->
  9. <div id="content"></div>
  10. <div id="right_panel"></div> <!-- Lewy panel posiada po lewej elementy ramki -->
  11. </div>
  12.  
  13. <div id="bottom"> <!--Posiada lewy dolny róg-->
  14. <div id="bottom_width"></div> <!--Elementy ramki rozszerzające się zgodnie z rozdzielczością przeglądarki-->
  15. <div id="bottom_right"></div> <!--Prawy dolny róg-->
  16. </div>
  17.  
Void
Osobiście staram się robić strony raczej o stałej szerokości (np. 1000px). Robię to raczej z wygody - łatwiej zachować układ strony (a czasami po prostu brzydko wygląda layout rozciągnięty od krawędzi do krawędzi). Ewentualnie dodaję np. w nagłówku i stopce po bokach jakieś płynne wypełnienie do obu krawędzi strony, środek strony zostawiając przy tym stałej szerokości i wyśrodkowany. Jeżeli faktycznie chcesz dostosowywać rozmiar każdego elementu strony do rozdzielczości, a używasz przy tym grafik jako tła (np. gradientów, cieni lub zaokrąglonych rogów) to pozostaje faktycznie wydzielić pewne statyczne elementy obiektu i te mogące się rozszerzać. Np. w przypadku zaokrąglonych rogów, powinny być one stałe o określonej szerokości, a rozmiar środkowej części bloku powinien być określony w procentach. Gorzej jeżeli w tle chcesz zrobić gradient, wtedy siłą rzeczy jeden rozmiar musi być stały (no chyba że jest to jakiś specyficzny rodzaj gradientu, który może się powtarzać w osi x i y i nie ma przy tym gwałtownych przeskoków kolorów).
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.