Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: 100%skalowany layout - panel na 3 Divach
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
Pornolio
2.09.2010, 15:41:36
chciałbym zrobić 100% skalowany layout.

Mój plan na głowny panel z treścią wygląda tak (o menu i innych panelach nie piszę):

- jeden główny div, pozycjonowany absolutnie na "procentach" względem 4 boków okna browsera.
- w środku 3 lub 4 Divy z treścią.:
1. topóweczka, absolutnie przyklejona do górnego, lewego i prawego boku diva głównego: własciwośc left, right, top, na 0px.
A w środku, mamy IMG z szerokością na 100% i wysokością na auto.
2. Analogicznie ze stopką, czyli spodem panelu, taki sam div tylko że zamiast top, jest ustawiona własność bottom na 0px.

Teraz wszystko się ładnie skaluje w zależności od wielkości okna browsera

PROBLEMEM JEST TYLKO ŚRODKOWY DIV, LUB DIVY!!!!!!!!!

W środkowym divie jako tło ma być ustawiona jedna pozioma "linijka" grafiki, ale ale, powinna się skalować w poziomie w zalezności od aktualnej wielkości okna i repetować w pionie, więc wykorzystanie własności background-pic odpada, bo tego dziadostwa skalować nie można, a tylko repetować w tą i na zad :-/ Jeśli natomiast wykorzystam obrazek, w środkowym divie to wprawdzie pięknie się skaluje w poziomie ale w żeby się powielał w poziomie, to dobrze zrobić się tego nie da. Dlaczego? Po pierwsze wówczas cały środkowy div rozwali się na całego rodzica (tak nie może być bo to są PNG z przeźroczystością), zamiast ułożyć się pomiędzy górnym i dolnym, a IE wyswieli tylko jedną linie, więc nie rozciągnie go w ogóle.

Czy ktoś ma jakiś pomysł aby rozwiązać problem środkowego diva, tzn:
- Żeby się układał pomiędzy górnym i dolnym.
- Żeby ta pozioma linijka grafiki się skalowała w poziome i rozciągała w pionie
- Żeby jego wysokość ustawiała się automatycznie w zalezności od ilość tekstu.
- Skoro o tekscie mowa to za cholere nie moge go wysunąć nad IMG. Teskt zamykam w SPAN i ustawiam odpowiedni z-index dla SPAN i IMG i ZAWSZE do cholery tekst jest pod spodem zamiast nad grafiką.

A może da się jakoś nałożyć kolejny div z tekstem, tak aby pod spodem był div z grafiką i był przyklejony do tego tekstowego który jest nad nim.

Z tymi pytaniami zwracam się do Was i wiem że nie ucieknę od Jscriptu, choćby po to aby ustawiać wielkość czcionki i marginesy w zależności od wielkości okna przeglądarki.

Ps. Te CSSy są jednak do bani!!!!!
PS2. JEŚLI KTOŚ OBCZAI JAK TO ZROBIĆ BEZ JS, (NIE LICZĄC OBSŁUGI TEKSTU) STAWIAM BROWAR!!!!!!!!!
pedro84
2.09.2010, 15:46:52
Wrzuć strukturę i CSS, bo mnie się wydaje, że masz ostro namieszane.

PS. CSS do bani? Raczysz żartować. A, i nie krzycz tak.
Pornolio
3.09.2010, 00:09:08
Już wklejam:
[HTML] pobierz, plaintext 
  1. <?xml version="1.0" encoding="iso-8859-2"?>
  2. <!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3.         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <title>Untitled Document</title>
  8. <style type="text/css">
  9. body {
  10. 	background-color: #FFF;
  11. 	background-image: url(images/Back-Grandient.png);
  12. 	background-repeat: repeat-x;
  13. }
  14. #PanelMain {
  15. 	position: absolute;
  16. 	left: 240px;
  17. 	top: 149px;
  18. 	right: 240px;
  19. 	bottom: 10px;
  20.  
  21.  
  22. }
  23. .Panel1H_Top {
  24. 	position: absolute;
  25. 	left: 0px;
  26. 	right: 0px;
  27. 	top: 0px;
  28.  
  29.  
  30. }
  31. .Panel1H_Bottom {
  32. 	position: absolute;
  33. 	left: 0px;
  34. 	right: 0px;
  35. 	bottom: 0px;
  36.  
  37.  
  38. }
  39. .Panel1H_Midle {
  40. 	position:relative;
  41. 	top:auto;
  42. 	bottom:auto;
  43. 	z-index: 1;
  44. 	height: auto;
  45. }
  46. </style>
  47. </head>
  48.  
  49. <body>
  50. <div id="PanelMain">
  51.  
  52.  
  53.  	<div class="Panel1H_Top"><img src="images/Panel1_Big_Top.png" style="width: 100%; position: absolute; left: 0; top: 0;" alt="Komputromistrz pogotowie informatyczne" /> </div>
  54. 	<div class="Panel1H_Midle"><img src="images/Panel1_Big_Midle.png" style="width: 100px; height: 100%;" alt="Komputromistrz pogotowie komputerowe" /> </div>
  55. 	<div class="Panel1H_Bottom"><img src="images/Panel1_Big_Bottom.png" style="width: 100%; position: absolute; left: 0; bottom: 0;" alt="Komputromistrz usługi informatyczne" /> </div>
  56.  
  57. </div>
  58. </body>
  59. </html>
[HTML] pobierz, plaintext


Tu jest trochę inaczej niż napisałem post wyżej, bo trochę kombinowałem. W każdym razie clue pozostaje to samo, jak środkowy panel ustawić między górnym i dolnym, aby jednocześnie grafika Panel1_Big_Bottom.png skalowała się w poziomie i rozciągała (lub jak kto woli repetowała- w tym przypadku na to samo wyjdzie) w poziomie.
Jutro to powinno być wrzucone razem z grafikami na www.komputromistrz.eu
Webmasterr
3.09.2010, 13:29:54
Ustaw wartość czcionki i wszystkiego co potrzebujesz w %. Będzie wtedy skalowane w zależności od wielkości okna przeglądarki.
mortus
3.09.2010, 13:41:48
Ten layout bynajmniej nie jest skalowalny (obrazki będą się rozciągać i rozmywać w zależności od wielkości okna przeglądarki, a to z pewnością nie jest skalowalność). Najlepiej zacznij od podstaw CSS i HTML. Widziałem strony w całości zrobione z obrazków (znacznik <img>), ale nie wydaje mi się, aby takie projektowanie stron internetowych było słuszne. Layout strony powinien być oddzielony od jej treści, a nie wtopiony w treść.
Pilsener
3.09.2010, 13:57:19
Po co Ci te pozycjonowanie absolutne i te imgi? Zanim się zacznie narzekać na jakąś technologię, należy sobie przyswoić chociaż podstawy. Powiększanie wszystkiego jest bez sensu, bo to użytkownik może zrobić przez ctr i +, najlepszą praktyką jest robienie stron takich jak to forum - gdzie treść dopasowuje się do rozdzielczości i strona nie wygląda jak wąski pasek na środku ekranu. Na moim (trochę zaniedbanym) blogu też masz tak zrobione, że lewa i prawa kolumna jest stała a treść i nagłówek się rozciągają w zależności od szerokości monitora - możesz sobie popatrzeć, jak to jest zrobione.
Pornolio
3.09.2010, 19:53:52
Dziekuję wszystkim wujkom DOBRARADA. Takie rady to sobie może każdy laik dawać, chyba tylko po to żeby sobie podbić licznik postów na forum.
Jeśli chodzi o ścisłość, Webmasterze, to on MA BYĆ skalowalny to że główny panel ma pixele zamiast procentów to wynika z moich eksperymentów, ale nawet jeśli wpisze się te procenty to i tak się nic nie zmieni w jego wnętrzu (a na nim mi się teraz skupiłem).
Dlatego bardzo proszę jeśli już ktoś daje rady, to konstruktywne, a nie na zasadzie czepiania się terminologii, szczegółów, etc, a nade wszystko popisywania się swoją wiedzą (jeśli jesteś taki dobry jeden z drugim, że mówisz mi żebym się cofną do przedszkola, to pokaż swoją klasę - gadać po próżnicy to każdy potrafi)
Jeżeli uważacie że css jest dobry, to rozwiążcie mój problem, a przyznam rację.
Do kolegi który mówi że to nie jest dobre podejście kieruje wysunięty środkowy palec. Nie ty będziesz decydował o tym jaką techniką JA będę się posługiwał podczas robienia moich stron.

Chcę zrobić coś jak by nie patrzeć nowego i utknąłem na pewnym etapie, bardzo więc proszę o powstrzymanie się od głupich komentarzy, nie wiesz jak rozwiązać problem - trzymaj paluchy przy sobie!!!
mortus
3.09.2010, 20:36:46
Tyle, że to co zaprezentowałeś, to żadna technika, a jedynie niewłaściwe podejście. Ciekaw jestem, w którym miejscu wstawisz właściwą treść strony?

Nie wszystkie elementy na stronie internetowej można (da się skalować). Przykładem może być np. jakiś moduł aktualności, który z założenia jest kolumną o szerokości 300px. Przecież zmniejszenie szerokości tej kolumny o np. 75% spowoduje, że będzie ona nieczytelna.

No niestety nie ma innego sposobu na powtarzanie tła w pionie, jak tylko atrybut repeat-y stylu. Rozwiązaniem Twojego problemu może być podzielenie środkowego diva na dwa, przy czym ten węższy w tle (background-image) będzie miał fragment obrazka zawierający tę pionową linię i tło będzie się powtarzać w pionie. Oczywiście musisz ustalić szerokość dla obu tych div'ów.

Najlepiej pokaż obrazek (layout) i powiedz, co rozumiesz przez skalowalność. Zauważ, że jeśli Twój obrazek będzie miał szerokość 1024px i ktoś spróbuje go wyświetlić na monitorze, który obsługuje rozdzielczość np. 1400x900px, to obrazek będzie zniekształcony i nieczytelny.

Źle mówię?
Pornolio
4.09.2010, 00:21:29
Ok, uporządkowałem już trochę kod, to co ma być jest tak jak ma być, a to czego nie wiem, albo nie jestem pewien opatrzyłem podwójnymi nawiasami klamrowymi i znakami zapytania.
[HTML] pobierz, plaintext 
  1. <?xml version="1.0" encoding="iso-8859-2"?>
  2. <!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3.         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <title>Untitled Document</title>
  8. <style type="text/css">
  9. body {
  10. 	background-color: #FFF;
  11. 	background-image: url(images/Back-Grandient.png);
  12. 	background-repeat: repeat-x;
  13. }
  14. #PanelMain {
  15. 	position: absolute;
  16. 	left: 15%;
  17. 	top: 15%;
  18. 	right: 15%;
  19. 	bottom: 5%px;
  20. }
  21. .Panel1H_Top {
  22. 	position: absolute;
  23. 	left: 0%;
  24. 	right: 0%;
  25. 	top: 0%;
  26. 	z-index: 1;
  27.  
  28. }
  29. .Panel1H_Bottom {
  30. 	position: absolute;
  31. 	left: 0%;
  32. 	right: 0%;
  33. 	bottom: 0%;
  34. 	z-index: 1;
  35.  
  36. }
  37. .Panel1H_Midle {
  38. 	{{position:questionmark.gif?
  39. 	top:auto;
  40. 	bottom:auto;
  41. 	z-index: 1;
  42. 	height: auto; 
  43. 	width: auto;}}
  44. }
  45. </style>
  46. </head>
  47.  
  48. <body>
  49. <div id="PanelMain">
  50.  
  51.  
  52.  	<div class="Panel1H_Top"><img src="images/Panel1_Big_Top.png" style="width: 100%; position: absolute; left: 0; top: 0;" alt="" /> </div>
  53. 	<div class="Panel1H_Midle"><img src="images/Panel1_Big_Midle.png" style="width: 100%; height: 100%;" alt="" /> </div>
  54. 	<div class="Panel1H_Bottom"><img src="images/Panel1_Big_Bottom.png" style="width: 100%; position: absolute; left: 0; bottom: 0;" alt="" /> </div>
  55.  
  56. </div>
  57. </body>
  58. </html>
[HTML] pobierz, plaintext


całość z grafiką jest na http://www.komputromistrz.eu

Jak widać skaluje się jak trzeba, ale środkowy panel rozciąga się na cały div-rodzic, a nie o to chodzi. Próbowałem różnych właściwości pozycjonowania i nie wiem jak przylepić automatycznie środkowy div, do górnego i dolnego. Tak jak jest nie może być, ponieważ grafika jest i ma być z przeźroczystościami. Dlatego właśnie uważam że css kuleje, gdybym zaprzągł stare dobre tabele nie było by problemu (plus oczywiscie css 2.1 do automatycznej wysokości góry i dołu grafiki.)

Co do wóóóójków "dobrarada", brakuje mi czasu aby konstruktywnie odpowiedzieć na wasze "oskarżenia", ale parę cytatów i ripost poleci:

mortus:
"ędzie miał fragment obrazka zawierający tę pionową linię i tło będzie się powtarzać w pionie."
gdybyś uważnie przeczytał mój post, to wiedziałbyć że linia jest pozioma (zresztą jak niby pionowa ma się repetować w pionie?questionmark.gif"

mortus:
" Zauważ, że jeśli Twój obrazek będzie miał szerokość 1024px i ktoś spróbuje go wyświetlić na monitorze, który obsługuje rozdzielczość np. 1400x900px, to obrazek będzie zniekształcony i nieczytelny."
NIe jestem taki głupi, dziś jednostki główne są silne i środowiska przeglądarek mimo wielu warstw abstrakcji i innych wirtualizacji są na tyle silne żeby skalować obrazki w locie. Wystarczy dać obrazek o szerokości 2x większej niż najwyższa rozdziałka i problem z głowy.


pilsner:
"Na moim (trochę zaniedbanym) blogu też masz tak zrobione, że lewa i prawa kolumna jest stała a treść i nagłówek się rozciągają w zależności od szerokości monitora - możesz sobie popatrzeć, jak to jest zrobione."
Chłopie, takie layouty to ja robiłem jeszcze przed milenium na tabelach. Jeśli nie pisze dużo na tym forum, to nie znaczy że nie mam doświadczenia. My tutaj dyskutujemy o zupełnie nowym podejściu (nie chciałbym tego nazywać szumnie paradygmatem). Co po takim layoucie na monitorze fullhd, zmieni się szerokość głównego panelu, a cała reszta malutka jak Wacek jeża.

Jeszcze do gościa, który mi nawijał o separacji treści od layoutu, nie wiem czy chodziło ci o to że style do IMG są w treści, czy o to że wogóle używam IMG. Jesli to pierwsze, to wiedz że jest to tylko robocza wersja, później to się wszystko uporządkuje, zrobi się osobna regułę na element lub klase i do innego pliku. A jeśli o to drugie to chyba nie czytałeś uważnie. TUTAJ NIE DA SIĘ WYKORZYSTAĆ WŁAŚCIWOŚCI BACKGROUND-IMAGE, z uwagi na brak skalowania. W ogóle to nie musisz mi truć o separacjach treści, prezentacji, logiki, kontrolera i czego tam jeszcze chcesz, bo mam dodatkowy fakultet z IO skończony, a tutaj chyba dyskutujemy o HTML/CSS, a nie o inżynierii oprogramowania.

Ufff, starczy, zapraszam wszystkich życzliwie nastawionych do wspólnych eksperymentów, propozycja piwa jest nadal aktualna:)
Ps. Wujkom naprawdę dziękuję i zapraszam na off-topic, tutaj jest chyba poważne forum, prawda?
mortus
4.09.2010, 13:04:22
Rzeczywiście niedokładnie przeczytałem.

Poeksperymentowałem natomiast trochę i przedstawiam efekty:
[HTML] pobierz, plaintext 
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  4. <head>
  5. 	<title>Scalable Layout</title>
  6. 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. 	<style type="text/css">
  8. 		body {
  9. 			margin: 0;
  10. 			padding: 0;
  11. 		}
  12. 		#page {
  13. 			position: absolute;
  14. 			top: 5%;
  15. 			right: 10%;
  16. 			bottom: 5%;
  17. 			left: 10%;
  18. 		}
  19. 		#p_top {
  20. 			width: 100%;
  21. 			height: 25%;
  22. 		}
  23. 		#p_middle {
  24. 			width: 100%;
  25. 			height: 65%;
  26. 		}
  27. 		#p_bottom {
  28. 			width: 100%;
  29. 			height: 10%;
  30. 		}
  31. 		img {
  32. 			width: 100%;
  33. 			height: 100%;
  34. 		}
  35. 	</style>
  36. </head>
  37. <body>
  38. 	<div id="page">
  39. 		<div id="p_top">
  40. 			<img src="images/p_top.png" />
  41. 		</div>
  42. 		<div id="p_middle">
  43. 			<img src="images/p_middle.png" />
  44. 		</div>
  45. 		<div id="p_bottom">
  46. 			<img src="images/p_bottom.png" />
  47. 		</div>
  48. 	</div>
  49. </body>
  50. </html>
[HTML] pobierz, plaintext

Cały projekcik wrzuciłem na serwer. Obrazy tła nie są zbyt ambitne, ale nie o to chodziło. Aby wszystko wyświetlało się prawidłowo ustaliłem, że góra będzie zajmować 25% wysokości głównego kontenera (#page), a dół 10%. Na środkową część zostało 65% wysokości głównego kontenera. Wysokość poszczególnych kontenerów jest istotna, ponieważ bez niej nie możemy przeskalować prawidłowo obrazków w pionie. Wysokość głównego kontenera jest obliczana automatycznie. Istotne jest również to, jak powstał obraz, a dokładniej jak został dobrany jego rozmiar. Na początku ustaliłem pozycjonowanie absolutne kontenera #page z parametrami left i right o wartości 200px oraz parametrami top i bottom o wartości 100px. "Zrobił się" przyjemny prostokącik, który przy rozdzielczości mojego monitora (1440x900px) przyzwoicie wyglądał, a w dodatku miał konkretne rozmiary, czyli 1040x510px. Stworzyłem więc obraz, o takich właśnie wymiarach, następnie powiększyłem go dwukrotnie, obliczyłem wysokość górnego kontenera (1020px*25%) i dolnego kontenera (1020px*10%) i odpowiednio pociąłem.

Co do skalowania, to przy bardzo małym rozmiarze okna przeglądarki, środkowy i dolny kontener się rozjeżdżają. Podejrzewam, że wynika to z nie do końca dopracowanych mechanizmów skalowania silników przeglądarki i z tego, że obrazek w dolnym kontenerze jest stosunkowo "niski" (ma tylko 102px wysokości) w porównaniu do całości. Nie wiem jak to wygląda w większych rozdzielczościach, ale chyba nie powinno być problemu.

Dlaczego nie ma pozycjonowania? Otóż dlatego, że pozycjonuje się zawsze względem elementu nadrzędnego i pozycjonowanie środkowego kontenera wymagałoby mimo wszystko ustalenia wysokości procentowej górnego kontenera (w tym przypadku 25%) oraz ustawienia atrybutu top stylu środkowego kontenera na wartość wspomnianej wysokości, czyli 25%, jak również ustalenia wysokości tego kontenera (65%). Skoro więc wszystkie wysokości muszą być podane (nawet jeśli są w %-ach), to po co pozycjonować?

EDIT:
Nie wiem, czy właściwą treść strony da się tutaj bezproblemowo i bezkonfliktowo umieścić.
Pornolio
6.09.2010, 13:46:06
Mortus, dzięki za rzeczowe podejście. Ale chyba nie tędy droga. Panele góra, dół, środek, mają u Ciebie na sztywno pozycjonowanie pionowe ustawione, a jak słusznie zauważyłeś nie ma tu miejsca na to aby środkowy panel zawierał tekst (i był "rozpychany w pionie przez tekst, lub też inny kontener, przyklejony nad środkowym z z-indexem większym i tekstem). Takie ustawienie, jak zaproponowałeś jest dobre przy założeniu że wysokość całęgo panelu jest stała. Tymczasem wysokość ma być uzależniona od środkowego panelu, a ten z kolei od ilości tekstu. Dlatego ja próbuje ustawić wysokości na automat. Dla przykładu jeśli tekstu jest mało, to wysokość górnej części będzie stanowiła np. 25% całości. Jeśli tesktu będzie w opór, to wysokość górnego panelu będzie wynosiła już tylko np. 5%.

Może nakieruje Was drodzy koledzy, na odpowiednie tory. Wydaje mi się że trzeba przekopać specyfikacje na w3 css2.1 ze zwróceniem uwagi na szczególne przypadki pozycjonowania obiektów z wartościami heigh width ( a może i marginesy) ustawione na auto (w całęj rozciągłości obiektu parentnego na auuto). Jak wiecie zachowanie może być różne w zależności od typu obiektu.

Drugi potencjalny kierunek poszukiwań, to ustawianie trybu wyświetlania a'la tabelki.

Szkoda że prop. float nie może przyjmować wartości top/bottom.... Ciągle więc utrzymuje swoje zdanie że css kuleje i nie zanosi się na to że zostanie poprawione, w3.org bardziej poprawiają błedy składniowo/formalne niż funkcjonalność. Prędzej chyba prtzyjmie się jakiś standard oparty na XML, do stylowania xhtmla.

Ah, te stare dobre tabelki, szkoda że crawlery ich tak nie lubią sciana.gif
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.