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
Pornolio
post
Post #2





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

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

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:(IMG:style_emoticons/default/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?(IMG:style_emoticons/default/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?
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: 11.06.2026 - 01:23
Powered By IP.Board © 2026  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn