Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> 100%skalowany layout - panel na 3 Divach, I tu poajawiają się problemy
Pornolio
post
Post #1





Grupa: Zarejestrowani
Postów: 7
Pomógł: 0
Dołączył: 21.01.2010

Ostrzeżenie: (0%)
-----

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!!!!!!!!!
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
mortus
post
Post #2





Grupa: Zarejestrowani
Postów: 2 178
Pomógł: 596
Dołączył: 25.09.2009
Skąd: Piwniczna-Zdrój

Ostrzeżenie: (0%)
-----

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ć.

Ten post edytował mortus 4.09.2010, 13:08:30
Go to the top of the page
+Quote Post

Posty w temacie
- Pornolio   100%skalowany layout - panel na 3 Divach   2.09.2010, 15:41:36
- - pedro84   Wrzuć strukturę i CSS, bo mnie się wydaje, że masz...   2.09.2010, 15:46:52
- - Pornolio   Już wklejam: [HTML] pobierz, plaintext <?xml ve...   3.09.2010, 00:09:08
- - Webmasterr   Ustaw wartość czcionki i wszystkiego co potrzebuje...   3.09.2010, 13:29:54
- - mortus   Ten layout bynajmniej nie jest skalowalny (obrazki...   3.09.2010, 13:41:48
- - Pilsener   Po co Ci te pozycjonowanie absolutne i te imgi? Za...   3.09.2010, 13:57:19
- - Pornolio   Dziekuję wszystkim wujkom DOBRARADA. Takie rady to...   3.09.2010, 19:53:52
- - mortus   Tyle, że to co zaprezentowałeś, to żadna technika,...   3.09.2010, 20:36:46
- - Pornolio   Ok, uporządkowałem już trochę kod, to co ma być je...   4.09.2010, 00:21:29
- - mortus   Rzeczywiście niedokładnie przeczytałem. Poekspery...   4.09.2010, 13:04:22
- - Pornolio   Mortus, dzięki za rzeczowe podejście. Ale chyba ni...   6.09.2010, 13:46:06

« Następny starszy · CSS · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 10.06.2026 - 18:46
Powered By IP.Board © 2026  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn